Alright, so let's start working with elements approved
by rebuilding our header.
And I'll show you how templates
work with elements are pro.
The first I'm gonna do is I'm gonna go over to
the backend and let's go ahead and
deactivate the elemental header and footer builder.
We no longer need that.
So I'm going to deactivate and let's just take a look at
the non-existent header that
we don't have anymore and of course, no footer.
Now you can still see
the one shovel misadventures
and then the corporate texts in here,
this is the hello theme
displaying these foods are for us.
All right, let's go back in here.
And once you've installed and activated Elementor Pro,
you will see right here where you
have a template on the LM elemental,
you'll see the theme builder.
So go ahead, click in here.
And right now you can see
the different kinds of templates we can build.
We're gonna build out the header.
So I'm going to click on plus to add the header.
The good thing about Elementor Pro
is that you'll have access to
a very wide variety of templates that you can use.
You can see them right here.
Different styles for the header.
You can see some, you know, you'll have
the logo on the left,
the social media icons on the right,
the main menu below.
So you can just quickly insert any one of these templates
that closely match the kind of design that you want.
But I'm gonna go ahead and simply
build us from scratch because I
want to show you how this
works with the elemental per elements.
So I'm gonna close this.
We're simply gonna rebuild just like before.
I'm gonna come in here right now,
create our two columns. Section.
One there'll be about 30%, the other one about 70%.
And now if I go over here to the elemental backend,
and right now you can see we have
the site logo right here.
So I'm going to drag that one and drop it inside.
Another thing is you might notice
a change with the elemental pro logo element.
That is the fact that you actually have
access to the heights.
The logo on the style with
the logo element provided by
the elemental header and footer builder plug-in.
You don't have these options,
so you can actually control the height
of the logo from here.
But we're not gonna touch that just yet.
I'm gonna go over to the back-end again,
choose the Nav Menu elements right here,
drop it inside here.
And of course, Main Menu will choose.
Let's align to the right big points.
We're gonna set this one to mobile.
Remember, let's go over to style our typography.
We'll make this one uppercase.
Let's go back to the main session
itself holding both columns.
Let's make it full width.
For the logo, I'm just go ahead
and add a black background.
So at least temporarily we can see the logo.
Okay, So much too large.
Let's go back in here.
For the max-width, we'll just go ahead and choose 75%,
just like we did previously.
Know, nipped to use the height in
this case, one more change.
Let's align the menu items vertical,
align them to the middle.
And there you go.
And of course, the color as well.
I forgot about that.
Let's change the color. Ticks ClO2 primary.
And that is that.
Now take a look at this.
Down here you have publish.
When you hit Publish,
this is where elements are pool and I'll say, hey,
where would you like to display this particular template?
We're going to add the condition,
not the antacid because
this is going to be for the homepage.
I'm gonna come in here right now and choose singular.
And then for singlets will say,
okay, all single pages, no,
wanted to split specifically on the front page.
So I'm going to choose that one.
And that is I'm gonna go
ahead and I'll simply save and close.
And that is it.
Let's go ahead now and refresh.
And I'm gonna show you something very, very interesting.
All right, let me do a hard refresh.
So here's a thinner line.
You can see that we do have
the menu items right here showing up.
Oh, by the way, the hover effect that he can see,
the dash apparent on
the age menu item that's provided by Elemental pool,
menu, menu element by default.
So you can change that on the hover effect if you want to
bore the manager here at now
is that we no longer see the logo.
We can see the menu items, but we don't see the logo.
What is happening here?
This is where I would like to introduce to you
the concept of the Z index.
Now let's go back in here.
Very first of all, we move
the background color for the header.
We no longer needed.
But take a look at this.
I'm gonna go over to advanced.
Right here you have this.
Option but very, very important,
very powerful called the z-index.
I'm gonna give this one a value of
two updates. Let's go back in here.
Let's do a very hard refresh.
And just like that.
Now you can see the logo appearing.
Board.
Hold on a second.
What exactly just happened?
See this Z index value right here.
Whenever you have one element,
one section overlapping another section,
you might want to be able to tell Elemental
which of those elements you
want to show first basically, which won't.
You want to bring in front of the other?
In this case, right now we do have
the binary image overlapping our header.
We want the header to be influenced so we can
see the logo and the main menu.
As such, you will have to give
a higher z-index number
to the element that you want to appear in front.
Since we've given the header the Z index value of two.
Let me actually go to the section holding our banana.
So let me edit with elemental.
Let's go to the navigator section right here, advanced.
You can see right here that we don't have any value for
the Z index for the section holding the banner.
But if I came in here right now
and I give it a value of three.
Now you can see we no longer see the logo,
we no longer see the main menu either.
That's because the xin index
value of this section holding
the banana is now greater than two.
But if I give it one now you can see we have
the main menu and the logo.
That's exactly how the Z index works.
Now, a question you might have an,
a very good question is,
Alex, hold on a second.
Before we gave the value of
this index of two to the header.
How can we still solve the main menu?
But we didn't see the logo.
I will be 100% honest with you.
I'm not exactly sure why that happened.
I'm guessing maybe there is some code
within elements that always gives
priority to the main menu to always show.
Again, it might be something very,
very simple that I'm simply missing.
I'm not entirely sure on edge.
Apologize for that, but I'd like to be honest with you.
But just take it for what it is.
Whenever you want to introduce kind of situation
where you have one element overlapping the
other and you want that
auto elements behind the show in front
simply give it a higher Z index value.
One thing you may have noticed is
the sudden whitespace that's
not appearing right here at the very top.
And this happens because
elemental by default in many instances,
we'll add a pattern of ten pixels around the elements.
So one way to bypass these kind of issue,
it's a simply edit
the section that has
the whitespace in this case right now it's my header.
So let me go ahead and edit the elemental header.
Gonna go to this section itself.
So edit section and then
invite here where you have the columns gap.
I'm gonna say no gap,
no gap at all.
Let's update basically by saying no gap.
We're saying, Hey, we don't want any patterns anywhere.
Now, this will get read off the whitespace.
But now note that because we've said No, no gaps at all.
Now the column holding a logo no longer has
any pattern between the logo and the top of our screen.
So very simply just go to the column holding the logo.
Go to advanced pattern right here,
we just give it say, ten pixels of padding at the top.
Updates that will solve the issue or incidences.
So these are some of the very little
annoying issues you might run
into when using elemental and how to bypass them.
But almost done.
Let's go ahead and create the mobile header for
our header for the front page rather.
And is the exact same thing that we did previously.
We're going to come in here right now,
duplicate the entire section.
And let's come out, come down here to
the mobile header edit section.
We're gonna go to style classic color of black.
And then what do we need? What else do we need to do?
We need to switch to the responsive mode.
Go to mobile.
And now right here,
edit column, we're gonna say 50%.
Do the same thing for the column holding the main menu.
And then say 50%.
We can edit the menu right here,
aligned to the right.
Maybe make it a little bit bigger.
So let's go to style.
Come down here to the toggle button.
The size, make it a little bit big.
For the logo as well.
Go to style, max width, 100%.
Yeah, we also need to do the show
hide or options, so advanced.
Let's go to the responsive.
For this section and this section holding
the logo and demand menu.
We're going to go in here to
Advanced and then responsive.
I'm going to say hide on deck, Stop,
Hide on tablet, but then show on mobile.
Let's now go to the old original header,
edit this section.
Go to Advanced, go to responsive.
Simply hide on mobile, and that's it.
So let's go ahead and update.
Hopefully I didn't forget
anything that's come back in here.
Refresh the page.
Let's see what we have.
Okay, so original ahead or I dare.
And this is oblique view looking good.
And then now this is gonna be the mobile view.
And David is thus exactly how to do
the exact same thing on Elementor product we
did with the Elementor header and footer are plugin.
One final thing before I close this video,
let us go to the back-end.
Now on the templates.
I'm sorry, under the theme builder
rather than our templates on a theme builder,
this is where you will see the new header you've created.
You can click inside to edit.
Once again.
Then if you want to change the name,
it's very, very simple.
You come down here to the Settings button
and then right here,
we can call this one the home header.
We can call it home,
home, the home header basically.
And then we can give the order header the name of global.
If you want to change the conditions for this plane,
the head or maybe you want to use
the same header on a different page.
Down here, you have the save options, you click in there.
Now here you will have access to the display.
Our conditions option.
This is where you can now go into,
now maybe change to a different page and so on.
And that is basically it for
creating the homepage header,
both on the desktop and mobile versions
using Elementor Pro.
Thank you for watching.
I will see you in the next class.