The Theme Builder lets you design a layout once and apply it automatically across your site, so posts, archives, search results, and error pages all share one branded system.
This part of the Divi 5 Mastery Course shows you how to plan templates for All Posts, Category Pages, Author Pages, Search Results, and the 404 Page, then build a complete All Posts template step by step.
Why Global Templates Matter
The Theme Builder lets you design a layout once and assign it to specific parts of your WordPress site. One template can control every blog post, while another controls category archives, author archives, search results, or the 404 page.
This is where the design system from earlier in the course pays off. Design Variables keep shared values like colors, spacing, typography, and border radii centralized, and Presets package those values into reusable styles. Together, they keep your templates consistent without restyling every module by hand.
Dynamic Content is the other key piece. It pulls real data from WordPress, including post titles, featured images, author details, publish dates, categories, and post content, so one template can display different content for every post or archive while keeping the same layout.
Create a new Theme Builder template
Go to your WordPress dashboard → Divi → Theme Builder. If you have followed the series, the Default Website Template should already include the global header and footer from earlier parts.
Click + Add New Template, then choose Build New Template.
Assign it to the All Posts,
Click Create Template.
Click Add Custom Body,
Choose Build Custom Body to open the Visual Builder and start building the template body.
Repeat the same process for each template you want to create, assigning it to the appropriate area of your site in the Template Settings modal.
Use Dynamic Content in templates
Instead of hardcoding text, images, or metadata, Dynamic Content pulls information directly from WordPress so the same template can display different post titles, featured images, authors, dates, and content depending on what the visitor is viewing.
Insert Dynamic Content
Open the module settings to which you want to add dynamic content.
Look for the Insert Dynamic Content icon
in supported text fields, image fields, headings, and module settings.Click the icon, select the data you want, and Divi connects that field to the relevant WordPress data.
(optional) In some fields, you can also add Before or After text for context, such as Posted on before a publish date or By before an author name.
Main Templates for the Coworking Website
The All Post Template
Controls individual blog posts. It typically includes the post title, featured image, post content, publish date, author name, author bio, comment count, previous and next post navigation, comments, and optional related posts.
The Post Content module displays the body of whichever post the visitor is viewing, so styling it once applies your design system to every post.
The All Category Pages Template
Displays posts filtered by a specific category, such as Events, Office Tours, or Member Stories. It typically uses a dynamic archive title and a Blog module or Loop Builder layout to display posts for the current category.
The All Author Pages Template
Displays posts written by a specific author, which is useful for highlighting team members or contributors. It typically includes dynamic content for the author name, profile picture, and bio, plus a post list or loop pulling posts from the current author archive.
The Search Results Page Template
Controls what visitors see after submitting a search query. A strong version includes a Search module so visitors can search again, plus a Blog module or Loop Builder layout for the matching results. Depending on your module settings, you can also exclude specific content types, pages, posts, or categories from results.
The 404 Page Template
Appears when a visitor reaches a page that does not exist. It has no single post body, but it can still include a Search module, recent posts, popular links, or a call to action back to the homepage, all styled with your Variables and Presets so even error pages stay on-brand.
Build the All Posts Template
This template wraps every blog post in a clean, readable structure that matches the rest of the site. These steps assume you have already created your All Posts template and opened the custom body in the Visual Builder.
Step 1: Post Title and Content
Click on the Layers View icon
.Double-click the single Section name, rename it Post Title and Content, and press Return.
With the Section selected, open the Design tab and expand the Layout option group.
Hover over the Vertical Gap field and apply the Spacing - Medium variable. (This uses Divi 5's Flexbox layout; the Vertical Gap setting lives here.)
Add the Post Title Module
Add a single-column Row to the Section, then add a Post Title module inside the Row.
In the module's Content tab, disable the Show Featured Image toggle. You will add the featured image separately with an Image module for more direct styling.
In the Design tab, hover over the Title Text option group, click the Preset icon, and choose the Heading 1 preset.
Expand the Meta Text option group, set Meta Font Style to Italics, and apply the Body number variable to the Meta Text Size field.
Add the Featured Image
Add an Image module and assign the Rounded element preset.
In the Content tab, expand the Image option group. Hover over the Image field, click the Insert Dynamic Content icon, and select Featured Image.
Add the Post Content Module
Add the Post Content module to the Row. This outputs the body content of the current post.
In the Design tab, expand the Heading Text option group.
For each heading level (H1, H2, H3, all the way to H6) for the Heading Text Size field, apply the H1, H2, H3, H4, H5, and H6 number variables.
For the Heading Line Height field, for all heading levels, apply the Line Height - Headings variable.
Expand the Body Text option group and apply your Dark Text option group preset.
Configure the Row and Column Settings
Select the Row, open the Design tab, expand the Layout option group, and set Align Items to Center.
Open the Row's Content tab and click the edit icon for the Column.
In the Column's Design tab, expand the Layout option group and apply the Spacing - XSmall variable to the Vertical Gap field.
Add Post Navigation Module
Add another single-column Row to the Section to house the Pagination module.
In the Content tab → Text → Previous/Next Link, enter the previous and next labels you want to display.
Step 2: Post Author Section
Add a new Section and name it Post Author in the Layers panel, then add a 1/4 + 3/4 Row.
Open the first Column's Settings and in the Design tab, expand the Sizing option group and set the Column Class to 1/8.
For the second Column, set Column Class to 21/24.
Open the Row settings, expand the Layout option group, and apply the Spacing - Medium variable to both the Horizontal Gap and Vertical Gap fields.
Add Modules to the Row
In the first column:
In the second Column:
Add a Heading module and apply the Heading 4 preset.
In the Content tab, expand the Text option group, click the Insert Dynamic Content icon on the Heading field, and select Post Author.
Below the Heading module, add a Text module and:
Below the Text module, add a Button module and:
Apply the Filled - Primary Color preset.
In the Text option group, use Post Author as the dynamic content and enter More Posts by in the Before field.
Expand the Link option group, and for the Button Link URL, use the Dynamic Content and choose Author Page Link
Step 3: Related Posts
Create a new Section named Related Posts.
Add a single-column Row.
Add a Heading module and apply the Heading 2 preset.
Set the Heading's text to Related Posts.
Add a Blog module.
In the Content tab:
In the Design tab, apply:
The Heading 4 preset to the Title Text option group,
The Dark Text preset to the Body Text option group,
The Small Text preset to the Meta Text option group.
Step 4: Post Comments
Create a new Section named Post Comments, add a single-column Row, then add the Comments module.
In the Design tab:
Apply the Heading 2 preset to the Form Title Text option group
Apply the Filled - Primary Color preset to the Button option group.
Expand the Meta Text option group and:
Apply the Body Small variable to the Meta Text Size field
Apply the Line Height - Body variable to the Meta Line Height field.
Expand the Comment Text option group and:
Apply the Body variable to the Comment Text Size field
Apply the Line Height - Body to the Comment Line Height field.
Step 5: Test for Responsiveness
Even with Design Variables and Presets in place, test how the layout behaves across screen sizes. Divi 5 supports up to seven Customizable Responsive Breakpoints in the Visual Builder's Top Bar.
Click the ellipsis menu near the responsive icons to open a modal where you can enable or disable breakpoints from smaller phones to ultra-wide desktops.
Use the responsive width field to enter specific preview widths, or click the responsive icons to cycle through active breakpoints.
For module-level changes, use the Responsive Editor: hover over a responsive-supported field, click the Edit Responsive Values icon, and adjust values for each breakpoint in one place.
Tips and Best Practices
Name everything. Name sections, rows, and important modules in the Layers panel so larger templates stay easy to navigate and edit.
Keep designs consistent. Reference your Design Variables and Presets wherever possible. Changing a shared color or spacing variable can then update every template that uses it.
Use the Loop Builder for custom archives. For Category and Author pages, use the Loop Builder instead of the standard Blog module when you need more control over the repeated post item.
Create a backup. Export your templates regularly as JSON files from the Theme Builder for backups and reuse on other sites.
Test with real content. Publish a few test posts with featured images, varied content lengths, multiple authors, categories, and comments to catch layout issues before launch.
Download the Files
The accompanying JSON file includes the finished theme builder templates:
The Global Header
The Global Footer
All Posts
All Category Pages
Author Pages
Search Results
404 Page.
Before importing, make sure you have at least one blog post with a featured image so the templates have real content to display.
Import the JSON File
Go to Divi → Theme Builder
Click the Import & Export icon,
Select the Import tab,
Locate the coworking-website-global-website-templates.json file,
Click the Import Divi Theme Builder Templates.
Read the Full Tutorial
Read the complete step-by-step guide on the Elegant Themes blog: Part 8: Using Divi 5's Theme Builder To Create Global Website Templates.
Previous Course | Next Course |















