What Is the Divi Theme Builder (and Why Should You Care)?
If you’ve been building websites with Divi for a while, you already know how powerful the visual page builder is. But the Divi Theme Builder takes things to a completely different level. Instead of just designing the content area of your pages, the Theme Builder lets you design every part of your site — headers, footers, and even custom templates for specific posts or pages — all using the same drag-and-drop interface you already love.
Before the Theme Builder existed, customizing your header meant digging into your theme’s PHP files or relying on third-party plugins. Now, you can build a fully branded, feature-rich global header without writing a single line of code. It’s one of the biggest reasons designers and developers alike continue to choose Divi as their go-to WordPress theme. If you haven’t explored this feature yet, get Divi here and follow along — this tutorial will walk you through every step.
Getting Started: Accessing the Theme Builder
Once Divi is installed and activated on your WordPress site, accessing the Theme Builder is straightforward. From your WordPress dashboard, navigate to Divi → Theme Builder. You’ll land on a clean interface showing your site’s structure — header, body, and footer sections — for any templates you create.
The Theme Builder works on a template system. You can create multiple templates and assign each one to different parts of your site. For example, you might have one header template for your homepage and a different one for the rest of your pages. For this tutorial, we’re building a global header that applies to every page on your site — the most common setup and a great starting point.
Creating a New Global Header Template
Here’s how to set up your first header template step by step:
- Step 1: In the Theme Builder, click Add New Template in the top right corner.
- Step 2: A popup will appear asking where you want this template to apply. Select Entire Website to make it truly global, then click Create Template.
- Step 3: Your new template will appear in the list. You’ll see options to add a Custom Header, Custom Body, and Custom Footer. Click Add Custom Header.
- Step 4: From the popup that appears, choose Build Custom Header to open a blank canvas in the Divi visual builder.
At this point, you’re inside the familiar Divi Builder interface — but you’re building a header instead of a page. Everything works the same way: rows, columns, modules, and settings panels. Let’s start building something professional.
Building Your Header Layout with Divi Modules
Setting Up the Row Structure
Click the blue + icon to add a new row. For a standard header, a two-column layout works perfectly — your logo on the left and your navigation (plus optional extras) on the right. Select the 1/2 + 1/2 column structure to get started.
Before adding modules, open the Section Settings (click the gear icon on the section) and set a background color that matches your brand. You can also adjust padding here to control the height of your header — something like 10px top and bottom padding keeps things tight and professional.
Adding a Logo with the Image Module
In the left column, add an Image module and upload your site logo. In the Image module settings, add a link to your homepage URL so clicking the logo always brings visitors back to the start. Under the Advanced tab, set a max-width (something like 150–200px works for most logos) to keep proportions clean across screen sizes.
Adding a Navigation Menu
In the right column, add a Menu module. This is where the magic happens. Select the menu you’ve already created in Appearance → Menus from the dropdown. The Menu module in Divi’s header builder is incredibly flexible — you can customize font, color, hover effects, dropdown styling, and spacing all from within the visual builder.
A few settings worth tweaking right away:
- Set the menu alignment to right so it sits neatly on the right side of your header
- Customize the font, size, and letter spacing under the Text tab to match your brand typography
- Adjust dropdown background and text colors under Dropdown Menu settings
Adding a Search Icon and CTA Button
Want to take your header up a notch? Add a Search module next to your menu for instant site search functionality. You can set it to display as an icon that expands on click, keeping the header clean.
For a CTA button, add a Button module alongside your menu items. This is perfect for things like “Book a Call,” “Get a Quote,” or “Shop Now.” Style it with a contrasting background color to make it pop. This single addition can meaningfully improve your conversion rate — it gives visitors a clear next action no matter which page they land on.
Making Your Header Sticky
A sticky header follows your visitors as they scroll, keeping your navigation accessible at all times. It’s a proven usability improvement — and in Divi, it’s surprisingly easy to set up.
Click the gear icon on your header’s Section to open Section Settings. Navigate to the Scroll Effects tab, then click on Sticky Options. Enable the sticky toggle and choose Stick to Top. You can also set a shrink amount so the header becomes slightly smaller once it sticks — a subtle touch that looks very polished.
You can even style the sticky state differently from the default state. For example, add a white background to the sticky header even if your default header is transparent. Divi’s sticky styles panel lets you set separate colors, backgrounds, and padding specifically for the sticky state — no JavaScript required.
Setting Up the Mobile Hamburger Menu
Responsive design is non-negotiable, and Divi handles it beautifully. The Menu module automatically collapses into a hamburger icon on mobile devices. But there are a few settings worth dialing in:
- Open the Menu module settings and scroll to the Mobile section to customize the hamburger icon style and color
- Set the mobile menu background color and text color to match your brand
- Use Divi’s built-in responsive editing (toggle between desktop, tablet, and phone views at the bottom of the builder) to check how your header looks on every screen size
- Adjust column padding and logo sizing specifically for mobile to ensure nothing feels cramped
It’s worth spending ten minutes previewing your header on the tablet and phone views before saving. Small tweaks here save you from headaches after launch.
Pro Tip: Transparent Header on the Homepage
One of the most popular design trends is a transparent header on the homepage — where the header overlays a full-width hero image or video — that then transitions to a solid color as you scroll. With the Divi Theme Builder, you can achieve this elegantly.
Create a second template in the Theme Builder and assign it specifically to your Homepage (instead of the entire website). In this template, build the same header layout but set the section background to transparent (no background color) and change your text and menu link colors to white so they’re visible over a dark hero image.
Then, use the sticky styles to add a solid white or dark background once the header sticks — so readability is maintained as visitors scroll past the hero. This two-template approach gives you complete creative control without any plugin or custom CSS gymnastics. It’s exactly the kind of flexible, professional workflow that makes joining Elegant Themes such a smart investment for serious web designers.
Saving and Assigning Your Header
When you’re happy with how everything looks, click the green Save button in the bottom right corner of the builder. Then click Exit to return to the Theme Builder dashboard. You’ll see your new template listed with the header assigned. Click the big Save Changes button at the top of the Theme Builder page to make it live.
Head to your website’s frontend and do a full walkthrough — check the logo, test every menu link, click dropdown items, test the search function, tap the hamburger on mobile, and scroll to see your sticky effect in action. It’s always satisfying to see a custom header you built entirely in Divi working perfectly across devices.
Final Thoughts on the Divi Theme Builder Header
Building a custom global header with the Divi Theme Builder is one of those workflows that feels almost too easy once you’ve done it. You get complete design freedom, pixel-perfect control over responsive behavior, built-in sticky functionality, and the ability to assign different headers to different parts of your site — all without touching a single line of code.
Whether you’re building your own site or delivering client projects, mastering the Divi Theme Builder header will save you hours of work and produce results that look genuinely custom and professional. The Theme Builder is included with every Divi license — there’s no extra fee or premium add-on required.
If you haven’t already made Divi part of your design toolkit, now is a great time to take the leap. Elegant Themes offers a 30-day money-back guarantee, so there’s zero risk to trying it out. Try Divi free for 30 days and start building headers (and entire websites) the smart way. And if you’re planning to use Divi for the long haul — whether for your own projects or client work — the Lifetime license is genuinely one of the best value deals in the WordPress ecosystem.
