Divi Modal Popup - WordPress Plugin

Guide to Setting Up and Using Divi Modal Popup

This guide to Divi Modal Popup will help you understand how triggers connect to popups, prepare a Divi page, build a popup flow for a specific goal, and test it without intrusive displays. Rather than repeating promotional copy, it follows a practical path: from choosing when the popup appears and what it contains to diagnosing identifiers, accessibility, and repeated triggers.

A modal window is useful when visitors need extra context without being sent to a separate page. It might contain a brief explanation of a service, a video, a contact form, a map, promotion terms, or a saved layout from the Divi library. A popup does not automatically make a page easier to use, though. Its value comes from a close match between the visitor's intent, the action they take on the page, and the content that opens.

Divi Modal Popup is built around modules. The popup is added to the regular Divi Builder structure, receives its own unique identifier, and responds to the selected trigger type. Planning should therefore begin not with the overlay color, but with a question: which existing visitor action should lead to which next step?

When a Modal Window Actually Helps Visitors

A popup layer is not appropriate simply because it can display more information. It works well when the main page already guides visitors toward a decision and supplemental material is needed at the precise moment of uncertainty or choice. On a services page, that might be a "View Details" button; on a team card, an employee photo with a short biography; on a landing page, a video that opens without sending visitors to a video hosting site. Visitors remain in their current context and can continue reading in the same place after closing the window.

Divi Modal Popup is especially useful for these purposes because the trigger can be connected to more than the module's own button. The documentation lists a button, image, icon, text, and an existing element identified by CSS ID or CSS Class. That means you do not need to rebuild an existing page: choose one stable element, give it a clear technical identifier, and match it to the popup setting.

Before building anything, describe the intended flow in one sentence from the visitor's perspective: "I click this element because I want this specific additional information." That wording quickly reveals whether a popup is needed at all. If the visitor needs to read a long guide, compare pricing tiers, or complete a long sequence of fields after clicking, a compact layer becomes restrictive. If they need to clarify one point, view a short demonstration, or make one clear next choice, the format feels natural.

For every planned popup, define three parts of the promise: what people see before clicking, what they receive afterward, and what action remains available after they close it. For example, a "View Requirements" button should open application requirements, not a generic company presentation; after closing the window, visitors return to the form or service card. This simple check prevents a mismatch in which the trigger promises one thing while the modal tries to show a video, discount, and form at the same time.

Decide separately what will count as a successful outcome. For a video, that may be watching the key segment and returning to the work gallery; for a form, a clear confirmation after submission; for an explanation, being able to continue reading without searching for the previous spot. Then ID, design, and closing settings become ways to achieve an observable outcome rather than a collection of decorative options.

Use Cases Where an Element Click Is Enough

An element-based trigger usually provides the calmest user experience. Visitors deliberately click a visible button, heading, image, or icon, so the popup content feels like a continuation of their action. On a course page, it might show a lesson outline; for an agency, a quote request form; in a catalog, an explanation of a service option. In this type of flow, show one specific next step instead of turning the window into another long page.

If one area contains several similar buttons, create a mapping table in advance: one button, one popup module, one piece of content. Reusing the same identifier for different intents almost always causes confusion when the page is updated. Choose meaningful identifiers such as consultation-popup, video-popup, or team-bio-popup, without spaces or arbitrary numbers.

Automatic Displays Need a Stronger Reason

The settings offer triggers on page load, exit intent, scroll, and inactivity. These are not four equally valid ways to attract attention; they are four different signals. A display after page load can work for a brief mandatory notice; a scroll trigger can suit material that makes sense after a certain section; inactivity can work on a choice-heavy page where a visitor has genuinely paused. Exit intent is best reserved for a gentle fallback offer, not for blocking someone from leaving.

Practical rule: start with a useful click-based flow. Add automatic modes only after you can name the event, the benefit to the visitor, and a safe limit on how often it appears.

Who This Plugin Suits and When Another Approach Is Better

The plugin suits Divi site owners, editors, and designers who want to build a window with their familiar builder and connect it to an existing page. It is particularly practical when content already exists in Divi modules or has been saved to the library. Developers may also find it useful as a manageable layer over the standard page structure, provided CSS ID and class names are agreed on in advance.

Do not start with a modal window if the content needs to be a standalone, indexable article, if visitors need to compare many options on one page, or if the target action requires a long multistep process. In those cases, a separate page, accordion, anchor section, or standard form is usually better. A popup should also not be the only place for critical information: some visitors will close it before reading, and browser extensions or user settings can alter popup behavior.

What to Check Before Installation and Your First Module

Divi Modal Popup works within the Divi ecosystem, so the first check is not about popup effects but about how the specific page is edited. Open a copy or draft of the target page in Divi Builder and make sure it already has a clear purpose: a button, image, text link, or another element visitors will use deliberately. If that purpose is still vague, it is too early to create a popup - technical configuration will not fix an unclear page flow.

Prepare the content separately. A short heading, one or two paragraphs, a clear next-step button, an image, video, or saved layout are best assembled before connecting them to a trigger. This reduces the risk of a popup that opens correctly but contains placeholder text, a link to a nonexistent page, or a block that does not fit the page design. If you are using a form, decide where a test submission will be delivered and who can verify that it arrived.

Separate working content from draft material. If the popup will include a video, image, or form, confirm that the component is ready to be viewed on the public page rather than existing only as an editor's idea. For text, prepare an exact heading and one main message instead of an internal note containing several alternatives. This constraint simplifies the first test: if the outcome does not match the click, it is easy to tell whether the issue is with the module connection or with the content itself.

Also assign an owner to the flow in advance. One editor may handle the text and library layout, another the button in a card, and a technical specialist the global template. Even on a small site, record where each part is changed. Then updating a video or wording does not accidentally replace a page ID, and fixing a trigger does not affect finished content. This is not process overhead; it preserves a clear checkpoint for the next update.

Map the Page Dependencies

One popup usually requires three components: a visible trigger, a Divi Modal Popup module, and content. When a saved library layout is used, a fourth component appears - the library item itself. A global display through the header or footer also involves the Theme Builder template. This map keeps you from looking for an error in a random place: if the button exists but the popup does not open, check the identifiers and module location; if the popup opens but lacks the intended block, check the selected content or library layout.

• Page: Open a working copy in Divi Builder and identify the area where the trigger will appear.
• Trigger: Select one element and assign a clear CSS ID or class name if it already exists.
• Content: Prepare concise, self-contained material that does not duplicate the entire page.
• Testing: Decide in advance which screen widths and browsers you will use for testing.

Check the page boundaries as well. The same Divi layout may appear in a regular post, a Theme Builder template, or a repeating card, so an element visible in the editor does not always exist exactly once in the final public page. If the trigger is in a global header, decide in advance which pages it should appear on and whether the same popup should open everywhere. If a button belongs to several cards, decide whether each card needs its own module or whether they should share content.

At the preparation stage, it is useful to make a short checklist: the test page URL, trigger name, expected popup heading, chosen content type, and closing method. You do not need to document every design setting. Its purpose is to give the editor a reference point after duplicating a row, changing a library layout, or updating another module on the page. When a test fails, the checklist lets you compare actual behavior with the intended plan rather than reconstructing it from memory.

Install Without Unnecessary Changes to the Live Site

Install the archive you have already obtained through the usual WordPress path: Plugins, then Add New, then upload the file and activate it. Exact button labels may vary with the admin language, but the principle remains the same: the plugin must be active before its module appears in the Divi Builder list. Do not make simultaneous changes to the theme, optimization settings, and page, because you will not be able to tell what affected the outcome if something goes wrong.

After activation, create a test page or draft, add a row and column, open the module list, and find Divi Modal Popup. The official instructions describe this path through the standard Divi structure. If the module is not visible, first refresh the module list in the editor and confirm that the plugin is actually active. Do not try to compensate for a missing module with code snippets; it means the basic installation needs to be fixed first.

Initial Test Before Styling

Place the module in an unobtrusive area of the test page, enter a brief heading and simple content, then select a button-based trigger. At this point, do not spend time on animation, gradients, or complex layouts. One fact matters: a visitor clicks the selected element, a window appears, it can be closed, and the page beneath remains in the expected state. If that chain does not work, cosmetic changes will only make diagnosis harder.

Save the page and check it not only in the visual editor but also in a regular public-site view. The editor may retain a preview state while visitors receive a different version from cache or an older tab. Your first successful test should take place outside the editor: open the page in a separate window and follow exactly the path a visitor will take.

Do not stop after one successful click. Open the page from the beginning, wait for it to load fully, scroll to the trigger, and only then take the action. After closing the popup, refresh the page and repeat the flow in a new tab. This short cycle separates actual module configuration from an accidental editor preview state. If the site uses caching, record exactly which version you tested; otherwise, you may mistake old markup for a plugin issue.

If the window contains a form, do not judge only its appearance during the first test. Send a safe test submission with recognizable wording, verify the on-page message, and confirm that it actually arrives through the intended channel. For a video popup, confirm not only that the frame appears, but also that playback can start, the layer can be closed, and the page can be resumed. Each content type has its own end state, and it should be tested before moving on to detailed styling.

Quick takeaway: after installation, you do not need a beautiful template yet. You need a confirmed chain: "visible element - modal module - close - return to the page." Once that works, you can choose triggers and content.

Configuring the Identifier, Trigger, and Popup Closing Behavior

The most important settings are on the Content tab in the Configuration group. Here the module receives a Unique Modal ID and Trigger Type. The unique identifier is not a formality: it lets the plugin distinguish one window from another and connect it to the selected trigger. On a page with multiple popups, identical IDs make behavior unpredictable, so set the name once, save it, and never duplicate it without renaming it.

Choose a short name made of lowercase Latin letters, numbers, and hyphens. For example, audit-request works for a preliminary audit form, while case-video works for a case study video. Do not include spaces, Russian words, or decorative symbols in an identifier. The name remains a technical connection point: visitors do not see it, but an editor can still understand what the module does months later.

It helps to distinguish a name based on purpose from one based on placement. audit-request describes an action, while a hypothetical button-17 only says that the element once had a sequence number. When a block is moved or a new card appears, the second name quickly loses meaning. After choosing a name, find it in the page settings and make sure it is used only where it should be. This check is especially important after duplicating sections, because visually identical elements can easily inherit the same CSS ID.

Do not change an existing ID merely for consistency if it is already connected to an anchor, styles, or another page behavior. First determine what the value does, then choose a separate unused name for the popup trigger or plan a controlled rename of every connected part. The goal is not to make technical names look attractive, but to ensure one setting does not break an independent visitor path.

Triggers for Buttons, Images, Text, and Existing Elements

Use Element when the window should appear after a deliberate action. Within this mode, you can choose the module's own button, image, icon, or text, or refer to an element already built with Element CSS ID or Element CSS Class. The first option is more convenient when a page has one specific object. A class works when several similar elements should lead to the same action, but use it carefully: applying the class to a neighboring card by accident broadens the trigger area.

When connecting a native Divi button, open its settings, go to Advanced, and assign a CSS ID. Then select Element in the popup module, choose Element CSS ID, and enter the same value without the # symbol if the field expects the name itself. Check this difference between CSS syntax and a configuration field carefully: one incorrect character can look like "the plugin is not working" when the error is actually in the matching value.

Testing a Text-Link Connection

The official instructions show that a link with the same ID specified in the configuration can become a trigger. This is useful for Text Module content, headings, menu-like elements, and prepared HTML when you cannot or do not want to replace the design with a new button. In an article, it is better to test this with a separate short piece of text rather than your only key conversion button. If the connection with a simple element does not work, fix the identifier first, not a complex page block.

<a href="#" id="case-video">View the example</a>

This example only demonstrates the principle of matching IDs. Before adding it to an existing text module, make sure the identifier is not already used by another element and the link does not serve another real function. After testing, close the window with Esc, by clicking the background, and with the standard close button if those methods are enabled in your configuration.

After a successful test, do not turn the link into a universal trigger for several independent popups. If one text block needs different actions, assign each one its own clear ID and test them in sequence. If the same text should open identical content in repeating cards, deliberately choose a CSS Class first and test every instance. The distinction matters: an ID identifies one specific object, while a class can apply to a group. Mixing these roles makes a page much harder to maintain than creating one more small module.

Page Load, Scroll, Exit Intent, and Inactivity

When you select On Page Load, a delay setting appears. The documentation states that the default value is 3000 milliseconds, but do not treat it as a universal standard. It may be a reasonable pause for a brief welcome notice, while on a long article it can interrupt reading too soon. Write the display goal in one sentence, choose the delay based on that purpose, and then test it at the site's actual loading speed.

In On Scroll mode, you set a scroll position. Tie it to the boundary of a meaningful section: after a webinar program description, show a registration form; after work samples, offer a consultation request. Do not set a popup to appear after an arbitrary percentage of scrolling simply because the option exists. Visitors should have time to understand the context before they are offered a next step.

Exit Intent responds when the cursor moves toward the top area of the browser, while On User Inactivity responds after a set period of no activity. In the latter mode, the official documentation lists 30 seconds as the starting value. Both options require restraint: one brief message, an obvious way to close it, and no repeated pressure are more important than elaborate styling. These signals are interpreted differently on mobile devices, so test them on a real device rather than only with a mouse on a desktop computer.

It is useful to assign each automatic mode a specific checkpoint. For page-load triggers, that is the moment when visitors have seen the page heading and understand the topic. For scrolling, it is a logical boundary after an explanation rather than an arbitrary number in a field. For inactivity, it is a pause when someone may need help making a choice. If you cannot name such a point, it is safer not to enable automatic display: a click-based action provides the same information without assuming the visitor's intent.

Test an automatic flow at two different paces. First, move through the page quickly, like someone who already knows what they need. Then read it calmly, pausing at key paragraphs. The window should not cover an important sentence before it has been read, trigger at the exact moment someone clicks another button, or obstruct access to a form. If it seems appropriate only during an artificially slow test, the setting is not ready for the public page.

Repeated Displays and Respecting a Closed Popup

Automatic modes include a switch for displaying the popup again after a reload or return to the page. Enable it only for a message visitors genuinely need to see every time, such as a temporary notice that a form is unavailable. For a lead magnet, video, or discount offer, appearing again on every visit is usually tiring and makes testing harder: the editor sees that the module works, while the visitor sees an intrusive barrier.

Start with two tests: close the window and refresh the page, then close it, navigate to nearby content, and return. This shows the actual effect of the selected setting within the visitor journey. In the page change log, record not only popup text and color but also the repeat-display rule - it is one of the settings most often forgotten during later editing.

Separate testing for repeated display from testing the trigger itself. First confirm that the popup opens once in the correct way. Then close it and repeat the flow without changing identifiers, text, or design. If you change the delay, ID, and repeat-display switch at the same time, you cannot know which setting caused the observed behavior. This order is particularly useful on a page with multiple popups, where one wrong conclusion can quickly look like a general plugin failure.

How Content, the Overlay, and Closing Rules Work Together

Once you have chosen when the popup appears, the next stage is turning it into a clear interface. Divi Extended documentation distinguishes header, body, and footer areas, and text, images, videos, and saved Divi Library layouts can be used as content. Each part has its own role. The heading should confirm that the expected action has opened; the body provides the main information; the footer is needed only when it offers one clear next step or another way to close the window.

Do not repeat the button text throughout the popup. If the trigger says "View the Program," the heading can name the program, while the body gives a brief outline, duration, and registration button. If the trigger opens a video, do not place a long textual retelling beside it. The modal format works especially well when its content can be understood quickly and closed without losing the page context.

Choose Content for the Task

Text works for an explanation, mini FAQ, terms, or a short call to action. An image is useful when visitors need to inspect a work detail, floor plan, or example card. Choose video for a demonstration that is difficult to convey with static text. A saved Divi Library layout is practical for a recurring form, benefits catalog, or standardized block that should be edited in one place.

For each option, apply the chain "input - handling - outcome." The input is a click on a specific element; handling is the match between the trigger and module plus loading the selected body; the outcome is the content that opens. Verification is simple: visitors see the exact heading and content type that match the action. The symptom of an error is equally clear: the wrong popup opens, it is empty, or it shows material from another block.

Content needs a boundary of its own. For text, define in advance the maximum amount that can be read without a long scroll; if an explanation does not fit into a short self-contained answer, put the conclusion in the popup and link to a regular page. For an image, prepare a caption or one cue explaining what to look at. For a video, decide in advance what visitors see before playback and what they should understand within the first few seconds. This makes the window understandable even when media loads slowly or users decide not to watch all of it.

A saved Divi Library layout is useful not only for reuse but also for applying one editing rule. That benefit only works when editors know which popups use the same layout. Before updating a library block, open at least one page for each flow and compare the heading, target action, and content width. One shared layout does not have to suit both a request form and a case study demonstration simply because both appear in a modal layer.

The Overlay Should Not Hide the Way Back

The background layer separates the window from the page and helps visitors focus on one task. Background settings can control the module itself, trigger, overlay, and header, body, and footer areas, including color, gradient, or image. Start with a calm overlay that preserves visible page context. An overly dense or bright background turns a brief clarification into an aggressive screen takeover, while a nearly invisible background makes the popup resemble a block that appeared randomly in the layout.

Check contrast on the actual page rather than in settings alone. A hero image, light service card, and dark blog background interact differently with the same overlay. If the site has several page types, do not assume one style automatically works everywhere. Create at least two representative views and assess whether popup text is readable, the close button is noticeable, and the page beneath the overlay can still be distinguished.

Your design check should include the state before and after opening. Before the click, a button or link remains an ordinary part of the composition and should not look like a random decorative detail. After opening, the eye should quickly move from the heading to the main content and then to the closing method. If the background, a large image, or several identical buttons make the primary action difficult to find, remove secondary styling before adding new effects. A modal layer benefits from clear hierarchy, not the largest possible number of noticeable details.

Closing Is Part of the Flow, Not a Minor Detail

The configuration provides closing with Esc, by clicking the background, and by displaying a close icon. For an informational window, it is usually best to leave several obvious ways back: a visible icon, the keyboard, and a background click. A multistep form may need stricter rules, but visitors still need a clear way to opt out, not only a hidden link at the bottom.

Test the closing behavior in this order:

1. Open the window with the primary trigger and close it using the icon.
2. Open the window again and press Esc, if this option is enabled.
3. Open it once more and click the dimmed area, if background closing is allowed.
4. Confirm that focus and scroll position remain at the expected point on the page after each action.

The final point matters for usability. People should return to the same card, paragraph, or button where they started. If closing the window suddenly moves the page, loses focus, or triggers the popup again, useful content becomes an obstacle.

If the window has its own action button, make sure it does not substitute for closing. Visitors should clearly see the difference between "continue to the next step" and "return to the page." An informational popup only needs a visible close icon and familiar exit methods; an additional button is needed only when it leads to a specific continuation, such as a full case study page or a standard form. After clicking it, verify that the expected navigation actually occurs and that visitors are not left on the dimmed original page without an explanation.

Designing for Mobile Widths

On a small screen, a window has less available space, so long headings, wide images, and several simultaneously visible buttons quickly make the flow worse. First reduce the content to one action and check whether the heading fits, the close control stays visible, and visitors do not need to scroll horizontally. Then test automatic modes separately: mouse-based exit events and scrolling behave differently than they do on a computer.

Test the mobile version in the position where visitors actually read the page. Open the window after ordinary scrolling, try closing it with your thumb, scroll its own content if it is longer than the screen, and return to the original card. Font size is not the only concern; check whether the window covers the only obvious path back. For a flow that is useful only on a large screen, it is more sensible to limit its display after checking the options available in your version than to make mobile visitors close an awkward layer.

Quick takeaway: a good modal layer has one goal, concise content, a calm background, and an obvious exit. Design settings should support that sequence, not replace it.

Practical Example: A Video Case Study Opened from a Divi Button

Consider a flow for an agency page. It contains a portfolio section and a "View Case Study" button. Sending visitors to a separate page would make them lose their place in the gallery, while a short video explaining the outcome can be shown over the current page. The goal is not to keep someone in the window at all costs, but to provide evidence of the work and return them to choosing the next case study.

Preparation has four parts: the page is built in Divi Builder, the button is already in the card, the video or a safe embed is ready, and the text below the video does not require lengthy reading. Also prepare an alternative without video: a short paragraph or a link to a standard case study page. This is not duplication; it is a fallback for cases where embedded content is unavailable or visitors need the full information.

Step 1. Name the Action and Assign an ID to the Button

Open the native Button Module settings in the required card, go to the Advanced tab, and set the CSS ID to case-video. The name is not public text and does not need to look attractive to visitors, but it must be unique on the page and understandable to the editor. If the page has several cards, do not copy the first ID into the others. Create a separate connection for each case study, or deliberately use a shared class only when the same content is genuinely required.

Step 2. Add the Module and Connect It to the Button

Add Divi Modal Popup to a separate row or column on the same page where it will not disrupt the editor layout. Under Content - Configuration, enter a Unique Modal ID, such as case-video-popup. Then select Trigger Type - Element, choose Element CSS ID, and enter case-video. The two names have different roles: the popup ID identifies the module itself, while the element ID indicates what opens it.

Select the Video content type if your version's interface offers it, or use a prepared Divi block that displays video. Keep the popup heading short: "Case Study: Service Launch." In the body, include the video itself and one line explaining what viewers will see. Do not add a form, a long list of services, or a second popup button beside it - in this example, the window has one role.

Before publishing, test the content as a standalone fragment. Viewers should not wonder why the video relates to the selected card: the case study title, brief introductory line, and material itself should all point to the same outcome. If the video begins with a generic intro, add a brief note explaining what follows. If the embedded video is temporarily unavailable, leave a prepared short text and a standard route to the detailed case study so the click does not open an empty or useless area.

Do not add autoplay, a second popup offer, or several competing calls to action just because a modal window can place them together. Visitors already have one main question: whether to view evidence of the work. The best test for this step is simple: someone who was not involved in the setup should be able to understand from the button label and popup heading, without explanation, what they are about to see and where they will return after closing it.

Step 3. Configure the Return to the Gallery

Enable a visible close icon and test closing with Esc if that matches the site's policy. For this flow, clicking the background is usually appropriate: someone may have opened the wrong case study and should be able to return to the cards immediately. Make the overlay contrasting enough that the video does not blend into the background, but not so opaque that the connection to the portfolio section disappears completely.

After saving, open the public page in a new window. Click the button in the first card, stop the video, close the window, and confirm that you can see the same card. Repeat the test for the second card if it is configured. If both buttons open the first case study, the usual cause is a repeated CSS ID or a second module that still references the old value.

Step 4. Test the Flow Through a Visitor's Eyes

Open the page in a regular browser, a private window, and on a phone. The first view shows the site's accumulated state, the second shows new-visitor behavior, and the phone reveals the actual window and close-button dimensions. If caching is used, clear the cache in the order established for the site after making a change, then test the page again. Do not judge trigger behavior from the Divi editor: the public page remains the final proof.

A successful outcome looks like this: clicking a specific button opens the right content, the overlay does not interfere with reading, the window closes predictably, and the visitor returns to the same part of the gallery. If even one point fails, fix the ID connection and trigger type first, then the content, and only then the styling.

For this example, it is useful to run a brief role-based test. The editor confirms that ID names and the selected module match the entry in the list; the visitor checks whether the button is clear and whether it returns to the card; someone with a small screen checks whether the window interferes with viewing or closing. These roles do not require a separate team: follow the route with different goals and do not substitute a design check for a content check.

If the page leads to an inquiry, after closing the video users should see the next meaningful step, such as a regular consultation button in the card itself or the nearest page section. Do not duplicate it inside the window without a reason. This preserves the video's role as proof and the main page's role as a place to choose and proceed. Separating these roles reduces the risk that visitors close the layer and lose their bearings in a long gallery.

Common Issue with Multiple Popups on One Page

When there are many case studies, technical discipline matters more than effects. Keep a short list: visible button text, element CSS ID, Unique Modal ID, content type, module location, and closing rule. It takes less time than finding an accidentally duplicated ID after copying several Divi rows. If repeated windows differ only in text, consider storing their layouts in Divi Library, but first confirm that this structure will genuinely be easier for the editor to maintain.

Why Matching IDs Determines Popup Behavior on the Page

A useful feature of Divi Modal Popup is not simply its multiple triggers, but its ability to connect familiar Divi markup to a separate interface layer. The input is an action or event: a button click, page load, scrolling, or inactivity. The module configuration then determines which popup should respond, how it will be displayed, and whether it may appear again. The observable outcome is content displayed over the page without navigating to a new address.

When triggering from an element, two different identifiers are especially important. Unique Modal ID belongs to the modal module itself. A CSS ID or class belongs to the element that acts as the trigger. Errors occur when an editor tries to use one arbitrary name everywhere without understanding which part of the connection it applies to. The window may then reopen, fail to open entirely, or be called by a neighboring button if duplicates exist on the page.

The "Element - Rule - Popup - Check" Chain

Imagine a page with a "Get the Program" button. Its CSS ID is program-request. Divi Modal Popup has Element CSS ID selected, and the same name is entered in the field. The module has its own Unique Modal ID, such as program-modal, and its body contains a short form. After the click, the trigger rule finds the needed element, opens the modal module, and the visitor sees the form. Testing does not end when the background appears: you need to see the correct heading, working fields, and a return after closing.

If a class is used instead of a button, the same chain can apply to a group of elements. This is appropriate, for example, for identical cards that should open one consultation request. However, the class should not accidentally be applied to a decorative container, or the window may open when users click an unexpected area. After assigning the class, click the card edge, image, and text to make sure you know where the actual active area is.

A convenient way to isolate an error is to temporarily simplify one part of the chain without breaking the others. Keep one short button with a unique ID and one simple text item in a separate module. If that connection works, compare it with the problematic version: trigger type, ID or class value, module location, and selected body type. If the simplified version also fails, return to the basic installation, page publishing, and actual module loading rather than randomly copying additional design settings.

Global Display Through Theme Builder and the Library

For a site where a window needs to be available on many pages, the official material offers two approaches. If global headers or footers are built in Divi Theme Builder, the module can be placed there as it would be on a regular page. This method is convenient because the loading location and scope are visible in one Theme Builder setup. It is appropriate only when one shared flow is genuinely needed, such as a short announcement or identical request form.

Another documented option uses Divi Library and a small function in a child theme to output a saved library layout on pages without a global header or footer. This is already a technical configuration: it requires a backup, an understanding of where the child theme is located, and separate testing after updates. Do not move this approach into the main theme or insert code without a test environment. If a global display is not essential, it is safer to use a module on the specific page.

Careful Configuration of a Global Flow

If you have a child theme and have created a backup, you can use the official principle of outputting a library module through the wp_head hook. The value in the shortcode must be the ID of a specific library item, not an arbitrary number from an example. This snippet adapts the developer's documented approach: test it on a site copy first, then open several pages and check for duplicates.

function my_sitewide_divi_popup() {
    echo do_shortcode('[et_pb_section global_module="12345"][/et_pb_section]');
}
add_action('wp_head', 'my_sitewide_divi_popup');

Place it in the child theme's functions.php or in a reliable custom-snippets mechanism, replacing only 12345 with your own Divi Library ID. Test: the window should appear only on planned pages and only through the selected method. Rollback: remove the added snippet and clear the relevant cache. If you are not sure the library item should load on every page, do not use code; build the flow through a global Theme Builder template instead.

Before placing a module globally, list the page types where the flow is appropriate, such as blog posts, services, or a catalog. Then open one page of each type in turn and confirm that the module does not duplicate a local copy, open without a reason, or cover another important interface element. Global code or a template is convenient because it changes in one place, but that same centralization makes errors visible across a large part of the site immediately. Confirm a small scope first, then expand it deliberately.

A global modal layer is especially sensitive to display frequency. Do not combine On Page Load, repeated display, and triggers from multiple elements at once. First confirm one reason for opening, then add a second path only when it is genuinely needed. This makes it possible to explain to any site editor why the window appears and where to disable it.

Outcome check: if a visitor can open the needed window from the correct place, close it without losing their position, and does not see accidental duplicates on other pages, the configuration chain is built correctly.

Diagnostics: Why the Popup Does Not Open, Repeats, or Shows the Wrong Content

Most Divi Modal Popup issues look the same to visitors: a click does nothing, the wrong window opens, or the layer appears again after being closed. The causes, however, lie in different links of the chain. Do not change the trigger, design, and content all at once. Start with the observable symptom, perform one check, and then make one reversible fix.

The Button Can Be Clicked, but the Popup Does Not Appear

Possible cause: the trigger and module have different CSS ID values, a different element type is selected, or the module is placed in a way that prevents it from loading properly on the page. What to check: open the button in Advanced, copy its CSS ID, then open Divi Modal Popup and compare it character by character with the trigger field. Also verify that Element CSS ID is selected rather than a class or the module's own button.

Fix: assign one unique value, save the page, clear the cache used on the site, and test in a separate window. For triggers from another module, the official documentation also recommends moving the Divi Modal Popup module higher in the page's module list if the trigger does not fire. When to roll back: if moving it breaks the page structure, return the module to its prior location and create an isolated test copy instead of changing the live page blindly.

The Popup Opens but Immediately Appears Again

Symptom: the visitor closes the layer, but it returns after an action or refresh. Possible cause: the popup's unique ID and the triggering element ID overlap, or repeat display is enabled for an automatic mode. Divi Extended documentation specifically notes a case of reopening when using Element CSS ID and recommends checking both identifiers.

What to check: make sure Unique Modal ID and the element's CSS ID are not the same and are not duplicated on the page. Then check the repeat-display switch for page visits. Fix: give the window and element different meaningful names, disable repeat display for a promotional or supplementary offer, and save the change. When to roll back: if the window is intended for a mandatory system message, restore the repeat-display rule, but shorten the content and leave an obvious way to close it.

An Empty Window or the Wrong Layout Appears

Possible cause: the content type was changed, the library layout was deleted, or a copied module still references an old block. What to check: open the modal module body directly in Divi Builder, then check the public page. If Divi Library is used, open the relevant saved item and make sure it is published and contains the intended material.

Fix: temporarily replace the complex layout with one line of text. If it appears, the trigger connection itself is sound and only the content needs to be restored. Then restore the library layout or video one component at a time. When to roll back: if connecting the finished layout creates a conflict on a specific page, use simple local content until the cause of the incompatibility has been found.

The Form Is Visible but the Submission Is Not Confirmed

Symptom: the modal opens and form fields are visible, but visitors do not receive a clear confirmation after submitting or the test inquiry does not arrive where expected. Possible cause: the issue is not the fact that the window opens, but the form configuration, required fields, submission handling, or page environment. Do not begin by renaming IDs: they have already proven their role if the form appears in the correct modal layer.

What to check: send one safe test submission with distinctive text, check the message after submission and the agreed delivery channel. Then temporarily place the same form in a regular area of the test page and repeat only that test. Fix: if the form works outside the window, return it to the modal layer with minimal styling and test components one at a time; if it does not work there either, diagnose the form settings rather than the popup plugin. When to roll back: if the form is critical for inquiries, keep a standard accessible form on the page during testing and do not make the modal version the only way to get in touch.

Delay and Scroll Behavior Do Not Match Expectations

Symptom: the popup appears too early, too late, or seems random. Possible cause: the delay is considered in isolation from the page's actual speed, while the scroll position is selected without reference to content. What to check: repeat the flow in a new tab at a normal connection speed and observe which paragraph visitors have time to read before the display appears.

Fix: connect the trigger to a specific content boundary, and increase or decrease the delay based on observation rather than habit. Keep an automatic mode only where it provides a useful continuation of reading. When to roll back: if test users close the window before reading the page, return to a click-based trigger - it is more transparent and easier to explain.

The Trigger Is on the Page but Covered by Another Element

Symptom: the button or card area is visibly present, but clicking produces no expected outcome or works only in a small part of the element. What to check: temporarily assign the trigger to a simple separate button nearby and compare behavior on the public page. Then inspect the boundaries of the image, link, container, and other elements located beside the trigger. Fix: return the active area to one clear element and repeat the check after saving. When to roll back: if a structural change affects a working card, restore it and move the test to a page copy instead of trying to solve the issue by randomly changing the trigger type.

Visitors See an Older Version After a Change

Possible cause: the page, Divi, or optimization layer is serving a saved copy. What to check: open the address in a private window, compare it with the regular view, and make one test change to the modal heading. Fix: clear cache in the order used on that specific site and repeat the public-page test. When to roll back: if clearing cache does not affect the outcome, return to checking the actual module and its location rather than repeatedly changing cache settings.

Diagnostic rule: one symptom - one hypothesis - one check. This order preserves the working part of the flow and helps you quickly find the specific connection that was broken.

When Divi Modal Popup Is a Good Choice

This plugin is useful for a Divi page where supplementary material is needed at a specific moment: after clicking a card, while choosing a service, before watching a video, or in response to a deliberate visitor action. A strong outcome comes from a small number of parts: a unique identifier connection, one justified trigger, compact content, clear closing behavior, and testing on the public page.

Start with one flow on a test page, without mixing it with global display, complex animation, or several automatic modes. Once the button opens the correct window, the content matches its promise, and visitors can return to reading comfortably, you can apply the setup to other blocks. If this working order suits your site, you can download Divi Modal Popup and repeat it first on a page copy.

The key decision is editorial rather than technical: the window should help visitors continue an action, not demand attention for its own sake. With that approach, Divi Modal Popup remains a manageable Divi Builder element that is easier to maintain, test, and disable without rebuilding the entire page.

Divi Modal Popup Setup Video

This video complements the guide: a product video. Open it after completing the basic setup to compare the interface and sequence of actions.