- Hey y'all, welcome to another WordPress Wednesday.
My name is Kori Ashton.
Last week I talked to you just briefly
about how to build out a custom Header inside
of the new Divi 4.0.
Uh, it was so exciting, it's so simple and easy to do.
And I'm gonna make it even more easy today
by showing you how to use a pre-built Header Layout package.
Just a couple of clicks, all for free,
I'm gonna show you right now.
(upbeat music)
By the way this is brought to you by Liquid Web,
the most helpful humans in Hosting you guys.
I absolutely love this company,
and if you're looking for support with WordPress,
faster Hosting and great security
you've got to give them a shout-out.
Tell them Kori Ashton sent you there way.
And be sure to use their coupon codes
so you can get a discount.
I'm all about a good budget.
All right, let's look at how to do this totally for free.
This is actually an older blog article that Divi released,
but it still works and it works even better today,
because were able to already have these kind
of pre-determined layouts
that you can easily import into your Header area.
Tinker and play, drag and drop,
build them out however you want.
You can manipulate these.
I'll put the link right here in this page,
in the description box below.
But check out these different examples.
By the way, this other video is pretty phenomenal as well.
These are different examples
where it has a call to action button, logo in the middle,
your menu items, social media feeds,
all of these different Layout examples already exist
inside this little zip file
that you get totally for free when you come to this page.
There's a section here that's gonna
have an email address entry box.
Once you enter your email address,
and click submit, this link is right here.
Click on this link right here, and download the zip file.
Once you do that, you're gonna want to open it up, right,
and you're gonna have the zip file right here,
and you're gonna want to double click
and open it up, because inside of that,
you've got this nice little JSON file.
And that's what you need to go ahead
and import this, into your Divi theme.
Let's go into your dashboard right now and do that.
So we're gonna go into Divi Library.
Underneath your Divi tabs on this left side.
Divi Library, up at the top, it's Import/Export.
Click on that, and click over to Import.
We want to import in what we just downloaded, right.
And it's gonna go ahead and say here choose the file.
Open that up, go to your downloads section.
Open that up there,
get into that header Divi JSON file, right.
And click Import.
Super easy, just a couple of clicks, that's all it took.
I'm done.
Now it lives right there, ready for us to go use.
Inside of our Theme Builder, okay.
Let's leave that alone,
we're gonna click back over here now to Theme Builder.
Remember from last week, we were building out from scratch.
When you click here it says add Global Header.
It allows you to build from scratch or add from Library.
Now, that that lives inside of our Library,
we want to go access that package.
So add from Library.
We're gonna go in here
to your Saved Layouts, the second tab.
And now that section will live in here, the Header Divi kit.
Click on that, it's gonna import it.
Here's the thing though y'all.
That just imported every example that we had just seen.
Every single example, is gonna live in our Header,
available for us.
What we're gonna do now is just go in
and remove the ones we don't want.
And then manipulate or change
or customize the one that we do want.
Think again about the different types of content
that you want to live up in that header.
Do you want your logo in the middle,
and your menus on the right and left side?
Do you want your social media feed,
or phone number that's gonna be clickable up there.
What do you want to live in that whole header section.
Maybe you want the ability to add an alert
at the top of your website.
This does that for you as well.
Now that that's there, we can go ahead
and click on the pencil icon and go into it,
again don't panic,
because we're gonna actually see
every single one of those examples.
Some might look a little wonky or weird,
don't worry about that,
because there's actually one I want to use
and it's this one right here.
And it has this blue bar across it,
logo on the left side,
the menu and this nice to call to action purchase button.
So we're just gonna go ahead and click through
and delete everything else, right.
You're gonna want to hover over the different options
and just delete each one.
Okay, now that's done, this is what I have
to play around with.
I've got my Logo over here, my Menu items,
and then my CTA button, right.
And I just want to make some changes to that,
to customize it for me.
So I'll go in here, I'm a change this
from just saying the word box,
they were using the actual tags for that section.
I can even eliminate that completely if I wanted to,
and just throw in my logo there.
Change that, and add in an image.
Click on these little areas here, just pause me,
don't panic if I'm moving too quickly for me.
Pause and rewind, it's super simple to do.
There's my logo, if it's too large,
of course I can shrink that down.
Adjusting the size of everything, right.
Doesn't have to be the full width,
it can shrink down a little bit, it's not a big deal.
The module itself, the alignment we want
that in the center of everything.
Just kind of play around with that,
and make that kind of live and breath,
the way you want it to.
If we don't want the call to action button to say purchase,
we can open that up right here,
and we can say contact us, right.
And we can change out that link,
easily right here in this section.
And click the little green box, we're good there.
Okay, obviously at the top, this purple bar
that you see that's not gonna live there,
once we click save and apply it to the website.
What if we don't like the blue?
What if we say,
well that blue is not even the correct shade.
Well, you can come here to the gear icon
go into that background, change that color completely
to whatever you want it to live and breathe and be, right.
So let's drag this
and give it kind of a nice lighter shade up there,
maybe something around that area, sure.
All right, so now that that's done,
I think I actually do want to add in
some Social Media over here.
What would that look like?
How easily could I accomplish that?
With just one click here, I can go ahead
and say social, do social media follow.
And I'm gonna go ahead and add in
also let's do Instagram,
and of course you can change the links
and add in the links right here, click okay.
And I'll go ahead and put it YouTube as well,
all of these are the different options by default
that you're able to just easily
and quickly add to these sections.
And then I'm going to change the alignment of them.
I want them all over here on this side.
And then, I'm gonna want a little bit of spacing,
because that seems like it's really snug on top there.
So let's put in like 20 pixels, kind of push
that down a little bit.
Actually, I might even move those to the top.
So let's take that off, and put a 20 here for now,
just to see if when we drag these up above the button,
how does that look.
Okay, so now I've got my social media icons living there,
maybe I want a little more padding here now
that I've expanded that.
You can just drag and kind of drop that.
Play around with all the spacing in this area.
That's why it's so exciting, it's so easily customizable.
And you can tell from just this,
it doesn't even look like the example
that I imported, right.
It just allowed me to quickly
and easily get to those different layout options.
So I'm gonna go down here to the bottom.
Click open that little drawer, click save.
You'll x out of this screen, once that check mark comes up.
Now that you're here and you have your global header,
you'll go ahead and click save all changes.
Again, remember if you only wanted this specific header,
to display on specific posts or pages,
you can actually do that.
You would do that, just by coming into this section,
creating that and saying this particular header only applies
to these pages, these posts, this blog,
this product, whatever that might be.
Pretty darn cool.
Now that that's saved, you come back over here
to the front side of your website,
you see the default that was there.
Click refresh, and there is our new header.
Remember though you can easily make
your own custom solution as well.
And there's all sorts of options online
to download Divi header packs,
if that's what you're googling around for.
Some are probably premium where you have
to pay a small fee to get the zipped file.
But others are gonna be totally free,
able for you to upload.
Just be sure to vet them,
be sure that they're legitimate developers
and that they're compatible with your version
of Divi and WordPress.
All right, I hope this helped you.
Every single Wednesday I'm creating content
just like this to help you improve
your online marketing inside the world of WordPress.
Please be sure to like, subscribe, tweet to me.
Come hang out with me on Instagram, on Facebook.
Come be a part of our Press Tribe group for Freelancers.
I'd love to see you there.
I hope you're having a great WordPress Wednesday.
See y'all next time, Bye everyone.
(dramatic music)
(bell ringing)
Shout out to my Seahawks.
We're doing pretty well this season.