Alright, now let's go ahead and
build the header for our website.
And this is exactly what it looks like right now,
and it does not look good at all.
This is what we're trying to accomplish.
You can see the header right here we
have the logo on the left,
and then we have the main menu on the right.
However,
show you something like if I was to go to another page,
Let's say the About page as an example,
right here you can see that the header is different.
This one has a black background,
while the header on
the homepage doesn't have any background at all,
it's simply blends into the background image here,
basically, we need to create 82 different headers.
One specifically for the homepage and then the
other for the rest of our pages.
Now how do we do this?
Before I show you that,
let me just drag the demo website away.
Now before I show you how to do that,
I want to show you something else.
If I was to go to Edit with Elementor,
I went to site settings.
In addition to being able to set
your global phones and your colors and all that,
you can also make changes to
the site identity right here we have Settings.
If I click on inside the density right here,
we can change the site name too.
I'm going to call mine passport travel.
That's the name of the website.
And then the tagline will be when travel meets adventure.
For the logo, I'm going to choose the logo right here.
Let's insert that one.
And then for the Phi of icon,
I'm going to choose the image of IT with the one
with the green background.
I'm going to insert that.
And there you go, we have our site identity.
Now you could also come down here to
header and make different kinds
of changes you can choose to hide the logo,
show the tagline, increase
the content width or reduced
the content width is all up to you.
But since we are going to create our own custom headers,
we don't need to change anything in here at all.
So I'm going to go ahead now and simply
update. And then I'll check this out.
Okay, I'm gonna go back to the backend Exit to Dashboard.
And now let's create our header.
I'm gonna come down here to our parents.
Here you will see elements or head-on foods are builder.
This is from the plugin. I'm going to click in there.
And now I'm going to click on Add new.
And now let's call this one the homepage header.
Then right here where you have type of template.
We're going to choose header,
and then we can choose, okay,
where would we like to display this header?
Since it's specifically going to be for the front page,
I'm going to choose down here you have specific targets.
I'm gonna choose specific pages and
invite here are simply type in home.
And there you go.
Now at this particular header will
only be displayed on the homepage.
And then for user roles right here you can choose, okay,
maybe you want to display these header only to logged in
users are logged out users
or edits or you have a lot of flexibility.
I'm just going to keep this blank because we
wanted to be for everyone.
Now here, you've got
this option enabled layout for us template.
Now the thing with Elementor is that in addition to
the default template and one provided by your theme,
elements, that gives you two custom templates.
One is called the elemental Canvas Data, full-width,
full-width simpler means that
your content can extend to the edges of your screen.
So basically goes full width that
I'm like no margins are patterns.
Elemental Canada as implements that you're
not gonna have any header or footer.
It's basically a blank element or our templates,
we're not going walk with a canvas template.
So there is really no need to enable this layout,
but I'm going to choose the elements
of full width template.
Let's go ahead now and hit Publish.
Now I'm going to click on edit with Elementor.
So what we're trying to achieve here is this,
let me bring back the demo site.
It's basically going to be a section with two columns.
The one on the left, the left column we'll have the logo,
while the column on the right,
we'll have the main menu and we also want
the column on the light one
containing the main menu to have more width.
So check this out.
Okay, right here, I'm
going to click on the Plus button here.
And now we can choose our structure.
And I'm going to choose this one divide here.
This one will have,
the first column will have a third of the entire section,
while the second column will have two thirds.
So right here, since we're editing the section,
as you can see, for the content width,
we could actually go full width if you wanted to.
But I'm going to go with box and I'm going
to choose 1240 pixels.
This is just my own personal preference.
I loved ones 1240 pixels.
Now, in here for the very first column,
I'm going to click inside.
I'm going to scroll all the way down here.
And we're trying to add the logo.
So I'm going to add site logo.
Click, drop it inside.
And now we have our logo.
Now you can see because the logo has
white text and this is a white background.
But just bear with me.
Okay, I'm gonna choose.
The image size here I'm gonna go with full for now.
Then let's go ahead and
click on the Edit button for this section.
All right, So I've clicked in there.
I'm gonna go back to style.
And then he went to where you have begun type.
I'm going to choose classic.
Now I'm going to choose the color black.
So now you can actually see the logo, right? Okay.
Now let's go over to the second column.
We're going to add our navigation elements.
So writing against the navigation menu,
click drag, drug that inside.
And then you can see main menu is selected by default.
However, when it's to make quite a number of changes,
notice right here that will remain with the main menu.
The text is in capital letters, it's in white.
It's also aligned to the right and also in the center.
So we need to do for thins.
Let's go back in here. First thing I'm gonna do
is while editing the navigation menu right here,
you have layout clicking there.
And now we're going to choose align to the right.
As you can see right now it's to the right.
Now let's go over to style.
And we're gonna come down here to typography.
Click on the Edit button.
Com non-hairy transform, choose uppercase.
Okay?
And then for text color,
Let's click on the global icon right
there and then choose primarily for White.
Good.
But now how do we align
the menu items in the middle vertically?
What you want to do here is you're going to click on
the Edit Column potency here,
this particular button right here, you click in there.
And now here you can see we have Vertical Align.
We're going to choose middle.
There you go.
That is it.
But we're not done yet.
For the logo.
Let's click on the Edit button for the site logo.
And then the alignment here,
we're gonna go to left.
Like you can't really see the difference just yet,
but Just bear with me.
We're going to choose that one to the left.
Okay, let's go ahead now and updates.
Now let's just take a look at what we have.
View the page.
And there you go.
Now you can see
our homepage has this particular header right here,
but then evolves to go to,
let's say the About page as an example,
you can see we don't have that header at all.
If it wants to go to the contact page.
As an example, you can see we don't have that header.
So this right here,
the homepage now has
this particular handout with the black background,
the logo, and then the menu items.
Now to round this up, I'm actually going to
make a few changes.
Let's go back to the section.
Okay, and I know I said
the content width to be 1240 pixels,
but I've done some further tests in,
and I think it's best we go with the full width.
So let's go with full width for now.
Then this column, the one holding the logo,
we're going to reduce it to 2525% percent.
While the column holding the manual items will have 75%.
Then let's also make a change to the logo.
I'm going to click Edit logo.
Let's go to style.
And then for the max-width,
we're going to set this to 75%.
And a question you might have is
why obviously the max-width and not the actual width.
Here's the thing.
When you set the width for the logo,
the logo will always have that width.
We godless, of the screen size.
You're working with max-width.
You're basically saying, Hey,
the logo should never exceed this width.
Then in situations where the screen size isn't
large enough documented the full width of the logo
reduce the size of
basically max width is much better for responsive design.
And you always want to be responsive.
So we're going to set that to 75 pixels.
And now if we update,
if we take a look at our header,
you can see right now that it looks
so much similar to what we
have are over here on the demo website.
Last thing to do is we're going to
duplicate this header for the second header.
So basically he has what we're gonna do.
Okay, well I'm gonna go back to the backend.
Instead of creating the second header
for the rest of the website,
we're simply gonna come in here and then you'll see
EA duplicates or that's
the essential atoms duplicates all.
I'm going to go ahead now and simply
duplicate the homepage header.
Now you will see drafts Elementor.
Let's go ahead and I'll click on Edit.
And then we'll look at few changes in here.
We'll call this one the global header.
You can give it any other name that you want,
but I'm going to call this one global header.
And then right here,
pep of templates, Yes, it's the header.
Then the display on.
We're gonna go with entire website.
But then to be on the safe side,
I'm gonna come in here and say add exclusion rule.
We're saying, Hey, do not display this one
on the homepage down here.
He has specific page.
I'm gonna come in here and simply type in home,
making sure that this header will
never be displayed on the homepage.
It will only be displayed across the entire website.
And there you go.
So template full width as well.
Let's go ahead now and hit Publish.
And there you go.
So just to go back in here,
let's refresh this page.
So that's the header for the homepage.
But now take a look at this.
Okay, If I was to go to any other page,
let's say the About page as an example.
Now, you will see that
the duplicate header isn't showing.
Let's go to the Articles page as well.
You can see again, the duplicate header is not showing,
despite the fact that we
said the duplicate header to show
on every page except the homepage,
what exactly is going on here.
And trust me, it took me several hours.
Just China figure out exactly
why this was not working, but I figured it out.
What you want to do is just go back
to the duplicate header right here.
This is the duplicate hit every created.
What you want to do is this, okay,
Just try to initiate,
actually let us go back to
the back-end so you're not confused.
All right, from here,
from here, just click on edit with Elementor.
Edit with Elementor.
And then what you're gonna do is right here,
just initiate any kind of change.
Let's say you add the heading elements in here,
for example, okay, drop that in there.
Now do you see that the update button is available?
Okay, I'm gonna go back in here, close this.
The whole point here is you want to
make some sort of change on
the header so that
this Update button downhill would be triggered.
Now we can update.
And now it should work.
So if asked to go back to my articles page in
here and now refresh.
Now you can see that the duplicate header is
now showing I go back to the homepage,
is exact same header.
I go to the About page.
And of course it's the exact same header as well.
That's exactly what you should
do whenever you tried duplicating
your headers and footers on the duplicates.
Simply go inside edit with Elementor,
add any element, remove
that element just to trigger the update button.
Update.
And now that new duplicate header
or footer will now be in full effect.
So that's it for the video we've created our two headers.
Thank you for watching and I will see you next class.