10. Let's Celebrate!

Nu firar vi!You are a star!

 

7.1 Create a Blog Post Template with the Divi Theme Builder

  • Your progress:

Create a stylish and mobile-friendly blog post template with the powerful Divi Theme Builder.

We’re going to leverage the Divi Theme Builder to craft an elegant template for our blog posts. This template will include the category, blog post title, and publish date dynamically. It will feature the highlighted image with a subtle overlay and a divider shape at the bottom. Additionally, we’ll arrange the blog post content to the left with text, images, and other elements, while the global sidebar will be placed on the right. Below the post content, we’ll showcase dynamically generated related content. Here’s a step-by-step guide to create this beautiful template:

1. Start by heading to your development site and examine how a blog post looks by default in Divi. You’ll find that it’s functional but lacks a polished appearance.

2. To enhance the design, access the Divi Theme Builder in your WordPress dashboard under Divi > Theme Builder.

3. Create a new template for blog posts and assign it to all posts.

4. In the template, add a custom body as we’ve already inherited the header and footer from the global templates. You can clone an existing page to save time.

5. Begin by customizing the header. We’ll work with dynamic content, so the featured image, blog title, and publish date will be fetched from each individual post. Remove the existing image and add dynamic content to the section’s background, displaying the featured image. Create a text module for the blog post category and another for the blog post title. Use dynamic content to fetch the relevant data.

6. Arrange the category above the title and make sure they are styled correctly. Add a dynamic text module for the post’s publish date and style it according to your preferences.

7. Adjust the spacing and order of these modules as necessary.

8. To style the post content, add a Post Content module. Configure the typography for headings, subheadings, and body text according to your design preferences. You can also style other content elements like images and links in this module.

9. Customize the design of bullet lists and numbered lists to match your aesthetic preferences.

10. The Divi Theme Builder also allows you to incorporate related posts easily. Add a one-column row, use the Blog module, and configure it to display the latest three posts, either from all categories or the current category. Adjust the excerpt length and appearance settings to match your design.

11. Ensure the spacing of this row aligns with your design.

12. Save the changes, exit the builder, and make sure to click “Save Changes” once more to apply the template to your posts.

With these steps, you’ve successfully created a beautifully designed blog post template using the Divi Theme Builder, complete with dynamic content and related posts.

 

This is a free course about how to design a website with WordPress and Divi. The course is funded by affiliate links. If you purchase something from these links, we'll receive a commission but it will never cost more for you. Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes or SiteGround. DiviMundo is 100% independent. We only promote services that we like and use ourselves on a daily basis.

Victor Duse
Victor Duse was born in Sweden in 1980 and has over 20 years experience of web design, web development and teaching in sectors like media, marketing, energy, industry and the public sector. He's the founder of DiviMundo and the WordPress Agency Duse Media in Malmö, Sweden. Victor is a Brazilian Jiu-Jitsu black belt and he has a soft spot for dark chocolate.

Comments

Feel free to ask questions and leave feedback on the tutorial here.

2 Comments
  1. I can’t scroll down on my webpage?? What have I done?

    Reply
    • Scrolling works when I try but the sticky menu doesn’t cover the full width of the site. Try to add a white background color to the menu section in sticky mode to fix it.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo