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.
After importing the json file go to Divi > Theme Builder.
Click on Add Global Footer > Build Global Footer > Build From Scratch.
- 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
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.
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.
Then go to the advanced tab and fill in button_trigger as a 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.
This is the part of the code that enables the modal in the visual builder.
To disable this you need to comment it out. Above the code, you will see this: /**/ copy */ and past it below the code.
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.
mine is not responding to the click…
Hi,
Did you add in the link field #open and in the class field button_trigger to your button?
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.
Yep tons of possibilities
how do you make it run at page_load?
That requires some custom jQuery to do.
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
OK, my mistake, I put the layout in the Body. In the footer it works perfectly. Sorry !
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
Hi Maarten,
That is possibly but only with custom code. Unfortunately I have not that one ready.
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!
Hi Bram,
And if you try to use it on a custom menu link?
Hello Mark,
I actually am using it on a custom menu link.
url: #open
Navigation label: contact
CSS Classes: button_trigger
Thanks in advance.