Add a Popup to Divi Using the Theme Builder

Jan 5, 2022 | WordPress Wednesday

Here’s a step-by-step video to help you create a Global Popup in the Divi Theme by Elegant Themes. Here’s the link to Divi – Do you want to add a popup on your Divi WordPress site and call the popup to appear in several different places on your website? Here’s how!

Here’s the video on how to install and use the plugin Popups for Divi

Join our Divi Meetup Group

Find a Divi Meetup In Your Area

– Hey, y’all, I’m Kori Ashton, and welcome to another WordPress Wednesday. Happy New Year, everybody, I’m really excited to be back. And I’m excited to talk to you today, about the Divi Theme, of course, but today, we’re gonna look at how to create a global popup. I’m gonna put a link below to another video that I’ve done that teaches you how to go install this plugin and how to use this plugin, kind of overall. It’s called, Popup for Divi. And I had a great question asked to me by one of my viewers that said, “How would you do this if you wanted to have “the popup called throughout the entire website?” They basically said, “Do I have to create this popup on every single page? “Or can I create it once?” Well, we always like to work smarter, not harder. So let’s do it, y’all. I’m gonna show you how to create this popup inside of your global footer, and then, be able to call it absolutely anywhere on your website. I’ll show you how to do it right now, step-by-step.

All right, so this is the example site that I want to build out this global popup on. And basically, when you scroll down here, I wanna put a button right here that says, Watch Our Video, and when you click on it, I want it to open up a video and play the video right here on the website. But I might wanna call that video to play on other pages. What if I jump into our About page, and maybe I want that same button living right here, that again, says, Watch Our Video, right? And we want it to pop up here on this page. Well, I really don’t wanna keep building a bunch of popups, especially if it has the exact same content. So I’m gonna show you how to do it again, just using that one global setting.

We’re gonna go into your dashboard, again, remember that this is running on Divi. So please be certain that your Divi Theme is completely up-to-date. You wanna go down here to Divi and go into Theme Builder. I’m already running a global footer. If you’re not, it’s okay, you can go ahead and activate this area on your Divi Theme. But remember, if you do activate this, it will overwrite what you currently have, right? If you look at the front side of our website right now, we’ve got this global footer happening down here. So we’ve got this section with our copyright living down here, right? So that’s our footer. And because I want this popup to function on multiple pages, we can actually embed it in the footer. And then, it will appear everywhere, exactly where we need it to appear.

So let’s go into our global footer, open that up. And because we’re activating the plugin that we already have in here, called Popups for Divi, right? Remember, I’ve got that video if you haven’t figured out how to do that yet, I’ve another video to show you how to do that. We’re gonna come in here, and we’re gonna add another section at the very bottom, okay? We’re gonna add just a regular section. And we’re gonna put a one column in there because all we want is one video in there, right? Of course, you can do anything you want in this section to make it a popup, absolutely anything you want. But I’m gonna go ahead and click Check for now. There’s our video living in here. Of course, you know how to change this. That’s just your regular module, Divi module for a video, right? So you can change it any way you want. You can add your own video. You can add it in from a link on YouTube, or just your regular video.

So for now, I’m gonna leave it this default one for now. But here’s what we’re gonna do now. We’re gonna click on this section, go into the gear icon, open this up, right? Remember, now that we’re running popups for Divi, there’s this extra tab that lives right here, called Popup. And we’re gonna call this, General Popup. This is a popup. And we’re gonna give it the ID of Video, okay? That’s all we’re gonna do. You need to remember what we’re naming this. We’re gonna name it Video. Pretty easy to do. You have different behavior options here. You can customize it however you want, but for now, I’m gonna leave it just as is and click Okay. Now, that’s changed this whole piece right here, to be just a popup. It won’t actually display because we’ve got it saved now, as a popup. It won’t display down on the footer. It’ll only display when it’s opened up as a popup. How cool is that, right? So I’m gonna click Save, save all my changes, exit out of here, again, click Save Changes. Let’s go back to the front side of the website right now. I’m gonna click Refresh, and let’s double-check to be certain that that video is not just down here, visible in the footer of our website, and it’s not. There’s the end of our website, so thankfully, it’s not visible there. So let’s go ahead and add in the button that’s now going to trigger that cool little popup here. Let’s go to Enable Visual Builder, up here at the top. We’re gonna enable it.

Scrolling down, we’re gonna use the Button module inside of Divi, right? We’re just gonna add another button here, add module. We’re gonna add a button. That button is gonna say, Watch Our Video, right? And on the link now, okay, on the link for the URL, for the button, we’re just gonna do #video, right? And I’m gonna change the design of this button just a little bit, I’m gonna move it to the middle, the button itself, I’m gonna use some custom styling for it. We’re gonna say white on that. I like that, that little rollover effect is kind of cool. So I’ll just leave that as is. Click Okay, and we’re gonna go ahead and save everything. So you remember that the purple button right here, is our save button, right? When you open up that little truncated area, click Save. And now, your change is live to Divi. I’m gonna exit the builder now, so that that button is actually clickable for us. Scrolling down. Let’s see if that button now lives there. There it is, Watch Our Video. Now, when we click on it, our popup happens perfectly.

All right, so that works now, on this page, but what if we wanted to add it over into our About page? So let’s click on About, jump in over here, and say that we wanted to add in that same button, right here in this section. I’m gonna enable the Visual Builder. If you wanted to, you could use a global button right now, really, if you really wanted to get really, really, genuinely global, but for the sake of ease and for less complexity, I’m just gonna go ahead and do, Button. And we’re gonna do, Watch Our Video, right? And you remember the link to it, right? The link was just the pound sign with video, and click Okay. And I like that placement, kind of left a line there, with that text. I’m gonna click Save. And remember, we didn’t go add that video to this page. You really don’t need to because it lives in our global footer. So when I scroll down now, scrolling down, there’s our button, and if I click now, it’s still gonna work because this page has that same footer living in it, you know?

Kinda cool, huh, y’all? All right, y’all, I hope that helped you. If you’re interested in learning more about the Divi Theme, I have an entire playlist, here on my YouTube channel. And we have live Divi meetup groups, literally around the world. I’ll put another link in the description box below. We have our next meetup even tomorrow. So if you’re interested, please come join that. It’s totally virtual, totally for free. You can jump in and be a part of the conversation. Get some of your questions answered, right there in real time with me. If you’re not here in the San Antonio area, of course, again, we’re hosting it virtually, so you can certainly join, or you can find another Divi meetup group, maybe in your direct area. All right, y’all, I’ll see you next WordPress Wednesday. Hope you’re off to a great start this year. See you next time, bye y’all.


SUBSCRIBER DEAL: Get 35% off for 3 Months of Liquid Web WordPress Hosting

Hey Y’all – Thanks for watching. Each week I’m creating videos just like this one to help you improve your online marketing. Be sure to subscribe so that you get access to each video. If you have questions about a process, product, or service that I’ve mentioned in a video, please reach out directly to the authors of that item first. If there’s a question about something specific I’ve shared, comment in the thread and I’ll reply within a day or two.

To get my attention more quickly Tweet me @KoriAshton

From freelancer to entrepreneur to c-suite, Kori Ashton has spent over twenty years in the digital marketing space. She built up a WordPress agency that sold in 2017 and spends most of her time now consulting with industry brands and agencies on improving your customer retention with persona-driven development.