- When you're running on WordPress by default,
(upbeat music) it allows you
to create a different type of mobile menu
if you wanted different options there.
But what if you wanted to include a call to action button?
How nice would it be to actually move
that call to action button into your mobile dropdown menu?
I'm gonna show you how to do that right now
inside the world of Divi.
Hey y'all, my name is Kori Ashton
and welcome to another "WordPress Wednesday."
This is actually a bonus video this week
and you're obviously running on Divi,
so if you would like to see more videos
on the Divi theme, be sure to click Like and Subscribe
and check out my entire playlist dedicated
to this awesome theme and page builder.
Let's get to the tutorial.
We'll start by going into your WordPress dashboard
and going over to Appearance and Menus.
You may have already done this step,
if not, don't worry,
you can pause this video right now,
but I'd like you to create a new menu,
and create your mobile options, right?
Create that mobile navigation
that you would like to have display.
Go ahead and include all the options you want
and add in that call to action button option
down there at the bottom of your menu.
Once you have these options in place,
go ahead and click Save Menu.
Now that you've built out your menu,
I want us to add one extra little bit of CSS class
to this bottom call to action button
so that we can make it look a little different
and stand out in that mobile dropdown.
So you'll wanna add cta-btn to your CSS Class area.
Now, don't worry,
I'm gonna show you the exact code to drop in,
you won't have to write anything yourself.
If this CSS Class option is not visible to you,
go up to the top part of your WordPress dashboard
and open up Screen options and be certain
that CSS Classes right here toward the bottom is checked.
Once that's checked, zip up those screen options
and be certain, again, you have cta-btn
written right there in that area.
Zip up that little menu option and let's click Save Menu.
Now you've got everything ready to go.
We're gonna jump into our Divi Global Header area.
So over on the Divi side, go into Theme Builder
and we are going into your Global Header right up there.
So you wanna be certain you have a backup running in place,
in case anything goes wonky or weird right now,
you'll be able to revert back the site
but you should be good to go here.
This is my desktop view, right?
I've got my logo, my desktop menu,
and then that call to action button living there
on that right side.
Well, I want it to stack nicely, and it does by default,
it will stack nicely on a mobile view.
Let's take a look at that.
It's got some weird spacing though,
and this button just takes up a lot of room
especially if I have this as a fixed header.
So I definitely want to change up the look of this
on that mobile view.
So let's go back to desktop for a minute,
and all I'm gonna do right now is duplicate this row,
and then on this top one, I'm going to set it
to basically hide on mobile and tablet.
So let's go into Row Settings,
and Disable on mobile and tablet view.
Now, this bottom one we want to Disable on desktop view.
Basically what I've done is I've told the browser
to hide this one whenever it's somebody's on mobile
or tablet and to show this one.
So let's go into that mobile view so we can edit down here.
Alright, now this button goes away.
I don't actually need the row
to be structured in three columns,
so I'm gonna take the column structure to just one,
and that already starts to kind of minimize
the spacing for me.
I'm going to shrink this up just a little bit more even,
and kind of make this space nice and concise
so that it takes up less space on that mobile screen.
Now we'll go into our Menu Settings and we want to change it
from Main menu to your Mobile menu that you just created.
Perfect.
Check that box.
So now we know it's calling the correct menu to appear
which should have that call to action button in it.
That's all we need to do here.
Go ahead and click Save
and exit out of this screen.
Right here, final save.
Click that top button up there
and now we've got it ready to go.
The last little bit is adding in the CSS
that changes the background color
so it looks more like a button.
This is the code that you'll be dropping in
and I'll put this in the article
or the description box below.
This is going to add a background color
to that CSS class that we assigned to that button.
So we're gonna add in background color.
I'm using a color that's appropriate for my theme.
You'll wanna choose your own background color here
and change out that code and then I'm giving it
just a little bit of padding around it.
You can play around with these as well to make it look
exactly like you're thinking but you'll wanna copy this
onto your clipboard right now,
and I'll show you where to drop it in.
Let's go back to our WordPress dashboard.
In Theme Options underneath Divi,
let's go into our custom CSS.
Scrolling down on this main screen here,
you should have an area called Custom CSS.
Now, you might not have anything in here
and that's perfectly fine.
I've got a few other bits of code that I've written.
But right now, here's what we're gonna do.
We've got that other code on our clipboard.
You wanna go all the way down to the bottom
or to an empty space and paste that in.
It should drop in there perfectly.
You don't want any other spaces in that CSS file.
There you go.
We wanna click Save Changes.
Remember, you'll change out that color code
to be what you want it to be
so it looks more like your website theme and your branding.
Let's go to the front side and test things.
(upbeat music)
We're back over here in desktop mode.
I'm gonna click Refresh
and this should stay looking the same, right?
This should have our logo still, our desktop menu,
and that call to action button there.
But when I go to view now on cell phone mode, mobile view,
it should only have my logo, my hamburger navigation,
and when I open up that drawer,
there's our awesome call to action button
living right down there in that space.
It really stands out inside that mobile nav.
If this has been helpful for you,
please be sure to click Like and Subscribe.
Come back here with me every single week
and I have an entire playlist dedicated to the Divi theme.
This coming month, I'm gonna be covering
all things search engine optimization.
So be sure to come back all through February
where you'll find out some really helpful hints
on how to get your website ranking even higher
in those organic search results.
I'll see y'all next week.
Bye everyone.
(whimsical music)
(bell rings)