This guide explains how to set up a new popup, defining its content, display conditions, and visual appearance.
Procedure
1. Content
In this section, define the title and the actual content of your popup.
1. Enter the Popup Title.
2. Decide the display mode:
- Check the box Show automatically if you want the popup to be displayed automatically based on the conditions you will set in the following steps.
- If you do not select this option, the popup will be in "Manual" mode. You will need to trigger the popup opening via Visual Builder events or by using the provided JavaScript code.
3. Use the editor to define the Content of the popup.
2. Conditions (Visible only if "Show automatically" is active)
In this section, define which users and on which pages the popup should be shown.
4. Check the box Show to all if you do not want to apply filters (the popup will be shown to all visitors who meet the behavior settings).
5. If you do not select Show to all, in the Manage conditions box you can define specific rules (for example, show the popup only to users who have performed certain actions).
6. In the Login box, set the Access status to limit visibility to:
- Show to all
- Logged-in users only
- Non-logged-in users only
7. In the Limit via link box, you can specify pages where the popup should or should not appear:
- Enter URLs in Show ONLY on these pages.
- Enter URLs in Do NOT show on these pages.
- Select Also apply to any child pages if necessary.
3. Behavior (Visible only if "Show automatically" is active)
In this section, define when the popup will open and its display frequency.
8. Choose the Open trigger (when the popup appears):
- On page load (immediately)
- Before page exit (on exit)
- On page scroll
9. Choose the Close trigger (how users can close the popup).
10. Select Show persistently if you want the popup to be displayed at every page load, ignoring frequency.
11. If you did not select "Show persistently," set the display frequency in Display every [X] days.
12. In the Preferences box, configure additional options based on the selected Open trigger (for example: Delay in seconds, or Minimum page scroll in %).
4. Appearance
In this section, define the style and animation of the popup.
13. Set the Type:
- Simple popup
- Offcanvas - Left
- Offcanvas - Right
14. Define the maximum Width in pixels.
15. Choose the color for the popup's Background and for the Close button.
16. In the Overlay box, choose an option for the background behind the popup (Dark, Light, Custom, or None).
17. In the Animations box (visible only for "Simple popup" Type), select your desired Entrance animation and Exit animation.
18. To preview a draft of your result, click on Preview.
19. When finished with configuration, click on the save button to confirm creating your popup.
