- 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.
(upbeat music)
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.
(bright music)