Divi Theme Builder Tutorial: Master Custom Headers, Footers & Templates

Most Divi tutorials show you how to build a single page. That's fine for landing pages — but real websites have headers, footers, blog templates, archive pages, 404 pages, and product templates. Editing each of these by hand, page after page, is the kind of tedious work that turns "I'll build my own site" into "I gave up after a week."

The Divi Theme Builder solves this. It lets you design every reusable part of your site once, visually, with the same drag-and-drop Builder you already know. After 20+ years of building Divi sites at Nicada Digital, this is the tool we reach for first on every new project — and the one we wish more DIY site owners knew about.

What Is the Divi Theme Builder?

The Theme Builder is a section inside Divi's WordPress dashboard (under Divi → Theme Builder) that breaks your website down into reusable templates. Instead of building a header on every page, you build it once in the Theme Builder and it applies everywhere automatically.

Each template can include three layers:

• Custom Header — the top of every page (logo, navigation, CTA)
• Custom Body — the main content area, often with dynamic content modules
• Custom Footer — the bottom of every page (links, contact details, social icons)

You can mix and match. For example: one global header + footer for the whole site, but a unique body template for blog posts, a different one for products, and a stripped-back template for landing pages.

Why You Should Be Using the Theme Builder

Without the Theme Builder, you're essentially building a website like it's 2010 — one page at a time. With it, you get:

• Consistency — every page automatically uses the same header and footer
• Speed of editing — change your phone number once and it updates everywhere
• Dynamic content — pull in titles, featured images, custom fields, and post meta automatically
• Conditional design — show different layouts based on category, post type, or page
• SEO-friendly structure — cleaner HTML, faster load times (especially in Divi 5)

Step 1: Build a Custom Global Header

This is where most people start — replacing Divi's default header with one that matches their brand.

1. Go to Divi → Theme Builder.
2. Click Add Global Header on the default website template card.
3. Choose Build Custom Header.
4. Use the Visual Builder to add a Section → Row → Modules. Typically: Logo (Image module), Menu module, and a CTA button.
5. Make it sticky, transparent, or fixed using the Section settings.
6. Save and exit. Your new header is now live across every page.

Step 2: Build a Custom Footer

Same process as the header, but at the bottom of the template card. A typical footer uses a 3 or 4 column row with:

• Logo + short tagline
• Quick links (use the Menu module for consistency)
• Contact info (Text module)
• Social icons (Social Media Follow module)
• Copyright row at the bottom

Save it and Divi applies it to every page automatically.

Step 3: Build a Dynamic Blog Post Template

This is where the Theme Builder shines. Instead of WordPress's default blog template, you build your own — once.

1. In the Theme Builder, click Add New Template.
2. Under Use On, select All Posts.
3. Click Create Template, then add a Custom Body.
4. Use dynamic content modules: Post Title, Post Featured Image, Post Content, Post Comments, Post Navigation.
5. Wrap them in your preferred layout — sidebar, full-width, magazine-style.

Hit save and every blog post on your site instantly uses your design. Change your mind a year later? Edit the template once and every post updates.

Step 4: Custom Templates for Specific Pages

Want a different header on landing pages? A unique footer for your shop? The Theme Builder handles this with template assignments.

1. Click Add New Template.
2. Under Use On, target specific pages, post types, or categories.
3. Add a custom header, body, or footer for that template only.

Common use cases:

• Landing pages: stripped-back header (logo only) to maximise conversions
• WooCommerce shop: custom product page with cross-sells and reviews (see our Divi WooCommerce guide)
• Category archives: custom hero banner specific to each category
• 404 pages: friendly error page with search and popular posts

Step 5: Use Dynamic Content for Truly Editable Sites

Dynamic content is the secret sauce of the Theme Builder. Instead of typing static text into a module, you point the module at a WordPress field. The module then displays whatever's in that field for each individual page or post.

Examples of dynamic content sources:

• Post / Page Title
• Featured Image
• Post Author and Date
• Post Categories and Tags
• Custom Fields (great with ACF)
• Site Logo, Tagline, Title

This is how you build a single template that works beautifully for hundreds of posts.

Theme Builder Tips for Better SEO

Built right, Theme Builder templates support good SEO — built poorly, they can hurt it. A few rules:

• Use one H1 per page — usually the post/page title in the body template. Don't put H1 in your header.
• Use the Menu module, not custom HTML — it outputs proper semantic <nav> markup.
• Lazy-load images in the footer — they're below the fold on every page.
• Keep your header lean — every module loads on every page. Less is faster.

For a deeper dive on optimising Divi for search, see our Divi SEO guide and our Divi page speed guide.

Theme Builder vs Divi Library: What's the Difference?

Confusingly, Divi has two systems for reusable layouts:

Divi Library	Theme Builder
Reusable sections you manually insert into pages	Auto-applied templates that wrap your content
Good for: testimonial blocks, repeated CTAs	Good for: headers, footers, post templates
You control where they appear	Divi applies based on assignment rules

Most professional sites use both: Theme Builder for the wrapper, Library for reusable inner content.

Pre-Built Theme Builder Packs

If you'd rather not start from scratch, Elegant Themes ships free Theme Builder packs you can import in seconds. They cover popular niches like:

• Photography portfolios
• Restaurant and cafe sites
• Personal trainers and wellness
• Agency and freelancer sites
• Online stores

Pair these with the Divi Cloud service and you can sync templates across all your sites in real time.

Common Mistakes to Avoid

• Adding multiple H1s — one per page only.
• Heavy header animations — tank your Largest Contentful Paint score.
• Forgetting mobile — design tablet and mobile views in the Visual Builder, not just desktop.
• Embedding scripts in the header template — use a plugin like WPCode instead.
• Not exporting backups — export your Theme Builder JSON quarterly.

FAQs

What is the Divi Theme Builder?

It's a tool inside Divi that lets you visually design every reusable part of your WordPress site — headers, footers, blog templates, archive pages — using the same Visual Builder as the rest of Divi. It's included with every Divi licence at no extra cost.

Do I need the Theme Builder for a small site?

Yes. Even on a 5-page site, building one global header and footer beats editing five copies. As soon as you add a blog or shop, the Theme Builder becomes essential.

Does the Theme Builder work with WooCommerce?

Yes — it's one of the most popular use cases. You can build custom product pages, shop archives, and cart/checkout layouts. See our Divi WooCommerce guide for details.

Can I use the Theme Builder on multiple sites?

Yes. Your Divi licence allows unlimited sites. You can also export Theme Builder layouts as JSON or sync them across sites with Divi Cloud.

Is Theme Builder included in the free Divi trial?

Yes. Both the live demo and the 30-day money-back option give you full Theme Builder access. Try Divi risk-free here.

Will my templates survive a theme switch?

No — they're tied to Divi. Always export your JSON before changing themes, and use Divi Cloud as a continuous backup.

Conclusion

The Theme Builder is what separates DIY Divi users from the people who actually finish their sites. Once you've built your header, footer, and post template, the rest of your site fills in around them — consistently, quickly, and beautifully.

If you're new to Divi, start with our Divi beginner tutorial, then come back to this guide when you're ready to level up. And if you'd rather skip the learning curve entirely, get a quote from us and we'll build it for you.

Start your 30-day risk-free Divi 5 trial here.