Hey, and welcome back
to LivingWithPixels. In this video, I’m
going to show you how you can create a
Transparent Header, which is a huge trend in web design right now inside of your
Elementor Pro website. So, if you already
use Elementor Pro or you're thinking about buying Elementor Pro, then this video might
be interesting for you. Before we begin, it's
important to say that there are options to create these kinds of
Transparent Headers in some WordPress themes like I've showed
you in this video, but those theme options are often times very limited. Because you can't
for example, add things like buttons, social icons or other
elements to your menu. And for some reason, this technique is not
very well known. There are not a lot of
tutorials on YouTube about it even though this
effect is so popular. So, let's just get started. If you are considering
to buy Elementor Pro, then please consider to use my affiliate link
that you can find in the description
of this video because then I get
a small commission and that really helps
me make more videos on the YouTube channel. So, thank you in advance if you choose to use my link. I am here inside of WordPress and I am going to
go to my dashboard. And the first thing that
we are going to do is we're going to go to the
templates over here and we're going to
click on theme builder because the header is part of the theme builder section. I'm going to zoom out because my screen
is too small, okay. So, I already
have the header. So, I'm going to
delete that for now because we are going to
start off from scratch. So, the first thing
that you want to do is click on header and then if you click
on create a new header, you can create a new
header from here, give it a name. I'm going to click on
create the template. So, we have the column
set up over here, I'm going to close the
navigator for now. I'm going to click
on the plus and we need four columns because we need a
part for the logo, for the menu items, for the button, and
for the social icons. So, I'm going to
pick this one. So, we will have
four columns. Now, we want to give
it some height. So, we are going
to go to height and then click on
minimum height and we are going
to make it 90. And this is an
important number because we need to
remember this number if we want this header to be on top of our
other content. So, remember that number. And now we're going
to go to the color. And we're going to give
it a background color. We are going to
delete this later, but if we are going to
work with white text, I cannot see what
I'm doing over here because this is a
white background. So, first, we need to start
with a black background so we can actually
see what I'm doing. But I'm going to give it just 50% opacity for now. So, if we apply it
to the home page we can actually see that there's content beneath it. So, this is just for now and we are going to
delete this later. And now, let's go to
the advanced over here and put the Z index on one. The Z index or Zed index is to make sure that our header is on top of all of our other elements. If you really want
to make sure, just put it at 10 because sometimes
in your website you have already played
with this number. So, I'm going to put it at 10 so then I'm sure it's
always on top of our page. I'll just click on update
or publish for now, and now you're going
to get this screen and it will ask you where you want the
header to appear. I want it to be on
the entire side. So, I'm going to click
on save and close. Now, I'm going to go
back to my home page and click on refresh
to see what happens. And now, as you can see, it is transparent, but it's still on
top of our page because my home
page ends here. So, we need to make sure that my home page is
beneath the header. So, how we're going
to achieve that is go back to your header and then play with
the bottom margin. So, unlink this value and then put -90 over here as you can see it already
here in the preview. Now, the other content that is beneath this header will move inside
of our header. But the whole header is on top with this Z index. So, that makes
it transparent. So, if we are going to
click on update now, go back to our homepage
and click on refresh, you're going to see
that right now it's on top of our page. And we can see the
video true hour black layer that has
a transparency. So, in this way, we have created the
Transparent Header. So, now, I'm going to
place some elements inside of my header. So, for example, if
you pick a logo, make sure it's a
white version logo otherwise, you're not going
to see it of course. So, I have a white version
of my logo over here, I'm going to style
that really quick. Now, to put your
nav menu in it just drag the nav menu
widget of Elementor Pro. As you can see, it doesn’t
have the right color. So, of course, we need to change that to
the white color. So, if you are going
to click on white, now, this looks a lot better. And now, just make the
column a little bit bigger. So, it would just
be on one line. I'm going to align
this to the right. Okay, over here I
want a button, so, I'm going to drag
in the button widget. So, these pages appear
over here because I've created a menu
inside of WordPress. So, if you click
on the menu item, the nav menu widget
inside of Elementor Pro and you open the menu screen, you can see that
I've created a menu inside of the normal
WordPress menu creator. And you can create
a menu from here and you can just drag in
your pages from here. And I've made sure
that the contact page is not part of my menu because I want
the contact page to be inside of this button. So, that's why there's no contact page
inside of the menu because I'm going
to link this button to the contact page. And I can just search for
the contact page over here and link it like this. Boom! Last thing that
I need to do is search for a few
social icons. Let's change the
platforms over here and by the way, this
is not a tutorial for the basics of Elementor. So, I'm not going to go
into all the details here. What I also want to do is I want the content to be vertically aligned inside of every column. So, what I am going to do is I'm going to go
to every column, go to advanced, first of all,
delete the padding. So, it will be
just on the left. And then, go to the layout and vertical alignment, put it on middle, so then it will be
perfectly aligned to the rest of my website. Now, copy this style and paste that onto
the other ones as you can see. Now, just make sure that you have the right sizes for all of your
columns like this. All right, let's click
on update for now and see what I've created. Go back to my homepage and click on refresh. And as you can
see, right now, this is almost the
menu that I want. And now, we can
turn off the black. So, we're going to go back to the main section
over here, go back to the style, to background type, just uncheck this one. Now, we can't really see what we're doing over here, but we're already done, almost at least. Go back to your home
page and then refresh and as you can see, now we have a
Transparent Header. So, I did a few things to make this design look
a little bit better. First of all, I added animations to
every single item. So what I did is I went to the first column, went to advanced, and I went to motion effects. Then I used the fade in down, then for the next column, I did the same thing. Motion effects
fade in from down. But then, I added a delay of like, 300 milliseconds. So then, this column
first animates in then this column animate in. And then, I'm also going to
do that for the last two. So, add a motion effect
and put this on 600 and put the last one on 900. And this is a really
cool effect because now, it will be like an animation
inside of the header. So, click on update, go back to your homepage, refresh, and look at the
animation of the menu. Boom! Boom! Boom! Boom! I mean, that's pretty cool. I've also added a
few hover effects. As you can see, there is a underline
over here, but there's nothing happening with the button and
the social icons. So, I'll just click
on the button, I go to style and then, within the hover, you can set up an
animation for buttons. I almost always use string because I think that is
the slickest of them all, looks pretty nice. And for the social
icons I use grow. So, if you didn't grow to, I can hover, hover animation and click on grow,
the icons will grow. We cannot see it here, but trust me, I'm
going to show you. If you go back to your
page, refresh this. You can see this is a
nice effect for a button and for the social icons
now they start to grow. Okay, so now for
the mobile menu because the mobile menu doesn't look very
good right now. What I'm going to do is I'm going to go
back to my style and add the
background for now because I want to
see what I'm doing. I'm going to put the
mode on mobile mode. And this is of course, not what you want
for a mobile menu. So, the first thing
that I want to do is add some margin inside
of this main section. So, go to advanced, unlink this one add 20 to the right,
20 to the left. And then maybe also, 20
to the top and bottom. Now, I don't want
the button to be in the mobile menu. So, now just click
on the button and we're going to
go to advanced, go to responsive and
hide this one on mobile and on tablet mode. Now, go to the first column and give this a width, something like 30. So, then, if we also give
a width to this one, go to layout and
maybe give that 50. And then go to the last one and give that a width of 20, then it will appear
next to this button. So, now the last thing
that we want to do is change the style of
our mobile menu. So, we can change the
alignment for example. We don't have a lot of
styles in Elementor Pro for the toggle button, which is something that
I don't really like. I just want to insert a
custom icon over here. But for now we just have
the hamburger icon. We can change the
style over here. So, if we click on
the hamburger icon, you're going to see that
this is how it opens. That's not really
how I want it. So, what you want to do is go to full width
and check that. And now, if you're going to click on the mobile menu, it starts to open like this. Looks a lot better and the icon automatically changes in an X. You don't see that over here, but this is what happens
behind this icon. Also, change the
vertical distance to something that's
more clickable, also, go to the
toggle button itself. I do not want a background
color over here. So, I'm going to change
that to 0% opacity. I'm going to make the
color of the icon white, that looks a lot better. I'm going to make it
a little bit smaller because that looks a
little bit nicer. So, now this is how it looks and in this preview, we can't see that this
column is next to this one. But I'm going to check
on my mobile phone if it's what I want. Okay, so as you can see
on my mobile phone, it's not perfect because we forgot to delete
the black background. And there's also a margin, a white margin on top of it. So, now, I'm going to
go back to my computer, and that's probably
because of this padding that we've set in the
main section over here. So, I'm going to
delete that for now the bottom and the top. It doesn't look very
nice over here, but that's maybe
because of this column that it doesn't look nice. So, I'm going to
go back to style and now delete the
background type, go to update, and then go back to
my mobile phone. All right, let's
refresh the page. And as you can see right now, this looks a lot better. Maybe I need a little
bit more margin next to the icon, but this is kind
of what I wanted for a Transparent
Header on mobile. Yeah, this looks pretty nice. So, now we're done, but I forgot one thing. And that is that
the contact page is now not accessible
on the mobile phone. So, what we need to do is go back to our menu, and we need to create a
menu for our mobile, that's a different
menu than for the web. So, if we go back
to the menu screen, which you can find over here. We need to create
a custom menu for our mobile phone. So, top main mobile,
for example. Create the menu, all of the pages that
you want to the menu, and rearrange them. Save this, go back to your
header, refresh it, and now, we need
to make sure that we will have a custom
menu on mobile. So, I'm going to make a duplicate of this one. I'm going to change this one to the top main mobile. And I want this one to be visible on mobile
and on tablet. So, I'm going to
go to advanced, go to responsive, and
disable the desktop. And for the first one, I want to disable
the other two. So, go to responsive and disable tablet
and desktop. And now if we
click on update, we go back to our home page and we refresh this, we're still going to see
the menu on our web. That is how we wanted it. And on my mobile phone, it will show the
contact page. This of course, works the same for
on tablet mode, you can create a custom
design on tablet mode. But I always use
the same design on tablet as I
use for mobile. Yeah, most of the times
that's how I do it. So, the last thing that I
want to show you is that you can also make
your logo clickable to the homepage. Now, how you do that
is pretty simple. You just click on your image, you go to content, you go to link, and you go to custom URL. And then you just find
your homepage over here, you click it, you save it, and now your logo
is clickable and will automatically
link to the homepage. And there's one more
thing that I want to say and that is that sometimes
you will still see a white background over here. And that is because
your theme settings are still probably overriding your Elementor settings. So, if you still see a
background over here and you've done the
exact same thing as me, it's probably because you have to go into the customizer of
your theme settings and change a few
things over here, but that depends
on your theme. All right guys, so, if
you're convinced that Elementor Pro is the
plugin that you need, then please consider to
use my affiliate link. If you want any
other videos for LivingWithPixels also let me know down
in the comments. And then I will see
you in the next video.
