Using the Button Image Pop-Up Widget in Composer 2

The Button Image Pop-Up widget allows you to present content in an interactive, visually engaging way. Users click an image to reveal additional information in a pop-up, keeping your page clean while showcasing features, details, or multimedia content.

Key Features

Clickable Image Triggers

• Each widget begins with a clickable image that opens a styled pop-up containing your content.

Multiple Shape Options

• Pop-ups can appear in square or rectangular (horizontal or vertical) formats.

Custom Layouts

• Add multiple pop-ups per section (3–4 recommended) for a balanced design.

• A single pop-up can be displayed oversized to draw attention.

Customisation Options

• Add a title, icon, and image for each pop-up trigger.

• Adjust pop-up shape: square, horizontal, or vertical.

• Control fonts, sizes, alignment, and icon styles.

• Modify image opacity, overlay colours, and background tints.

• Style pop-up content including font and layout options.

Best Practice Tip

• Use the Clone function to duplicate pop-ups quickly and maintain a consistent style across multiple items.

How to Add

1. Access the Widget

   • Open the page you want to edit in the Back Office.

   • Click the Widget icon → Button Image Pop-Up.

2. Set Up Pop-Up Content

   • Add a title, select an icon, and upload your image.

   • Enter the content you want to appear in the pop-up.

3. Insert and Configure

   • Click Insert to add the widget to your page.

   • (Optional) Use Clone to quickly create similar pop-ups.

4. Adjust Settings

   • Customize layout, alignment, fonts, colours, and pop-up appearance in the Settings tab.

The Button Image Pop-Up widget is ideal for enhancing engagement by providing interactive, space-efficient content without overwhelming your page.

Watch the Video Demo:

Video Transcript:

This is where an image appears, you click on it and then a pop up appears.
I would recommend that you set up 3 or 4 pop ups per section.
Having one mean it will be very large.
The pop ups are available in different shapes, square and various rectangles.
To set this up please go into your back office and into the page you wish.
Click on the widget icon followed by the button image pop up.
Now the pop up is made-up of two main parts.
The first part is the actual button.
Now this is the button title and the image followed by the popup item which will be the content that appears once you click on it.
Add a title, choose your icon and then your image.
Go to add the items for your popup.
Then when you're done, hit insert.
At this point I would recommend that you use a cloning function.
This will make setting up the styles of your pop up as easy as possible as you'll be cloning them.
Here's my pop up.
If you wish to edit the settings, please go back into your widget.
So the next step of course is your settings.
This is where you can adjust anything.
I can change the shape of my pop up.
So let's say I'm going to go for a vertical one this time, change my alignment, change the fonts and the icon.
You can change the size and the colour with the image, you can add less and more opacity and you can choose the colour of the overlay.
The pop up itself, you can change the fonts and there we go.
This one is much larger vertical.
It has a green tint to it.