Select Page

How To Style Your Divi Blog Page

Divi, Web Design | 43 comments

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.

Divi Blog Before

Default Divi Blog Module + Sidebar

Divi Blog After

Modern Divi Blog Design Using CSS

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

Style The Divi Blog Module Using CSS

Assign Custom CSS Class To Blog Module:
  • 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
Style your blog post title Text with css:
  • Go to Divi > Theme Options > Custom CSS
  • Copy & Paste and Save:
Style your blog post meta Text with css:
  • Go to Divi > Theme Options > Custom CSS
  • Copy & Paste and Save:
Style your Read more button with css:
  • Go to Divi > Theme Options > Custom CSS
  • Copy & Paste and Save:
remove the sidebar Divider:

To remove the sidebar divider for all sidebar modules:

  • Open the Module Customizer
  • Go to Sidebar tab
  • Check Remove Vertical Divider Box
To remove the sidebar divider for all individual blog posts:

  • Go to Divi > Theme Options > Custom CSS
  • Copy & Paste and Save:
Complete css Code

Copy and paste the full CSS code into your own website. Make sure you don’t forget about this step!

Bonus: Css Tips

Modify the styles to fit your own website.

A little CSS can go a long way! Here are some basic CSS Properties + Values you can test out:

  • font-family: Open Sans | Montserrat | Lato | Raleway;
  • font-size: 30px | 25px;
  • color: #000000 | black;
  • font-weight: bold | bolder;
  • text-transform: uppercase | lowercase | capitalize;
  • letter-spacing: 1px | 2px;
  • line-height: 1.5em | 2em;
  • text-align: center | left | right;
  • background: #000000 | transparent | black;
  • width: 150px | 50% | 100%;
  • padding: 5px 10px | 5px 10px 5px 10px;
  • border: solid 2px #000000; | none;

Please note: I’ve separated different values you can test out with a “|”. Remember, only choose one value for each property.

About The Author

Hi there, I'm Britt! I'm a branding + website designer based in Austin, Texas. I started my business to help women entrepreneurs stand out online so they can make an impact on the world with their creative business. I believe in the power of good design, and how it can work for your business. Check out more posts related to Branding, Web Design, The Divi Theme, and Behind The Brand.

Are we friends on Pinterest yet? Let's fix that.

Keep on reading!

You're one step closer to downloading the Ultimate Branding Checklist for your online creative business.

Enter your name and email below and you'll be redirected to your checklist!

Success! You should be redirected to your checklist. If not, email me at hello@brandedbybritt.co.

Pin It on Pinterest

Share This