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