In this guide, we will show you how to add an “Image Zoom Content Box widget” to your Elementor website. The Image Zoom Content Box widget makes it easy to showcase services, products, or other content with an engaging zoom effect on images, enhancing visual interaction and appeal. Perfect for boosting user engagement and creating interactive designs, this free widget allows you to combine images with titles, text, and buttons in a fully customizable layout that fits seamlessly into your site’s style.
Let’s explore the customization options available in the “Image Zoom Content Box widget” for Elementor below.
Elementor Free Image Zoom Content Box Tutorial Video
Add a Free Image Zoom Content Box to Elementor
Add a Free Image Zoom Content Box Widget to an Elementor Page
Elementor Image Zoom Content Box Widget General Settings
Layout
Controls the arrangement of elements within the content box.
Column
Column Reverse
Row
Row Reverse
Image
Allows you to select or upload the main image for the content box.
Image Size
Determines the size of the image displayed. This affects the quality and loading speed.
Thumbnail
Medium
Medium Large
Large
Full
Custom
Show Title
Toggles the visibility of the title for the content box.
Title
Enter the text for the title that will be displayed.
Title Tag
Specifies the HTML tag to be used for the title (e.g., H1, H2, div). This is important for semantic structure and SEO.
Show Description
Toggles the visibility of a descriptive text area.
Description
Provides a rich text editor to input the main descriptive content. It includes options for “Add Media,” “Visual” editor, and “Code” editor.
Link
Sets the URL or link that the entire content box (or specific elements within it) will navigate to when clicked.
Show Button
Toggles the visibility of a button within the content box.
Button Text
Enter the text that will appear on the button.
Link Image
Determines if the image itself is clickable and leads to the specified link.
Link Title
Determines if the title itself is clickable and leads to the specified link.
Elementor Image Zoom Content Box Widget Style Settings
Align
Controls the horizontal alignment of the content within the widget.
Left
Center
Right
Content Padding
Sets the inner spacing between the content and the edges of the box. You can adjust the padding for the Top, Right, Bottom, and Left sides.
Box Border Type
Allows you to define the style of the border around the entire content box.
Default
None
Solid
Double
Dotted
Dashed
Groove
Box Radius
Controls the roundness of the corners of the content box.
Content Background
Allows you to choose between a solid color or a gradient for the background of the content area within the box.
Content Background Color
Sets the solid color for the content area's background.
Content Background Image
Allows you to select an image to use as the background for the content area.
Box Shadow
Opens controls to add a shadow effect to the entire content box in its normal state.
Box Shadow Hover
Opens controls to add a shadow effect to the entire content box when it is hovered over. This allows for a dynamic shadow change on interaction.
Image Opacity
Controls the transparency of the image in its normal state. A value of 100 means fully opaque, while a lower value makes it more transparent.
Image Opacity on Hover
Controls the transparency of the image when the widget is hovered over. This allows for a visual change in transparency on interaction.
Blend Mode
Determines how the image blends with any background color or elements behind it, creating various visual effects.
Normal
Multiply
Screen
Overlay
Darken
Lighten
Color Dodge
Luminosity
Image Height
Controls the height of the image within the widget.
Image Position
Controls the positioning of the image within its container when its dimensions are different from the container.
Top Center
Center Center
Bottom Center
Top Left
Top Right
Bottom Left
Bottom Right
Color Behind Image
Sets a background color that will be visible behind the image, especially if the image itself is semi-transparent or uses a blend mode.
Image Width
Controls the width of the image within the widget.
Title Color
Sets the color of the title text.
Title Typography
Opens controls to customize the font family, size, weight, line height, letter spacing, and other typographic properties of the title.
Title Spacing
Controls the amount of space (margin) below the title.
Description Color
Sets the color of the description text.
Description Typography
Opens controls to customize the font family, size, weight, line height, letter spacing, and other typographic properties of the description text.
Description Spacing
Controls the amount of space (margin) below the description.
Button Width
Controls how the button's width is determined.
Inline
Full Width
Button Typography
Opens controls to customize the font, size, weight, line height, letter spacing, and other typographic properties of the button text.
Button Background Color
Sets the background color of the button in its normal state.
Button Background Hover Color
Sets the background color of the button when it is hovered over.
Button Radius
Controls the roundness of the button's corners.
Button Margin
Sets the outer spacing (margin) around the button. You can adjust the margin for the Top, Right, Bottom, and Left sides.
Button Padding
Sets the inner spacing (padding) between the button's text and its edges. You can adjust padding for Top, right, Bottom, and Left sides.
Button Color
Sets the color of the text on the button in its normal state.
Button Color Hover
Sets the color of the text on the button when it is hovered over.
Button Border Hover Type
Allows you to define the style of the border around the button when it is hovered over.
Default
None
Solid
Double
Dotted
Dashed
Groove
Image Zoom Content Box Widget Design Examples For Elementor
Here are some live use cases for the Image Zoom Content Box widget.
Image Zoom Content Box for Support Page.
Image Zoom Content Box for Menu List.
Thank you for using the Image Zoom Content Box widget for Elementor! This powerful tool lets you display information with an eye-catching zoom effect on images, boosting visual engagement and interactivity. With customizable layouts that combine images, titles, text, and buttons, it fits seamlessly into your site’s design and, best of all, it’s free. For questions or inspiration, feel free to reach out or explore our demo.