How To Make A Custom Header Using Elementor Pro

12,381

279 0

Published 2024-04-27

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.

Get Elementor Pro: ferdy.com/elementor

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

All Comments (21)

@chizotamichael3312 2 months ago

Ferry, I must say you are one consistent guy. I started watching and learning from you since 2014.
@moqeetsaleem6226 2 months ago

Its always a treat to watch & learn from you. Keep going...🎉🎉🎉
@webtappers7863 1 month ago

GREAT tutorial, thanks Ferdy!
@MBAinternetmktg 2 months ago

Another great tutorial, thank you, Ferdy!
@user-ib7ud3eo2i 2 months ago

First Comment Ferdy response Please. Love from Bangladesh 🇧🇩
@OryxVoyages 2 months ago

You're a miracle.. Keep it up Greetings from Algeria
@comparethetackle 2 months ago

thanks Ferdy, Very clear and easy to follow. Nice one
@ericlaperre294 1 month ago

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.
@rocketsunny2423 1 month ago

i prefer the blocksy header you used, its more efficient and less buggy
@pharmhealth3891 1 month ago

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.
@huaponejeo5827 2 months ago

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

thanks for the tutorial, let me ask you a question. why when i change for responsive for tablet and mobil, it changes the structure for desk to. thank you.
@zahidamumtaz1166 2 months ago

Really amazing!
@marc-antoinesenegas8047 1 month ago

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
@jorgknuvink272 1 month ago

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?
@_coderizon 8 days ago

Your Elementor pro Dashboard looks way better than my. Why is taht so?
@tessanicolai 1 month ago

Leuke tutorial! Maar mijn sticky header floept in beeld en slide niet mooi van de top naar beneden helaas. Enig idee hoe dat kan?
@MBAinternetmktg 2 months ago

Thanks!
@renssjjee 1 month ago

bruh, your layout is way different from mine
@gaspynko 2 months ago

Elementor wake up, its 2024 and you cant handle transparent header 😄 basic themes can do that with one click.