Popups

Popups can be used in a variety of ways, but the generally the purpose is to keep the customers engaged on your site.

Upon clicking the Popup button within the Page Builder Toolbar, the Popup Manager will display so you can add a new popup or to edit an existing one.

There is no limitation on how many popups you can create.

Once you have clicked the “Add new popup” button or the Edit button on an existing popup, the popup will display within the builder and you can edit elements as you normally would.

The Popup-body element (the outermost parent element of the popup) has settings within the Style Manager to further customize your popup.

Delay (Min and Sec): Delay the popup from triggering for a determined amount of time.

Trigger On options include:

Trigger On Load - The popup displays when the page initially loads completely. Trigger On Scroll - The popup displays when the user starts to scroll down on the page. Trigger On Exit - The popup displays when the user's mouse cursor leaves the window. **See below for triggering a popup upon the click of a button or link

Popup Width: Choose between Small, Medium, and Large sized popup.

Corner Radius: Choose how rounded the corners of the popup should be.

Edges: Choose if All, None, the Top Only, or the Bottom Only edges should use the corner radius selection.

Animate: Add an animation to your popup.

Animation Duration (Sec): Set how long, in seconds, that the animation for your popup should last.

When you have finished designing your popup, click the Popup button again within the Page Builder Toolbar to close the popup.

If you ever want to disable a popup, you can either set the Trigger On setting to None, or you can delete the popup from the Popup Manager.

---

**Trigger Popup when a button or link is clicked

There may be cases where you would prefer the popup to display when the customer clicks a button or link on the page.

To do this, make sure the Trigger On setting within your popup is set to None.

Next, close the popup designer and click on the button or link that you would like to trigger the popup. With the button or link highlighted, click the Style Manager button and open the Settings for the element.

Finally, set the button/links Action selection to Open Popup and set the Popup selection to the popup you would like to display when the button/link is clicked.

*Required fields will need to be filled before the Popup will load

If you ever decide to remove the popup, make sure you edit your button/link to adjust the action accordingly.