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
Mobile
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.
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}
Download For Free
Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
1. Go to Divi Theme Builder & Create New Template
Go to Divi Theme Builder
Start by going to the Divi Theme Builder.
Create New Template
Create a new template and use it on all your posts.
- Use On: All Posts
2. Start Building Blog Post Body
Then, start building the custom body of your 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:
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
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
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
- Text Module in Column 2: Post Publish Date
- Text Module in Column 3: Post Comment Count
- After: Comments
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
Add Row #2
Column Structure
Continue by adding a new row to the section using the following column structure:
Add Text Module #1 to Column
Dynamic Content
Add a Text Module and select the post title dynamic content.
- Dynamic Content: Post Title
- Before:
- After:
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)
Spacing
Add some custom top and bottom margin next.
- Top Margin: 50px
- Bottom Margin: 100px
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
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
Add Row #3
Column Structure
Add another row to the section using the following column structure:
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;
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
Alignment
Move on to the module’s design tab and change the image alignment.
- Image Alignment: Right
Sizing
Modify the width next.
- Width: 50px
Spacing
Add some right margin on tablet and phone.
- Right Margin: 20px (Tablet & Phone)
Border
And complete the module’s settings by adding some border radius to the border settings.
- All Corners: 100px
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
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
Spacing
Add some custom margin values next.
- Top Margin: 15px
- Left Margin: 20px (Tablet & Phone)
Add Row #4
Column Structure
Add another row to the section using the following column structure:
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.
Dynamic Background Image
Add the featured image dynamic content to the module’s background image next.
- Dynamic Content: Featured Image
Sizing
Continue by modifying the module’s sizing settings across different screen sizes.
- Width: 800px (Desktop), 500px (Tablet), 300px (Phone)
- Module Alignment: Center
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)
Border
And add some border radius to the border settings to turn the module into a circle.
- All Corners: 500px
Add New Section
On to the next regular section.
Add Row #1
Column Structure
Add a new row using the following column structure:
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
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)
Add Row #2
Column Structure
Add another row to the section using the following column structure:
Spacing
Add some custom top margin to the row.
- Top Margin: 100px
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
- All Corners: 0px
- Fields Border Width: 1px
- Fields Border Color: #000000
Image Settings
Change the image settings too.
- All Corners: 100px
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
Meta Text Settings
Style the meta text as well.
- Meta Font: Playfair Display
- Meta Text Size: 1.4rem
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
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
- Top Padding: 20px
- Bottom Padding: 20px
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!
Preview
Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.
Desktop
Mobile
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.
The post How to Dynamically Create a Simple UX-Friendly Blog Post Template with Divi appeared first on Elegant Themes Blog.
