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

hey everyone tim streifler here with divi live and i am super excited we have a really cool tutorial for you today how to create a pop-up in divi without using any plugins at all it's completely free and it relies on the bulk of the functionality that's already in divi so we don't have to add any huge scripts or anything like that so it's super lightweight solution so you probably know if you've been following divi life that we have several pop-up solutions so divi overlay is the number one pop-up builder for divi been around since 2017 and then we also have divi hacks that's now part of our product portfolio which has pop-up functionality built in and so plug-ins are great we love plug-ins we sell plug-ins and we still highly recommend both of those solutions for building pop-ups but sometimes depending on the circumstance you might not want to add any additional plugins and so this tutorial is going to show you how to do it and so without further ado let's go ahead and dive in and so you should be seeing my screen now so this is the tutorial and we're gonna be following along with it uh in today's tutorial and so uh you can follow along with me but um let's go ahead and just show you some examples really quick here of what it looks like and so this is on the page right here so this is a section and so what's really cool about this solution is you can easily turn any section on the page any row or any module into a pop-up and trigger it with a click so here's the row example here is a module so the tabs module with some customizations you can do a lightbox video you can have a a link be an image you can have a link be a text link so a lot of cool things you can do and again the bulk of the functionality is already built into divi divi has the lightbox functionality that's built into it for the gallery module and the image module and so we're essentially taking advantage of that we have a small script we are adding just to make it uh look for the the classes and stuff and to trigger it when we want it to but 98 of it is already built into diving so we're just taking advantage of it with this tutorial and so again i want to say this is really great for creating uh click trigger pop-ups if you need more features such as automatic pop-ups so triggering them on a time delay or when the user scrolls down a certain part of the page or exit intent or if you need things like scheduling or you want templates we definitely recommend divi overlays which is our product but again for just creating a quick pop-up right on the page this is the way to do it so super excited here to dive into this now this is kind of just an overall summary of what we are doing today the first thing is we're adding that custom script to enable our classes remember the bulk of the functionality is already built into divi with the lightbox functionality that divi uses in the gallery module in the image module here we're just enabling the classes so that when we add the click trigger it'll know what to do and what to pop up and then we have a little bit of custom css to add just a few lines and then we essentially we set the uh trigger element and then we set the content element so this is essentially saying hey i want this button here to pop open my pop-up and then this class right here is saying hey this is the content of the pop-up that i want you to pop up when this element is clicked so super easy super straightforward just a few small steps and so for this tutorial uh i have a local install using the divi roofer child theme it's one of our child themes from divi life it's actually a really great looking one one of my favorites that we've come out with uh recently and so we're going to be using this in the demonstration so as the tutorial states the first thing we want to do is we want to add the custom script to enable our pop-up classes and where we're going to add that to is the head of the website now the easiest way to add some code to the head of the website is to put it into divi theme options so i have this copied right here and i'm going over to divi theme options and i realize this is a little bit cut off for you but you get where i'm at here um okay so we're going to go to the integration tab and actually already have it pasted here from when i was getting set up for this but i'm just going to pretend i didn't now i'm going to paste it right here and then two things you want to do after you paste the code in this head box is you want to make sure that the header code is turned on so it'll be lit up blue like this and it'll say enabled and then the second thing you want to make sure you do is you hit save changes and wait till you see that green check mark okay perfect all right so we've added the code to divi theme options the the script which basically enables our classes now the second thing we want to do is add the css code and so going back to the tutorial here step two copy and paste the following css now you don't have to put this in the custom css box within divi theme options you can put it wherever you have a custom css so if you use a child theme and put all your code there then you can add that there and we'll have a link to our child theme guide in this tutorial in case you're confused what a divi child theme is but go ahead and copy that paste it into custom css and then again you want to make sure that you hit save there's no you don't have to make sure it's enabled like the integration tab it'll automatically be enabled you just have to make sure you hit save after you add that custom css code and so now we have done the first two steps so that's the hard part so technically you are touching code in this tutorial because you're copying pasting the script and the custom css but that's it we don't have to do anything else all now we have to do is add the classes to the modules and so i'm going to go ahead and head on over to actually i'm going to go open this i like to have two tabs open one for visual builder and then one for the front end so i can look at it on the front end and so what i'm going to do is i'm going to do a couple things one is i'm going to make this link here instead of saying cr services i'm going to make it say watch our video intro and then i'm going to have it do a pop-up video so that's the first thing i'm going to do and then the second thing i'm going to do is i'm going to turn this pricing table here into a pop-up and make the entire section be a pop-up and i'll add a button that says view our pricing and it'll trigger that pop-up so those are the two things we're going to do in this tutorial and so i'm going to go ahead and enable the visual builder and going back to the tutorial here we've done step one we've added the script we've done step two we've added the css now we just have to do step three and four the first one is to create your trigger and then add the custom css class so the trigger is what will trigger the pop-up when clicked so if you want a button that says trigger this pop-up well that button will be the trigger and then you add the custom css class so i'm going to go ahead and as i mentioned i'm going to change this link this link's going to be my trigger just so it makes a little more sense to me i'm going to say watch our video intro i'm just going to change that link there okay so that's that's our trigger now i need to add the class and so the class is lightbox dash trigger dash whatever you want right so i'm going to copy this whole thing here and essentially what we're going to do is we're going to replace value with any number of words so you can just do simple numbers and have it one two three four or you can actually add a word i like to add a word just so it's easy to to match it with the content which will be the next step so i'm going to just call this video intro right so lightbox trigger video intro and i just need to make sure that this right here matches the pop-up content so it'll know what to pop up when watch our video intro is clicked so i'm going to go ahead and save this so that's step three step three is done now we need to do step four step four is create your pop-up content and add the corresponding css class and so basically what do you want to pop up when that trigger is clicked and so as i mentioned i'm going to make this trigger a video now it doesn't really matter where you put the pop-up content because it's actually it's going to be hidden on the front end of the site until it's clicked so you can have it at the bottom you can have it right underneath the trigger it doesn't matter it's going to show up in the visual builder which might be a little confusing you just have to remember on the front end of the site it's it's going to not be there at all until that trigger is clicked so i'm going to go ahead and i'm going to add it right here and i'm going to show you two ways of doing this for a video the second way is a little bit better and i'm going to show you why but we're going to go ahead and just do this first method first okay let's do this one second here all right i'm just sick of seeing that video here i'm just gonna grab a url for a different video one of my own videos okay so i'm going to go ahead and insert that new video insert into post okay so now i have a video module with this video now i'm going to just do a couple things one is i'm going to set a maxed width of 800 pixels and then i'm going to make sure it's lined up centered and you're not going to see these changes here because it's within the column but basically because we're only going to pop open the module in this first method i'm showing you it doesn't really matter what the what column it's in what row it's in what section it's in because it's essentially going to ignore all that and it's just going to pop open the module so i'm going to make sure i have the right parameters here okay so that's that now i just need to add the corresponding class so step four is create the pop-up content we just did that and then part two is add the corresponding css class so it's light box content and then the value now remember lightbox trigger is what we put for the trigger and then we put video intro for the value so i'm going to do the same thing here just with lightbox content i'm going to change value with video intro and maybe obvious but you have to make sure that it's spelled exactly the same as you have it in the trigger has to match exactly otherwise it won't sync up and then you have to hit save so just to confirm here you can see lightbox trigger video intro okay great now i'm going to go ahead and save this in the visual builder now again it looks really stupid right here in the column all tiny like that but it's going to be completely ignored on the front end and it's only going to show up when we click that trigger so refreshing the page here okay watch our video intro click that boom now i mentioned there's i have two methods i'm going to show you really quickly for adding something like this for a video and the first one was just adding a video module and adding that class to the module itself and it's a simple way to do it however there's one drawback the plugin automatically adds a closed class i don't know if you can see it here it's really small it's actually kind of overlapping the video because it does it within the content and so there's not really an easy way to change the alignment unless you want to dig into the css so a workaround is to basically add the content to a row and then have the video inside the row so then there's the closing cross there will be outside of the video contained in the row and the row is not going to have a background so so that's what that looks like but pretty slick we just created a pop-up without installing any plugins just copying and pasting a little bit of code and some custom classes so super easy now i'm going to come back to the visual builder here i'm just going to add a row and i'm just going to move this video module into the row and then i'm going to open up this video module and i'm going to take this i'm going to copy it i'm going to remove it from here and i'm going to add it to here instead because i want this that way you'll see the close outside of the video and so basically it's going to pop open the same thing now i'm going to make this a little bit smaller because i have a max width on my video module of 800 pixels i'm going to just do a little bit bigger than that let's do a max width of 900. that way the close button will be a little bit closer so hover over here we can see kind of visualize what it's going to look like i think that's going to look really good so i'm going to go ahead and hit save and then we'll wait for that to save there let's refresh this front end page here okay so let's take a look at that boom so now you can see the close is outside of the video and it doesn't overlap the share button for this youtube video so it makes it just a little bit uh easier to to see and so you can see how easy it is to make a module or a row be a pop-up using this method so super super cool super easy so i'm going to close that we'll leave that example and then let's go on to the second one which is turning this uh price section into a pop-up so going back here we've already added so we already have one working pop-up on the page now we're gonna add a second one we don't need to repeat steps one and two they're already done don't need to add the classes and add the script again it's already on there and so now we can essentially just repeat step three and four to add more pop-ups to the page so let's go ahead and create that trigger so i'm gonna make this entire section be a pop-up i'm gonna make it a little bit smaller so it doesn't fill the width um and so for the trigger i'm gonna add a section above it just with a simple button that says uh view our pricing so i'm gonna go over here and i'm gonna oops close that let's go ahead and copy this module here and i'm going to add it right here paste module let's open that up let's center align it let's change the content and say view our pricing now i'm just going to go ahead and say open there just because the divi button module really wants us to add a link and then so i'm adding what's called an anchor link it's not really going to anchor anywhere it's just going to make sure it doesn't jump to the top of the page okay so now we're going to add the css class to make this a click trigger so again coming back to our blog post here lightbox trigger value let's go ahead and copy that to the class and then we'll replace value with pricing we'll keep it nice and simple so that's step three now step four is making this entire section become our pop-up make sure i open the right one yeah okay so i'm gonna make this entire section beer pop up here so let's go ahead and get that class here so lightbox content copy that paste it here and then we're going to swap value with pricing so it matches up with our trigger now one thing i want to do is i don't want this entire section to fill the width of the screen so i'm going to actually make this smaller so i'm going to go into sizing and i'm going to say max width let's say 1440 okay and then let's make it center aligned so that way we'll have the pricing table we'll have what's above it and then we'll have a little bit of space let's see that might be a little more space than i need actually that's going to look okay because i want to give it some have some nice padding there so i'm going to go ahead and hit save and then let's go ahead and look at that on the front end let's refresh this now this is a local website that i'm using using flywheel local we have a tutorial on divi life.com how to set up flywheel local but because i'm running the screen sharing and the screen recording and stuff it's a little bit slower than normal so thank you for your patience okay so you'll notice this section is now completely hidden we replace it with this button but as soon as we click now it appears and so you can see i made it smaller so that it wouldn't cover the full width to kind of give it a more classic pop-up feel you can see that close button there that looks really good i really like that now obviously you can come in here and you can have fun with it and make it look however you want now i'm going to do a couple things here just to get a little bit fancy and i'm going to give this a nice border radius of 30 pixels actually let's do let's try 20. okay 20 pixels and then i'm gonna do a nice box shadow i'm not sure that's going to actually show up yeah that's pretty good all right let's go ahead and see what that looks like here okay i'm gonna go ahead and refresh here something about pop-ups with rounded corners just makes it feel a little more like a nice pop-up all right so that's what it looks like that looks really good i really like the way that that came out so super happy with that now a couple of things here uh i'm not going to necessarily show you in this tutorial but you'll notice if you keep scrolling down here we have an optional thing you can do which is change the background overlay and so by default i'm fairly certain it'll just be solid black unless you have another gallery on the page and so we actually have a gallery right here where we set this overlay to be this color here and so it actually inherited that color there as well and so um but if you don't have a gallery i think it should be just a solid black and so if you wanted to change that so that it looks more like something like this well we have some custom css you can pop in and so you just pop this in here and you can change this color value here so rgb and then you can make that be whatever you want so super simple it makes it a little bit better so you can kind of see what's behind the page makes it feel more like a pop-up rather than it just a solid background there so as i mentioned this tutorial is great for when you want a click triggered pop-up that is on your page but if you want oops if you want more features so we kind of have two different options here if you want more features to be able to do click triggers and stuff like that or i'm sorry automatic triggers like time delay exit intent stuff like that then check out divi overlays from divilife.com uh you can check out the demo which i'm on now which is divi popup.com and you can see uh everything that we have that's built into the uh into the plug-in here and so all of these are templates that you're seeing here which is really cool so if you want uh pop-up templates the ability to to customize the close button to be able to do scheduling you can see a list of all the features here on divi popup.com um we have the ability to do that choose what pages you want on uh divi popup.com will show you all of the features and so that is the the ultimate pop-up solution for divi and we're close to releasing divi overlays 3.0 which is going to have even more features we invented the page builder powered pop-up when we released divi overlays back in 2017. nothing like it existed it was a groundbreaking plug-in and we're about to reinvent the pop-up plug-in again for the second time uh with divi overlays 3.0 so stay tuned for that um and then uh another option for pop-ups so uh divi hacks uh which is a plugin that we acquired last year uh has the pop-up functionality that i just showed you here in the tutorial has it built into divi hack so you don't have to copy and paste the code you just add your classes and automatically create pop-ups but that's just one feature of the hundreds of features and customizations that are built into divi hacks and so you can do really cool things like this on this page which we call this custom reveals uh you can use that uh with divi hacks so lots of really cool features um with the divi hacks plug-in and if you want both divi pop-up and divi hacks and we definitely recommend checking out our all-access pass from divi life which gives you all of our products uh 60 plus products we're about to launch a few groundbreaking new products as well and you get access to everything in that membership uh so i hope you found this uh tutorial helpful uh definitely love everything about uh pop-ups and uh we've been doing pop-ups for a while so we've gotten pretty good at uh what's possible and uh yeah you essentially have three different methods that i just told you about in this video you have the tutorial doing it with the code without having to install any plugins you have divi hacks which is essentially the same thing just it's in the plugin you don't have to add the code and then the third which is uh divi overlays which is the ultimate pop-up solution for divi so hopefully you found this helpful let us know if you have any questions in the comments and we will see you on the next tutorial take care bye

Channel: Divi Life

Views: 5,859

Keywords: divi popup, divi, Divi Theme, divi tutorial, popup divi, popups for divi, popup without plugin, divi life, Tim Strifler, Elegant Themes, divi builder popup, divi lightbox, divi modal

Id: 6MzT0wWU13M

Length: 25min 22sec (1522 seconds)

Published: Mon Jun 21 2021