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.

/*Left Featured Image Thumbnail*/
@media only screen and ( min-width: 800px ) {
.bbb_blog_list a img  {
    float: left;
    width: 40%;
    padding-right: 20px;
    padding-bottom: 30px;
}
}
/*Style Your Blog Post Title*/
.et_pb_post h1 a, .entry-title {
    font-size: 30px;
    color: #000000;
	font-weight: bold;
    line-height: 1.3em;
}

/*Style Your Post Meta Text*/
.post-meta {
    color: #000000;
    font-size: 12px;
	font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.post-meta a {
    color: #000000;
    font-size: 12px;
	font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/*Style Read More Button on Blog*/
.bbb_blog_list a.more-link {
    display: inline-block;
    background: #000000;
	font-weight: bold;
    color: #ffffff;
    width: 150px;
    padding: 5px 10px;
    text-align: center;
    margin: 20px auto;
    text-transform: uppercase;
    letter-spacing: 1px;
	border: solid 2px #000000;
}

/*Read More Button Hover Style*/
.bbb_blog_list a.more-link:hover {
    background: #f9f9f9;
	border: solid 2px #000000;
    color: #000000;
}


/*Remove Sidebar Divider*/
#main-content .container:before {
	background-color: transparent;
}

/*Style Sidebar Widget Title*/
h4.widgettitle {
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 1px;
	color: #000000;
}


/*Style Sidebar Widget Body Text*/
.et_pb_widget p, .et_pb_widget ul li, .et_pb_widget ul li a:link, .et_pb_widget ul li a:visited  {
	font-size: 16px;
	text-align: center;
	line-height: 1.5em;
	color: #000000;
}
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.

/*Style Your Blog Post Title*/
.et_pb_post h1 a, .entry-title {
    font-size: 30px;
    color: #000000;
    font-weight: bold;
    line-height: 1.3em;
}

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.

/*Style Your Post Meta Text*/
.post-meta {
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.post-meta a {
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

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.

/*Style Read More Button on Blog*/
.bbb_blog_list a.more-link {
    display: inline-block;
    background: #000000;
    font-weight: bold;
    color: #ffffff;
    width: 150px;
    padding: 5px 10px;
    text-align: center;
    margin: 20px auto;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: solid 2px #000000;
}

/*Read More Button Hover Style*/
.bbb_blog_list a.more-link:hover {
    background: #f9f9f9;
    border: solid 2px #000000;
    color: #000000;
}

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:
/*Remove Sidebar Divider on All Posts*/
#main-content .container:before {
	background-color: transparent;
}

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.

Download Now

The Ultimate Branding Checklist

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

 

By signing up, you are also agreeing to my Privacy Policy.

Success! Check your inbox.

Pin It on Pinterest

Found this helpful?

Share this guide with someone!

Shares