Creating A Unique Header With Elementor Pro: Step-by-step Guide

Learn how to create a custom header for your WordPress website using Elementor Pro. In this tutorial, we will create a header from scratch using a logo, menu, call to action, Google reviews, and more information about us.

With the principles I teach in the tutorial you can also create a header to your liking.

Timestamps:
00:00 Intro
01:50 Create The Header Template
02:42 Decide Where on Which Pages The Header Should Be Displayed
02:59 Create The Main Header Area
13:42 Create A Top Header
18:44 Make Your Header Mobile Responsive
24:54 Show A Different Header On Scroll
28:37 Add Custom CSS
37:05 Create A Mega Menu

[chizotamichael]

Ferry, I must say you are one consistent guy. I started watching and learning from you since 2014.

[addeyderoubaix]

Ferdy, you are the most professional mentor I have encountered. I hope that you and family are happy, healthy and lucky!

[nickr]

This was an excellent tutorial, and got me out of a bind. The header builder tool for my "pro" theme was terrible, and left me with a banner that couldn't be easily removed. Following this tutorial, along with turning off the theme header entirely, fixed the problem. Thanks, Ferdy!

[HodaMcClymont]

Ferdy! You are amazing! I just can’t thank you enough for you video! Ur teaching method is 10 ot of 10, ur video is super methodical and comprehensive!

[moqeetsaleem]

Its always a treat to watch & learn from you. Keep going...🎉🎉🎉

[ibudeoi]

First Comment Ferdy response Please. Love from Bangladesh 🇧🇩

[admindwp]

Ferdy, if you knew since i try this overlay! a big thank you

[MBAinternetmktg]

Another great tutorial, thank you, Ferdy!

[huaponejeo]

Thanks Ferdy great videos. I have an ask for you; does include this elementor pro series woocomerce too?

[pharmhealth]

Ferdy, Please i need help
I want the submenu indicator arrow to show only for mobile and not for desktop and tablet.
Anytime i try adding to only mobile, it shows on both tablet and desktop.
Any help, i can't find any video that teaches that.

[ericlaperre]

Ferdy,
Thanks for your great tutorials, I learned a lot by watching and following the way you develop websites.
In another tutorial you used the theme Blocksy and in my test website, I made the header and footer in this theme. As I have now Elementor pro, I would like to remake the header and footer with Elementor Pro and follow your tutorial "How to make a custom Header (and footer as well) using Elementor Pro". How can I replace the Blocksy header and footer with the ones I can make in Elementor Pro?
Thanks in advance for your help.
Eric.

[renssjjee]

bruh, your layout is way different from mine

[OryxVoyages]

You're a miracle.. Keep it up
Greetings from Algeria

[grahamrg]

thanks Ferdy, Very clear and easy to follow. Nice one

[jorgknuvink]

Hey, allereerst super dank voor de fijne video's! Vraagje, als je met elemtor pro een header wil maken, maar er zit ook al een header in je theme (bijvoorbeeld Blocksy) kun je dan deze stappen zetten of moet je dan eerst ergens anders iets uit zetten of weg halen?

[movespacelondon]

Hi Ferdy, interesting watch. Is there a way to contact you for consultancy / resolve issues?

[johncosta]

Ferry when I do the stick header using the code, on my transparent header I’m not able to see the logo?

Any ideas? I will rewatch again to see if I have missed something, but for today I’m done.

Spent nearly all day to accomplish something that doesn’t work 🤣

[mariano-cucinotta]

Hi thanks for the tutorial. Not knowing the English language, I struggle to follow the tutorial with subtitles and the video. I want to ask you if you could make the .json file available for a fee if necessary.

[ifeelinu]

When I create header it's problem " You have to call function 'the_content' in this theme to Elementor work in this page" Ferdy please help!

[marc-antoinesenegas]

I think I have a relevant question that might interest more people
How to include a button in the mobile hamburger menu ( at the bottom )
I know its possible
But without CSS I didnt get it