🔥 How to Create a Custom Header with OceanWP, free Elementor and Ocean Elementor Widgets

🧙 Learn OceanWP with Matthew Turner - No Tech Fluff
💡 In this video, Matthew will show you how to build a custom header with free Elementor and Ocean Elementor Widgets, as well as how to apply it to your OceanWP theme website. As bonus, you'll learn how to apply automatic and manual Ocean Sticky Header options to your Custom Header template.

Elementor Pro is not required to be to apply a custom header to the OceanWP theme. However, if you're absolutely E Pro savvy, you can use it in combination with OceanWP - the choice is entirely yours. And choices are what makes OceanWP so beautiful 🚀

⚠ The free Ocean Extra plugin must be installed on your website in order to get the Theme Panel option and enable the feature to use a custom template, as well as to be able to activate the licenses and use pro plugins.

👇 Find Chapters and additional information in description below

___________

___________

📌 Chapters and Descriptions:
0:00 Intro
0:13 About Custom Headers
1:03 Create a Template
🗨 You can set the template layout directly from the document panel and from the Template section by choosing Elementor Canvas.
1:35 Editing with Elementor
2:15 Add Sections & Columns
3:12 Add Logo
🗨 You can either use the Image widget from free Elementor, or the Logo widget if you're using Ocean Elementor Widgets.
3:42 Add Icon Box
5:33 Add New Icon Box
6:27 Add a Button
8:13 Style Second Section
8:30 Add Navigation
🗨 If you don't have Ocean Elementor Widgets installed, you can also use default WordPress navigation widgets that come with the Ocean Extra free plugin. However, the styling and options will be limited compared to the Navigation widget from Ocean Elementor Widgets.
9:18 Add Ajax Search
🗨 Ajax Search widget is a part of Ocean Elementor Widgets. You can use any other search widget per liking.
11:00 Finishing Touches
11:45 Apply Template in OceanWP
12:41 Automatic Sticky Header
🗨 Sticky Header options are provided with the Ocean Sticky Header, which is a part of the Ocean Core Extensions Bundle.
13:25 Manual Sticky Header
🗨 With Ocean Sticky Header you can choose which section of the custom template will have the sticky effect.

___________

⚓ About OceanWP
OceanWP is a 100% free multi-purpose WordPress theme that fits any project type, from blogs to eCommerce stores. It's lightweight, yet packed with numerous customization options and functionalities that'll help you build whatever website you imagine or need.

Need more functions and options? Easily extend OceanWP with custom codes or with the help of Ocean free and pro plugins.

The best part about running OceanWP? It'll suit both beginners and professional website designers equally.

___________

📘 Storyline:
When we're new to something, things can appear impossible and sometimes intimidating. But the truth is, even professionals go through the exact same phase when dealing with new challenges. And it was your feedback and thoughts that motivated us to create these beginner videos - welcome to the blooper reel!

Tech and rocket science free, inaccurate terminology and bloopers included. Knowledge and skills come with time, but the most important thing is to try and get things done. How do we know this? We've been there! So trust us when we say - you got this!

OceanWP beginner video tutorials will help you gain the courage and confidence you need to try things on your own and succeed.

And don't forget, the primary goal is to have fun while building your website

[purpleday]

It's great that you guys are making new OceanWP tutorials. I love this theme, keep up the good work!!

[vannboozy]

Hello, Thank you for the video. I have been using Beaver Builder. Will it still work with this? I can't seem to update my header at all, it will only let me add or delete my logo. Do you recommend Elementor? Thank you

[Miya-jogq]

Hi, thank you so much for this tutorial video. How exactly can you get the nav widget provided by OceanExtra to be shown? On my Elementor sideboard I found "Navigation Manu" under Wordpress section, but this one is not customised like the Navigation widget you added to the page on the video. I know you answered this question about a year ago but in the elementor setting > experiment section I couldn't find anything to solve this problem. Might I be missing something? Thank you in advance for your help.

[tonybp]

EDIT: Nevermind, the nav menu option is only available in the pro version of Elementor, you should change the title of the video.

Wow, thank you very much for this!... what sticky header plugin is it though? I installed the Oceanwp sticky header but it doesn't appear in the customization menu.

[jay-arcristobal]

do you have any latest video? why is it when try to change the style to custom header the select template is not show up?

[abcweb]

Hi there, I've just installed your theme on my website. Ocean WP is indeed a great theme. I am facing a little issue though. How do I get rid of the Underline bar that shows on the display links ? I did not see that function in the customizer. Thanks for your time ...cheers.

[jamesbrittain]

There is no theme panel and there is no demo in the theme panel. Please provide an updated video for the latest release of WP.

[Islamic]

I am using elementor but i can't add nav there is no nav from ocean wp can you help me mate

[aurelatypique]

Hi, i used a template ocean wp for my website, there is a border around the link on my menu (and on my others links) when you click on it. I don't know how to remove it. Can you help me please? I looked everywhere :-(

[leonie]

I think i solved the question below for now, but how can I prevent this for other templates that I want to insert in oceanwp? :

Hello! I also made a new header template for my website. Thanks for the video! When I activated it in Ocean Customizer i got a ''double'' header: the header that I customized in Oceanwp and the new header template that I made with Elementor, have ''collided''. I don't know how i can solve this without having to delete everything. I hope my question is clear enough. Did a make a mistake by not starting from a clean webpage? Thanks for the help in advance :)

[Jester-nk]

Hi OceanWP,

I tried doing it myself, but I don't have the "Sticky Header" available in my "Customize" section, like you do.

Do I need OceanWP premium for that?

[arrifashop]

Sir, i am using ocean WP, can you help me to find out html code "meta name=view-port". because i wanna change my website in to fully responsive mobile. thank you so much

[barsk]

Hi; Can you also make OceanWP with Gutenberg videos? Gutenberg is future and wandering how well it goes with OceanWP.

[SandraSkrebiske]

Video was great but the caption is misleading - thought that everything is for a free version. End up wasted 1, 5 hour for nothing since I cannot add good looking main menu.

[benjamin]

@OceanWP [OceanWP v4.0.3] | "Customizer > OceanWP Control Panels" | + | "Option: Meta Box" |
| I have deactivated several functions in the OceanWP Customizer and no longer want to use them.
| At that time used elements like the page title, the top bar with the content are still inserted.
| if you have deactivated this, it must be automatically removed in the Custom Fields options on the Post & Page

[jhnpldng]

How about without Elementor. After paying $100/yr and my site getting slower all the time, I dropped Elementor. I mostly use block themes now but they don't play well with some heavy plugins like LifterLMS or pretty much anything that adds it's own header or sidebars.

[Drazyhaze]

For whatever eason the custom class doesnt sticky my custom header. Super annoying

[JulieK]

Sticky header feature does not appear to be free anymore. It's SO hypocritical. Just say it outright that it costs money and don't waste people's time thinking it's in the "free plugin" as a "free feature".

[lunablack]

I dint have something like "Theme panel"

[raulbarriga]

I thought this video would be on a custom header but using code instead.