Перейти к содержимому

How to Use the Elementor Image Box Widget with ElementsKit

Wpmet

0:00 / 0:00

How to Use the Elementor Image Box Widget with ElementsKit

141 просмотр · 4 дн. назад
Wpmet
27 тыс. подписчиков
141 просмотр · 4 дн. назад
Learn how to use the ElementsKit Image Box Widget for Elementor to build image sections with titles, descriptions, buttons, and hover effects, using 19 ready-made templates and zero custom CSS. Most Elementor image boxes end up looking like a default WordPress block. In this walkthrough I go through every setting in the ElementsKit Image Box Widget, from inserting a template straight from the ElementsKit library to styling the hover state so the card reacts when a visitor moves their cursor over it. What you will learn: ✅ How to open the ElementsKit template library from the Elementor toolbar ✅ How to browse, preview, and insert any of the 19 image box templates ✅ Setting the image, image size, content area, equal height, and clickable image URL ✅ Writing the title, picking the right HTML tag (H2, H3, H4) for SEO, and alignment ✅ Turning the button on, adding a label, URL, and icon before or after the text ✅ Floating Style controls for the lifted, elevated image look ✅ Border radius, padding, and normal vs hover opacity on the image ✅ Body styling: border, gradient background, padding, box shadow, title typography ✅ Button styling: transparent to filled hover effect, border radius, box shadow TIMESTAMPS 0:00 - Introduction to the ElementsKit Image Box widget 0:16 - Accessing the Elementor Library and inserting templates 0:45 - Configuring image settings and layout 1:25 - Editing body content and text alignment 1:51 - Customizing button options and CTA settings 2:10 - Adjusting settings from the Style tab 2:16 - Applying floating style effects 2:57 - Customizing image styling, including border, padding, and opacity 3:33 - Customizing the body area and typography 4:34 - Final wrap-up and summary RESOURCES Image Box Widget: https://wpmet.com/plugin/elementskit/... Get ElementsKit: https://wpmet.com/plugin/elementskit/ Documentation: https://wpmet.com/doc/image-box-2/ Found this useful? Subscribe for more Elementor and WordPress tutorials every week, and drop your questions in the comments below. #wordpress #elementor #elementskit #imagebox #imageboxwidget #elementorimagebox #hovereffects #elementoraddons #elementortutorial #wordpresstutorial #webdesign #wordpresswebsite #wpmet #nocode #elementortemplates #elementorimageboxwidget #elementskitimagebox #imageboxwidget #elementorimagebox