Divi Popup Builder - WordPress Plugin

Guide to Using and Configuring Divi Popup Builder

This guide looks at Divi Popup Builder as a practical tool for WordPress and Divi sites: how to create a popup, choose the right display timing, limit where it appears, configure how it closes, and verify that visitors see exactly the message you intended. On the developer's site, the product is also called Popup Pro, so both names appear throughout this article, but they refer to the same DiviNext solution for building popups in the Divi ecosystem.

The goal of this guide is not to repeat the product listing, but to explain how it works in practice. We will break down which scenarios are a good fit for popups, how manual launch differs from page-load, scroll, exit-intent, and inactivity triggers, how to connect a Divi Builder design to display rules, which settings should be enabled carefully, and how to diagnose common issues.

Popups are easy to get wrong: the window appears too early, covers the content, interferes with mobile viewing, fires on the wrong page, or annoys visitors with repeated displays. That is why this guide focuses heavily on result validation, display frequency, overlay behavior, responsiveness, and safe rollback of settings. That approach is far more useful than simply enabling the plugin and hoping for more conversions.

What Problem the Plugin Solves and Where It Works Best

Divi Popup Builder is useful when a regular page section is not enough. A visitor may already be reading a page, viewing a product, scrolling through an article, or preparing to leave the tab, and the site needs to show an additional message at the right moment: an email signup offer, a discount, a video, a cookie notice, a link to a related product, or a contact prompt. The plugin adds a control layer on top of Divi design: the popup layout itself can be built in the familiar visual builder, while its behavior is configured separately.

What separates this kind of solution from a simple HTML block is that the popup works as a managed scenario. It has an active state, a launch trigger, display scope, frequency, position, overlay, scroll lock, closing method, and restrictions by device or user role. If those pieces are not treated separately, the setup quickly becomes chaotic: the designer edits the appearance, marketing changes the copy, the admin enables it across all pages, and users end up with an intrusive popup on every click.

In official materials, Popup Pro lists use cases such as promotional offers, lead generation, newsletter signups, cross-sells, video popups, and cookie notices. That is a useful starting point, but on a real site the more important question is "exactly when should it appear?" The same signup form may make sense after a reader has scrolled through a long article and feel completely unnecessary the moment the homepage loads. The same discount may help on a product page and become a distraction in the cart if it covers important checkout elements.

The plugin is especially useful for sites that already use Divi and want to keep design work in a single tool. If the designer is used to building sections, rows, and modules in Divi, there is no need to recreate the layout in a separate popup builder. They create the content in Divi Builder and then define its behavior in Popup Pro settings. For small business sites, that reduces the number of interfaces involved. For agencies, it helps maintain a consistent visual language across multiple projects.

Which Practical Use Cases to Consider First

Do not start with effects and colors. Start with the purpose of the message. A popup should have a clear reason to appear and a simple way to verify whether it worked. If you cannot explain why the popup appears at that exact moment, the setup will almost certainly frustrate users.

• Signup after engagement. The popup appears after part of the article has been scrolled or after a short delay, once the reader already understands the value of the content.
• An offer before exit. The popup triggers on exit intent and offers a coupon, a consultation, a resource collection, or another gentle next step.
• Manual launch from a button. The visitor clicks a button such as "Get a Consultation," "Watch Video," or "View Terms," and the plugin opens a prepared popup.
• A message on a specific page. The notice appears only on the homepage, a service page, a blog post, a project page, or another selected content type.
• Device-based limitation. On mobile screens, the popup can be hidden or simplified if the full layout covers useful content.

Main check: a good popup does not just appear. It appears at a clear moment, closes easily, does not break scrolling, and guides the user toward one action.

When a Popup Might Be the Wrong Choice

Divi Popup Builder does not need to be enabled on every page. If a message is important for every visitor all the time, a regular section, banner, header block, or separate page may be the better option. A popup works well for temporary emphasis and a targeted action, but it is less effective for long text, a complex form, or critical legal information.

You should be especially careful on pages where the user is already trying to complete a task: checkout, account area, payment form, contact form, or catalog search. Any overlay there can lead to errors, duplicate form submissions, or loss of trust. If a popup is necessary in that context, test it on a staging copy, check it on a phone, and always provide an obvious way to close it.

What to Check Before Installing It on WordPress and Divi

Before installing the plugin, it helps to separate the site's technical readiness from the marketing idea. WordPress lets you upload a ZIP archive through the plugin screen, but installation alone does not guarantee that the popup will work correctly with your theme, caching setup, and current Divi version. Popup Pro depends on the Divi environment: the content is built with Divi Builder, while popup behavior is tied to page events, theme styles, and custom JavaScript.

First, confirm that the site is actually using Divi Theme or Divi Builder rather than just a similar visual style. If the site is built with another builder, the product loses much of its core value: you may still be able to enable the plugin, but the familiar connection to Divi layouts will no longer be as convenient. Then make sure you have administrator access to the Plugins area and the ability to upload a ZIP archive. For commercial WordPress products, installation usually goes through Plugins - Add New - Upload Plugin, after which the plugin is activated from the list of installed extensions.

Technical Preparation

The most common early mistake is testing the popup immediately on a live page with caching, minification, deferred script loading, and active ad blockers. For the first run, use a test page with no critical forms or payment actions. That makes it much easier to tell whether a problem comes from the plugin itself, the Divi setup, caching, or a conflict with another extension.

• Create a backup. Updating the plugin, theme, and builder before testing should always come with a clear rollback path.
• Check Divi. Make sure the visual builder opens correctly, saves sections, and shows no errors on the test page.
• Prepare a test page. It is best to create a separate page with one button, a few sections, and enough height to test scrolling.
• Temporarily disable aggressive optimization during testing. If the site uses caching, deferred JavaScript loading, or combined CSS, test without those first, then re-enable them one by one.
• Review editor permissions. If someone other than the administrator will configure popups, decide in advance who can create and publish them.

Content Preparation

A popup will not fix a weak offer. Before building the popup, prepare a short headline, one action, a minimal set of form fields, and the page the button should lead to. If you are creating a signup popup, test the form and submission flow first. If you are offering a discount, make sure the terms do not conflict with store policies. If the popup contains a video, check that embedding is not blocked by cookie consent, privacy settings, or browser restrictions.

Do not start with a sitewide display rule. For the first test, choose one page and one trigger type. Once the result is clear, you can expand the display scope. This saves time: the issue is isolated, analytics are cleaner, and users do not see an unfinished experiment.

Installation and the First Check After Activation

Installation works like most WordPress plugins delivered as a ZIP archive. In the admin panel, open Plugins, choose Add New, then Upload Plugin, select the plugin archive, click Install Now, and after installation finishes, click Activate Plugin. In this guide, we intentionally do not cover purchasing, account setup, or license key entry, because those are not part of popup configuration and tend to become outdated quickly.

After activation, look for a Popup Pro menu item or a related DiviNext/Divi Essential section in the admin panel. Popup Pro documentation describes two key areas: creating the popup itself with Divi Builder and configuring Popup Pro settings, where you define its active state, trigger, display conditions, and visual popup layer. If the menu item does not appear, check whether Divi Theme or Divi Builder is active, whether the plugin is enabled in the extensions list, and whether the site log shows any fatal errors.

First Safe Test

Do not begin with a complex popup on a live landing page. Create a test popup with short text and a button, enable it for only one test page, and choose the simplest possible trigger. If your goal is to verify that it opens at all, manual launch via a CSS selector is usually the easiest option. If you need to test automatic display, choose page load with a short delay so the page has time to render first.

1. Create a new popup and give it a clear internal name, such as newsletter-test-popup.
2. Enable Use Divi Builder if that switch is available in your version of the interface.
3. Add a simple section: headline, short text, button, and a clear close button.
4. Open Popup Pro settings and enable the Active state.
5. Select one trigger, one display page, and save the changes.
6. Open the test page in a private browser window and check appearance, closing behavior, and scrolling.

Quick summary after the first test: the popup should open only where you assigned it, close using the selected method, leave no overlay behind after closing, and avoid blocking the page longer than intended. If those four conditions are not met, it is too early to move on to a more complex design.

Popup Pro Logic: Content, Trigger, and Display Conditions

To use Divi Popup Builder confidently, it helps to keep a simple model in mind: content controls what the visitor sees; the trigger controls when it opens; display conditions control where it appears and who sees it. When something goes wrong on the site, this model helps you quickly identify where to look. The popup does not open - start with the trigger. It appears in the wrong place - check display conditions. It looks wrong - review the Divi layout and styling tab.

Popup Pro documentation separates general settings, a display tab, and a customization tab. General settings include the active state and launch modes: page load, click, scroll, exit intent, inactivity, and manual launch via CSS ID or a custom CSS selector. This section also covers close behavior and layer handling: close on overlay click, clickability of elements beneath the overlay, preventing page scroll, and closing via the browser back button.

The display tab determines who sees the popup and where: user roles, devices, specific pages, posts, projects, or other site areas. The customization tab controls the visual layer: overlay, position, width, animation, blur, close button, colors, spacing, and border radius. This separation across tabs is useful, but it requires discipline: changing the look should not accidentally affect display scope, and testing a new trigger should not break an already approved design.

Content in Divi Builder

It is best to design popup content as a small standalone page. In Divi, that usually means a section with one clear purpose: subscribe, get a coupon, watch a video, go to an offer, or read a short warning. Do not move a long landing-page block into the popup. A popup is constrained by the user's attention, the available space, and the visitor's patience.

From a practical standpoint, the layout should hold up in four states: desktop, tablet, phone, and zoomed browser view. If the popup contains a form, check field focus, the submit button, the success message, and the ability to close the popup after submission. If it contains a video, make sure playback does not continue after the popup is closed. DiviNext changelog entries have included fixes related to input fields and video inside popups, so these checks are not just a formality.

The Trigger as a Launch Rule

The trigger should be chosen based on visitor behavior. Manual launch via CSS ID works well when the user intentionally clicks a button and expects a popup. Page-load launch can be useful for urgent notices, but in most cases it needs a delay, otherwise the visitor has not had time to understand the page yet. Scroll-based triggers appear after engagement. Exit intent works well for a gentle last-step offer. Inactivity can help regain attention, but it easily becomes annoying if the popup interrupts unfinished reading.

Manual Launch via CSS ID or Selector

Popup Pro documentation describes manual launch through CSS ID and custom CSS selectors. In practice, the logic is simple: a button, link, module, or another element has a unique identifier, and the popup listens for interaction with that element. In Divi, this is convenient because CSS IDs and CSS classes can be added under Advanced - CSS ID & Classes for a section, row, or module.

The main rule is that the identifier must be unique and stable. Do not use a generic class such as .button if the page contains multiple buttons. It is better to use a name tied to the scenario: #open-size-guide, #open-consultation-popup, or #open-video-tour. If you need multiple elements to launch the same popup, use a dedicated class, but make sure it is not assigned to decorative blocks by accident.

Automatic Modes

Automatic modes require more caution. For page-load launch, Popup Pro provides a start delay and, if needed, a close delay. For scroll triggers, you can use distance in pixels or percentages. Inactivity uses a defined period after which the user is considered inactive. Exit intent opens the popup when cursor behavior suggests the visitor is about to leave the page. All of these modes are useful, but each should be tested against real page content rather than an empty mockup.

Display Conditions as Protection Against Unnecessary Noise

Popup Pro includes output-scope settings: you can include or exclude pages, posts, projects, other popups, and account for user roles. This is not a minor option; it is the main quality-control tool. Even a well-designed popup becomes a bad one if it appears out of context. A first-purchase coupon looks odd to an administrator editing the site. A signup popup in an account dashboard can get in the way. A promo on the contact page may distract from the inquiry form.

For a typical site, start by enabling the popup on one page or one group of similar pages. If the scenario works, expand the scope gradually: homepage, blog posts, service pages, product categories. Exclusions matter just as much as inclusions. If a popup is enabled sitewide, exclude pages with critical actions and technical pages where the popup provides no value.

Post-Install Configuration: What to Enable First

The configuration stage is the core of working with Divi Popup Builder. The plugin gives you many behavior options, but a good starting setup is usually simple: one active popup, one clear trigger, limited display scope, a clean overlay, a visible close button, and testing on multiple devices. Only after that does it make sense to add frequency rules, complex selectors, animations, and variations for different pages.

Start with the general settings tab. The Active switch should enable or disable a specific popup. This is convenient for troubleshooting: if you need to quickly take a popup offline, disable it at the plugin level rather than deleting the Divi layout. Then choose a Trigger Mode. For the first live scenario, manual click or scroll is safer than an immediate page-load popup.

A Baseline Setup for Most Sites

The list below is not universal doctrine. It is a practical starting point that helps you launch your first popup without major mistakes and then adjust settings deliberately.

• Active: turn it on only after the layout has been reviewed. Until the design is ready, keep the popup disabled or limited to a test page.
• Trigger Mode: choose one mode. Do not mix multiple conditions in the first test, or it will be hard to tell why the popup opened.
• Close On Overlay Click: enable it for soft marketing popups. Users should be able to dismiss the offer quickly if they do not need it.
• Clickable Under Overlay: leave it disabled in most scenarios. When the popup is open, clicks underneath it can cause unexpected navigation or actions.
• Prevent Page Scrolling: enable it for modal windows. This prevents the page from moving underneath the overlay while the visitor reads the message.
• Close By Clicking Back Button: test it on mobile devices. For some visitors, the back button is the natural way to dismiss an overlay.

The Appearance Tab: Do Not Turn the Popup Into a Separate Website

In Popup Pro customization settings, you can control the overlay, animation, positioning, blur, and close button. It is easy to get carried away with visual effects here. In practice, it is better to focus on readability first: text contrast, enough spacing, a clear close button, reasonable width, no horizontal scrolling, and calm animation. If the popup is meant to collect leads, the entrance effect matters less than the visibility of the input field and submit button.

The developer highlights options for adjusting position, fullscreen or boxed layout, colors, the close button, and hover animations. Use these features as attention-control tools. Fullscreen mode can work well for a large promotional message or video. A boxed layout is usually better for an email signup form. A lower corner position may feel softer for a scroll-triggered offer if it does not need to block the page.

Close Button

The close button should not be hidden without a strong reason. Even if the overlay closes on click, users still need to see a clear way out. Check the size and contrast of the button on a phone, especially if the popup contains a form. If the close action is too small or positioned outside the visible area, the popup feels like a trap.

Overlay and Scrolling

The overlay helps separate the message from the page, but a layer that is too dark can hide the surrounding context. Background blur may look impressive, but on weaker devices or heavy pages it can introduce lag. Do not check only the appearance - check page behavior after closing as well: scrolling should return, clicks should work, and keyboard focus should not remain trapped inside a hidden block.

Display Conditions: Where to Show It and to Whom

Display settings are best configured after you have chosen the scenario. If the popup offers a blog newsletter signup, it makes sense to show it in posts or after reading, not across every page. If the popup relates to a specific service, limit it to that page. If the offer is aimed at new visitors, do not show it to administrators and editors while they are working on the site, assuming your version includes role-based settings.

Device targeting matters too. The official description mentions the ability to hide the popup on selected devices. Do not treat responsiveness as automatic permission to show everything to everyone. A large promotional block with a wide image may look great on desktop and become disruptive on a phone. For mobile, it is usually better to use shorter copy, a larger close button, and fewer decorative elements.

Frequency and Active Period

Popup Pro claims to support display frequency and active-state control, including always-on display or a defined period. The changelog specifically mentions a fix for Certain Period mode and a switch to 24-hour period formatting, so scheduling should be tested carefully. If the popup is supposed to run on a schedule, do not rely on the admin panel preview alone. Open the page as a regular visitor, confirm the site time zone, clear browser state, or use a private window.

Practical rule of thumb: the earlier and more often a popup appears, the softer its format should be. The more aggressively it blocks the page, the stricter your display conditions and frequency rules should be.

Trigger Scenarios: When Click Beats Load and Scroll Beats Exit

Popup Pro triggers may lead to the same end result - a popup opens. But the user experience is different for each. If a popup appears after a click, it feels like an expected continuation of the action. If it appears on page load, the visitor may see it before understanding the page. If it appears on scroll, it relies on engagement. If it appears on exit intent, it acts as a final chance to offer a next step. That makes trigger configuration more than a technical detail - it is an editorial decision.

Manual Launch for Buttons, Links, and Divi Modules

Manual launch works best in cases where the user has already shown interest: they clicked "Watch Video," "Get the Checklist," "View Terms," or "Ask a Question." In Divi, the easiest method is to assign a CSS ID or CSS class to the relevant module through the Advanced tab. That selector is then referenced in Popup Pro settings as the element that opens the popup.

The advantage of manual launch is predictability. If the popup does not open, the list of possible causes is relatively small: the selector does not match, the ID is duplicated, the element is loaded dynamically, optimization delayed the script, or the popup itself is inactive. Troubleshooting is straightforward: temporarily simplify the page to one element with one ID, one active popup, and caching disabled.

Page-Load Launch With a Delay

Page-load display is appropriate for notices and messages that must appear without a click. But in marketing scenarios, it is usually better to use it with a delay. Popup Pro supports both start delay and close delay for this mode. A delay gives the page time to load and gives the visitor time to understand the context. If the popup appears instantly, it competes with the page headline and may increase fast dismissals.

Do not use auto-close as a substitute for a proper close button. Auto-close can work for short notices, but not for a form where the user is entering an email or reading conditions. If the popup closes on its own, make sure entered text is not lost and that the site does not feel like it is rushing the user.

Scroll and Inactivity

Scroll-based triggers indicate that the visitor is already interacting with the page. That makes them a good fit for articles, catalogs, long landing pages, and tutorial content. A pixel value works well when you know the exact height of the first screen. A percentage is more flexible across screen sizes, but it should be tested against real content, because a short page may reach the target threshold very quickly.

Inactivity is a delicate mode. It can help bring attention back when a visitor pauses on the page, but it may also fire at the wrong moment: the person is reading a complex passage, reviewing a table, comparing products, or simply got distracted. For this trigger, use a softer format: brief text, an obvious close option, and no aggressive fullscreen overlay.

Exit Intent

Exit popups are often used for a final offer: a discount, a resource collection, a consultation, or a cart reminder. Popup Pro includes this mode among its trigger options. But it should not become your only retention strategy. If a visitor is leaving, the reason may be price, speed, trust, content, or form usability. A popup can offer a next step, but it cannot fix a weak page.

Frequency matters especially here. If the user closes the offer and it reappears on every page, the site starts to feel pushy. Frequency settings and limited display scope help prevent that.

Popup Layout in Divi Builder: Structure, Form, and Action Button

Popup content is created inside the Divi environment, so the usual logic of sections, rows, columns, and modules applies. Elegant Themes describes Divi Builder as a system in which sections contain rows, rows contain columns, and columns contain modules. For popups, that hierarchy matters even more: too much nesting increases the risk of a broken responsive layout, and rows that are too wide can overflow the popup.

A strong layout starts with one primary action. If you are building an email signup popup, the form should be the focal point. If you are offering a discount, the main element should be the code or the action button. If you are showing a video, the player area and close button matter most. Supporting text should explain why the action is useful, but it should not turn the popup into a second landing page.

Structure for an Email Signup Form

For a signup form, a headline, one short paragraph, an email field, a button, and a brief note about the newsletter content are usually enough. If the form is powered by another plugin, such as a contact form or email marketing service, test it separately on a normal page first. Then move the form into the popup and test it again. That way you will know whether the problem comes from the form itself or from the modal layer.

Do not add too many fields. A popup already demands attention, and a long form increases friction. For the first touchpoint, an email address is usually enough. Name, phone number, city, and comments should only be requested when they are truly necessary to process the lead.

Structure for Video

Video popups are explicitly listed in Popup Pro's product description. Here, the key check is not button design but player behavior. Open the popup, start the video, close the popup, and verify that playback stops. DiviNext changelog notes for a related Popup Pro package included a fix for a case where video would not play even when the popup was visible, so video should be tested in a real browser, not just inside the visual builder.

Structure for an Offer or Coupon

A promotional popup should be as specific as possible. Make it clear what the user gets, what action they need to take, and where the journey continues after the click. If the offer is tied to a store, do not hide the terms in tiny text inside the popup. It is better to provide a short summary and a link to a page with full details. Make sure the popup does not cover critical cart or checkout elements if you display it on commerce pages.

A Small CSS Tweak for a Consistent Look

If no exact public hooks for the product are available, do not invent a PHP API. For light customization, it is safer to use a CSS class that you assign yourself to the internal Divi section. For example, you can add the jf-popup-card class to the main popup section through Advanced - CSS ID & Classes, then place the CSS in a child theme or in Divi's built-in custom CSS area.

.jf-popup-card {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(20, 20, 40, 0.22);
}

.jf-popup-card .et_pb_button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .jf-popup-card {
    max-width: calc(100vw - 28px);
    border-radius: 14px;
  }
}

This tweak does not depend on Popup Pro's internal classes and does not modify plugin files. It works only where you have explicitly assigned the class to a Divi section. The verification is simple: open the popup on a test page, compare width and spacing on desktop and phone, then temporarily remove the class or CSS. If the visual returns to its previous state, the rollback path is clear and safe.

Practical Example: A Newsletter Popup After Scrolling Through an Article

Let us walk through a concrete scenario: a Divi-based site publishes long educational articles and wants to offer a newsletter signup only to people who have already started reading. An immediate popup on page load is weaker here because the user has not yet seen the value of the content. Manual click does not fit either, because the goal is to offer the signup gently after engagement. That makes scroll-triggered display the best choice.

Goal

Create a newsletter popup that appears on blog post pages after the visitor has scrolled through a meaningful portion of the article. The popup contains a short headline, an email field, a subscribe button, a clear close button, and does not appear in the admin area or on pages where the visitor is performing a critical action.

Preparation

Before building it, make sure the signup form works on a normal page. If you are using a separate form plugin, submit a test entry, check the email delivery, the success message, and error handling. Then create a test blog post or draft where you can safely test scroll behavior without exposing the experiment to a live audience.

Setup Steps

1. Create a new popup in Popup Pro and name it something that will still make sense a month from now, for example blog-scroll-newsletter.
2. Enable creation through Divi Builder and build a compact section: headline, short value promise, email form, and a close button.
3. In general settings, enable Active only after the layout has been saved and reviewed in the editor.
4. In Trigger Mode, choose the scroll trigger. If your version supports both percentages and pixels, start with a percentage for longer articles.
5. Open the close settings: enable closing via the button and, for a soft marketing popup, closing by clicking the overlay.
6. Enable page-scroll prevention if the popup covers the central part of the screen and is meant to behave like a modal.
7. In the display tab, limit output to blog posts or one specific test page. Do not enable it sitewide on the first pass.
8. If device-based restrictions are available, test the mobile version. When in doubt, hide a complex popup on phones first or make the mobile layout shorter.
9. Save and update the popup, then clear cache only for the test page if the site uses optimization.

Result Check

Open the page in a private window, scroll to the intended point, and verify that the popup appears once. Close it using the button, then by clicking the overlay if that option is enabled. After closing, the page should scroll normally, keyboard focus should not remain trapped in the hidden form, and the overlay should disappear completely.

Then repeat the test as an administrator and as a regular visitor. If role-based visibility is configured, make sure the rule does not hide the popup from the people who are supposed to see it. On a phone, check that the close button is visible without horizontal scrolling, the email field does not run off the edge, and the keyboard does not cover the submit button.

A Common Obstacle

If the popup does not appear on scroll, do not change the design right away. Check three things first: whether the popup itself is active, whether the display scope is set correctly, and whether caching or deferred JavaScript loading is interfering. If the popup starts working after optimization is disabled, the problem is almost certainly not the Divi layout but script load order. In that case, exclude Popup Pro scripts from deferred loading or review the cache plugin settings more precisely.

Result Validation: How to Tell Whether the Popup Works Correctly

Result validation should be treated as a separate stage, not just a quick glance in the editor. The visual builder shows the layout, but the visitor sees a page with caching, header, footer, third-party scripts, a cookie banner, analytics, forms, and different screen sizes. The popup sits on top of all that, so test not only whether it appears, but how it behaves during interaction.

Checklist on the Front End

Open the page in a private window and go through the scenario like a normal visitor. If the trigger is manual, click the launch element. If the trigger is scroll-based, scroll the page. If it is page-load based, visually time the actual delay. If it is exit intent, test the trigger carefully instead of turning the test into an endless cycle of popup openings.

• The popup appears at the right moment. It does not fire before the intended action and does not require an unnecessary second click.
• The display scope is limited. The popup appears on the selected page and does not show up where it should not.
• Closing works through every allowed method. The button, overlay, and browser back button behave exactly as configured.
• Scrolling is restored. After closing, the page is not left locked and does not jump to an unexpected position.
• The form or action button works. The submission goes through, the video plays, or the link takes the user to the correct place.

Checks by Device and User Role

Do not stop at resizing the browser window. Test on a real phone if possible, or at least use browser emulation with touch behavior. On mobile devices, screen height, the keyboard, the back button, scrolling inside the popup, and close-button size all matter. If device hiding is enabled, verify both sides of the rule: the popup should stay hidden on the restricted device and appear on the allowed one.

User roles should be tested separately. An administrator often sees the WordPress admin bar, different styles, and different caching behavior. If the popup is intended for guests, a private window will give you a more honest view. If it is meant for logged-in users, create a test account with the appropriate role and check it without administrator privileges.

Performance Checks Without False Conclusions

The Popup Pro developer claims performance improvements in the changelog, but every site has its own script mix. So do not assume the popup "definitely has no effect on speed." Check the practical impact: compare the page with no active popup and with the popup enabled, watch for long delays on first interaction, layout jumps, or blocked form input. If the issue appears only when minification or deferred loading is enabled, the problem is likely in optimization, not in the popup text.

Safe Enhancements and Combinations With Other Tools

Popup Pro itself is responsible for showing the popup and controlling its behavior, but real-world scenarios often involve other site components: a signup form, CRM, WooCommerce, analytics, cookie consent, caching, or the Divi Library. What matters here is not labeling every combination as an official integration. If the developer does not explicitly confirm an integration, it is more accurate to describe it as a practical setup based on standard WordPress and Divi capabilities.

Pairing It With a Signup Form or Contact Form

The most common scenario is a form inside the popup. In that setup, Popup Pro's job is to open the popup at the right time and display the layout. The form's job is to accept data, validate fields, send notifications, or pass the contact into the next step. Configure them separately: first the form on a normal page, then the same form inside the popup, and only after that the trigger and display conditions.

The main point of conflict is form JavaScript. Some forms load scripts only on pages where their block is directly present. If the form is inserted into a popup as part of a Divi layout, test submission on the public page itself. If the field does not accept input, the form does not submit, or the success message does not appear, temporarily simplify the popup and test the form without the overlay. That is much faster than changing ten settings in a row.

Using It With WooCommerce

Popup Pro can be used in commercial scenarios: promotional offers, cross-sells, discount reminders, or product videos. But on WooCommerce pages, it must not break the purchase flow. If the popup appears on a product page, it should complement the product, not permanently cover the buy button. If it appears in the cart or during checkout, test very strictly: coupon entry, quantity changes, moving to payment, closing the popup, and restored scrolling.

A practical rollout sequence is this: enable the popup on one product page, test adding the product to the cart, then try closing the popup and continuing the purchase. If that works, expand the rule to a product category. If there is a conflict with cache or dynamic WooCommerce fragments, it is better to exclude critical pages from the display conditions than to force a complex popup over the checkout flow.

Using It With Cache and Optimization

Cache is not the enemy of popups, but it changes the loading order of CSS and JavaScript. If the popup does not open, opens without styles, or will not close, temporarily disable deferred script loading on the test page. Then re-enable optimization one setting at a time. Some cache plugins let you exclude specific files or pages. Do not add a sitewide exclusion if the issue appears only on one page type.

Using It With Divi Library

Divi Library is useful for reusing sections and maintaining consistent design. Elegant Themes describes the library as a place to save layouts, sections, rows, and modules for repeated use. That is convenient for popups when the site uses several similar windows: signup, promo, video, or lead magnet. But global elements should be used carefully: changing a global design may affect multiple popups at once.

A practical approach is to create a base section in Divi Library, use it as a starting point for new popups, but avoid making all copy and forms global if different pages need different offers. After making changes, open two or three popups built from that base and confirm that the edit did not break the content.

Who Divi Popup Builder Is Best For and When Another Approach Makes More Sense

Divi Popup Builder is a good fit for site owners and web managers who already work in Divi and want to build popups without using a separate external builder. It is especially useful when the popup design needs to match the site's existing style: the same fonts, buttons, images, spacing, modules, and visual logic. The product is also helpful for agencies that manage several Divi sites and want to explain popup setup to clients through the familiar WordPress admin interface.

For marketers, the plugin provides control over display timing: click, load, scroll, exit intent, inactivity, and page- or device-based limitations. For designers, it offers the ability to build the content in Divi Builder. For administrators, it provides a quick way to temporarily disable a popup, change its display scope, or review its close behavior.

When the Product Is a Good Fit

• The site is already built with Divi. The team does not need to learn a separate interface to design popup content.
• You need multiple trigger types. Manual click, scroll, load, exit intent, and inactivity cover most marketing use cases.
• Control over display location matters. The popup can be limited to specific pages, posts, projects, roles, or devices, if those options are available in your version.
• You need to create several similar popups quickly. Ready-made templates and Divi starting layouts speed up the process as long as they are not used as thoughtless copies.

When to Pause and Reconsider

If the site does not use Divi, it is worth comparing this product with general WordPress popup plugins. If you need deep analytics, A/B testing, complex marketing-platform integrations, or server-side display rules, a Divi-focused popup builder may not be enough. If the site has strict accessibility, legal notice, or consent requirements, popups should be aligned with site policies rather than relying on visual effect alone.

Another reason for caution is an overloaded page. If the site already uses heavy animations, multiple forms, a cookie banner, live chat, and advertising scripts, adding another layer increases the risk of conflicts. In that situation, start with manual launch and a narrow display rule.

Display Rules: How to Keep a Helpful Popup From Becoming an Annoying Layer

Popup Pro's strength is not just that it can make a popup look polished. Its real value appears when you can tie a message to the right place, time, and visitor state. The documentation separately describes general settings, display, and customization tabs. That suggests the correct working order: first define the goal, then choose the page and audience, then configure the trigger, and only after that fine-tune the visual details.

Imagine two identical signup popups. The first appears on every page immediately after load, covers the page headline, and repeats on every navigation. The second appears only in articles after scroll, stays hidden from administrators, closes with a clear button, and does not repeat too often. Technically, both could use the same Divi layout, but the user experience would be completely different. That is why the best Divi Popup Builder setups begin not with button color, but with display rules.

Include and Exclude as a Working Site Map

If your version of the interface lets you define inclusions and exclusions by pages, posts, projects, or site areas, treat those rules like a responsibility map. Inclusion answers "where does this popup make sense?" Exclusion answers "where should this popup definitely stay out of the way?" Do not try to cover all logic with one global rule. Blogs, service pages, stores, and technical pages are better served by separate setups or at least separate exclusions.

For the homepage, a short offer usually works best: a news update, consultation, lead magnet, or seasonal promotion. For a blog post, a newsletter signup or related content after scroll makes more sense. For a service page, use a consultation request or question form. For a product page, a tip, video, or cross-offer can work, but only if it does not interfere with the purchase. For cart and checkout, popups should be used with extreme caution: any layer on top of a critical action can reduce trust and create technical conflicts.

Example of Rule Separation

Imagine a site with a blog, service pages, and a WooCommerce catalog. Instead of using one "Subscribe and get a discount" popup across the entire site, it is better to build three more precise scenarios. In the blog, show a signup popup after scroll. On a service page, open a consultation form by button click. On a product page, show a related offer only after an explicit click on a "View Terms" element. On paper, this is more complex, but in practice it is easier to maintain: each popup has a clear goal and does not compete with the others.

User Roles and Editorial Review

Popup Pro documentation mentions user-role control. This is useful not only for personalization, but also for clean editorial testing. Administrators and editors often browse the site with the WordPress admin bar enabled, the visual builder open, cache bypassed, and permissions that differ from those of a regular visitor. If display rules are role-based, testing only from an admin account can produce a misleading picture.

For a public-facing marketing popup, the most important test is usually as a guest. Open a private window, stay logged out of WordPress, run through the scenario, and see when the popup appears. Then test as an editor if the editor role should or should not see it. If the site has a member area, create a test user with the appropriate role and verify that the rules do not expose an internal offer to the wrong audience.

Device Preferences Without the Illusion of Automatic Responsiveness

The official Popup Pro description says it can account for device type. That does not mean every complex layout automatically becomes comfortable on a phone. Divi can adapt sections responsively, but a modal window adds extra constraints: screen height, keyboard, overlay, close button, and internal scrolling. So device configuration is not just a matter of "show" or "hide" - it is also a decision about how short and focused the mobile scenario should be.

If the popup contains a signup form, the phone version should usually use one column, a short headline, one field, a large button, and a clearly visible close option. If it contains video, check the player's vertical height and what happens after closing. If it is a promotion with a large image, consider whether a compact corner notice or a regular page section would work better. A mobile popup should support the action, not show off the full beauty of the desktop layout.

Display Frequency and Active State

Popup Pro mentions display frequency and popup status in its description. These settings matter if you want the site to behave respectfully. A popup that appears once after engagement can be helpful. The same popup repeated on every page turns into noise. If your version includes recurrence settings, do not use an unnecessarily short interval. If you are running a temporary campaign, use a limited active period and confirm in advance that the schedule works with the site's time zone.

The Popup Pro changelog mentions fixes related to Certain Period mode. That is not a reason to avoid the feature, but it is a reason to test it like any other critical condition. Create a short test period, verify activation and deactivation, then restore the real values. If scheduled display is tied to an important campaign, plan a manual check after launch. Automation is useful, but it does not remove responsibility for the public result.

Accessibility, SEO, and User Experience Safety

A popup interrupts the reading flow. Even if it looks good and works technically, it may still be uncomfortable for someone using keyboard navigation, someone with low vision, someone on a small screen, or someone on a slow connection. That is why Divi Popup Builder should be configured with more than conversion in mind - accessibility, speed, and respect for the user's journey matter too.

From an SEO perspective, do not assume that a popup will improve rankings on its own. Search engines evaluate pages holistically, and intrusive interstitial-like elements on mobile can hurt the user experience. The practical conclusion is simpler: do not block the main content immediately, do not make users hunt for a tiny close icon, do not force form completion just to read the page, and do not load the popup with heavy images unless they are genuinely needed.

Keyboard, Focus, and Closing

Check whether the popup can be used without a mouse. After opening, focus should land in a logical place: a form field, a button, or the modal block itself. The Tab key should not move the user into page elements underneath the overlay if the popup is meant to behave like a modal. The close button should be visible, high-contrast, and accessible by more than just mouse input.

Popup Pro includes settings for closing via the overlay and the back button. That helps, but it does not replace keyboard testing. If the form contains multiple fields, tab through them, submit a test entry, close the popup, and confirm that the page returns to normal navigation. If a third-party form is used, that form may control focus after submission, so test the whole flow end to end.

Content That Should Not Exist Only in a Popup

Do not place the only copy of important information inside a popup. Offer terms, data-processing policy, a critical warning, a service description, or mandatory legal text should also exist on a normal page or in a visible section. A popup can highlight such information, but it should never be the only way to access it. If the visitor closes the popup, they should not lose access to the terms or the action itself.

For a signup form, add a short note near the field explaining what the person will receive. For cookie notices, do not rely on a decorative template alone: the text and buttons should match the site's policy. For a video popup, provide an alternative link or a standard page block if the video is important for understanding the product or service. This lowers risk and helps users whose browser extensions block popups.

Speed and Heavy Elements

Popups often contain images, forms, video, fonts, and animations. Each of those can add load. If the popup opens on click, some of that weight feels less intrusive because the user chose the action. If the popup appears on page load, heavy content competes with the first screen of the page. That is why automatic scenarios should avoid large background images, unnecessary icons, multiple videos, and complex animations.

Testing should be practical: clear the cache, open the page as a guest, view the first screen, wait for the trigger, and assess the delay. If the page visibly stutters, temporarily remove the heavy image from the popup. If the issue disappears, optimize the image or replace the background with a lighter option. If the problem remains, check form scripts, cache settings, and conflicts with other modal windows.

Consistency With Divi Design

The advantage of Popup Pro inside the Divi environment is a unified design system. But it is easy to break that if you use a ready-made template without adapting it. Match the fonts, colors, border radius, button style, and spacing to the current page. If the popup looks like an unrelated banner, visitors will treat it as an ad even when the message is genuinely useful.

A practical technique is to open the page without the popup and write down three visual traits of the site - the main accent color, the button style, and the spacing density. Then apply those to the popup. There is no need to copy the entire page layout. It is enough to make the popup feel like part of the interface rather than an external advertising layer.

When Divi Popup Builder Is the Right Choice

Divi Popup Builder is worth using if your site already lives inside Divi and the popup should function not as a random banner, but as a controlled scenario element: content built in Divi Builder, a trigger chosen around visitor behavior, limited display scope, obvious closing behavior, and results verified on the public site. In that setup, Popup Pro helps you quickly build newsletter signups, promotional offers, video popups, soft exit scenarios, and targeted messages for specific pages without editing plugin code.

If you need a first working version, start with a test page, one popup, and one trigger. After validation, you can expand the scenario: add page-based conditions, configure frequency, adapt the mobile layout, or connect the popup to a form or WooCommerce page. Once you understand the result you need and how to verify it, you can download Divi Popup Builder and test it on a staging copy of the site or on a safe page.

The main decision criterion is simple: if the popup helps the user take the next step without getting in the way of the current one, the tool makes sense. If the popup appears for no clear reason, covers important content, or requires too many workarounds, it is better to simplify the scenario, narrow the display scope, or choose another solution.