Divi Popup, No Plugins (Tutorial + Demo)

Hello Divi.

So, You Want a Simple Popup Without All the Bloat?

Most of the time when I need to use a popup I use the Popups for Divi plugin, but the last time I installed it, I got a JavaScript conflict with a critical plugin 🙁 So… I had to figure out a work around. I have used several popup scripts before, but I wanted to keep my website as optimized as possible.

Since it is fast, convenient, and I know Divi uses it too, I decided to use Magnific Popup JavaScript.

Popup Demo

Step 1: JavaScript

[et_pb_dmb_code_snippet code=”PHNjcmlwdD4KCWpRdWVyeSggZG9jdW1lbnQgKS5yZWFkeShmdW5jdGlvbigkKSB7CgkJJCgnLnlvdXItY2xhc3MnKS5tYWduaWZpY1BvcHVwKHsKCQkJdHlwZTogJ2lubGluZScKCQl9KTsKCX0pCjwvc2NyaXB0Pg==” style=”xcode” linenums=”on” copy_button=”on” _builder_version=”4.9.1″ _module_preset=”default” body_font=”||||||||” background_color=”#FFFFFF”]PHNjcmlwdD4KCWpRdWVyeSggZG9jdW1lbnQgKS5yZWFkeShmdW5jdGlvbigkKSB7CgkJJCgnLnlvdXItY2xhc3MnKS5tYWduaWZpY1BvcHVwKHsKCQkJdHlwZTogJ2lubGluZScKCQl9KTsKCX0pCjwvc2NyaXB0Pg==[/et_pb_dmb_code_snippet]



PLACEMENT

The JavaScript can be placed anywhere if it is wrapped in “document ready”, but I find the easiest/best place is in the Divi Theme Settings > Integrations > Head Code Area.

FYI: using function($) allows the $ shorthand within the function

Step 2: Container/Target

In my example I use a section block to hold the content. You should be able to place whatever type of module you want inside your section as the content.

Style your section as desired for the wrapper of the content. Section styling does not affect the overlay.



PLACEMENT

You can place your popup section container anywhere, but I think it only makes sense to added it to the end of the page. Be sure to give it an admin label to easily identify it later.

For global pop-ups you can create a global footer using Divi Theme Builder.

Step 3: CSS

You’ll need to add the following classes to your container. I’m using a section module, but it should work with any HTML element.

[et_pb_dmb_code_snippet title=”TARGET CONTAINER ID:” code=”cG9wdXAtZGVtbw==” language=”html” copy_button=”on” copy_button_tooltip=”copy/paste” _builder_version=”4.9.1″ _module_preset=”default” background_color=”#FFFFFF”]cG9wdXAtZGVtbw==[/et_pb_dmb_code_snippet][et_pb_dmb_code_snippet title=”TARGET CONTAINER CSS CLASSES:” code=”bWZwLWhpZGU=” language=”html” copy_button=”on” copy_button_tooltip=”copy/paste” _builder_version=”4.9.1″ _module_preset=”default” background_color=”#FFFFFF”]bWZwLWhpZGU=[/et_pb_dmb_code_snippet]



CSS TIP

If your having trouble, make sure you’re not including the period (.) or hash (#) in the fields. Avoid the facepalm 🙂

Step 4: Trigger

To create a trigger, you will need 3 things. The target for the href, the selector class to disable smooth scroll and the selector class to trigger Magnific popup script.

There are other ways to trigger a Magnific popup (see documentation).

[et_pb_dmb_code_snippet title=”Most Basic Text Link Usage:” code=”PGEgaHJlZj0iI3BvcHVwLWRlbW8iIGNsYXNzPSJ5b3VyLWNsYXNzIj5MSU5LIFRFWFQgSEVSRTwvYT4=” language=”html” style=”xcode” _builder_version=”4.9.1″ _module_preset=”default” background_color=”#FFFFFF” custom_margin=”||30px|||” hover_enabled=”0″ copy_button=”on” sticky_enabled=”0″]PGEgaHJlZj0iI3BvcHVwLWRlbW8iIGNsYXNzPSJ5b3VyLWNsYXNzIj5MSU5LIFRFWFQgSEVSRTwvYT4=[/et_pb_dmb_code_snippet]

Button Module Usage:

FYI: Figuring out how to disable smooth scroll was a huge pain is the ass. After a while I gave up and contact support for that tidbit.

Aside: Divi support is very good, if you don’t have a current license, I highly recommend it.

There you have it. A simple, straightforward way to add a popup using Divi and Magnific Popup without additional plugins or scripts.

To hire me for a custom implementation or one-on-one support, contact me.

More tutorials to follow. Make your requests below…