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.

1. How to Add an Image Addon

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.

Widget Style

  • 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.


Add margin and padding values over the row to improve its appearance on different devices.

4. Responsive Settings

Device Visibility: Choose your preference for hiding or showing the section on different screens like:

  • Hide on Extra Small Devices

  • Hide on Small Devices

  • Hide on Medium Devices

  • Hide on Large Devices

  • Hide on Extra Large Devices

Last updated

© Astroid Framework 2023.