How to create a Transparent Header Menu in Wordpress with Elementor Pro (in 15 min) | Rino De Boer | Skillshare

How to create a Transparent Header Menu in Wordpress with Elementor Pro (in 15 min)

Rino De Boer, Designer & Content creator

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (15m)
    • 1. This is what we will cover

      0:54
    • 2. Settings up the essential basics

      3:18
    • 3. Filling the menu with drag & drop

      2:38
    • 4. Adding cool animations with delays

      0:55
    • 5. Adding nice hover effects

      0:43
    • 6. Mobile Responsive Optimisation

      3:15
    • 7. Making all pages accessible

      2:30
    • 8. You want more?

      0:38

About This Class

Hi and welcome! In this call you will learn how to make the popular transparant header/menu effect that you see on a lot of super modern websites. This effect is not super easy and needs a little bit of customisation to make it look good. But when it does, then it's really cool.

In this class we're using Elementor Pro on Wordpress, where we can easily use drag and drop to create this header/menu.

If you don't have Elementor Pro yet and you want to get it, then you need to choose from the 3 packages they offer. 

This is their pricing page: https://elementor.com/pricing/?ref=4590&campaign=skillshare

I have the $199 package, but you can also try the $49 package with a 30 money back guarantee (if you don't like it).

I really hope you enjoy this smaller class!

Gr Rino

Transcripts

1. This is what we will cover: Hey, and welcome to the skill share class for the people that don't know me. My name is Reno. I'm a designer from the Netherlands. I studied design. I work for clients and I make videos about Web design. Fear this brand called Leverage pixels. In the short class, we're going to create a popular, transparent header or menu effect. Did you can see on modern websites nowadays? This is hard to accomplish, with most were press teams, and that's why we're gonna use elements or pro in elements or pro. We can create the menu with Dragon Drop and Applied is to all pages in the short class. We're going to create this menu, which has a clickable logo, clickable menu items, a button that links to another page and social media, Aiken's on Mobile. The purple button automatically disappears and the contact page will be visible in the drop down menu. So I hope you will join my class and let's just get started 2. Settings up the essential basics: I am here inside of er press and I'm going to go to my dashboard on the first thing that we're gonna do is we're gonna go to D templates over here and we're gonna click on Team Builder because the header is part off the team builder section. I'm going to zoom out because my screen is too small. Okay? Eso I already have to head are so I'm gonna delete that for now because we're going to start off from scratch s 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 Created the template eso we have t column set up over here. I'm gonna close. He navigated for now, I'm gonna 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 40 social Aikens. So I'm gonna pick this one s so we will have four columns now. We want to give it some heights. We're gonna go to hide and then click on Minimum heights. I'm gonna 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 gonna go to the collar. I'm going to give it a background collar. We're gonna delete this later. But if we're gonna work with white text, I cannot see what I'm doing over here because there's a white background. So first, we need to start with a black background so I can actually see what I'm doing. But I'm going to give it just 50% capacity for now. So if we apply it to the home page, we can actually see that there's come 10 beneath it. So there's just for now and we're gonna delete is later. And now let's go Duty advanced over here and put the SET index on one TC index or set index is Teoh. Make sure that our header is on top off 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 gonna put it at 10. So that I'm sure it's always on top off our page. Just click on update or publish for now and now you're gonna get this screen and it will ask you where you want the header to appear. I wanted to be on the entire side, so I'm gonna click on safe and close, and I'm gonna go back to my home page and click on the 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 pages beneath the header So how we're gonna achieve that is go back to your header and then play with the bottom margin. So unlinked this value and then put minus 90 over here. As you can see it already here in the preview. Now the other content that is beneath this header will move in sight of our header at about . The whole header is on top with the Z index, so that makes it transparent. So if we're gonna click on update now, go back to our home page and click on Refresh. You're going to see that right now it's on top of our page and we can see the a video. True, our black layer that has a transparency. So in this way we have created D transparent header. 3. Filling the menu with drag & drop: So now I'm gonna play some elements inside off 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. Gonna Stell that really quick now to put your never menu images directing, never menu, widget of elements or pro She can see it doesn't have to write collar. So of course we need to change. That's duty. White collar. If you're gonna click on white now, this looks a lot better and I just make the call him a little bit bigger so it will just be on one line, aligned this student rights. Okay, over here, I want a button, So I'm gonna drag in the button. Rigid. So these pages appear over here because I've created a menu inside of er Pre's. So if you click on the menu item the never menu widget in a side of elemental Pro and you open a D menu screen, you can see that I've created a menu inside of Thea Normal War Press Menu Creator, and you could create a menu from here and you could just drag in your pages from here. And I've made sure that the contact page is not part off me off 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 gonna link this but into 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 Aiken's That's changed the platforms over here. And by the way, this is not a tutorial for the basics of elemental, or I'm not gonna go into all the details here. What I also want to do is I want d content to be vertically aligned in sight off every column. So what I'm gonna do is I'm gonna go to every column, go to advanced first of all the Leedy 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 copied Estelle and Base that on to the other ones you can see. Now just make sure that you have to write 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 home page and click on the 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 gonna go back to the main section over here. Go back to the stele to background type. Just inject 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. 4. Adding cool animations with delays: so I did a few things to make this design look a little bit better. Ah, first of all, I edit animations to every single item. So what I did is I went to the first column 20 advance, and I went to motion effects that I used a deep faith in down than 40. Next column. I did the same thing. Motion effects fade in from down, but then I added a delay off like 300 milliseconds. So then this column first animates in the done This column were animated in an animal. Girls are going to do that for the last you so at emotion effect and Buddhist on 600 pretty last one on 900. And this is a really cool effect because now it will be like an animation inside of the headers. A click and update. Go back to your home page, refresh and look at the animation off the menu. Boom, boom, boom, boom. I mean, that's pretty cool. 5. Adding nice hover effects: I've also added a few hover effects. As you can see, there is a underlying over here. But there's nothing happening with the button and the show show Aikens. So I've just click on the button. I go to Stell and then within the hover you can set up an animation for buttons. I almost always used string because I think that is the slickest over them all Looks pretty nice And 40 social Aikens I use grow So if you didn't grow too I can hover, hover animation and click on Grow The icons will grow We cannot see it here But trust me gonna show you If you go back to your page Refresh this you can see Does this a nice effect for a button? Everybody? Social Aikens now day start to grow. 6. Mobile Responsive Optimisation : Okay, so now for the mobile menu, because the mobile menu doesn't look very good right now. What I'm gonna do is I'm gonna go back to my Stellan at the background for now because I want to see what I'm doing. I'm gonna put the mode on mobile mode, and this is off course not what you want for a mobile menu. So the first thing that I want to do is at some margin inside of this main section. So go to advanced unlinked this one at 22 the right, 20 to the left, and then maybe also 20 to the top and bottom. Now, I don't want the bottom to be in the mobile menu. So now just click on the button and we're gonna go to advance to go to Responsive and hide this one on mobile and on tablet mode. Now go to the first column and give this a with something like 30. So then, if we also give a whiff to this, this one go to lay out and maybe give that 50 and then go to the less one and give that a whiff off it's 20 then it will appear next to do this button. So now the last thing that we want to do is change the stele off our mobile menu so we can change the alignment. For example, we don't have a lot of steles, an element of pro for the toggle button, which is something that I don't really like. I just want to insert a custom. I get over here, but for now we just have to Hamburg. I can, but we can change the stele over here. So we click on the Hamburg I can. 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 fool with and check that. And now if you're gonna click on the mobile menu, it starts to open like this looks a lot better and the I can automatically changes in an X . You don't see that over here, but this is what happens behind this. Ah, this ichan also changed your verticals distance to something that's more clickable. Also go to the tackle. But in itself I do not want a background color over here. Some can change that to 0% capacity, and I'm gonna make the collar off the ICANN whites. That looks a lot better. I'm gonna make it a little bit smaller because that looks a little bit nicer. So now this is how it looks. And in this brief, you we can 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 back the black background. And there's also a margin, a white margin on top of it. So now I'm gonna go back to my computer on, And that's probably because of dispatching that we've set in the main section over here. So I'm gonna delete that for now. The bottom and the top. I doesn't look very nice over here, but that's maybe because of this column that it doesn't look nice. So I'm gonna go back to stale and now deleted back run 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 I come. But this is kind of what I wondered for a transparent header on mobile. Yeah, this looks pretty nice. 7. Making all pages accessible: 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 whip. So if we go back, Teoh the menu screen. But you can find over here we need to create a custom menu for our mobile phone. So stop Main Mobile, for example, creating menu at off the pages that you want to d menu and rearrange them safe 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 gonna make a duplicate off this one. I'm gonna change this one to the top main mobile and I want this one to be visible on Mobile and on tablet. So I'm gonna go to advanced go to Responsive and Disabled desktop And for the 1st 1 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 own bait and we refresh this. We're still going to see deep 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 used 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 home page. Hydro, that is pretty simple. You just click on your image, you go to content, you go to link and then you go to custom mural, and then you just find your home page over here, you click it, you save it, and now you're logo is clickable and we'll automatically linked to the home page. 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 on, and that is because your team settings are still probably overriding your elemental 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 off your team settings and change a few things over here, but that depends on your team. 8. You want more?: All right, so thank you. Ah, lot for watching this mini course. If you want any other video, Siri's about advanced element or pro features. Then please let me know. You can send me a message on Instagram. And yes, that's it. So thanks a lot for watching.