How to Build a Divi Global Header using the Divi Theme Builder
Divi Engine Divi Engine
7.42K subscribers
11,004 views
150

 Published On May 3, 2022

Keeping on track with our Divi Tutorial Series on Building Divi Sites that don't look like Divi Sites we turn to that distinctive Default Divi Header. Yet another dead giveaway that your site was built with Divi, but Divi Engine is here with solutions.

Sure, you can use the Theme Customizer to do some basic upgrades to your Divi Header, but all the cool kids are using the Divi Theme Builder these days. In this Divi Tutorial we will show you how to use the Divi Theme Builder to replicate a nice layout we found on dribbble.com.

If you don't know dribble.com yet, it is a great resource for design inspiration when the well has dried up. We even show you a couple of awesome plugins that will help take your Divi Header and Menu game to the next level.

➤ Divi Mega Menu https://diviengine.com/product/divi-m...
➤ Divi Mobile https://diviengine.com/product/divi-m...

🧑🏻‍💻 Note that all the code we use in this tutorial can be found in the Text Tutorial link below!

📖 Text Tutorial @ https://diviengine.com/how-to-build-a...
📚 How to un-Divify your Divi Sites Tutorial Series @ https://diviengine.com/how-to-un-divi...
➤ Dribbble Design Inspiration https://dribbble.com/shots/7020630-Hi...
➤ Learn more about Divi Engine @ https://diviengine.com/
➤ Get the Divi Theme @ https://www.elegantthemes.com/affilia...

CHAPTERS
00:00 Introduction
00:20 Last Installment: Custom Divi Button Styles
01:00 Find Inspiration on dribbble
02:09 Dissecting the dribbble header
03:14 Using the Theme Customizer Header Options
04:38 Adding a Global Header in Divi Theme Builder
05:41 Adding a 3-Column Row
05:56 Adding an Image Module for the Logo
06:05 Adding an Menu Module for the Menu
06:28 Adding an Text Module for the Phone Number
06:43 Refining the Divi Header Layout
08:43 Image Module Settings
09:51 Menu Module Settings
11:03 Inspecting a Page reveal the CSS
12:35 Text Module Settings
12:57 A note on Divi Conditional Display Logic
16:14 Adding CSS to the Divi Global Header
16:34 Centering Divi Modules Vertically
18:40 Creating the Animated underline Effect
20:24 Let's Review the CSS
22:24 Improving your Divi Global Header
22:52 Divi Mega Menu
24:30 Divi Mobile
26:16 Conclusion

show more

Share/Embed