- Hey y'all, my name is Kori Ashton,
and this is another WordPress Wednesday.
Today, we are looking at a really cool solution
for the Divi theme.
If you follow my channel,
you know that I love the Divi theme.
So I use it on Ask Kori,
I use it for client's websites,
I absolutely love it.
Today, I ran into a a little bit of an issue
where I needed a popup solution.
I wanted to have a text-trigger,
an open modal,
or a popup to happen, right?
Where I wanted a form or a calendar invite
to sit inside of that solution.
So, I did some digging around.
I found this solution.
I'm gonna show you how to use this,
how to plug it in.
It is a premium solution,
but I think it's completely worth your while.
Let me show you, 'cause it takes just a couple of minutes.
(cheerful music)
Hey, you guys.
This is brought to you by Liquid Web,
the most helpful humans in hosting.
If you are running a WordPress website,
which I assume you are because you're using Divi,
you probably wanna check them out
for the besting hosting around,
great security,
fast loading websites,
and I'll put a coupon code in the description box below,
so you can save some dollars.
All right, lets get to the tutorial.
Specifically, the plugin I'm talking about
is from divilife.com.
It is called Divi Overlays.
It is a premium license,
so that means you have to pay for it.
And you can buy it annually,
I went ahead and did it for unlimited.
Actually, I went ahead and did for lifetime,
because I know I'm gonna use this on a lot of websites
that I'm building out,
and I know that I'm gonna be using it
as long as I run Divi, right?
So, I went ahead and invested in the lifetime license.
They also have an all-access license
you might wanna take a look at.
It's pretty incredible,
you get a lot more other child themes
and different plugins that they've got available
that they've built specifically
to connect with the Divi theme.
I'll put a link to this in the description box below,
if you wanna use that link.
I'd appreciate it.
It is an affiliate link,
but that's not the reason why I'm bragging on.
'Cause seriously, guys, I mean this thing's pretty amazing.
Once you've logged in,
you just navigate back over to the plugin
that you wanna be using,
go into that page specifically.
And instead of a purchase price now,
it's gonna have a download button option for you.
Here it is right here.
Now, you can just go ahead and download it.
And that'll save a ZIP file onto your hard drive.
Now that you have that on your hard drive,
you can jump into your WordPress dashboard
and lets go to the Plugins area.
You'll click Add New.
Go to Upload Plugins
since this is a premium plugin,
it doesn't live in the regular repo area
that you normally go to.
You're gonna go ahead and go here, and Choose File,
and get it from your downloads, right?
Of course, you want to install that zipped file.
It only will accept a zipped format.
Once it's installed,
you're gonna wanna go ahead and click Activate.
Now that that's active, you'll see it here,
it says Divi Overlays.
And on the left side over here,
we will now have a custom post app called Divi Overlays.
The first thing that it's gonna ask you though,
is to go ahead and activate your API key,
so that you show that you have proof of purchase, right?
So in order to get that,
you just jump back over to your account.
You're gonna run into your account area.
Once you're on your account area,
you'll see this area here that says License Keys.
We wanna click View Licenses, right?
This is in case
you've purchased different products separately.
I did an all-access pass,
and you see this little area here,
this column that says Key with a little key,
you'll click on that and this will open up
and reveal to you your license key.
That's what you wanna copy and paste
back over in your dashboard.
For now, for security purposes,
I'm gonna do this off-camera.
Once you have that on your clipboard,
you're gonna come back over to your dashboard.
Here it says,
click here to activate that license.
If you want to, you can over to Divi Overlays
and go to Settings, it takes you to the same screen.
This is right where you'll be typing in your license key.
Again, for security purposes,
I'm gonna go ahead and just do this off-screen.
You'll click Save Changes,
and then it says License Status, right?
We wanna Activate License.
Now, it'll give you the date,
it'll tell you when that license expires,
and we wanna click Save Changes.
Now, before we get going any further,
I wanna show you one little extra tip
that I figured out, kinda the hard way.
If you go into Divi and go to Theme Options,
I want us to go ahead and allow the builder
to work on Divi Overlays.
So, follow me again.
I went to Divi Theme Options,
and in here, you can go over here to Builder.
And you wanna be certain
that it is enabled for Divi Overlays.
We want that Divi builder to be able to work
inside this overlays area,
so we can do anything we want inside of those popups.
So once you've enabled that, you can click Save Changes.
Now, we can go create our first Divi Overlay.
Click Add New.
(types)
You can name it anything you'd like.
We're gonna name it Testing Popup, for now.
And I wanna go ahead and use the Divi builder
inside of here.
I'm gonna go and build from scratch for now.
You can do really anything you want,
because we know how to use the Divi builder, right?
So, super easy to do.
I'ma do a countdown timer.
Lets do it for April 17.
And that is the start of WordCamp Atlanta,
where I will be going and speaking.
How cool is that?
Click Okay.
And then, I wanna put a button in there
for Buy Tickets.
(types)
All right, and we're gonna put a link in there
over to WordCamp Atlanta.
Grab that URL and copy it onto my clipboard.
Jump back in here and paste it in.
We're gonna go ahead and say
Open in a New Tab, and click Okay.
All right, simply done, that's what I want.
I'm gonna scroll down a little bit further,
down past Yoast,
I'm gonna zip some of this up.
What I wanna do is go ahead and set the overlay
for the background color.
And I just wanna do kind of a darker shade here,
and if you want to manipulate the opacity,
you can do that as well.
Play around with the opacity there.
And then if you wanna change your font color,
you can do that as well.
There are all sorts of additional settings here
on this right side, just so you know.
There's some animation settings
that you can play around with for how the overlay animates
as it opens.
I'm just gonna keep it
with the standard Fade & Slide option here.
Scrolling down
you have some additional options for locations.
You can set it to have different categories
that it's triggering on.
Only display on select pages.
Display with automatic triggers.
There's all sorts of different things that you can do here
in this premium plug-in.
There's really a lot of bang for your buck.
It's pretty spectacular.
But in order to move quickly through this tutorial,
and I just want to show you
kind of how to quickly get it done,
I want you to come up here and highlight,
and copy to your clipboard, the CSS ID.
This is a unique ID that we need inside of our website,
so that it opens up this really cool modal.
Here's what we're gonna do.
Lets go ahead and click Publish,
and then I want us to go ahead and go over to our page
where we want to have this little bit of text
that's gonna open up this really cool little popup.
And for now, what I'd like to do,
is go to the front site of our website
and just kind of paste it in here,
just as a test.
You see regular text here and how it kind of links over,
I wanna show you how this can
open up that modal.
So, here we go.
We're gonna enable the visual builder,
come in here, our text,
and we're just going to throw in some extra text here.
Buy tickets to WordCamp Atlanta 2020.
See Kori speak.
Right, there you go.
So, what I'd like to do is highlight all of this
and be sure that that's gonna be my popup.
So, here's what we're gonna do.
I'm actually gonna click out and go into this
in kind of the editing mode here,
so that I can write some quick code around that.
Lets see, here's our language right here.
And I'm just gonna go ahead and put
just a simple,
right, here's our link.
That's all we're doing, a simple link.
Here we go.
I'm gonna go in here, and I'm gonna put a pound sign
and I'm gonna say open-overlay.
Don't worry if you can't see my screen very well,
I'll put all this in the description box below.
It'll be super simple for you to handle.
We're gonna say ID equals open, close.
And we're gonna paste in that unique identifier
that we have on our clipboard.
And if you forgot, don't worry about it.
All you have to do is come over to your Divi Overlays,
and this is that unique identifier right there,
overlay unique ID.
That's what we wanna come and bring back here.
We're gonna paste it in,
and then put a follow-up quote mark,
and there you go.
That is literally all you have to do.
Check the box.
Lets test it.
Click Save.
It looks just like regular text.
We're gonna go up here to the top,
and we're gonna exit the visual builder.
And now that that's disabled,
you're basically viewing it like anybody else would.
Lets click and watch the modal pop up.
There we go.
Here's the background, and Buy Tickets right there.
You could really do anything you want
inside that modal, right?
You could put a form if you wanted to,
you could put a calendar sign-up area if you wanted to.
You could fill up the whole screen with anything you want.
You could put a whole different URL inside of there.
You can literally do anything you want to do
inside of this cool modal popup.
You can use a button to engage that pop-up.
You can use a menu item to engage that popup.
Anything you can think of, there's a way to do it.
And what's really cool, is this plug-in
actually has pretty phenomenal documentation.
All of you who are on the Divi theme,
be sure to check out my entire playlist that I have here
for all sorts of different things that you can be doing
inside the Divi theme
and be sure to give me a tweet or send me an email,
let me know how you're using the Divi theme
out there in the world.
I'd love to check out your website.
All right, be sure to like this video, click subscribe,
and I'll see you next WordPress Wednesday.
Bye, everyone.
(cheerful music)
(bell rings)
Just want you guys to check out my really cool,
new t-shirt I bought.
'Cause whenever you're in San Antonio,
this is the way it works y'all.
See you all next time.
Bye, everyone.