OceanWP Header Tutorial with Elementor FREE
Вставка
- Опубліковано 22 січ 2025
- OceanWP Header Tutorial with Elementor FREE
Building custom headers with OceanWP and Elementor Free is super easy and powerful and in this updated video for 2019, I'll guide you through the entire process, one step at a time.
By the end of this OceanWP Header Tutorial, you'll be able to create your own fully custom WordPress headers with ease.
I'll also show you how to ensure your headers are fully mobile responsive as well as a couple of advanced techniques to get more from your #OceanWP Headers.
OCEANWP: bit.ly/2fRHBr0
Take your #WordPress website and skills to the next level!
AFFILIATE DOWNLOADS
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
CartFlows Pro: bit.ly/2KuxhCm
GeneratePress Premium: bit.ly/2Ydn1SE
Crocoblock: bit.ly/2BD7e6E
Pre Order Brizy Pro NOW: bit.ly/2Ji97r8
OCEANWP: bit.ly/2fRHBr0
ELEMENTOR PRO: jo.my/1s0t2s2
WPBakery Page Builder (Formerly VISUAL COMPOSER): bit.ly/2NVbVNP
DIVI 3 Page Builder: bit.ly/2HiiDcE
DIVI Theme: bit.ly/2G8JMiA
SMART SLIDER 3: bit.ly/2G0G1vB
Astra Pro: bit.ly/2zruoKn
CSSHERO: bit.ly/2qbrRl6
SLIDER REVOLUTION 5 - bit.ly/2NYr8NV
IMPREZA THEME: bit.ly/2mpK9wp
SUBSCRIBE
bit.ly/2rX7rhu
LETS CONNECT:
/ wptutz
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk
Don't get left in the dark about using *OceanWP custom headers*. Take advantage of this newly updated tutorial with some added goodies and get creative in 2019!
@WPTuts Didnt find the plugin with the required Elemetor extensions. Can you Post the link?
Hello , in your rutorial you mention to add the oceanwp elements but can't found under new plugin......
I followed the tutorial exactly till 3:13. There is no "Oceanwp elements" section in my Elementor control panel. Is it only available in the paid OceanWP?
After another whole day trying to edit a client's Header, I found your video and it solved a problem I'd been seeking for months! Thank you SOOO VERY MUCH!!!
Oceanwp elements don't appear on my side? Even if Ive install the pluggin...
Same, any luck?
Same here
Same here
Hier to
I just caught him saying in the beginning that you need OceanWP Pro
hello i watched your video how to hide dropdown menu especially if you a lot of tunnels and subcatgeories ❤️❤️❤️❤️❤️
Does ocean elements comes infree version of ocean wp theme
Excellent resource, thank you! I have one concern...2022 Elementor appears to only allow inserting a logo in the Pro version. Has anyone else noticed this?
sorry I didn't understand if the OCEANWP Elements for Elementor are available only if you pay for them?
Glad I bought the Extension Bundle through the link below
In ocean wp How we can add multiple images in one section?
Welcome !
Why isn't Oceanwp Element showing up for me?
Help. I had someone on ffiver make a website and she used ocean wp.I pressed some button and lost alot of the skeleton template. I fixed most of it but now I have my footer not showing up on pages , but it is in edit mode. Can you help? They are showing on posts though
Hello and thank you for this tutorial. I have the oceanwp theme and created their header inserting an mp4. I love how it turned out. But after HOURS and hours of research and tweaking every wee thing I STILL cannot get the mp4 video clip (set on a loop) to show up on mobile phones. I have deactived the sticky header, tried different breakpoints, cursed considerably and all to no avail. Please help!
Hello, I wanted to create header on me website but I can't see widgets Ocean Wp, there are blocked. How can I activate them?
Hi is I've added a custom header but it's not showing on other pages? What have I missed?
I'm using latest version of Wordpress and also having updated version of ocean WP so please tell how to hide tags in oceanwp theme
login and search are not anymore in the free Elementor section ....
Hi Can you do it with Gutenberg?
Hello sir
How can I custom the mobile version to be like the laptop version so the culom be one line
It wasn't helpful to me.
I need a new header, but when I select the custom one, it is placed all the way to the right and some social icons from the previous header also remain. I'm using the Demo Architect.
I'd also like the header not to cover the image but for the image to start below the header. How can I do it? I can't find the solution anywhere.
Ocean WP Customiser keeps overriding my styles but when I change them in the customiser it does nothing :(
Great one ! So easy to understand !
Phew! Really great video...but now I'm going to replay it at half speed so I can actually absorb it all.
So do you want say he is jet speed
i can't found "navigation" in the list of gaps... What have i to do?
Very helpful tutorial as usual!
Thanks for this video. If I don't have OceanWP pro or Elementor addons for OceanWP, how do I achieve this using the custom header and shortcode
I have Learnt a lot of thing from you...thank you sir
Nice explanations, thank you! Everything is clear and simple. On my Oceanwp I am trying to change the top bar, above the header. I'll try to make it following your video.
I like your video but on my dash panel i don't have a theme panel option, any idea why?
Do you have Ocean Extras plugin installed?
@@WPTuts no I don't, thanks for the prompt reply. I was watching "create a pro website" guy but he left me confused on a lot of aspects.
Thanks so much! These are the king of tutorial I prefer !!!
I bought elementor pro, it could be that I can use it in oceanwp, but I don't use wordpress
Bruh I've been struggling with the header part on Ocean WP and you made it very easy to understand. Thanks a ton :D
hi there, i wanna ask why i cant see the "Navigation" in the elementor? and how can i make the menu as a scroll down one with showing more details while hovering the title? thanks
I have the same problem. Search but only get Wordpress widgets. Don't have those horisontal/vertical Elementor navigators?
Seems like you need to buy it from OceanWP!
best tutorial ever on youtube
Hi Paul interested to know why use CSS to hide search bar over just selecting the options?
Just showing both methods of hiding it more than a particular preference. 😁
@@WPTuts thanks by the way great videos you are doing learnt so much
No problem and great to hear you're finding them useful 🤘😁
Thanks for the great tutorial. Very clear and comprehensive. Will definitely watch more of your videos.
Awesome tutorial. Thanks for your great work.
My pleasure Brent 😁
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 don't have that "Navbar" or "Navigation" in my Elementor widgets, any idea why?
same here
It's for the Ocean WP pro or Elementor add ons for OceanWP.... Both are paid features unfortunately 🙁
is it possible to make split homepage in oceanwp with 2 pictures linked to a new categories ? for example on the left side would be DOG pic with link to category "everything about dogs" , and on the left would be CAT picture with link on category "everything about cats" ...so i could have 2 different blogs on the same wordpress...i hope you understand my question
Where can i get OceanWP elements plugin ?
I got the OceanWP Elementor Widgets extension here: oceanwp.org/extension/ocean-elementor-widgets/
how do i shrink the header on scroll in free version of oceanwp theme
Thank you so much for the video! I was so frustrated and didn't know how to get to a clean page in order to create my header.
That tutorial is awesome, thanks very much for your work, it helps me a lot! Greetings from Germany 👍
is all of this free? what extension are you talking about we need to buy for elemntor to ocean wp?
Thanks for your great tutorial. Clear and Simple. Great Job :)
thanks for great job
The Theme Panel doesn't show up for me.
Thank you for your informative explanation. I regular watch your videos in youtube. Relly your effort is best for explanation. But now i make a header for my site but it is coming with site title i could not hide the site title anyhow? Would you please give me any advice , how i can remove site title inthe header?
Thanks got it done in just a few min.....
Okay, so Elementor has updated since this video was release. Thing is Elementor requires Premium, including build up headers. is there other way without using Pay stuff. By the moment there is not good income for this and would be nice to learn to use OceanWP and do not broke or die in the attempt.
I have Elementor Free installed but don't see OceanWP Elements. What gives?
Michael Burch I also don't see Ocean WP elements. It probably has to be paid for....like $$$.
ocean elements is not displaying in elementor
Thanks Paul. How do you take this a step further and create a slide in nav (used with the Hamburger btn) and then customize that? Is this though OceansWP or using an off canvas widget? Again, as always, great tutorial! Keep 'em coming.
Off canvas would probably be the best option, but I believe if you use Elementor Pro you can use the Pop-Up builder to create a similar effect.
Why I don't have the "theme panel"? Is because yours is Elementor Pro?
Have you installed the free Ocean Extra plugin? If not, you'll need to add that to get the theme panel.
@@WPTuts Thanks for a great tutorial! I have the same problem. And yes, the plugin is installed and activated.
How to get the logo and mobile menu on the same line? Is that even possible?
And thanks for (all) the video(s)!
Off the top of my head you'll need to resize the logo on mobile devices and that should allow the mobile hamburger menu to shift up inline with the logo.
when we click on the links added in the footer like about us or cart , these link opens in the new window,
any idea how to open these links in the same window
Very good and very useful tutorial. Thank you for this great job.
Hi, I already have a header setup with OceanWP since 2 years ago, now I want to edit with elementor but it's not possible. Is there any plugin I need to download from elementor in order to access the header to be edited. Your tutorial is easier because it's starting from the beginning with elementor (the creation) but mine was with WP elementor so it's not accessible by elementor to edit. Thanks
I don't have the theme panel
Do you have Ocean Extras installed? If not, you won't have that panel.
Thanks for that Paul. Do you personally feel OceanWP has more features and more thought out than Astra?
I think both are great themes. The free version of OWP has more options over Astra, but if none of those options are useful to you, both provide a great starting point for a website.
Added bonus with OWP, if you install the free version, you normally get the ability to download the Sticky Headers add-on for free via the WP Dashboard. 😉
@@WPTuts Added to the comment I just posted: What about if you either choose Pro Astra vs Premium + extensions OceanWP? Purely for a woocommerce store?
Thanks for your tutorial on oceanwp header. Am having problem oceanwp header, its only showing the mobile menu on the desktop header.What can I do. thanks.
This is basically the same as a theme (I won't name to protect your affiliate intentions but you do have it listed) and it's ability to hook an elementor template into certain positions of the page, header, footer, sidebar, etc. You just create your template using Elementor and then insert the template shortcode into the theme's hook sections ie: wp_head, Before Header, Before Header Content, Before Footer, Footer, and After Footer Content. It looks like OWP is similar with it's library shortcodes.
Yes, there are many themes that provide template shortcode hooks. But in the case if OWP, you can directly link to the template via its own library without the need for messing around with shortcodes.
Personally, I feel that's a more elegant solution. 👍😁
Thank you! Time saver and a "no brainer" (now...)!
Is this dne with OceanWP FREE as well?
If you want to use the logo and menu widgets you'd need Elementor Add-ons for OceanWP, but you can still use the custom header feature as well as the short codes without that add-on.
On my ocean wp there is no "theme panel." I'm using elementor pro and want to really finish a homepage. What's the workaround here??!
I would have appreciate if you had mentioned that OceanWP Widgets for Elementor is not for free.
It's not specifically required to create a header with Elementor free and the OceanWP free theme. You ONLY need that if you want to use those specific widgets in the header. You can easily substitute those for alternatives that are part of Elementor free.
I didn't get the Select Template option appear when i select Custom Header to select my created header, what to do, please help.
Solved! Check this video out ua-cam.com/video/lfF0ZsYN6hg/v-deo.html
Thanks alot LOVE FROM PAKISTAN.
You say you are using the free versions of oceanwp and elementor, yet I do not have access to logo widget. What gives?
same!
Chech this out might help ua-cam.com/video/lfF0ZsYN6hg/v-deo.html
Really good information - thank you very much. Is it also possible to fix the header while scrolling without using pro/paid Plugins? Thanks in advance.
Hi I have purchased the OceanWP lifetime personal bundle. I was wondering how do i go about setting it up via my dashboard? Do I have to first add the free OceanWP theme and plug-in via my Wordpress Dashboard and then upload the purchased lifetime personal bundle zip file? Or do I just upload the purchased bundle? Or is there another way? I have seen your getting started video on the OceanWP website but that seems to be for just the free theme.
The theme is totally free, the bundle you've bought are the premium add-ons. Just install OWP as normal through the Themes section of WordPress, upload the OWP a child theme and activate that as opposed to the normal OWP theme. This will allow you to make changes to the theme if necessary and not worry about losing those changes when an update comes out.
Once uploaded and activated, you can simply upload any / all of the premium add-on's you've purchased, activate them and input your license key and they will be available to you via the Customizer.
I hope that helps?
Why my elementor Don't have "Ajax Search"?
Mine doesnt neither... he doesnt explain the things
@@danielfernandes6293 I mailed him. He did replied me that This comes with a premium bundle. You have to pay for this.
Excellent
hey, whats the plugin called, that makes me use the navigation element? thanks!
I like this mate but a question for you. How do you give the custom header a color (example sky blue) as the rest of the page will be that color
Thank you
Nice tut ,sir you are great!
Make a e-commerce header
Like Amazon header
Thanks for the vid. I didn't see how you installed the free version of OceanWP? I went to their website but it's all Pro versions.
Just go to the themes section of WordPress, new theme and search for OceanWP. Install, activate and that's it for installing the theme. 👍
Hey Paul, is there an advantage to building a custom header like this from within OWP versus building it with Elementor Pro theme builder?
The main benefit is that you don't need Elementor Pro and you can also take advantage of OWP's sticky headers plugin, etc.
You are perfect
He uses better screen resolution is what also makes it clear to read,
@@jasonbeard haha... I think you like that screen resolution. Call it a hunch ;)
WPTuts yep tooo right.
But its also about everything being LARGE which when watching it via mobile devices we can actually see whats going on.
To many others out the doing 1080p on a huge screen you ca see their heads move following the pointer yet can see whats going on on small 4inch screens.
@@jasonbeard I do agree though, it certainly makes things easier to see playing back on a mobile and also better when viewed on the big screen TV.
@@WPTuts i reckon this is good size, check out the ZOOM on this vid
Hello! Nice Tutorial, but on my case i've missed the Logged In/Out widget, what should i do to make it available? thanks in advance
yeah, well, right off the bat, my wordpress does not have a theme panel, so as great as this video appeared to be, it is useless to me :(
Thanks Dear sir
Well, I leran some from your tutorials, but they are very misleading , always something you need to buy, that you do not tell in video. In this cace it is OceanWP Elements you need to buy. What is your promotion from them?
only negative here is that this is if you have purchased OceanWP, elements do not show in elementor
How to remove search icon from main menu?
In the customiser under the Header / Menu section I believe. 🤘
brilliant
Sir Video On Jet Mega Menu By Croco Block
You will oceanwp pro for that tutorial. Plz atleast write a correct title. Don't mislead people
Awesome, thanks. A leeeeetle bit slower would be helpful :)
How is it free of you are using pro elementor..😡
this is not free there are no oceanwp elements you need to buy the pro for them
The title says Elementor free as in, not Elementor Pro.
Navigation is not free，it must be elementor pro.
Could be, if you follow this video ua-cam.com/video/lfF0ZsYN6hg/v-deo.html
Precisely the tutorial I was needing. Is there a chance I can give you a screenshare (I can send you a link in an email) just to get some high level ideas on how best to put OceanWP to work for our project? I'm this close to committing to OceanWP for this rather large project. Tx. info at mbshootout daughtcalm - jeff
great tutorial, but you forgot to mention how to hide that search icon from the menu? thanks prnt.sc/wczokt
titles it elementor free and then immediately starts showing elements from the paid for version. very misleading, downvoted. have a great day.
I think you'll find it is titled Elementor free and that's what is used here. The oceanwp plugin is paid for, not Elementor.
Soooo, u r using pro vession of OceanWP, but in your vedio title write FREE!!! what a shame and deception!!! 👎
It says Elementor Free, not for free. 🤷🏻♂️
Sorry to say but it is much too fast to follow