How to create a POPUP IN DIVI website (a Divi Theme Popup Box)

today I'm going to show you can create a very simple easy pop-up like this one when using the Divi theme for WordPress the first thing we need to do is go down into our dashboard go to plugins add new plugin search for Divi pop-up and you'll see here pop-ups for Divi we install that activate it and now we're ready to build our pop-up so I'm going to go ahead and go to my home page I'm going to enable the visual Builder what we're going to want to do is actually just create a row for the pop-up now instead of going through and creating a whole design for you I'm just going to use this row here as an example get started today I'm going to click on this and go into the section settings and I'll show you first of all let's go into the row settings if I click on the Cog here I go to Advanced there's nothing here about a pop-up because it needs to actually be a section so I just want to show you that it doesn't actually work on rows but we go here to our section which is the Blue Area click the Cog you see here there's a pop-up drag this out there's a pop-up section all I do is click on that pop-up go to General and turn that into a pop-up and it's now officially a pop-up I can say click pop or something like that so pop-up ID is Click pop and we get a few behaviors associated with this we can go down here and we can close on background click or maybe you actually have to have the uh the close button available make sure we close any other pop-ups in case we create more than one another thing we can do is enable exit intent I'm going to come back to that the close button of course we're going to show that we've also got the closing background click so that way they don't actually have to click the close button but if you really want to kind of trap them in there you can turn that off and just have the close button and the button color is sort of light or dark and I'm going to basically basically the rest is pretty much the default Shadow show the loader so if you need it to load we'll turn that on but that's basically what we've got set up I've got here click pop I'm going to click OK and what I'm going to do now is go up the top here and I'm going to actually just go to my COG and I'm going to change one of these buttons or it says contact us it has button two I'm going to go down to my link for button two change it to Hash Hash click pop click OK and then exit the visual Builder and now when I click contact us we get our pop-up it has shown the loader here which is kind of it's actually a little bit buggy it's actually for some reason showing but uh you do get the option to turn that off now keep in mind this is a section so I can't edit this like any other Divi area so I close this off go back in scroll down and go back into my section and click the Cog and keeping in mind when I go to this pop-up section I can always turn this off I want to turn it back into a row I'm going to keep this as click click pop but I'm also going to turn off the loader because I don't know why it was sort of being a little bit funny and the close buttons there which is good however we want this to be exit intent as well so someone goes to leave the website it's actually going to trigger that pop-up as well exit is 10 exit intent is great because it doesn't get in front of the the visitor and that way it will actually only pop up when someone tries to leave so it's a little bit less annoying but still pretty effective now another thing we can do I'm going to just quickly go to design for a second and go to border I'm going to click this color and actually add a border to this pop-up and like I said I can go in and add any modules in here I want to I can turn this into columns if I want to make this two columns I can add an image in here you have the full flexibility of the Divi Builder so I can basically do whatever design I really want to on here the Divi Builder allows me to create what I whatever I want basically within this section so once again I'm going to go do exit and check it out I scroll down the pop-up doesn't trigger unless I click the button or if I go my mouse goes up to leave we get exit intent but again I can close this down hit contact us and move from there another thing too is this button is actually kind of hard to see so if I quickly switch back go back to pop up close button I can make it light and I can even give it a transparent background color click tick exit again now when I click the pop-up I get a lighter color for the X however I've also enabled click background to close so I can just click that that is how you can set up a basic pop-up for Divi but there's actually another plugin that you can try if you say want to have a time to pop up because for some reason this plugin does not have a timed pop-up it only has exit intent or click but it is my preferred pop-up because of the way it works with Divi there is another one I'm going to pop up a video on the screen right now we're going to go through that one in a minute but you can use the Divi builder in this one as well so uh check out that video I'll go through that process otherwise thanks for watching hope to see you again next time

Channel: Wade McMaster - Creator Impact

Views: 20,709

Keywords: how to create a popup in divi, how to create a popup in divi website, popup divi theme, divi theme popup box, wordpress popup message with divi theme, how to add popup in divi theme, how to add exit popup in divi theme, how to create popup when website load divi theme, divi theme, divi tutorial, divi popup, popups for divi, divi popup maker, divi popup module, divi popup plugin, divi popup on click

Id: 7w__xLqlCBU

Length: 5min 16sec (316 seconds)

Published: Tue May 16 2023