Featuring Your Latest Blog Posts in a Stunning Mobile Design with Divi

The way you showcase blog posts on your website has a big influence on how your visitors behave when they come across them while navigating on your website. To help you get creative and effective, we’re going to show you how to feature your latest blog posts in a stunning way.

The example we’ll recreate will look particularly great on smaller screen sizes while maintaining a great look and feel on desktop and tablet as well. We hope this tutorial inspires you to create your own custom latest blog posts designs.

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.

Let’s Start Recreating!

Add New Section

Gradient Background

Create a new page or open an existing one and add a regular section to it. Open the settings and add a gradient background next.

• Color 1: #2e1b8f
• Color 2: #ffffff
• Gradient Direction: 90deg
• Start Position: 53.3%
• End Position: 53.3%

Spacing

Then, go to the spacing settings. Here, we’re going to shrink the size of the section content on desktop and gradually get rid of that space on smaller screen sizes.

• Top Margin: 100px
• Bottom Margin: 100px
• Left Padding: 26vw (Desktop), 13vw (Tablet), 0vw (Phone)
• Right Padding: 22.8vw (Desktop), 11.4vw (Tablet), 0vw (Phone)

Add New Row

Column Structure

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

Column 2 Background Color

Without adding any modules yet, open the row settings and add a background color to the second column.

• Column 2 Background Color: #f7f7f7

Column 3 Background Color

Add that same color to the background of column 3 as well. We’re using the same color for both these columns to connect them and make them look like one piece. Later on the post, we’ll use this to manipulate the column widths on smaller screen sizes.

• Column 3 Background Color: #f7f7f7

Sizing

Go the design tab next and open the sizing settings. Here, we’re going to remove all the default space between columns.

• Make This Row Fullwidth: Yes
• Use Custom Gutter Width: Yes
• Gutter Width: 1
• Equalize Column Heights: Yes

Display

Now, to make sure all three columns appear next to each other on smaller screen sizes, we need to add one single line of CSS code to the main element of the row.

display: flex;

Add Blurb Module to Column 1

Select Icon

Time to start adding modules! Start with a Blurb Module in column 1 and select an icon of your choice.

Gradient Background

Go to the background settings of the module and add a radial gradient background.

• Color 1: #5000ff
• Color 2: rgba(41,196,169,0)
• Gradient Type: Radial
• Radial Direction: Center
• Start Position: 28%
• End Position: 28%

Icon Settings

Continue by going to the design tab and modifying the icon settings.

• Icon Color: #ffffff
• Image/Icon Placement: Top
• Use Icon Font: Yes
• Icon Font Size: 22px

Spacing

Add some custom top and bottom padding next.

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

Border

And add a subtle bottom border to finish the Blurb Module design.

• Bottom Border Width: 1px
• Bottom Border Color: #ffffff
• Bottom Border Style: Dashed

Add Text Module to Column 1

Add Content

The next and last module we need in the first column is a Text Module. Add some content of your choice.

Text Settings

Then, go to the design tab and modify the text settings accordingly:

• Text Font: Didact Gothic
• Text Font Weight: Bold
• Text Color: #ffffff

Add Text Module to Column 2

Add Content

On to the second column! Here, the only module we’ll need is a Text Module. Enter some content of your choice.

Background Color

Move on to the background settings and add a completely white background color.

• Background Color: #ffffff

Text Settings

We’re also changing the appearance of our content by modifying the text settings in the design tab.

• Text Font: Source Serif Pro
• Text Font Weight: Bold
• Text Color: #000000
• Text Size: 13px
• Text Orientation: Center

Sizing

As mentioned before, we’re manipulating the column structures to create a custom design on smaller screen sizes. To do that, you’ll need to decrease the width of the Text Module and make sure it’s aligned to the left side of the column.

• Width: 60%
• Module Alignment: Left

Spacing

We’re adding some custom padding values next.

• Top Padding: 57px
• Bottom Padding: 57px
• Left Padding: 20px
• Right Padding: 20px

Box Shadow

Along with a subtle box shadow.

• Box Shadow Blur Strength: 80px
• Shadow Color: rgba(0,0,0,0.23)

Add Text Module to Column 3

Add Content

On to the next and last column. Add a Text Module with the H3 title of your blog post and a link. Add the post details in the paragraph text style right below the title.

Text Settings

Go to the design tab of the Text Module and modify the text settings.

• Text Font: Source Serif Pro
• Text Color: #a8a8a8
• Text Size: 12px

H3 Text Settings

Continue by changing the H3 text settings as well.

• Heading 3 Font: Didact Gothic
• Heading 2 Font Weight: Bold
• Heading 3 Text Size: 17px

Spacing

Lastly, we’ll need to add some custom spacing values. You’ll notice that we’re also adding some negative left margin to the module. This is the last step towards creating a different kind of column structure on smaller screen sizes. So although the column structure is technically still the same, we’ve combined column backgrounds, module widths and negative left margin to create a differently-looking outcome.

• Top Margin: 35px
• Left Margin: -80px (Desktop), -50px (Tablet & Phone)
• Right Padding: 20px

Clone Row Twice

Once you’re done modifying the row and all of its modules, you can go ahead and clone the entire row up to as many times as you want, depending on how many latest blog posts you want to feature.

Change Icons

Change the icon of each duplicate.

Modify Content & Links

Along with the content and links that are involved and you’re done!

Preview

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

Final Thoughts

In this post, we’ve shown you how to create a stunning mobile design that showcases your latest blog posts. The design we’ve recreated step by step is primarily made for smaller screen sizes but it looks great on tablet and desktop as well. If you have any questions or suggestions, make sure you leave a comment in the comment section below!