Image Button Widget

The Image Button widget is a simple yet powerful tool for creating visually engaging calls to action. By combining images, hover effects, and links, this widget can guide users to key areas of your site while enhancing the overall design aesthetic.

Key Features

• Add a clickable image with a title and optional icon

• Built-in hover effect for subtle interactivity

• Works seamlessly with additional design features such as:

  • Backgrounds

  • Animations

  • Staggered transitions

• Fully customizable appearance and behavior:

  • Adjust button shape, border, and corner radius

  • Set font style, color, and text opacity

  • Customize icon size and color

  • Use the Clone function to duplicate buttons while maintaining consistent styling

How to Use

1. Open your Back Office and navigate to the page you’re editing.

2. Click the Widget icon and select Image Button.

3. Upload your image, add a title, and optionally:

   • Insert an icon

   • Set a link

4. In the Settings tab, you can:

   • Adjust button shape and border radius (e.g., rounded corners)

   • Modify styling elements like opacity and font styles

   • Change the size and color of your icon

   • Use the Clone function to duplicate buttons for consistent design

5. Update the content for each cloned button as needed.

6. Click Insert Widget and Save.

Best Uses

This widget is ideal for:

• Promotional tiles

• Feature highlights

• Navigation panels that need a strong visual cue

Its simplicity makes it easy to implement while offering plenty of customization options for a polished, branded look.

Watch the Video Demo:

Video Transcript:

The Image Button widget is a nice simple tool that will allow you to add a more visually appealing call to action.

This is simply an image button with a slight hover and a link.

This can also be used in conjunction with other features, such as adding backgrounds, staggers and animation.

To add your widget, go into the back office, click on the icon, and select your image button.

Browse to your picture, and add a title.

You can choose to add an icon if you wish.

Add your link and insert.

If you would like to change the settings, click into the Settings tab.

This is where you can adjust the shape of your button, whether it has a border, or a corner radius, this is the rounded edges.

To change the font styles, please go into the content, title and you can change the font styles here.

If you find that your image is too light to show the text, you can add some opacity to this.

You can also choose the colour.

The icon can be changed here.

You can select the size and the colour, insert.

At this point, I would recommend that you use the clone function.

This will ensure that all your settings are the same across all of them.

Then go back and change your content.