How to Build a Divi Global Header using the Divi Theme Builder

Video Description

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-mega-menu/ ➤ Divi Mobile https://diviengine.com/product/divi-mobile/ 🧑🏻‍💻 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-custom-global-header-in-divi-using-the-theme-builder/ 📚 How to un-Divify your Divi Sites Tutorial Series @ https://diviengine.com/how-to-un-divify-your-divi-sites/ ➤ Dribbble Design Inspiration https://dribbble.com/shots/7020630-Hinge-Website-Dropdown ➤ Learn more about Divi Engine @ https://diviengine.com/ ➤ Get the Divi Theme @ https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=58998 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