Guides

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.

[et_pb_dmb_code_snippet code=”LypMZWZ0IEZlYXR1cmVkIEltYWdlIFRodW1ibmFpbCovCkBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKCBtaW4td2lkdGg6IDgwMHB4ICkgewouYmJiX2Jsb2dfbGlzdCBhIGltZyAgewogICAgZmxvYXQ6IGxlZnQ7CiAgICB3aWR0aDogNDAlOwogICAgcGFkZGluZy1yaWdodDogMjBweDsKICAgIHBhZGRpbmctYm90dG9tOiAzMHB4Owp9Cn0KLypTdHlsZSBZb3VyIEJsb2cgUG9zdCBUaXRsZSovCi5ldF9wYl9wb3N0IGgxIGEsIC5lbnRyeS10aXRsZSB7CiAgICBmb250LXNpemU6IDMwcHg7CiAgICBjb2xvcjogIzAwMDAwMDsKCWZvbnQtd2VpZ2h0OiBib2xkOwogICAgbGluZS1oZWlnaHQ6IDEuM2VtOwp9CgovKlN0eWxlIFlvdXIgUG9zdCBNZXRhIFRleHQqLwoucG9zdC1tZXRhIHsKICAgIGNvbG9yOiAjMDAwMDAwOwogICAgZm9udC1zaXplOiAxMnB4OwoJZm9udC13ZWlnaHQ6IGJvbGQ7CiAgICBsZXR0ZXItc3BhY2luZzogMXB4OwogICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTsKfQoKLnBvc3QtbWV0YSBhIHsKICAgIGNvbG9yOiAjMDAwMDAwOwogICAgZm9udC1zaXplOiAxMnB4OwoJZm9udC13ZWlnaHQ6IGJvbGQ7CiAgICBsZXR0ZXItc3BhY2luZzogMXB4OwogICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTsKfQoKCi8qU3R5bGUgUmVhZCBNb3JlIEJ1dHRvbiBvbiBCbG9nKi8KLmJiYl9ibG9nX2xpc3QgYS5tb3JlLWxpbmsgewogICAgZGlzcGxheTogaW5saW5lLWJsb2NrOwogICAgYmFja2dyb3VuZDogIzAwMDAwMDsKCWZvbnQtd2VpZ2h0OiBib2xkOwogICAgY29sb3I6ICNmZmZmZmY7CiAgICB3aWR0aDogMTUwcHg7CiAgICBwYWRkaW5nOiA1cHggMTBweDsKICAgIHRleHQtYWxpZ246IGNlbnRlcjsKICAgIG1hcmdpbjogMjBweCBhdXRvOwogICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTsKICAgIGxldHRlci1zcGFjaW5nOiAxcHg7Cglib3JkZXI6IHNvbGlkIDJweCAjMDAwMDAwOwp9CgovKlJlYWQgTW9yZSBCdXR0b24gSG92ZXIgU3R5bGUqLwouYmJiX2Jsb2dfbGlzdCBhLm1vcmUtbGluazpob3ZlciB7CiAgICBiYWNrZ3JvdW5kOiAjZjlmOWY5OwoJYm9yZGVyOiBzb2xpZCAycHggIzAwMDAwMDsKICAgIGNvbG9yOiAjMDAwMDAwOwp9CgoKLypSZW1vdmUgU2lkZWJhciBEaXZpZGVyKi8KI21haW4tY29udGVudCAuY29udGFpbmVyOmJlZm9yZSB7CgliYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDsKfQoKLypTdHlsZSBTaWRlYmFyIFdpZGdldCBUaXRsZSovCmg0LndpZGdldHRpdGxlIHsKCWZvbnQtc2l6ZTogMTZweDsKCWZvbnQtd2VpZ2h0OiBib2xkOwoJdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTsKCXRleHQtYWxpZ246IGNlbnRlcjsKCWxldHRlci1zcGFjaW5nOiAxcHg7Cgljb2xvcjogIzAwMDAwMDsKfQoKCi8qU3R5bGUgU2lkZWJhciBXaWRnZXQgQm9keSBUZXh0Ki8KLmV0X3BiX3dpZGdldCBwLCAuZXRfcGJfd2lkZ2V0IHVsIGxpLCAuZXRfcGJfd2lkZ2V0IHVsIGxpIGE6bGluaywgLmV0X3BiX3dpZGdldCB1bCBsaSBhOnZpc2l0ZWQgIHsKCWZvbnQtc2l6ZTogMTZweDsKCXRleHQtYWxpZ246IGNlbnRlcjsKCWxpbmUtaGVpZ2h0OiAxLjVlbTsKCWNvbG9yOiAjMDAwMDAwOwp9″ language=”css” style=”github” _builder_version=”3.26.3″ body_text_color=”#324e66″ body_font_size_tablet=”51″ body_line_height_tablet=”2″ header_font_size_tablet=”51″ header_line_height_tablet=”2″ custom_css_codesnippet_codearea=”max-height: 300px;”]LypMZWZ0IEZlYXR1cmVkIEltYWdlIFRodW1ibmFpbCovCkBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKCBtaW4td2lkdGg6IDgwMHB4ICkgewouYmJiX2Jsb2dfbGlzdCBhIGltZyAgewogICAgZmxvYXQ6IGxlZnQ7CiAgICB3aWR0aDogNDAlOwogICAgcGFkZGluZy1yaWdodDogMjBweDsKICAgIHBhZGRpbmctYm90dG9tOiAzMHB4Owp9Cn0KLypTdHlsZSBZb3VyIEJsb2cgUG9zdCBUaXRsZSovCi5ldF9wYl9wb3N0IGgxIGEsIC5lbnRyeS10aXRsZSB7CiAgICBmb250LXNpemU6IDMwcHg7CiAgICBjb2xvcjogIzAwMDAwMDsKCWZvbnQtd2VpZ2h0OiBib2xkOwogICAgbGluZS1oZWlnaHQ6IDEuM2VtOwp9CgovKlN0eWxlIFlvdXIgUG9zdCBNZXRhIFRleHQqLwoucG9zdC1tZXRhIHsKICAgIGNvbG9yOiAjMDAwMDAwOwogICAgZm9udC1zaXplOiAxMnB4OwoJZm9udC13ZWlnaHQ6IGJvbGQ7CiAgICBsZXR0ZXItc3BhY2luZzogMXB4OwogICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTsKfQoKLnBvc3QtbWV0YSBhIHsKICAgIGNvbG9yOiAjMDAwMDAwOwogICAgZm9udC1zaXplOiAxMnB4OwoJZm9udC13ZWlnaHQ6IGJvbGQ7CiAgICBsZXR0ZXItc3BhY2luZzogMXB4OwogICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTsKfQoKCi8qU3R5bGUgUmVhZCBNb3JlIEJ1dHRvbiBvbiBCbG9nKi8KLmJiYl9ibG9nX2xpc3QgYS5tb3JlLWxpbmsgewogICAgZGlzcGxheTogaW5saW5lLWJsb2NrOwogICAgYmFja2dyb3VuZDogIzAwMDAwMDsKCWZvbnQtd2VpZ2h0OiBib2xkOwogICAgY29sb3I6ICNmZmZmZmY7CiAgICB3aWR0aDogMTUwcHg7CiAgICBwYWRkaW5nOiA1cHggMTBweDsKICAgIHRleHQtYWxpZ246IGNlbnRlcjsKICAgIG1hcmdpbjogMjBweCBhdXRvOwogICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTsKICAgIGxldHRlci1zcGFjaW5nOiAxcHg7Cglib3JkZXI6IHNvbGlkIDJweCAjMDAwMDAwOwp9CgovKlJlYWQgTW9yZSBCdXR0b24gSG92ZXIgU3R5bGUqLwouYmJiX2Jsb2dfbGlzdCBhLm1vcmUtbGluazpob3ZlciB7CiAgICBiYWNrZ3JvdW5kOiAjZjlmOWY5OwoJYm9yZGVyOiBzb2xpZCAycHggIzAwMDAwMDsKICAgIGNvbG9yOiAjMDAwMDAwOwp9CgoKLypSZW1vdmUgU2lkZWJhciBEaXZpZGVyKi8KI21haW4tY29udGVudCAuY29udGFpbmVyOmJlZm9yZSB7CgliYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDsKfQoKLypTdHlsZSBTaWRlYmFyIFdpZGdldCBUaXRsZSovCmg0LndpZGdldHRpdGxlIHsKCWZvbnQtc2l6ZTogMTZweDsKCWZvbnQtd2VpZ2h0OiBib2xkOwoJdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTsKCXRleHQtYWxpZ246IGNlbnRlcjsKCWxldHRlci1zcGFjaW5nOiAxcHg7Cgljb2xvcjogIzAwMDAwMDsKfQoKCi8qU3R5bGUgU2lkZWJhciBXaWRnZXQgQm9keSBUZXh0Ki8KLmV0X3BiX3dpZGdldCBwLCAuZXRfcGJfd2lkZ2V0IHVsIGxpLCAuZXRfcGJfd2lkZ2V0IHVsIGxpIGE6bGluaywgLmV0X3BiX3dpZGdldCB1bCBsaSBhOnZpc2l0ZWQgIHsKCWZvbnQtc2l6ZTogMTZweDsKCXRleHQtYWxpZ246IGNlbnRlcjsKCWxpbmUtaGVpZ2h0OiAxLjVlbTsKCWNvbG9yOiAjMDAwMDAwOwp9[/et_pb_dmb_code_snippet]
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.

[et_pb_dmb_code_snippet code=”LypTdHlsZSBZb3VyIEJsb2cgUG9zdCBUaXRsZSovCi5ldF9wYl9wb3N0IGgxIGEsIC5lbnRyeS10aXRsZSB7CiAgICBmb250LXNpemU6IDMwcHg7CiAgICBjb2xvcjogIzAwMDAwMDsKICAgIGZvbnQtd2VpZ2h0OiBib2xkOwogICAgbGluZS1oZWlnaHQ6IDEuM2VtOwp9″ language=”css” style=”github” _builder_version=”3.8″ body_text_color=”#324e66″ body_font_size_tablet=”51″ body_line_height_tablet=”2″ header_font_size_tablet=”51″ header_line_height_tablet=”2″]LypTdHlsZSBZb3VyIEJsb2cgUG9zdCBUaXRsZSovCi5ldF9wYl9wb3N0IGgxIGEsIC5lbnRyeS10aXRsZSB7CiAgICBmb250LXNpemU6IDMwcHg7CiAgICBjb2xvcjogIzAwMDAwMDsKICAgIGZvbnQtd2VpZ2h0OiBib2xkOwogICAgbGluZS1oZWlnaHQ6IDEuM2VtOwp9[/et_pb_dmb_code_snippet]

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.

[et_pb_dmb_code_snippet code=”LypTdHlsZSBZb3VyIFBvc3QgTWV0YSBUZXh0Ki8KLnBvc3QtbWV0YSB7CiAgICBjb2xvcjogIzAwMDAwMDsKICAgIGZvbnQtc2l6ZTogMTJweDsKICAgIGZvbnQtd2VpZ2h0OiBib2xkOwogICAgbGV0dGVyLXNwYWNpbmc6IDFweDsKICAgIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7Cn0KCi5wb3N0LW1ldGEgYSB7CiAgICBjb2xvcjogIzAwMDAwMDsKICAgIGZvbnQtc2l6ZTogMTJweDsKICAgIGZvbnQtd2VpZ2h0OiBib2xkOwogICAgbGV0dGVyLXNwYWNpbmc6IDFweDsKICAgIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7Cn0=” language=”css” style=”github” _builder_version=”3.8″ body_text_color=”#324e66″ body_font_size_tablet=”51″ body_line_height_tablet=”2″ header_font_size_tablet=”51″ header_line_height_tablet=”2″]LypTdHlsZSBZb3VyIFBvc3QgTWV0YSBUZXh0Ki8KLnBvc3QtbWV0YSB7CiAgICBjb2xvcjogIzAwMDAwMDsKICAgIGZvbnQtc2l6ZTogMTJweDsKICAgIGZvbnQtd2VpZ2h0OiBib2xkOwogICAgbGV0dGVyLXNwYWNpbmc6IDFweDsKICAgIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7Cn0KCi5wb3N0LW1ldGEgYSB7CiAgICBjb2xvcjogIzAwMDAwMDsKICAgIGZvbnQtc2l6ZTogMTJweDsKICAgIGZvbnQtd2VpZ2h0OiBib2xkOwogICAgbGV0dGVyLXNwYWNpbmc6IDFweDsKICAgIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7Cn0=[/et_pb_dmb_code_snippet]

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.

[et_pb_dmb_code_snippet code=”LypTdHlsZSBSZWFkIE1vcmUgQnV0dG9uIG9uIEJsb2cqLwouYmJiX2Jsb2dfbGlzdCBhLm1vcmUtbGluayB7CiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgICBiYWNrZ3JvdW5kOiAjMDAwMDAwOwogICAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgICBjb2xvcjogI2ZmZmZmZjsKICAgIHdpZHRoOiAxNTBweDsKICAgIHBhZGRpbmc6IDVweCAxMHB4OwogICAgdGV4dC1hbGlnbjogY2VudGVyOwogICAgbWFyZ2luOiAyMHB4IGF1dG87CiAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlOwogICAgbGV0dGVyLXNwYWNpbmc6IDFweDsKICAgIGJvcmRlcjogc29saWQgMnB4ICMwMDAwMDA7Cn0KCi8qUmVhZCBNb3JlIEJ1dHRvbiBIb3ZlciBTdHlsZSovCi5iYmJfYmxvZ19saXN0IGEubW9yZS1saW5rOmhvdmVyIHsKICAgIGJhY2tncm91bmQ6ICNmOWY5Zjk7CiAgICBib3JkZXI6IHNvbGlkIDJweCAjMDAwMDAwOwogICAgY29sb3I6ICMwMDAwMDA7Cn0=” language=”css” style=”github” _builder_version=”3.8″ body_text_color=”#324e66″ body_font_size_tablet=”51″ body_line_height_tablet=”2″ header_font_size_tablet=”51″ header_line_height_tablet=”2″ custom_css_codesnippet_codearea=”max-height: 250px;”]LypTdHlsZSBSZWFkIE1vcmUgQnV0dG9uIG9uIEJsb2cqLwouYmJiX2Jsb2dfbGlzdCBhLm1vcmUtbGluayB7CiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgICBiYWNrZ3JvdW5kOiAjMDAwMDAwOwogICAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgICBjb2xvcjogI2ZmZmZmZjsKICAgIHdpZHRoOiAxNTBweDsKICAgIHBhZGRpbmc6IDVweCAxMHB4OwogICAgdGV4dC1hbGlnbjogY2VudGVyOwogICAgbWFyZ2luOiAyMHB4IGF1dG87CiAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlOwogICAgbGV0dGVyLXNwYWNpbmc6IDFweDsKICAgIGJvcmRlcjogc29saWQgMnB4ICMwMDAwMDA7Cn0KCi8qUmVhZCBNb3JlIEJ1dHRvbiBIb3ZlciBTdHlsZSovCi5iYmJfYmxvZ19saXN0IGEubW9yZS1saW5rOmhvdmVyIHsKICAgIGJhY2tncm91bmQ6ICNmOWY5Zjk7CiAgICBib3JkZXI6IHNvbGlkIDJweCAjMDAwMDAwOwogICAgY29sb3I6ICMwMDAwMDA7Cn0=[/et_pb_dmb_code_snippet]

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:
[et_pb_dmb_code_snippet code=”LypSZW1vdmUgU2lkZWJhciBEaXZpZGVyIG9uIEFsbCBQb3N0cyovCiNtYWluLWNvbnRlbnQgLmNvbnRhaW5lcjpiZWZvcmUgewoJYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0=” language=”css” style=”github” _builder_version=”3.8″ body_text_color=”#324e66″ body_font_size_tablet=”51″ body_line_height_tablet=”2″ header_font_size_tablet=”51″ header_line_height_tablet=”2″]LypSZW1vdmUgU2lkZWJhciBEaXZpZGVyIG9uIEFsbCBQb3N0cyovCiNtYWluLWNvbnRlbnQgLmNvbnRhaW5lcjpiZWZvcmUgewoJYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0=[/et_pb_dmb_code_snippet]

CSS Snippet

Style The Sidebar Module Titles

CSS Snippet

Style The Sidebar Links

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

[et_pb_dmb_code_snippet code=”Ci8qU3R5bGUgU2lkZWJhciBXaWRnZXQgQm9keSBUZXh0Ki8KLmV0X3BiX3dpZGdldCBwLCAuZXRfcGJfd2lkZ2V0IHVsIGxpLCAuZXRfcGJfd2lkZ2V0IHVsIGxpIGE6bGluaywgLmV0X3BiX3dpZGdldCB1bCBsaSBhOnZpc2l0ZWQgIHsKCXRleHQtYWxpZ246IGNlbnRlcjsKCWxpbmUtaGVpZ2h0OiAxLjVlbTsKCWNvbG9yOiAjMDAwMDAwOwp9″ language=”css” style=”github” _builder_version=”3.8″ body_text_color=”#324e66″ body_font_size_tablet=”51″ body_line_height_tablet=”2″ header_font_size_tablet=”51″ header_line_height_tablet=”2″]Ci8qU3R5bGUgU2lkZWJhciBXaWRnZXQgQm9keSBUZXh0Ki8KLmV0X3BiX3dpZGdldCBwLCAuZXRfcGJfd2lkZ2V0IHVsIGxpLCAuZXRfcGJfd2lkZ2V0IHVsIGxpIGE6bGluaywgLmV0X3BiX3dpZGdldCB1bCBsaSBhOnZpc2l0ZWQgIHsKCXRleHQtYWxpZ246IGNlbnRlcjsKCWxpbmUtaGVpZ2h0OiAxLjVlbTsKCWNvbG9yOiAjMDAwMDAwOwp9[/et_pb_dmb_code_snippet]

HI, I'M BRITT

I help modern CEOs elevate their personal brand with a custom-designed Divi website.

Need web design support? Let me know.

Pin It on Pinterest

Found this helpful?

Share this guide with someone!

Shares