OceanWP Header Tutorial with Elementor FREE

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

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

50% 1

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

Хобби

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

13 июн 2019

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@WPTuts 5 лет назад

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!

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

@WPTuts Didnt find the plugin with the required Elemetor extensions. Can you Post the link?

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

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!!!

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

Thanks for the great tutorial. Very clear and comprehensive. Will definitely watch more of your videos.

@cristianocortonesi8935 5 лет назад

Thanks so much! These are the king of tutorial I prefer !!!

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

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.

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

Thanks for your great tutorial. Clear and Simple. Great Job :)

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

Very good and very useful tutorial. Thank you for this great job.

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

Thank you! Time saver and a "no brainer" (now...)!

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

That tutorial is awesome, thanks very much for your work, it helps me a lot! Greetings from Germany 👍

@BrentTallent 5 лет назад

Awesome tutorial. Thanks for your great work.

@WPTuts 5 лет назад

My pleasure Brent 😁

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

I have Learnt a lot of thing from you...thank you sir

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

Great one ! So easy to understand !

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

Very helpful tutorial as usual!

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

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.

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

Bruh I've been struggling with the header part on Ocean WP and you made it very easy to understand. Thanks a ton :D

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

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.

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

thanks for great job

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

Thanks got it done in just a few min.....

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

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.

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

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

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

Glad I bought the Extension Bundle through the link below

@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?

@javedarts 5 лет назад

Nice tut ,sir you are great! Make a e-commerce header Like Amazon header

@susangemayel-tapper3794 5 лет назад

brilliant

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

Excellent

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

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!

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

Thank you

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

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?

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

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?

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

sorry I didn't understand if the OCEANWP Elements for Elementor are available only if you pay for them?

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

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

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

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?

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

hey, whats the plugin called, that makes me use the navigation element? thanks!

@Jim.Hummel 5 лет назад

Phew! Really great video...but now I'm going to replay it at half speed so I can actually absorb it all.

@kandulakumar7282 5 лет назад

So do you want say he is jet speed

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

Thanks Dear sir

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

Does ocean elements comes infree version of ocean wp theme

@ScottKoons1993 5 лет назад

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.

@WPTuts 5 лет назад

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.

@Black-Wolf-ke8nm 4 года назад

Thanks alot LOVE FROM PAKISTAN.

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

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

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

Hello , in your rutorial you mention to add the oceanwp elements but can't found under new plugin......

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

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

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

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??!

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

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

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

i can't found "navigation" in the list of gaps... What have i to do?

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

how do i shrink the header on scroll in free version of oceanwp theme

@mapes12 5 лет назад

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.

@WPTuts 5 лет назад

Just go to the themes section of WordPress, new theme and search for OceanWP. Install, activate and that's it for installing the theme. 👍

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

is all of this free? what extension are you talking about we need to buy for elemntor to ocean wp?

@wellnix53 5 лет назад

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.

@WPTuts 5 лет назад

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. 👍😁

@chadcarrierepersonnel8970 5 лет назад

Oceanwp elements don't appear on my side? Even if Ive install the pluggin...

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

Same, any luck?

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

Same here

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

Same here

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

Hier to

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

I just caught him saying in the beginning that you need OceanWP Pro

@birdbrainsolutions6112 5 лет назад

How to get the logo and mobile menu on the same line? Is that even possible? And thanks for (all) the video(s)!

@WPTuts 5 лет назад

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.

@wgm247 5 лет назад

Thanks for that Paul. Do you personally feel OceanWP has more features and more thought out than Astra?

@WPTuts 5 лет назад

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. 😉

@richburmond6761 5 лет назад

@@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?

@garethjenkins4756 5 лет назад

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.

@WPTuts 5 лет назад

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?

@UnlimitedElements 5 лет назад

You are perfect

@jasonbeard 5 лет назад

He uses better screen resolution is what also makes it clear to read,

@WPTuts 5 лет назад

@@jasonbeard haha... I think you like that screen resolution. Call it a hunch ;)

@jasonbeard 5 лет назад

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.

@WPTuts 5 лет назад

@@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.

@jasonbeard 5 лет назад

@@WPTuts i reckon this is good size, check out the ZOOM on this vid

@TK-kp8kt 5 лет назад

Hey Paul, is there an advantage to building a custom header like this from within OWP versus building it with Elementor Pro theme builder?

@WPTuts 5 лет назад

The main benefit is that you don't need Elementor Pro and you can also take advantage of OWP's sticky headers plugin, etc.

@Chris.888 4 года назад

Hi is I've added a custom header but it's not showing on other pages? What have I missed?

@abg.leonardoalfredotorresp3490 4 года назад

I bought elementor pro, it could be that I can use it in oceanwp, but I don't use wordpress

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

Ocean WP Customiser keeps overriding my styles but when I change them in the customiser it does nothing :(

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

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

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

hello i watched your video how to hide dropdown menu especially if you a lot of tunnels and subcatgeories ❤️❤️❤️❤️❤️

@BilalAhmed-xk6de 2 года назад

In ocean wp How we can add multiple images in one section?

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

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

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

Hello sir How can I custom the mobile version to be like the laptop version so the culom be one line

@wynexdiy-design2769 4 года назад

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

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

I have the same problem. Search but only get Wordpress widgets. Don't have those horisontal/vertical Elementor navigators?

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

Seems like you need to buy it from OceanWP!

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

Hi Can you do it with Gutenberg?

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

Welcome ! Why isn't Oceanwp Element showing up for me?

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

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

@daytripper75 5 лет назад

Is this dne with OceanWP FREE as well?

@WPTuts 5 лет назад

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.

@d.m.7420 Год назад

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?

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

Awesome, thanks. A leeeeetle bit slower would be helpful :)

@sheikhnasim3048 5 лет назад

Sir Video On Jet Mega Menu By Croco Block

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

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.

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

The Theme Panel doesn't show up for me.

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

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

I didn't get the Select Template option appear when i select Custom Header to select my created header, what to do, please help.

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

Solved! Check this video out ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lfF0ZsYN6hg.html

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

Where can i get OceanWP elements plugin ?

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

I got the OceanWP Elementor Widgets extension here: oceanwp.org/extension/ocean-elementor-widgets/

@paulmartin9812 5 лет назад

Hi Paul interested to know why use CSS to hide search bar over just selecting the options?

@WPTuts 5 лет назад

Just showing both methods of hiding it more than a particular preference. 😁

@paulmartin9812 5 лет назад

@@WPTuts thanks by the way great videos you are doing learnt so much

@WPTuts 5 лет назад

No problem and great to hear you're finding them useful 🤘😁

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

I like your video but on my dash panel i don't have a theme panel option, any idea why?

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

Do you have Ocean Extras plugin installed?

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

@@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.

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

I don't have that "Navbar" or "Navigation" in my Elementor widgets, any idea why?

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

same here

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

It's for the Ocean WP pro or Elementor add ons for OceanWP.... Both are paid features unfortunately 🙁

@mnburch 5 лет назад

I have Elementor Free installed but don't see OceanWP Elements. What gives?

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

Michael Burch I also don't see Ocean WP elements. It probably has to be paid for....like $$$.

@trasparent 9 месяцев назад

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.

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

ocean elements is not displaying in elementor

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

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

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

Why I don't have the "theme panel"? Is because yours is Elementor Pro?

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

Have you installed the free Ocean Extra plugin? If not, you'll need to add that to get the theme panel.

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

@@WPTuts Thanks for a great tutorial! I have the same problem. And yes, the plugin is installed and activated.

@sandeshchauhan7780 5 лет назад

How to remove search icon from main menu?

@WPTuts 5 лет назад

In the customiser under the Header / Menu section I believe. 🤘

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

I don't have the theme panel

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

Do you have Ocean Extras installed? If not, you won't have that panel.

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

I would have appreciate if you had mentioned that OceanWP Widgets for Elementor is not for free.

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

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.

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

Why my elementor Don't have "Ajax Search"?

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

Mine doesnt neither... he doesnt explain the things

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

@@danielfernandes6293 I mailed him. He did replied me that This comes with a premium bundle. You have to pay for this.

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

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?

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

only negative here is that this is if you have purchased OceanWP, elements do not show in elementor

@jeffchapman8992 5 лет назад

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