Free Transparent Header Tutorial in Wordpress - OceanWP Header

Подписаться 217 тыс.

Просмотров 81 тыс.

50% 1

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: livingwithpixels.com/elementor
→ Software I recommend
Hostinger for affordable webhosting: livingwithpixels.com/hostinger
Siteground for premium webhosting: livingwithpixels.com/siteground
Elementor for no-code web-development: livingwithpixels.com/elementor
Figma for Web Design: livingwithpixels.com/figma
All recommended software & discounts: livingwithpixels.com/links/
→ Starter Guides for Beginners
Elementor Starters Guide: livingwithpixels.com/elemento...
Figma Design Starters Guide: livingwithpixels.com/design-g...
→ Full A-Z Courses
Elementor Pro Mastery Course: livingwithpixels.com/elemento...
Figma Design Mastery Course: livingwithpixels.com/design-c...
Business Course: livingwithpixels.com/business...
→ 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.

Хобби

Опубликовано:

23 сен 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 114

@kevenreis224 4 года назад

Great content with great quality. Keep up the good work, Rino!

@MatthewFurman 3 года назад

Awesome! I'm using Kadence, yet your tips and tricks are very relevant with that theme as well. My header looks incredible! Thank you.

@aruyne 3 года назад

A bit late to the party but... the sound of you clicking the left mouse button is kinda asmr. Good stuff.

@Itsrichayo 4 года назад

Always giving awesome content. Thanks mate.

@yassinechikhi1178 3 года назад

You are doing a great job dude... that's amazing .

@siddi-livehappyistolivehea5311 4 года назад

Thank you so much! Your videos are better than my course videos

@darecek10 4 года назад

Great my friend! Love your tutoriala so much, nice work!

@mattsullivan8996 2 года назад

Absolutely love your videos!!

@annachino3602 3 года назад

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

@CBandara 3 года назад

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 👌

@sachcha88 4 года назад

Your videos are really awesome. Short & Sweet. Thank you very much.

@rinodeboer 4 года назад

So nice of you! Thanks

@marckogaga 4 года назад

Es justo lo que estaba buscando, gracias!

@mokarramhossain6670 4 года назад

Thank you so much.... that's exactly what was I searching...

@raphaelmutemi5387 4 года назад

Thanks man, GREAT TUTORIAL!

@Sucre414 3 года назад

I like the way you say Woo-commerce and colours

@myabsolutemarketing 4 года назад

Super awesome bro please continue ! And Thank You so much

@davidrodpul 4 года назад

Thank You, very clean explanation

@olimpiadeprosperis7699 3 года назад

Thanks, very interesting tutorial!

@Sean-Patrick 3 года назад

You are so damn likeable. I love the relaxed way you explain.

@ungravityfpv Год назад

thanks boss!! So useful and free!

@zeljkomilicevic8790 2 года назад

Nice Rhino , you are the man :)

@talhaaftab4284 3 года назад

Love your smile bro ❤️ ❤️

@vikasgarg4227 4 года назад

you are a lifesaver man :)

@AwaisHunjrapk 3 года назад

you made my day sir

@seavekbr7820 3 года назад

You are the best. In my header stayed a white space but i will fix it haha. Thanks

@SMIXXIMS1 4 года назад

When putting the description in the categories, they appear when I enter to visualize them, how do I hide them in the oceanwp theme?

@robertzoufood 3 года назад

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.

@renet2388 3 года назад

Awesome website!

@stan5661 4 года назад

Je bent een held!

@espedale 3 года назад

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.

@karimsahraoui7216 4 года назад

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

@shilpashinde2482 3 года назад

Preety useful 👍☺️

@webiansite5063 4 года назад

Thanks Rino

@martinmelissen76 4 года назад

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.

@zeeshanasgharraza2080 2 года назад

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.

@digitvibezcsr3308 2 года назад

amazing man....................>

@shesapiens 4 года назад

Thanks for the tutorial! I'm wondering, how would this work with a blog entry?

@LearnEnglishByCartoon 4 года назад

thank you. But when I enter the blog pages , it disappears. How do I solve this

@zeroimpetuous 4 года назад

How to sort the header on other pages (other than home page) getting merged with the content/body of the pages?

@palazzoneguiseppe8281 Год назад

great 👍👍

@stevewildsema7657 4 года назад

Thanks for help! Maybe a tutorial about making the website responsive with elementor? Are there ways to make it fast responsive?

@rishumishra6255 4 года назад

thanks

@vbivc 4 года назад

Thank youuuuuuuuuuuuuuuuuuuuuuuuuuu!!!!!!!!!!

@AdamElkayam Год назад

Thank you! 1 Question please; Can I install that theme on my current Website without worried it will mess it up?

@SunriseSessions 4 года назад

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.

@patrickknows2296 4 года назад

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

@matinmusleh9895 3 года назад

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 :)

@matinmusleh9895 3 года назад

notify me if ok :) matin.diab@gmail.com

@remiboxiplenti5788 3 года назад

Hi Rino, how do I change the transparent header for other pages which do not use a dark background?

@abedelkadersabbagh274 2 года назад

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.

@user-fc4ir3qk9g 3 года назад

Nice! Subscribed. How do we align the logo to the left?

@mehdiip 3 года назад

thankssssss

@arshnarula9032 4 года назад

hi man, you make a good videos and i wanna ask why don't you giveaways ,like giveaways of elementor pro ?

@trendinggadgets1054 4 года назад

Awesome work. Please make one tutorial on how to choose a color scheme for website?

@rinodeboer 4 года назад

That's a nice subject. I will write that down! Thank you

@andreasweckemann7347 2 года назад

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.

@mhkim68 2 года назад

Can this be applied to a front page only? All other pages are screwed. Thanks for your help.

@Headheldhigh18 Год назад

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.

@espedale 3 года назад

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.

@brokenenglish4266 2 года назад

What about the readymade menus provided by oceanwp and elementor, do i need to delete them and create my own menu?

@yudianyuan3353 4 года назад

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.

@rinodeboer 4 года назад

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!

@yusufduman8737 3 года назад

Help, when ı make it transparant, the background keep staying white instead of being onthe the photo, how can ı fix it?

@sanskar_saxena 3 года назад

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 :)

@kasparspaegle857 3 года назад

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?

@jayjayjaythebrand 3 года назад

How are you using the . local domain? Is that done through WP or your host?

@rodlivz 4 года назад

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

@nunziobusiness1509 2 года назад

under menus.. nest the items you want under the main item and it will become dynamic. You can also define how it pops out.

@eshanmohammed4644 Год назад

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.

@muhammadnafis4746 2 года назад

Can I use transparent header only for my homepage?

@mdqmatias 4 года назад

Ocean allows to add buttons on header?

@boettgg1275 3 года назад

How do you make a double Top bar to put in social media icons..above the top menu??

@maestrorobi4467 Год назад

struggling with this, anyone has a solution?

@magdalenealva5987 3 года назад

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

@skystink 3 года назад

How did you add the video in first place?

@alimaster5292 3 года назад

Why I don't have these options in my customzing bar

@urooj_safdar 2 года назад

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.

@V19Sports 2 года назад

oceanwp header video url how to remove/// url not show

@brunosoares9021 4 года назад

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!

@rinodeboer 4 года назад

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!

@Hissecretobsession1 3 года назад

Do you have any video creationg a wordpress blog for free??

@renspks 2 года назад

Is dit ook mogelijk in Astra?

@marcsmith4503 3 года назад

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

@marcsmith4503 3 года назад

Nevermind, I figured it out. It was in General then Content Width. Thx. Great videos!!

@batikmadnoor9609 3 года назад

Where if i want change font?

@nitinsuryawanshi1889 4 года назад

Hey Rino, Can you make video about how to create beautiful looking contact form using elementor

@rinodeboer 4 года назад

That's a good video idea. I will put it on my list.

@byeyou100 4 года назад

How add free sticky header at this header?

@gohanfreak9593 4 года назад

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"

@nunziobusiness1509 2 года назад

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.

@gohanfreak9593 2 года назад

@@nunziobusiness1509 yes, elementor has its own theme, its called "hello elementor"

@keninorlando9 10 месяцев назад

Why would you want to change the hamburger? I thought that was the universal icon for a menu?

@rinodeboer 10 месяцев назад

It is, but sometimes you want something a bit more creative or on-brand

@TechnologyKiBaate 4 года назад

How to fix outbackground color

@rauthbitu 4 года назад

How can i add underline effect when you hover over the links in navigation?

@rinodeboer 4 года назад

How do you mean exactly? Isn’t this what I explain on 7:30 minutes in the video?

@rauthbitu 4 года назад

I got the way actually i am using GP theme

@rinodeboer 4 года назад

@@rauthbitu Ah alright, This tutorial focusses on the theme OceanWP. So that will probably be different in other themes.

@manishakayal5494 4 года назад

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.

@rinodeboer 4 года назад

You have to set your Home page as a home page in Wordpress settings > Reading. Hope this helps!

@manishakayal5494 4 года назад

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?

@rinodeboer 4 года назад

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.

@JosephMasonda 4 года назад

Can you make a tutorial for parallax website

@rinodeboer 4 года назад

Sure! Good idea. I will write that one down.

@firash9710 4 года назад

hello what the web for your hosting ?

@rinodeboer 4 года назад

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.