Elegant Themes recently released Divi 4.0, which includes a Theme Builder that lets you create templates for any of your pages or post types.
After creating a custom header & footer for your website, the next thing you will most likely want to create with the new Theme Builder is a sitewide template for your blog posts.
With a Theme Builder blog post template, you can add a new post in your WordPress dashboard and each post will be placed within the template on the front-end automatically.
In this article, we are going to show you how to add a pre-made Theme Builder template that will be applied to every blog post on your website.
The elements of a blog post template
The only element you must add to your post template is the Post Content module. The Post Content module is where the content of your post will be displayed within your template.
You can then build the rest of your blog post page template by adding the various blog post elements around the Post Content module.
In addition to the Post Content module you can add all, or any combinations, of these elements to your blog post page template:
- Post Title – Can be added either using the Post Title module or using dynamic content in any module that has a text area
- Post featured image – Can be created using dynamic content in any module that has an image area.
- Post Excerpt – Can be created using dynamic content in any module that has a text area.
- Post publish date – Can be created using dynamic content in any module that has a text area.
- Post comment count – Can be created using dynamic content in any module that has a text area.
- Post categories – Can be created using dynamic content in any module that has a text area.
- Post tags – Can be created using dynamic content in any module that has a text area.
- Comments – Can be added using the Comments module
- Related posts – Can be added using the Blog module set to display posts from the current category
- Author Box – Can be created using dynamic content for Post Author Bio, Post Author Name and Post Author Image
- Post Navigation – Can be added using the Post Navigation module
You can also add any standard sections, rows, and modules just like in the Divi Builder to create non-dynamic elements.
Use a free Theme Builder template to jump-start your design
The quickest and easiest way to add a template for your blog posts is to use a pre-made design.
As part of the Divi 4.0 launch, Elegant Themes released 6 free Theme Builder template packs that include a number of templates for your site, including templates for blog posts.
The process of using these pre-made templates is very easy and fast, so let’s get started.
1. Download your Theme Builder template pack
You will need to download the template pack from the Elegant Themes website. There are 6 packs to choose from and each can be downloaded from their respective blog posts.
You will need to enter an email address into the signup form which will register you for the Elegant Themes mailing list. If you are already registered on the mailing list adding the same email will not add you again.
Choose your template below and go ahead and download the zip file and extract the contents to your desktop.
Inside you will see a number of JSON files but the one you will need for the blog post template is theme-builder-pack-x-post-template.json
2. Open Theme Builder
If you have updated your Divi theme to version 4.0+, then you will have a new “Theme Builder” menu tab in your Divi menu.
Scroll down to the Divi menu link and then select the Theme Builder.
3. Import your blog post template
Click on the Portability icon in the top-right of the Divi Theme Builder to open the import/export window.
Click on the import tab and browse to the theme-builder-pack-x-post-template.json file you downloaded in step 1.
“Override the Default Website Template” and “Allow import to override existing assignments” will be checked by default but be aware that leaving these checked will override any templates you may have already created.
When you click “Import Divi Theme Builder Templates” button you will see a notification;
“This import contains references to the global Header, Body, and/or Footer from the website they were exported from. How would you like to import these references?”
You can leave the option to “Relink them to this website’s global Header, Body, and/or Footer.” checked and hit the “Import Divi Theme Builder Templates” button again to import the template.
4 Save and preview
You will now see there is a new Theme Builder template added to your dashboard. It is assigned to all posts and has a custom body.
Hit the green Save Now button at the top of your page and the template will be saved and assigned to all of your blog posts.
5 customize the template as required
You can go in and edit the template further to add any elements that may have not been included in the template by clicking on the edit pencil icon.
This will then open the Edit Template Layout area for your body area.
This is where you can use the Divi Builder to edit your template using the Divi sections, rows and modules that you use on the rest of your website. These will be combined with dynamic content so that your template displays specific content for each of your blog posts within the template.
Watch how quick it is to import your template below
You can watch the video below to see each of the steps for importing your template above and a further explanation of editing the template to include a Post Navigation module and editing some of the dynamic content.
Final Thoughts on post templates
The Theme Builder introduced in Divi 4 is an extremely powerful addition to the theme and creating a sitewide template for blog posts is going to be one of the most used features after custom headers and footers. With the Divi Theme Builder being so new, we are all still working out all the possibilities it offers.
If you have created a global blog post template for your site feel free to drop a link in the comments below.