[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

How To Create a Divi Modal Popup

Mark Hendriksen | April 12, 2021 | 13 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

In this tutorial, we are going to build a modal Divi popup without the need for any Divi plugin. You can trigger this modal with any button or link.

You can find a demo here:

This modal is fully customizable with the visual builder.

Step 1: Download the modal layout pack

You can download the JSON files here:

After downloading extract the zip folder Divi Modal inside you will find the JSON file that you need to import in the next step.

Step 2: Import the modal

Go to Divi > Divi Library and click on Import & Export

Now import the file Divi Modal Popup.json.

Import Divi modal

After importing the json file go to Divi > Theme Builder.

Click on Add Global Footer > Build Global Footer > Build From Scratch.

Click on add global footer
  • Click on the 3 dots to expand the bottom bar.
  • Then click on Load From Library.
  • Switch to the Your Saved Layouts Tab
  • Choose Modal Slide-in
Place Divi modal popup in theme builder

Important: If you already have content here for example a custom footer then make sure to uncheck Replace existing content. Otherwise, it will replace your current content. You will only see this option if you have content in the Global Footer.

replace existing content

Note: If you have a footer with widgets then it will be gone when you enable the Global Footer and you will need to create a new footer here.

After importing the modal you can click on save and leave this screen. When you are back in the Theme Builder make sure to click on Save Changes.

Trigger the Divi modal

You can trigger this modal from any page with a button or link. Open any page and place a button module.

For the link field fill in #open.

Modal link trigger

Then go to the advanced tab and fill in button_trigger as a class.

Modal button trigger class

Disable modal in visual builder

When you are in the visual builder the modal is opened. You might want to disable this when working on the rest of your site. To do this follow these steps:

Go to Divi > Theme Builder > Global Footer.

Switch to wireframe view and open the CSS code module.

Disable Divi modal in visual builder

This is the part of the code that enables the modal in the visual builder.

CSS modal

To disable this you need to comment it out. Above the code, you will see this: /**/ copy */ and past it below the code.

comment out css for modal

When you see the color turned out grey the code is now disabled.

If you have any questions about this Divi modal please let me know in the comments below.

You Might Also Like…

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

13 thoughts on “How To Create a Divi Modal Popup”

  1. Mark,
    This is a great popup. So many possibilities for its use (mobile menus, extra page menus/content), and without a plugin. I’ve used many different popup plugins for Divi, but this works the best with easy-to-follow instructions to update all parts.

    Reply
  2. Hello,

    Thanks a lot, very nice layout !
    Here the modal opens behind the menu, so the top part is hidden. I tried to modify the z-index, but without success… Any idea ?

    Cheers

    Reply
  3. Hello Mark,

    Thanks for the great modal ! Is there a way to keep the bottom blue module and the “Get in touch” text on mobile screens ?

    Thanks ! Maarten

    Reply
  4. Hello,

    Thanks for letting me using it.

    However I do struggle on mobile when I attach the Modal to a menu item. For some reason it won’t open the modal, maybe because the menu is also folded open.

    Do you know a way to fix it?

    Cheers!

    Reply

Leave a Comment

12 Shares
Share12
Pin
Tweet