Elementor Header Tutorial | Floating Header Design With Elementor Flexbox Container
Elementor Header Tutorial: create beautiful floating headers with flexbox containers.
Get the same headers I use in the video 👉 https://wproads.com/elementor-floatin...
Download Elementor PRO 👉 https://wproads.com/elepro
My Other Elementor Tutorials
1. How to create a professional website from scratch 🖥️ with Elementor PRO (The Ultimate Tutorial!)
👉 https://wproads.com/eletutorial
2. How to create a Slide In Mobile Menu 📲 using Elementor Popup Builder
👉 • Off-Canvas Mobile Menu Elementor Tutorial ...
3. How to create a Mega Menu ⬇️ with Elementor PRO
👉 • Elementor Mega Menu Tutorial | Without Plu...
4. How to create a 404 page 🧐 with Elementor PRO
👉 • Elementor 404 Page Tutorial | + LottieFile...
Timestamps
00:00 Elementor header tutorial
00:07 Elementor headers quick preview
00:18 Links and resources in the description box
00:23 Pascal creator of WP Roads (Subscribe!)
00:35 Minimal floating header (maybe the next design trend!)
00:50 Preview of the headers we'll create in the video
01:32 Check my Elementor Mega Menu and Slide In Menu tutorials
The first header - style 1
02:00 Let's create our first floating header with Elementor
02:20 General settings IMPORTANT
03:06 Custom breakpoints (Elementor site settings)
04:18 Style the main flexbox container
04:52 Adding content to the header (logo, menu, cta, icons)
05:52 Check my ultimate Elementor PRO tutorial
08:36 Sticky scroll herader
09:47 Style the menu widget and other elements
11:02 Save and preview the header
11:15 Header responsive optimisation (tablet)
17:29 Header responsive optimisation (mobile)
Second header - style 2 (centered logo using grid container)
21:42 Let's create a floating centered logo header with Elementor
22:15 Create the header and basic settings
23:00 Let's add a grid container
24:32 Let's add the menu and the logo to the header
25:47 Check my Ultimate Elementor PRO tutorial
26:04 Styling the menu items
27:48 Add a sticky navigation effect
28:37 Adding a slight shadow to the main header container
29:43 Elementor grid container: adjust columns dimensions
31:02 Header responsive optimisation (mobile)
Third header - style 3
36:33 Let's create a floating header with logo and menu on the left
37:08 Basic header settings IMPORTANT
37:57 Insert the main container
38:19 Adding the content
39:33 Enable the Elementor "Menu" experimental feature
40:16 Check my Ultimate Elementor PRO tutorial
41:12 Styling the header container
44:08 Make the header sticky
45:48 Apply a slight shadow effect
46:17 Publish the header on a specific page
47:01 Check my 404 page tutorial in the description box below
47:10 Header responsive optimisation (tablet)
50:43 Header responsive optimisation (mobile)
54:19 Leave me your feedback in the comments!
And don't forget to subscribe! ❤️
#elementor #header #tutorial #wordpress #wproads