How to Add or Edit a Popup Modal

Add or edit a popup modal on Page Builder with these specific steps.

Firstly, your site must have this module set up. If this isn’t a part of the offering during the design and development phase, you will not have access to this pre-designed popup modal. To check if you have access, go to www.yoursite.com/popup_test_page/. If the page exists, you can follow this tutorial and create custom popups. If not, you may contact our support team and we can provide a quote for development.

There are 3 pre-designed modal pop-ups: Type 1, Type 2 and Type 3.

All 3 modals work in the same way. You just have to select the appropriate saved row when setting up the popup modal.

1. Navigate to the page you want to add the popup modal and open the page in Page Builder.

2. Click the ‘+’ sign to add a new module, and search for ‘popup’ in the search field. You should see ‘Modal Popup’ as a module on the list.

3. Drag the Modal Popup to the page.

4. Add the saved layout to the content.

4.a. Open a new window, navigate to your website’s backend, and select Page Builder > Saved Rows.

4.b. Navigate to the Popup Modal Type 1/2/3 and click the shortcode to copy it to your clipboard.

4.c. Paste this value into the content section.

5. Scroll down to the ‘Modal Popup Settings’ section, and update the ‘Maximum Width of Content’ as required. We recommend 900px.

6. Update the ‘Content Padding’ to ‘0’.

7. Select the ‘Modal Appear Effect’ as needed. 

8. Select the background and overlay colour as needed, or keep them default.

9. Set the Modal Popup Border > Radius & Shadow.

9.a. Match the ‘Radius’ to the radius on your image, or leave it blank.

9.b. Add ‘Box Shadow’ if you prefer adding a shadow to the popup.

10. Set the ‘Display Modal On’ style. By default, it will select ‘Button’. However, if you want to display your popup a few seconds after a visitor lands on a page, set it to ‘Automatic’.

10.a. Set ‘After a few seconds’ to ‘Yes’, and add the number of seconds to ‘Load After Seconds’.

10.b. You can enable ‘Exit Intent’ (This will show the popup as soon as someone goes to leave the page by moving their mouse to the X or back button on their browser).

10.c. You can also ‘Enable Cookies’ and set a time in days to remember someone for X days. This will not show the popup to this user for X days.

11. Set the ‘Close’ button settings.

11.a. Set the icon. The default icon for this is ‘X’.

11.b. Set the icon size.

11.c. Set the colour.

11.d. Set the icon position. This is important and needs to be set as ‘Popup Edge - Top Right’ to work correctly.

12. Click ‘Save’ to save these settings.

13. Now that the modal popup is set up, you can edit the saved row and update the contents.

Click the ‘+’ sign to add a new module, click the saved tab, and scroll down till you find the ‘Popup - Modal - Type 1/2/3’, then click the spanner to edit the saved module. 

You can then edit all the elements of the saved row similarly to how you would edit a regular page.