How to Create Divi Popup Modules From Scratch

Popups remain one of the highest-converting UI patterns in web design — but most WordPress builders reach for a bloated plugin the moment they need one. If you're using the Divi theme, you already have everything you need to build elegant, lightweight Divi popup modules without installing anything extra. This guide walks you through the complete process using Divi's native tools, custom CSS, and a small jQuery snippet.

Why Build Popup Modules Natively in Divi?

Third-party popup plugins like OptinMonster or Popup Maker are powerful, but they add HTTP requests, database overhead, and often conflict with Divi's Visual Builder. Building your own Divi popup modules keeps your stack lean, gives you pixel-perfect design control, and integrates seamlessly with Divi's section and row system. You also avoid recurring subscription costs for features you can replicate in under 30 minutes.

Step 1 — Build the Popup Structure in the Divi Builder

Start by opening any page in the Divi Visual Builder. Add a new Regular Section and give it a unique CSS ID — for example, divi-popup-overlay. Inside that section, add a one-column row, then drop in whatever modules you need: a Text module for copy, a Button module for the CTA, and optionally an Image or Lottie module for visual flair.

Create a second, small Text or Button module elsewhere on the page — this will be your trigger element. Give it the CSS class popup-trigger. The popup section itself should receive the CSS class popup-box in addition to its ID.

Step 2 — Style the Overlay and Modal with Custom CSS

Navigate to Divi → Theme Options → Custom CSS (or use the page-level CSS panel in the builder). Paste the following styles to transform your section into a hidden, centered modal overlay:

#divi-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 99999;
  justify-content: center;
  align-items: center;
}

#divi-popup-overlay.is-open {
  display: flex;
}

#divi-popup-overlay .et_pb_row {
  background: #ffffff;
  border-radius: 10px;
  padding: 40px;
  max-width: 560px;
  width: 90%;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.popup-close {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 22px;
  cursor: pointer;
  color: #555;
  background: none;
  border: none;
  line-height: 1;
}

This approach uses position: fixed and inset: 0 to cover the entire viewport, with flexbox centering the inner modal card. The is-open class is what JavaScript will toggle.

Step 3 — Add the jQuery Trigger Logic

Divi ships with jQuery loaded on every page, so you don't need to enqueue anything extra. Go to Divi → Theme Options → Integration → Add code to the <body> and insert this script:

<script>
jQuery(document).ready(function($) {
  // Open popup
  $('.popup-trigger').on('click', function(e) {
    e.preventDefault();
    $('#divi-popup-overlay').addClass('is-open');
    $('body').css('overflow', 'hidden');
  });

  // Close on button
  $(document).on('click', '.popup-close', function() {
    $('#divi-popup-overlay').removeClass('is-open');
    $('body').css('overflow', '');
  });

  // Close on overlay click
  $('#divi-popup-overlay').on('click', function(e) {
    if ($(e.target).is('#divi-popup-overlay')) {
      $(this).removeClass('is-open');
      $('body').css('overflow', '');
    }
  });
});
</script>

Add a close button inside your popup row by using a Code module containing <button class="popup-close">×</button>. This gives users a clear exit path — critical for UX and bounce rate.

Step 4 — Make It Responsive

Divi's built-in responsive controls handle most of the heavy lifting, but your popup CSS needs a media query to ensure the modal card doesn't overflow on phones. Add this beneath your existing popup styles:

@media (max-width: 600px) {
  #divi-popup-overlay .et_pb_row {
    padding: 24px 18px;
    border-radius: 6px;
  }
}

Also switch any fixed pixel widths inside your Divi modules to percentage-based values using the builder's responsive toggles. Test on actual devices, not just the browser resize tool.

Step 5 — Use Divi Conditions for Smarter Targeting

If you're on Divi 4.x or later, the Divi Conditions feature (under Display Conditions in module settings) lets you show or hide modules based on login state, post type, date, or referrer. You can combine this with your Divi popup modules setup to display exit-intent offers only to logged-out users, or show a "Members Only" modal for gated content — all without a single extra plugin.

For timed popups, extend the jQuery snippet with a setTimeout call that adds the is-open class after a defined delay, giving visitors a few seconds to engage with your content before the popup appears.

Keeping Your Popup Accessible and Conversion-Ready

Accessibility is often the first casualty of custom popup builds. Make sure your modal receives focus when opened by adding $('#divi-popup-overlay').find('h2, p, button').first().focus(); after the class toggle. Add aria-modal="true" and role="dialog" to the popup section via Divi's HTML Attributes field. These small additions make your Divi popup modules compliant with WCAG 2.1 guidelines and improve the experience for keyboard and screen-reader users.

Finally, keep your popup content focused: one headline, one value proposition, one call-to-action. Elegant Themes' own design philosophy emphasizes clarity over complexity, and that principle applies just as much to your conversion overlays as it does to your page layouts.