How to Create a Popup in Divi WITHOUT a Plugin (Easiest Method!) 🥳

[@DiviLife]

🚨We have an updated version of this tutorial! The code is a bit different and more reliable. It's also a bit easier to implement too. The new tutorial also has a free popup layout that you can download :) kzbin.info/www/bejne/foSXiqyjidaNd80

[@RalfTenbrink-dj9pu]

Great video, Worked a charm and so easy. Great for those simple popups.

[@dc8037]

One problem, the video does not stop sound when esc. or closed. Is there a fix for this? Thank You for your help.

[@maxwellmuhanda7940]

I have used this on my website and loved this method huge thanks

[@jonasthompson3852]

This worked great on creating popups on the homepage of my website, but when I tried to use the same code and function on a different page of my website, it didn't work. The portion I created on the subpage showed up on the actual website, it wasn't hidden in the background. Any ideas on how to fix this? Thanks.

[@samuelmoseley2368]

I want to say a huge thank you for this, I've been putting off doing this because I couldn't find the code I needed. Thank you so much, very easy to follow!

[@DiviLife]

You're welcome! I'm glad it was helpful for you :)

[@SebastianLoureiro]

Hello! Not Working,, “Defer jQuery And jQuery Migrate” performance feature is turned off,,

[@JanineMKartist]

can this work on a button within a blurb module? if so where do I place the code and ss class for that function? an I use the code from this tutorial?

[@jakubkrivohlavy9012]

Soo cool, but i created text inside a row and the text is bigger than the mobile screen and there appears no scrolling option and it wasnt sticky. I mean i can do the sticky but dont know what to do about the scrolling option. Some special css?

[@kitziasalgado]

hiiii would you please update this tutorial?? it's not working even with the “Defer jQuery And jQuery Migrate” off.

[@kellyeldridge6319]

This works great thank you😁

[@TheLang0lier]

Great, thank you! Is there a way to trigger this from a specific word in a text module?

[@zetmarie79]

Hi, this is a great solution, except that the pop-up rows are visible on the front end. They disappear when I disable the 'dynamic css' option, but I have the feeling that this really slows down the website. Is this code still compatible for the current version of Divi 4.22.2?

[@kwajongenscommunicatie6201]

I used this in a footer, revealing a section on a text link. It works on one page. But on the other pages, the section is already revealed and also goes somewhere to completely above with a cross sign to close on a weird spot. So all is messed up. Should there be something in the code to 'reset' on every page?? This now does not work in a footer...

[@sergekutilin3140]

Why this popup works only on the homepage? Unfortunately I can't use this popup on other pages only on the homepage. Any idea how to fix it?

[@melissah2908]

Is it possible to have the pop up be an image gallery?

[@DiviLife]

Yep! :)

[@MMIStudios]

I want to do this with the buttons on the full-width header module... Is this possible? I can't see a way to assign classes to those buttons.

[@infosharellc2760]

Fabulous Tutorial.............thanks Tim

[@DiviLife]

You're welcome! I'm glad you liked it :)

[@sergekutilin3140]

Many thanks!!! It always was a big problem)))

[@expertwebdesign358]

Has this stopped working since the DIVI performance update? Thanks

[@DiviLife]

It did, but we just updated the tutorial with the fix! All you need to do is go to step one in the tutorial and re-copy the code and paste it again into the Integration tab. That code will now load the Magnific Popup script and styling that is needed for the popup to work correctly. Let me know if it works for you! :)

[@wbrooseboom]

Great solution! However, I have two remaining questions. 1. The button styling of the form module is not working in the popup. I read something about clearing cache and enabling in-line styling but that didn't solve it. Any other suggestions? 2. Is there a way to smooth the popup transition a little better? Thanks so far.

[@whartons89]

Doesn't seem to work anymore sadly. :(

[@tightbuddy]

Thank you for this nice tutorial. It is working fine on the Home page but not on other pages. Any idea why?

[@puszkatech]

Does not work with divi button :(

[@danielherrman9228]

Have you found a solution already? Thanks in advance!!

[@puszkatech]

@@danielherrman9228 I did not :(

[@justinjuk]

I just placed a gallery module on the page, then in visibility disabled the gallery module on Mobile, Tablet and Desktop. It just needs to be on the page but not visible. That fixed it for me.

[@Digi.B]

I followed every step but when clicking the trigger button only a blank black page popped up with the close button. The only way for it to show is when I right-click the blank black popup and choose the developer "inspect", suddenly it shows. I tried to leave this comment on your Divi hacks page but my comment never shows

[@lwinglewich]

Did this change? now it doesnt hide the pop up when the page loads and when you click the link it goes up into the header

[@DiviLife]

Hi Levi, can you make sure the “Defer jQuery And jQuery Migrate” performance feature is turned off under Divi Theme Options > General > Performance? Let me know if that solves it!

[@federicadefraia6894]

Great tutorial! To me works perfectly, but only on desktop. It doesn't work from mobile D:? There is anything I can do?

[@kamishlakhani5018]

Hey, thanks a lot for putting out this information! Really helped me, can you also tell me how to connect a pop-up button on woo-commerce checkout button. I want to add a 2 checker form once the user clicks place order

[@IEIOit]

thank you for the tutorial, unfortunately it's not working on Divi 4.16.0, of course with "Defer jQuery And jQuery Migrate" disabled

[@MarwanMahdyMarketing]

you have no idea how helpful you are, thank you, you are also super handsome

[@MohamedSOUMANE]

thx very much broo... can i ask u a question? is there other tutorials for do things withouts plugins on Divi! thw again!

[@mamollo95]

Is this compatible with DIVI Dynamic CSS?

[@thestorytellerpk]

it does not work even your new fix of adding added couple of lines.. I am using new version

[@DiviLife]

Did you clear all caches including the Divi Static CSS Generation cache and your browser cache?

[@thestorytellerpk]

@@DiviLife thanks, issue resolved

[@mamollo95]

@@thestorytellerpk How did you fix it - it doesnt work for me

[@thestorytellerpk]

@@mamollo95 u need to turn of css js settings in divi theme

[@mamollo95]

@@thestorytellerpk Now it works but i dont have autoplay for video. and if i wurn of window with video without stopping it 0 the sound still goes

[@shafiqmahmud6511]

It doesn't work when I logged out from my dashboard. Strange!!!

[@DavePettittVoiceOver]

This is a great tutorial, man. Will all this new code pretty much eliminate all the changes Divi has made to slim down its loading time?

[@DiviLife]

Thank you, glad you like it! :) And great question. So this tutorial actually utilizes code that is already a part of Divi. We're not adding any new Javascript libraries or anything. Before Divi's latest update, the popup Javascript library included in Divi that powers this was being added on every page no matter what. Now with Divi 4.10+, it doesn't automatically load the library on every page. It only loads the library when it's needed by a module, which is the Gallery module or the Image module when Lightbox is enabled. So this tutorial will make sure the popup library is activated. So no, this definitely does not eliminate Divi's performance enhancement at all. :)

[@DavePettittVoiceOver]

@@DiviLife That’s great to hear. I’ve been using another standalone plugin for this and have dozens of instances of it on my site so I hate the idea of having to replace everything. Another work around that I’ve found in the meantime is to add a gallery to the page. That way the script is loaded on the page anyway. If you ever decide to develop a video lightbox module I will buy the hell out of that. 😉 Your site and plugins are definitely on my radar.

[@alexViera0314]

Anyone knows how to animate the popup?

[@AlexTveit]

Hey! Great tutorial. Do you know if there's an issue getting a button to initiate the popup, if the module holds a code pointing to a videoask? For some reason the lightbox popup doesn't even popup. I have added the #open to the Link section, but still doesn't trigger.

[@justinjuk]

This is really cool! However, when using a photo as a trigger to pop open a video module, it won't trigger the module to open unless I select the "Open in Lightbox" button for the link. But when it pops open the video module, it places the thumbnail image trigger in front of the video module. UPDATE: By placing a gallery module on the same page (empty without images), it works perfectly.

[@jaceyrebekaleong521]

why is the code different

[@soul.rebel1986]

I certainly hope this works for me because I can't get the overlays to work.

[@DiviLife]

You should open a support ticket! 🙂

[@dev0_0]

That was Nice!

[@jamessmith-qy7fk]

That was a Great video, I love your Divi channel. I do have 3 questions: 1. Isn't better to paste the code in the Child theme, rather than in Divi Theme Options in the Integration tab or do we Only paste CSS code in the child theme? 2. If we add all this Extra code hurt the website? in terms of website speed? 3. Didn't Google say that they don't like Pop-Up's and it will hurt Ranking? Thank you - keep uploading more great Divi tutorials.

[@DiviLife]

Thank you, James! I would recommend just keeping it in the integration tab. You could put it in a child theme but it wouldn't provide any benefit, and you would need to properly enqueue the javascript file which is pretty technical. There's no downside to keeping it in the integration tab. :) A lot of extra code can slow down your site if you're not properly optimizing, however this tutorial is very little code. The bulk of the functionality is already built into Divi so the small amount of code needed is simply for telling Divi what to popup up. The pop up code itself is already in Divi. Regarding speed optimization though, definitely check out our new tutorial on this here: kzbin.info/www/bejne/np2znXdmi8lgqbM Google has said that they don't like popups but they're not referring to click triggered popups like this. The popups they don't like are when you land on a page and a popup immediately triggers automatically and blocks the content. It provides a bad user experience and keeps the user from getting what they came there for. But a click triggered popup like in this tutorial is actually great for user experience because it provides the user with more content without having to load a new page. To be clear though, not all automatically triggered popups are bad. It's just when it keeps the user from reading the content when immediately landing on your page. A lot of smart marketers have tested and confirmed that automatically triggered popups won't affect search rankings as long as they're not immediately triggering and blocking the content.

[@vitordrumondd]

TOP my brother, thank

[@mamollo95]

Not working for me(

[@DiviLife]

Make sure the “Defer jQuery And jQuery Migrate” performance feature is turned off under Divi Theme Options > General > Performance.

[@justinjuk]

I just placed a gallery module on the page, then in visibility disabled the gallery module on Mobile, Tablet and Desktop. It just needs to be on the page but not visible. That fixed it for me.

[@chrisbenn]

It seems unsessery complicated?! WHy is there not just a "popup" check box somewhere?! And why is the popup in the video stuttering so much? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA!

[@osamasaid3534]

you will need to update the video cause it's not working at all.

[@WannaBeMuzkant]

not working!

[@DiviLife]

Can you try turning off the defer Jquery option in Divi's Performance settings? Let us know if that solves it for you :)

[@WannaBeMuzkant]

@@DiviLife - I'm trying now in that way....but still not working...also clear cache in Divi and browser....popups hates me :)

[@WannaBeMuzkant]

When I click trigger just write to me.." Loading...." on bottom of page.......but "content" (section) its still visible on page

[@maximedutourne2450]

@@WannaBeMuzkant did you fix it finally ?

[@justinjuk]

I just placed a gallery module on the page, then in visibility disabled the gallery module on Mobile, Tablet and Desktop. It just needs to be on the page but not visible. That fixed it for me.

[@giannisiliopoulos]

Not working correctly...😑😑

[@rhjiv4]

Tell me less about how excited you are and focus more useful examples.

[@DiviLife]

Hahaha. What examples would you have preferred to see? I thought two realistic examples was sufficient.