Popups

How to create, design and build a Popup

In this guide, you will learn:

How to create a new popup

To create a new popup, navigate to Pages -> Add New -> Popup

Select one of the pre-made designs to start your popup that will show on your page.

Where to find your popups

To find your popups, navigate to Pages -> Popups

The popup builder looks and works exactly like the normal page builder.

Any widget can be dragged into a popup and can be changed and adjusted same as in the normal page builder.

How to save a popup when making changes

Once you are happy with your popup design, hit the "Save" button and then hit the "X" to close the popup and return to the normal builder.

To style your popup content and layout, click on the popup name to open it.

Then click on the brush "Style" icon.

This will open the Popup content layout settings box.

In the popup content layout, you will see the option to where the image should display. If you select the middle option, no image will appear.

You can also adjust:

  • Background colour for the whole popup

  • Colour of the background overlay under the whole popup

  • Close button colour

  • Lastly, padding of the popup window

To access the general settings for the popup, either click the "Gear Icon" next to the popup name and select "Show Settings" or open the popup by clicking on the name and select "Popup Settings".

In the Popup Settings, you will find the 6 layouts available for the popup. You can play around to select the one you like.

You can also edit:

  • Popup name (to be easier to find the popup if you link to it)

  • Options for when to trigger the popup (if a button/link click does not trigger it)

  • How often to show the popup

  • Lastly, what animation to have on display

Setting the pages where a popup should be visible

If the popup is being triggered automatically you can select on what pages it should be displayed.

To select on what page of your website a popup should show, open the popup and select the "Show On" option. Here you can select on what page your popup will display.

Last updated

Was this helpful?