Elementor Pro Header Tutorial 2020 - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Ferdy Korpershoek Video: Elementor Pro Header Tutorial 2020.
This video shows you how you can create custom headers, make them sticky, change the colors and logo when you scroll, and much more.

We will create a Header from scratch with a logo and a navigation menu. We will style the menu in a way that that background of the header will be partly or fully transparent. We will optimize the header for all devices and make it sticky, so when you scroll, the header sticks on the top of the page.

We will add social icons and optimize those for all devices. Then I will show you how to change the background color, link and icon colors, and the logo when you scroll so you will get something like this. I will also show you how to hide the social icons on a mobile.

After that, we will create a top header with social icons and a call to action and style it in a way that it will not stick with the main part of the header. We will also optimize the top header by adjusting the margin and padding pixel by pixel until we think it is perfect!

We will decide on which pages this header should appear, duplicate the complete header and remove the transparency, so we can apply it to the pages that do not need a transparent background.

In the end, I will show you how you can export your beautiful header and import it to another website so you can use it over and over again on your or your clients Elementor Pro websites.

If you already have a header and you want to go directly to the sticky header part, you can do that by going to the timestamps in the description. When you click on the timestamp, you go directly to that part of the tutorial.

Overview With Timestamps
00 00 Intro
00:10 Overview Of The Tutorial
01:42 Get Elementor Pro
02:51 Install and Elementor Pro
03:19 Active Elementor Pro License

The Elementor Pro Header Template
03:40 Create a Header
04:51 Add an Image
05:24 Create a Transparent Background
05:47 Add Editing Handles In Elementor
06:44 Publish Conditions
07:12 Add a Nav Menu
09:28 The Menu Breakpoint
10:24 Optimise The Header for All Devices
12:25 Change the Height Of The Header
14:15 Align the Logo and Menu
14:33 The Elementor Navigator
15:21 Use The Eye To See The Result
16:02 Create a Reference Area
17:10 Use Negative Margins

Make The Header Sticky
18:18 Make The Header Sticky
18:46 Add Social Icons
22:59 Hide Social Icons on a Smartphone
23:36 Style the Hamburger Menu

Change the Logo, Background, and Link Colors
26:10 Change the Link and Icon Colors on Scroll
28:38 Change the Image On Scroll

31:15 Create a Topbar
33:29 Play around with margin and padding

37:32 Create a Duplicate Header With Visible Background
42:53 Elementor Pro Display Conditions
44:45 Export and Import Headers to another website
47:21 Global Colors
48:06 Thank You

Published: Wednesday, November 4, 2020 10:24 PM
Category: Ferdy Korpershoek

31 Views

Related Videos

Popular
Overlapping Sections + Sticky Header and Footer with Elementor Pro. Elementor pro tutorial

by Best Webhosting Added 6 years ago 142 Views / 0 Likes

Create an overlapping sections effect alongside with a sticky header and a sticky footer, which is revealed once you scroll to the bottom of the page. The sticky functionality available in Elementor Pro allows you to design creative layouts with a modern and sophisticated look by using sticky sections, sticky headers, and sticky footers. Want to get hundreds of premium Elementor WordPress Themes, Templates and Plugins at only $19/month? • Subscribe to
Elementor Pro Header Tutorial | Flex Box Container Tutorial

by Best Webhosting Added 2 years ago 56 Views / 0 Likes

Learn how to create a simple or advanced header using Elementor Pro. Elementor Pro gives you so much flexibility when it comes to creating headers for your WordPress website. In this tutorial, I show you how to get the best out of your headers in Elementor Pro. Get Elementor Pro: https://ferdykorp.com/elementor Timestamps: 00:00 Intro 00:58 Install Elementor Pro 02:54 Create A Custom Header 10:58 Work With Nested Containers 14:18 Design The Menu 21:22
How to Add a Transparent Header to Your WordPress Website | Astra + Elementor Tutorial 2021

by Best Webhosting Added 3 years ago 66 Views / 0 Likes

Learn how to add a custom Transparent Header to your WordPress website in just 3 simple steps! We will be building this using the Astra Theme and Elementor for WordPress. Get a Domain Name & Hosting for Your Website: https://createaprowebsite.com/hosting (I do receive a commission when you use the above link, but it gets you a discount on a domain and hosting as well. So it's a win-win!) RELATED BLOG POST ----------------------------------------- http
How to Add Animated Header Text to Your WordPress Website | Elementor Tutorial 2021

by Best Webhosting Added 3 years ago 47 Views / 0 Likes

Learn how to add a custom animated text header to your WordPress website in just 3 simple steps! We will be building this using the Astra Theme and Elementor for WordPress. Get a Domain Name & Hosting for Your Website: https://createaprowebsite.com/hosting (I do receive a commission when you use the above link, but it gets you a discount on a domain and hosting as well. So it's a win-win!) RELATED BLOG POST ----------------------------------------- ht
Elementor Complete Tutorial 2020 - Build A Website With Elementor

by Best Webhosting Added 5 years ago 81 Views / 0 Likes

START HERE: https://santrelmedia.com/bluehost GET ELEMENTOR: https://santrelmedia.com/elementor Elementor makes wordpress website creation easy with drag and drop editing and seamless integrations with Facebook, Google, Mailchimp, and more. This video is a full tutorial for beginners, to show you everything you will need to know to make your website. Timestamps are below! SIGN UP FOR OUR WEEKLY MARKETING EMAIL: http://santrelmedia.com/MARKETING-EMAIL
Elementor Pro TUTORIAL INÉDITO! Como Fazer Header Lateral Popup (FIRST MOBILE)

by Best Webhosting Added 3 years ago 30 Views / 0 Likes

🏆 Neste vídeo vou te ensinar a como criar um header (cabeçalho) super profissional e funcional usando popup do elementor pro. Isso ajuda bastante na questão visual e funcional para mobile. 🚩 Elementor PRO + desconto: https://urlaki.com/elementor ✅ Material: https://mesaquemota.com.br/wordpress/header-lateral-popup/ 🚀 Hospedagem com 10% Off com Cupom: *MESAQUEMOTA:* https://urlaki.com/hostngr 💎 Grupo Vip Telegram: https://urlaki.com/wpx-canal-telegram
Elementor Header erstellen (2023): Einfach erklärt | Plus: Header fixieren, responsiv, ausblenden...

by Best Webhosting Added 2 years ago 58 Views / 0 Likes

✅ ALLE Infos zu Elementor Pro: https://wperfolg.de/elementor ✅ Das Neue WordPress Buch 2023 (Kostenlos): https://lp.wperfolg.de/f1/gratis-website-buch/ ✅ Neue Website Sofort Masterclass - So erstellst Du an 1 Tag Deine Wunsch-Website (ohne zu programmieren): https://lp.wperfolg.de/spezielle-website-masterclass/ ▬▬▬▬▬▬▬ Videoinhalt ▬▬▬▬▬▬▬ Teile jetzt das Video "Elementor Header erstellen (Deutsch 2023): Einfach & schnell erklärt | Plus: Header fixiere
WordPress Telefonnummer Verlinken (2020): Simples Tutorial | WordPress Anruf Button + Header Deutsch

by Best Webhosting Added 5 years ago 68 Views / 0 Likes

• Das Neue WordPress Buch 2020 (Kostenlos): https://lp.wperfolg.de/f1/gratis-website-buch/ • PROBLEME mit WordPress? Hier geht's zur Website-Komplettlösung: https://klick.wperfolg.de/l/website-formel-yt-bes-alle-videos • Zum Thrive Architect: https://wperfolg.de/l/thrive-architect-yt-bes • Videoinhalt • Teile jetzt das Video "WordPress Telefonnummer Verlinken in 2020: Simples und kurzes Tutorial - Egal ob per Link oder Anruf Button" mit deinen Freunde
Divi Theme Header Design Tutorial | Create A Custom Header

by Best Webhosting Added 3 years ago 73 Views / 0 Likes

earn how to create a custom header in the Divi theme. With a different logo on scroll, different sizing on scroll, and different colors on scroll. Get The Divi Theme: https://ferdykorp.com/divi Download the header: https://divi.ferdykorp.com thanks to the Theme builder within the Divi theme we can create custom headers using the Divi layout editor and place those headers anywhere on the website. I will show you how to make use of the image module, men
Free Transparent Header Tutorial in Wordpress - OceanWP Header

by Best Webhosting Added 5 years ago 86 Views / 0 Likes

He guys, today I have a pretty interesting tutorial. It's the very popular effect transparant effect for your headers and menu's. It's pretty awesome that you can do this with free software like the OceanWP theme (I know I mispronounced it, lol. In Dutch we say "Wee" in stead of "Double U"). This means that you don't need a Wordpress menu plugin, you can just do it in the Wordpress menu customize feature is you have OceanWP. All the pages are made in
Elementor Tutorial For Beginners 2020

by Best Webhosting Added 5 years ago 46 Views / 0 Likes

Elementor is the best free page builder for WordPress websites. Since Elementor is getting better and better all the time it is changing all the time. If you want to start to learn how to make websites using Elementor, this video is for you! In this video, I will go through the Basics of Elementor. In the first 2 minutes of the video, I show you what we will cover. In this Elementor Tutorial for Beginners, you learn what the difference is between a th
Popular
How to Make a WordPress Website | Elementor Tutorial (2020)

by Best Webhosting Added 5 years ago 108 Views / 0 Likes

Learn how to make a great WordPress website by using the Elementor page builder within this step by step tutorial! Get a Special Hosting Discount of 55% off! https://www.wpwithtom.com/namehero Get Elementor Pro: https://www.wpwithtom.com/elementor Create Your Logo: https://www.wpwithtom.com/stencil ___________________________________________________________ Timestamps: 0:01 Introduction and Preview 2:14 Domain and Hosting 10:22 Installing WordPress 15