How To Style Your Divi Blog Page

Learn how to transform your Divi blog page with these simple CSS tricks.

In this Divi tutorial, you’ll design a simple, modern list-style blog feed with a right sidebar.

Before

Deafult/No Custom CSS

After

Copy & Paste CSS

Skip the Tutorial – Copy The Full CSS

Copy and paste the full CSS code into your own website, but make sure you don’t forget to apply this custom css class. If you want to learn how to edit each element individually, follow the full tutorial below.

Full Tutorial

Set Up Your Divi Blog Page

Set up your blog + sidebar layout:
  • Go to your Blog page > Enable Visual Page Builder
  • Insert Section > Specialty Section
  • Insert Column > 3/4 and 1/4 (Right Sidebar)
  • Insert Row > Single Row
  • Insert Module > Blog Module > Save
  • In the far right column, Insert Module > Sidebar Module > Save
  • Delete default Regular Section above
  • Save All Changes

CSS Snippet

List-Style Blog Feed

Don’t forget to apply the Custom CSS Class
  • Go to your Blog page > Open the Blog Settings module
  • Go to the Advanced tab > CSS ID & Classes > CSS Class > Copy & Paste: bbb_blog_list > Save
  • Save All Changes

CSS Snippet

Style The Blog Post Title

Copy and paste the following CSS snippet into your Divi Theme Options. Feel free to adjust the values to fit your brand.

CSS Snippet

Style The Blog Post Meta

Copy and paste the following CSS snippet into your Divi Theme Options. Feel free to adjust the values to fit your brand.

CSS Snippet

Style The Blog Read More Button

Copy and paste the following CSS snippet into your Divi Theme Options. Feel free to adjust the values to fit your brand.

CSS Snippet

Remove The Sidebar Divider

For entire site:
  • Open the Module Customizer
  • Go to Sidebar tab
  • Check Remove Vertical Divider Box
For all individual modules:
  • Go to Divi > Theme Options > Custom CSS
  • Copy & Paste and Save:

CSS Snippet

Style The Sidebar Module Titles

CSS Snippet

Style The Sidebar Links

About The Designer

Hi, I'm Britt! I'm a branding + website designer based in Austin, Texas. I help creative professionals grow their personal brand online.

Friends don't let friends have bad websites. Let's be friends.

One More Step

Download Your Checklist

Enter your name and email address to receive your checklist in your inbox.

And don't miss out on any future updates!

Success! Check your inbox.

Pin It on Pinterest

Found this helpful?

Share this guide with someone!

Shares