Divi Popup Builder

Divi Popup Builder extension for Divi Builder enhances your ability to create and manage popups directly within Divi. It provides a seamless way to design engaging popups using Divi’s familiar interface, offering complete customization over the content and style of your popups. This extension is useful for building promotional messages, newsletter sign-ups, alerts, and other attention-grabbing elemen

Popups

To find the Popup Builder Extension in Divi, navigate to your WordPress Dashboard. From there, follow this path: Divi Torque > Popups. This will open the Popup Builder interface, allowing you to create and manage custom popups directly within Divi Torque.

Add a Popups 

To add new Popups, follow these procedures:

1. Click the “Add New Post” button
2. Input a suitable title in the “Add title” field.
3. Click the “Publish” button on the right side.

Design Popup

You can design the popup using the default WordPress Block Editor or Divi Builder.  

1. If you want to design your Popup with the Divi Builder click the “Use The Divi Builder” button.
2. Instead, if you want Block Editor, you can use the Block Editor. 

Popup Settings

Popup Builder allows users to customize the behavior, appearance, and triggers of their popups. This includes setting the popup’s width, background overlay, close button visibility, and defining when and how the popup is triggered, such as on page load, scroll, exit intent, or based on user interaction. These settings provide control over how popups appear and function across different devices (desktop, tablet, mobile).

Condition

You can set single and multiple conditions that can determine where your Popup will be displayed eg. Include > Singular > Page > Home. Please do not set any condition which is conflict with another condition.

Triggers 

To open the popup, the user needs to interact with a specific trigger.

1. On Page Load – Triggers the popup as soon as the webpage finishes loading based on set time in seconds. 
2. On Scroll – Displays the popup after the user scrolls down a certain direction and percentage of the page.
3. On Scroll to Element – Activates the popup when the user scrolls to a specific element on the page by selecting the specific class of the element. 
4. On Page Exit Intent – This shows the popup when the user is about to leave or close the webpage.

Advanced 

1. Show after X page views – Displays the popup only after the user has viewed a specific number of pages.
2. Show up to X times – Limits the popup to appear a set number of times for each user.

Layout

1. Width – Defines the popup’s width in pixels for desktop, tablet, and mobile devices.
2. Overlay – Toggles the display of a background overlay when the popup is active.
3. Close Button – Toggles the visibility of the close button on the popup.