How to Dynamically Create a Simple UX-Friendly Blog Post Template with Divi

Posted on December 15, 2019 by in Divi Resources | 4 comments

How to Dynamically Create a Simple UX-Friendly Blog Post Template with Divi

When sharing new blog posts on your website, it’s important to make the reading experience as easy as possible for your visitors. That means getting rid of as many distractions as possible, while still matching the branding on of your website. It’s also important to allow visitors to control the text size through their browser, that’s where the relative rem font unit comes in handy. It allows people to adjust the size of the font that is displayed inside their browser. In this tutorial, we’ll build a beautiful and simple blog post template that takes user experience highly into account. You’ll be able to download the JSON file for free as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

post template

Mobile

post template

Download The Simple UX-Friendly Blog Post Template for FREE

To lay your hands on the free simple UX-friendly blog post template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Subscribe To Our Youtube Channel

1. Go to Divi Theme Builder & Create New Template

Go to Divi Theme Builder

Start by going to the Divi Theme Builder.

post template

Create New Template

Create a new template and use it on all your posts.

  • Use On: All Posts

post template

post template

2. Start Building Blog Post Body

Then, start building the custom body of your post template.

post template

Add Row #1 to Existing Section

Column Structure

Inside the template editor, add a new row to the section that’s already there using the following column structure:

post template

Sizing

Without adding any modules yet, open the row settings and change the sizing settings as follows:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

post template

Column 1 & 2 Border

Add a right border to the first and second column next.

  • Right Border Width: 1px (Desktop), 0px (Tablet & Phone)
  • Right Border Color: #333333

post template

Add Text Module to Each Column

Dynamic Content

Continue by adding a Text Module to each column and select some dynamic content for each module individually.

  • Text Module in Column 1: Post Categories

post template

  • Text Module in Column 2: Post Publish Date

post template

  • Text Module in Column 3: Post Comment Count
  • After: Comments

post template

Text Settings

Move on to each module’s design tab and change the text settings as follows:

  • Text Font: Lato
  • Text Size: 1.1rem
  • Text Letter Spacing: 1px
  • Text Line Height: 2em

post template

Add Row #2

Column Structure

Continue by adding a new row to the section using the following column structure:

post template

Add Text Module #1 to Column

Dynamic Content

Add a Text Module and select the post title dynamic content.

  • Dynamic Content: Post Title

post template

  • Before: <H1>
  • After: </H1>

post template

H1 Text Settings

Move on to the module’s design tab and change the H1 text settings as follows:

  • Heading Font: Playfair Display
  • Heading Text Alignment: Center
  • Heading Text Size: 6.2rem (Desktop), 3.2rem (Tablet), 2.3rem (Phone)

post template

Spacing

Add some custom top and bottom margin next.

  • Top Margin: 50px
  • Bottom Margin: 100px

post template

Add Text Module #2 to Column

Dynamic Content

Add another Text Module right below the previous one and select the post excerpt dynamic content.

  • Dynamic Content: Post Excerpt

post template

Text Settings

Change the module’s text settings as follows:

  • Text Font: Lato
  • Text Size: 1.1rem
  • Text Letter Spacing: 1px
  • Text Line Height: 2em
  • Text Alignment: Center

post template

Add Row #3

Column Structure

Add another row to the section using the following column structure:

post template

Display

Make sure the columns remain next to each other by adding one line of CSS code to the row’s main element.

display: flex;

post template

Add Image Module to Column 1

Dynamic Content

Continue by adding an Image Module to column 1 and select the author profile picture dynamic content.

  • Dynamic Content: Author Profile Picture

post template

Alignment

Move on to the module’s design tab and change the image alignment.

  • Image Alignment: Right

post template

Sizing

Modify the width next.

  • Width: 50px

post template

Spacing

Add some right margin on tablet and phone.

  • Right Margin: 20px (Tablet & Phone)

post template

Border

And complete the module’s settings by adding some border radius to the border settings.

  • All Corners: 100px

post template

Add Text Module to Column 2

Dynamic Content

In the second column, we’ll need a Text Module. Select the post author dynamic content.

  • Dynamic Content: Post Author

post template

Text Settings

Move on to the design tab and change the text settings accordingly:

  • Text Font: Lato
  • Text Size: 1.1rem
  • Text Letter Spacing: 1px

post template

Spacing

Add some custom margin values next.

  • Top Margin: 15px
  • Left Margin: 20px (Tablet & Phone)

post template

Add Row #4

Column Structure

Add another row to the section using the following column structure:

post template

Add Text Module to Column

Leave Content Box Empty

Add a Text Module to the column and make sure you leave the content box empty.

post template

Dynamic Background Image

Add the featured image dynamic content to the module’s background image next.

  • Dynamic Content: Featured Image

post template

Sizing

Continue by modifying the module’s sizing settings across different screen sizes.

  • Width: 800px (Desktop), 500px (Tablet), 300px (Phone)
  • Module Alignment: Center

post template

Spacing

Add some custom top and bottom padding across different screen sizes too.

  • Top Padding: 400px (Desktop), 250px (Tablet), 150px (Phone)
  • Bottom Padding: 400px (Desktop), 250px (Tablet), 150px (Phone)

post template

Border

And add some border radius to the border settings to turn the module into a circle.

  • All Corners: 500px

post template

Add New Section

On to the next regular section.

post template

Add Row #1

Column Structure

Add a new row using the following column structure:

post template

Add Post Content Module to Column

Text Settings

Add the Post Content Module to the column, move on to the module’s design tab and change the text settings accordingly:

  • Text Font: Lato
  • Text Size: 1.1rem
  • Text Letter Spacing: 1px
  • Text Line Height: 2.3em

post template

Heading Text Settings

Modify the heading text settings too.

  • Heading Font: Playfair Display
  • H2 Text Size: 3.5rem (Desktop), 2rem (Tablet & Phone)
  • H3 Text Size: 2.5rem (Desktop), 1.5rem (Tablet & Phone)
  • H4 Text Size: 2.3rem (Desktop), 1.3rem (Tablet & Phone)
  • H5 & H6 Text Size: 2rem (Desktop), 1rem (Tablet & Phone)

post template

Add Row #2

Column Structure

Add another row to the section using the following column structure:

post template

Spacing

Add some custom top margin to the row.

  • Top Margin: 100px

post template

Add Comment Module to Column

Fields Settings

The only module we need in this row is a Comment Module. Change the fields settings as follows:

  • Fields Background Color: #ffffff
  • Fields Font: Lato
  • Fields Text Size: 1.1rem

post template

  • All Corners: 0px
  • Fields Border Width: 1px
  • Fields Border Color: #000000

post template

Image Settings

Change the image settings too.

  • All Corners: 100px

post template

Title Text Settings

Then, modify the title text settings.

  • Title Heading Level: H2
  • Title Font: Playfair Display
  • Title Text Size: 3rem (Desktop), 2rem (Tablet & Phone)
  • Title Line Height: 1.4em

post template

Meta Text Settings

Style the meta text as well.

  • Meta Font: Playfair Display
  • Meta Text Size: 1.4rem

post template

Comment Text Settings

We’re using the following settings for the comment text settings:

  • Comment Font: Lato
  • Comment Text Size: 1.1rem
  • Comment Letter Spacing: 1px
  • Comment Line Height: 2em

post template

Button Text Settings

And complete the module’s settings by styling the button as follows:

  • Use Custom Styles For Button: Yes
  • Button Text Size: 1.1rem
  • Button Text Color: #ffffff
  • Button Background Color: #000000
  • Button Border Width: 0px
  • Button Border Radius: 0px
  • Button Letter Spacing: 1px
  • Button Font: Lato

post template

  • Top Padding: 20px
  • Bottom Padding: 20px

post template

3. Save Template & Theme Builder Changes

Once you’ve completed the template design, save all Divi Theme Builder changes and preview the outcome on your posts!

post template

post template

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Desktop

post template

Mobile

post template

Final Thoughts

In this post, we’ve shown you how to create a beautiful and simple blog post template that is focused on the user experience your visitors have while reading. Modify this post template using Divi’s built-in options to match it with your website’s branding. You were able to download the template JSON file for free as well! If you have any questions or suggestions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.

Premade Layouts

Check Out These Related Posts

8 Divi Child Themes for Life Coaches

8 Divi Child Themes for Life Coaches

Posted on March 27, 2020 by in Divi Resources

Many life coaches have turned to Divi to build their online platform. Of course, it makes sense why they would use Divi- it includes everything needed to show your services, testimonials, blog about your field, and communicate with potential clients. Fortunately, you don’t have to build your life...

View Full Post

4 Comments

  1. Excellent explanation, It’s simple and focuses. Keep up the great work!

  2. Thanks for the inspiration.
    Clearly not easy to do simple things.
    Well done D. V….

  3. How do I get a header to appear as well as a footer? The global headers and footers won’t appear.

  4. Amazing work. Very good explanation. Pretty template.
    Thanks DIVI.

Join To Download Today

Pin It on Pinterest