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
Видео Elementor Pro Header Tutorial 2020 канала Ferdy Korpershoek
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
Видео Elementor Pro Header Tutorial 2020 канала Ferdy Korpershoek
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
Elementor Tutorial For Beginners 2020Divi vs Elementor Pro | In-Depth ComparisonHow to create a Transparent Sticky Header in WordPress with ElementorHoe Maak Je Een Wordpress Website 2020The Top 10 Wordpress Plugins for the end of 2020Hoe Maak Je Een Webshop 2020 (Dutch Tutorial)Create an Affiliate Marketing Website | Complete Beginners CourseSections, Columns, Margin & Padding EXPLAINED - Elementor Tutorial Wordpress for Page LayoutCreate Sticky Sections In Elementor ProElementor Pro Header Tutorial - Sticky Transparent Headers Hello ThemeHow To Make A Wordpress Website 2020 | Divi 4.0 TutorialPlease (DO NOT) Use Images This Way In Your WebsiteWhy you should NEVER start in Elementor, but in Adobe Xd (improve your web design process)How to create a Transparent Header Menu in Wordpress with Elementor ProDynamic Content For Elementor | Dynamic Posts v2Card design to Elementor, create the layout step by stepElementor Transparent Header On ScrollElementor Complete Tutorial 2021 ~ Build a Full Website with ElementorMake A Wordpress Website Using Elementor Pro