How to create a Transparent Wordpress Header for free | Rino De Boer | Skillshare

How to create a Transparent Wordpress Header for free

Rino De Boer, Designer & Content creator

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (12m)
    • 1. How to create a Transparent Wordpress Header for free

      1:00
    • 2. Installing OceanWP on your Wordpress website

      0:40
    • 3. Customising the footer

      0:59
    • 4. Adding the menu

      1:22
    • 5. Making it transparant + look & feel

      5:03
    • 6. Customising mobile version

      2:05
    • 7. Want more?

      0:47

About This Class

The very popular transparant effect effect for your headers is now possible for free in Wordpress with OceanWp! This means that you don't need a Wordpress menu plugin, you can just do it in the Wordpress menu customize feature in Wordpress.

All the pages are made in the free version of Elementor. Download it via this link for freehttps://elementor.com/thankyou/?ref=4590&campaign=links

Transcripts

1. How to create a Transparent Wordpress Header for free: in this short class, I'm going to show you how you can create a transparent header inside of er press for free with the Team Ocean WB Ocean WP is a free team that you can insult Um ver press and it has a lot of customization options for your header. This means that you can design a transparent header like this that will automatically display on all of your pages and will display a different version for mobile devices. So this glass, it's perfect for people who don't have elemental pro but still wants to have that nice, transparent Heather on the top off their pages. If you don't know me, my name is Reno. I'm a designer and I've used this header for quite a well on my own personal website. I read on the board dot com. I'm also a content creator and I create videos on YouTube under the name living with pixels . So let's get started. I'm going to show you how you contrast form this header into dis transparent header inside of repressed. So I hope to see you in the next video 2. Installing OceanWP on your Wordpress website: So let's get started. The first thing that I did is installed the team ocean. We be or I should say, ocean W weepy. Now Ocean WP. That's a team that's free. It's very popular. If you just go to appearance teams and click on at New, you can search here for ocean and then it pops up. No, it doesn't pop up. If you type ocean weepy, it pops up and you can activate the team. So then you will get this. All right, So now we're going to customize this. We're not gonna do this an elemental or because with elemental for free, you cannot edit the header and the food, Er, we need to do that within the team. 3. Customising the footer: So we're gonna click customize over here, and we're gonna wait to It's loaded. All right, I'm going to suit out a little. So here are the editing options for the team. Um, and let's just first elite the food er, because we don't need to this food or so we're going to scroll down to foot, food or witch, it's That's this part you can at which it's on your Web site waiting for press. But we're not going to need this. So we're gonna just disable the food, food or Wichit and then it's deleted. And now we're gonna go to the food or bottom, and we're also gonna disable that. And now we just have a clean food. Er, we still have this bottom so we can scroll up really fast. So that's it for the food, er, So if we click on publish now and we click on the X, this is the page. Now, if we scroll down, there's no food, or so it actually worked. Okay, Now, first thing before we're gonna add the design is we need to add a menu in here 4. Adding the menu: we need to add a menu in here because if we don't have assigned a menu before, we're gonna edit the design. We cannot see the pages, so we need to make the menu first. So what you need to do is hover over your name and then you click on menus. I click on comment and click on menu so it pops up in a new window and there's no menu yet , as you can see, So we're gonna create our main top menu. I always call it Top Main, because sometimes you have different menu. So this is the main menu for the top. We're going to click on Create Menu and now we're gonna add pages to that menu. So on the left, here you click on home. I want a portfolio I want about in contact, and I'm gonna click on ads to menu. It's very easy now. We can just drag it in the order death we want. Contact needs to be at the end. Maybe portfolio. Yes, something like this. Um, so now, here at the bottom, we need to tell where press where the menu should pop up were press calls. This the main menu. So we're going to click on Main. And now we're gonna click on safe menu. If we don't go back to our page and we click, refresh the menu should show up here, as you can see. And this is the default design for ocean we'd be. And now we're gonna change this so it will look like this, all right? 5. Making it transparant + look & feel: click on Customized Again. Okay, it's loaded. And now we need to delete this bar, and we need to delete delete this bar because we only need our logo, our name and our menu items. So what we're gonna do is we're going to scroll down to general options and this part is called page titles or in a click on page title. You cannot really deleted, but you could hide it. So go to stele and then press hidden. And if you wait for it to load, you can see that it's deleted. It's hidden, it's still there, but you can see it. We also need to do the same thing for this top bar. So go back, go back and we go to the bar and here we can just easily disable it. So we're going to click on enable been checked the enable box Now death also gone. So now there's already looks a lot better. So we're gonna go back. We're gonna go to Heather, go to general and now this tell Here are some different styles and this is different for every team. And this is why I chose the ocean weepy or I should say Ocean WP because Ocean WP has a lot of options to really customize the menu here. So, as you can see here is the transparent option. So if you click on transparent, you can see that the team automatically puts the content beneath the menu and it deletes the background white image. But now it's not really visible. So that's where we're gonna change. First of all, we're gonna change the height because, as you can see, there's a lot of white space here. So go back and just increase the height. Just let's just say put it on 90 for example and these able be had our border bottom. Um, so this line will go away, all right, this already looks a lot better. There still a search I can hear, and the colors are not right. But first, we're gonna change the logo, so go back and go to logo. And now we need to select a logo. So we're gonna click on select, and I've already uploaded a logo. It's just a PNG image so selected click on it, you click on Skip cropping, and then if you wait, you can see that logo is now here it has already a hover effect. Make it smaller by changing DMX. Whiff. Don't make your logo too big because that looks very cheap. Something like this is good enough, so that's perfect. Go back and click on menu, and here are some styling options that we need to change. First area is the links effect. There are a lot of different effects. Most of them are pretty cheap. I used underline from left and, as you can see then, is lying at the bottom. Animates in. It doesn't look the same yet, but it's the same effect. Eso we changed the color for the link effect to the color off my logo. So that's the color for my logo. And now, as you can see, the line looks a little bit more like the design. Now we're gonna go to Maine styling. First, we're gonna make the text of white so we can actually see our menu items. So click on white. There's already looks a lot better, and for the hover effect, I used a slightly darker colored and white so you can see that something is happening, but not a lot. So just go to white and then make it a little more gray. And now you can really see because it's really small. But that's the effect that I used. Okay, So scroll down and go to the search. I can. I don't want to search Aikens. I'm gonna put it on Disable. And now discharge Aiken will be gone. Yes, now is gone. And now we need to change the styling off the typography. We cannot do it in here. We need to go to typography. And then again, this is This is different for every team. So sometimes you're spending a lot of time searching in the menus Does why I also recommend that you, by elements of pro, because with an element of pro, you don't have to go inside the team settings. You can just do everything within l a mentor. But for now, we're using bad this. So let's just go to Main Menu Fund family. We're gonna pick the phone that I used for my website. Yes, it's here. Months aretz. That's the phone that I used phone size. We're gonna make that bigger. I think I used 16 or something. Maybe even bigger. Maybe I used 18. Yes, the weight. It's pretty bold. Maybe even like 700. Yeah. Maybe this one is even sweaty. Or is it? No, I think it's 18 but I've I'm zoomed in. Yeah, I think I'm zoomed in, that's why. Okay, so I'm going to leave it at 18. And as you can see, this already looks pretty nice. 6. Customising mobile version: And now the only thing we need to do is change the mobile settings for this. So click here on the mobile, Aiken. And now we can see how it looks on a mobile device. It adds this text here and if you click on it is not distilled everyone. So we can also changes on mobile. So go back, Go back, go to header, go to mobile menu and here mobile menu. Still, we can change another style. So for example, drop down rights and now every click on it. This looks more like what we want displayed the menu text. No, we want that So we only have this nice hamburger I can write. This looks already a lot better and we can even change his hamburger. I can if you want. Teoh. There are a lot off Cool Aikens here. Some of them are really cheap. Oh, this is the black ones you can seize on. They need to make it white. Let's just try. You can try different effects Here, for example, collapses pretty nice. If you don't click on the I can. You know there's a nice animation here. It is very simple, very clean And if you scroll down, you can disable the search bar for your menu over here. All right, This already looked pretty good. And here we can also change the collars. Of course. I'm gonna make the hover color, the same purple collar, all right? And maybe just make the borders also white. So there are actually no borders. This looks pretty good. All right. I think this is good enough for now. I'm gonna click on X and I'm gonna go back. Teoh wept, and I'm going to click on Publish and let's just see what we've created. So click on the X and as you can see right now Oh, I think it's Yeah, it's a little bit too big. I think I need to put it on 16. But as you can see, this is pretty nice. I'm pretty happy with it. And the great thing about this is that it's free 7. Want more?: So now you've seen what you can do with the free version. The free team Ocean WP inside of repress if you want to get to the next level and you want to create a header that is a little bit more custom, has a little bit more items, maybe has a button or has some social media Aikens. I also have a skill share class on that, and for that you will need elemental pro. So if you just want to stay on the free features dis glasses perfect for you. But if you want to get into the next level of headers, then I suggest that you click on my profile and check the other class that I have on creating a transparent header with Element or pro. There's also a video on there on how to create a food or with elemental pro, so you can watch those glasses on my profile for now. Thank you so much for watching and I hope to see you in another video