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.
Select the 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
© Astroid Framework 2023.