Image Widget

Images play a vital role in web design, so you will most likely use the Image Widget a lot while designing your website. Let’s go over all of the settings you can control for this widget.

You need to create a new section, choose a grid layout and click adding a new element. By adding a new element, you will see a popup including all the widgets available.

Simply choose the Image widget from the Widget list, then it'll be added to the layout's section where you want to add a Image widget.

The Image Widget settings come with 3 different settings tabs:

General Settings
Design Settings
Responsive Settings

2. General Settings

Element Title: Enter the element title.
Select Image: Upload an image from your media library.
Use Link: Enable this option if you want to link the image to a page or an external source.

Max Width: Define the max width of the image.
Border Radius: Choose an option for border-radius (Rounded, Circle, Pill or none).
Box Shadow: Choose a type of box shadow from the dropdown.
Hover Effect: Click the dropdown to choose a Hover effect.
Hover Transition: Click the dropdown to choose a Hover transition.
Custom Class: Custom Class can be used for writing custom CSS or JS.
Custom ID: Give a custom ID to override the auto-generated ID

3. Design Settings

Animation: Choose an animation for the widget.
Max Width: Set the Max Width for the widget.
Text Alignment: Set the alignment of the text of the widget.
Background Type: Select the background type for the widget from None, Color, Image, Video or even add a Gradient.
Custom Color: Choose whether you want to enable or disable the custom colors for the widget. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the element’s content.