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;
}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
Copy and paste the following CSS snippet into your Divi Theme Options. Feel free to adjust the values to fit your brand.
/*List Style Divi Blog Feed*/
@media only screen and ( min-width: 800px ) {
.bbb_blog_list a img {
float: left;
width: 40%;
padding-right: 20px;
padding-bottom: 30px;
}
}
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
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;
}
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;
}
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;
}
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;
}
Copy and paste the following CSS snippet into your Divi Theme Options. Feel free to adjust the values to fit your brand.
/*Style Sidebar Widget Title*/
h4.widgettitle {
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
letter-spacing: 1px;
color: #000000;
}
Copy and paste the following CSS snippet into your Divi Theme Options. Feel free to adjust the values to fit your brand.
/*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 {
text-align: center;
line-height: 1.5em;
color: #000000;
}
HI, I'M BRITT
I help modern CEOs elevate their personal brand with organized strategy and aligned design.
Need brand support? Let me know.