Free Transparent Header Tutorial in Wordpress - OceanWP Header
HTML-код
- Опубликовано: 26 авг 2024
- He guys, today I have a pretty interesting tutorial. It's the very popular effect transparant effect for your headers and menu's. It's pretty awesome that you can do this with free software like the OceanWP theme (I know I mispronounced it, lol. In Dutch we say "Wee" in stead of "Double U"). This means that you don't need a Wordpress menu plugin, you can just do it in the Wordpress menu customize feature is you have OceanWP.
All the pages are made in the free version of Elementor: livingwithpixel...
→ Software I recommend
Hostinger for affordable webhosting: livingwithpixel...
Siteground for premium webhosting: livingwithpixel...
Elementor for no-code web-development: livingwithpixel...
Figma for Web Design: livingwithpixe...
All recommended software & discounts: livingwithpixe...
→ Starter Guides for Beginners
Elementor Starters Guide: livingwithpixe...
Figma Design Starters Guide: livingwithpixe...
→ Full A-Z Courses
Elementor Pro Mastery Course: livingwithpixe...
Figma Design Mastery Course: livingwithpixe...
Business Course: livingwithpixe...
→ Social media
Tiktok: / rinodeboer
Instagram: / rinodeboer
Twitter / X: / rinodeboer
Some of the links above are affiliate links, which means that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn't make all these videos without it.
I like the way you say Woo-commerce and colours
A bit late to the party but... the sound of you clicking the left mouse button is kinda asmr.
Good stuff.
I like to use Elementor Canva for this. It can be activated by clicking on the setting icon the bottom if the elementor editor and changing the page layout to Elementor Canvas. Then it automatically removes the header and footer.
Thank you so much! Your videos are better than my course videos
Love your smile bro
❤️ ❤️
Awesome! I'm using Kadence, yet your tips and tricks are very relevant with that theme as well. My header looks incredible! Thank you.
Ended up going with a different theme because I could not for the life of me figure out how to disable social media and contact showing up in the mobile dropdown. Finding Neve and Astra to be MUCH more intuitive.
You are doing a great job dude... that's amazing .
Absolutely love your videos!!
that was awesome!! thank you so much!!! I thought this worked perfectly and then you got to customizing mobile view....fantastic!!! Thanks again and have a good day, Anna
Thanks very helpful there is a problem with logo format in oceanwp theme it accepts only png no svg could you please help us fix this
Help, when ı make it transparant, the background keep staying white instead of being onthe the photo, how can ı fix it?
Your videos are really awesome. Short & Sweet. Thank you very much.
So nice of you! Thanks
You are the best. In my header stayed a white space but i will fix it haha. Thanks
Es justo lo que estaba buscando, gracias!
thanks boss!! So useful and free!
Great content with great quality. Keep up the good work, Rino!
Thanks a lot brother, I learned a lot of things from you. You are just a more than a youtuber, keep it brother Well done 👌
Thank you so much.... that's exactly what was I searching...
How do you make a double Top bar to put in social media icons..above the top menu??
struggling with this, anyone has a solution?
Nice Rhino , you are the man :)
How to sort the header on other pages (other than home page) getting merged with the content/body of the pages?
Hi
Thank you for this video ,I have a problem when click on header menu item shows a border surrounding the element.
How i can delete header menu border?
Thanks so much.
Nice Video Rino, my question is that I am using the Divi theme so I can make the same like this customized header and footer.
You are so damn likeable. I love the relaxed way you explain.
Super awesome bro please continue ! And Thank You so much
Hello, Thank you for this! My background is not transparent even if i have followed these steps. Why is that? I use OceanWP and elementor the settings is transparent in customs.
Thank you! 1 Question please; Can I install that theme on my current Website without worried it will mess it up?
Can this be applied to a front page only? All other pages are screwed. Thanks for your help.
Thanks, very interesting tutorial!
kein problem, you re doing fine with pronunciation, Bro we need to tutorial on how redesign product page and applying headers and effects on it, using free Elementor or any free plugin :)
notify me if ok :) matin.diab@gmail.com
What about the readymade menus provided by oceanwp and elementor, do i need to delete them and create my own menu?
Always giving awesome content. Thanks mate.
thanks
Can I use transparent header only for my homepage?
thank you. But when I enter the blog pages , it disappears. How do I solve this
Great my friend! Love your tutoriala so much, nice work!
When putting the description in the categories, they appear when I enter to visualize them, how do I hide them in the oceanwp theme?
I am using Woocommerce and Woocommerce is showing error message with "Show Card" button in the area of transparent header. How it can be fixed? How can i change position of Woocommerce message?
Awesome work. Please make one tutorial on how to choose a color scheme for website?
That's a nice subject. I will write that down! Thank you
Hi. What size is the video content here? My video doesn't fit to the whole screen in mobile.it also doesn't autoplay. I am new to wordpress. Someone pls help.
Why I don't have these options in my customzing bar
you made my day sir
Awesome website!
Thanks man, GREAT TUTORIAL!
how to create a sign up page? And how to create a payment plan before full post and half page of post show before the payment plan and other full page is show after fill the payment form plz create a video on this questions plz plz.
Thank You, very clean explanation
amazing man....................>
First of all many thanks for all the good video's you put on your page. I really learned a lot. Also this video. But I have a question. Is it possible to let the header stay on the page. So when you scroll down, the logo and menu stays. Thanks again.
This is good but do you know how we can change the menus background color upon scrool. Because when you do a scroll the menu almost not readable especially when you have section which is white
oceanwp header video url how to remove/// url not show
How did you add the video in first place?
Anyone else having a problem with this? The transparent option doesn't push my content down. And also the header disappears when I go back to edit with elementor. It is only happening with the transparent option
Where if i want change font?
Thanks for help! Maybe a tutorial about making the website responsive with elementor? Are there ways to make it fast responsive?
hi rino, is it also possible to change pictures in ocean wp ? ( in the hero page ) or du i need elementor to change the picture-content ? i think so.
Hi Rino, how do I change the transparent header for other pages which do not use a dark background?
Is dit ook mogelijk in Astra?
Hey Rino,
Can you make video about how to create beautiful looking contact form using elementor
That's a good video idea. I will put it on my list.
What works best for me is to use elementor pro with the hello elementor theme and then to create the header only with elementor pro with a "header property"
I've been wondering if there's a theme specifically for use with Elementor. I am in early stages with a client site and am having trouble doing certain things. Maybe I'll give that a try.
@@nunziobusiness1509 yes, elementor has its own theme, its called "hello elementor"
Nice tutorial. Question: When you scroll down, does the background on the menu change to a solid dark color? It seems like white text on a transparent background would blend in too much when scrolling down the page with other light colored elements moving in behind the white text.
Do you have any video creationg a wordpress blog for free??
great 👍👍
Nice! Subscribed. How do we align the logo to the left?
you are a lifesaver man :)
Thanks for the tutorial! I'm wondering, how would this work with a blog entry?
Sir can you help me with the thing that how did you made and designed your portfolio page of the website.
Hoping for a reply :)
Ocean allows to add buttons on header?
thankssssss
Why would you want to change the hamburger? I thought that was the universal icon for a menu?
It is, but sometimes you want something a bit more creative or on-brand
Hi Rino, I was wondering if it is possible to have the links in the menu refer to position on 1 page. In a way that the link makes the page scroll down.
When installing, for some reason now I have this blank right side taking up the site. Help!!! How can I make my site full screen again. Thx
Nevermind, I figured it out. It was in General then Content Width. Thx. Great videos!!
How are you using the . local domain? Is that done through WP or your host?
hi man, you make a good videos and i wanna ask why don't you giveaways ,like giveaways of elementor pro ?
Thanks Rino
How add free sticky header at this header?
Preety useful 👍☺️
How to fix outbackground color
Thanks so much for your tutorials! I am wondering if I can add a short sentence after the logo but before the menus? (I mean in the middle space between them) I see there is a "content after header" in the theme, but if I put the sentence there, it's actually behind the menus. Is there a way to achieve that? Thanks so much.
No problemo. That's possible with Elementor Pro. I also have a video on my channel about creating a transparant header with Elementor Pro. With that cool you can add any item to the menu that you want. I hope that is what you are looking for!
Je bent een held!
I can make the header appears just like yours in the video, but when I go back to edit my home page thru Elementor, I don't see it, making it hard to set up the other elements above the video banner. When I publish, I also see the menu on the web, only editing on elementor I don't see it. Do you know what could be the problem?? Thanks!
He Bruno. The problem here is that this menu technique is not an Elementor element. So that means that you don’t see it in the Elementor editor. So just make sure you add a little bit of extra space on top of each page and just imagine the menu sitting there while building the page. I myself don’t do this because I don’t like that workflow, and that’s why I use elementor pro. Because with pro you can even design the header+menu with the Elementor editor. I also have a few video’s about Elementor Pro on my channel that could be helpful. Hope I answered your question!
Thank youuuuuuuuuuuuuuuuuuuuuuuuuuu!!!!!!!!!!
Hey, How do you add dynamic menus onto your navigation? I struggle setting up the blog section to work on the main nav. Please share your process. Thanks
under menus.. nest the items you want under the main item and it will become dynamic. You can also define how it pops out.
Can you make a tutorial for parallax website
Sure! Good idea. I will write that one down.
How can i add underline effect when you hover over the links in navigation?
How do you mean exactly? Isn’t this what I explain on 7:30 minutes in the video?
I got the way actually i am using GP theme
@@rauthbitu Ah alright, This tutorial focusses on the theme OceanWP. So that will probably be different in other themes.
Hi, i'm rebuilding my site, i have used elementor and oceanwp free version, evrything is ok beside one, i have created a transparent menu using theme customiser just like your video, but whenever i click the site title it's leading me to a different post page, i can't figure out why , can i get any info on this problem ??
i didn't put any logo, just showing the site title top left. i want it to link with home page.
You have to set your Home page as a home page in Wordpress settings > Reading. Hope this helps!
You are genius, thanks a ton 😇 it really works.. I will keep in touch with you, i will show you my work after finishing... Again thanks a lot..
Though i'm having another issue, in the google page, when im searching my site name, still showing old pages link, coz im rebuilding my site totally so those pages aren’t active, after publishing my new site will this thing update? I mean google will show the new pages, right?
No problemo. You have a plugin called: Search exclude, where you can exclude certain pages from the search results. I think that’s what you are looking for.
hello what the web for your hosting ?
He Firas. That’s livingwithpixels.com/links and then click on the Webhosting Siteground button! I also have an tutorial on this channel about it. On how to Install Wordpress on that hosting.
Ocean we pee.
Lol
Thats not exactly what are you talking about