Divi’s blog out of the box is…well rather lame.  It’s not inspiring and it certainly isn’t what I would consider a good Divi Magazine Blog Layout.  For those who are looking to take control of their blog and make it pop, I have some great news.

YOU CAN DO IT!

Divi happens to be a great template with amazing flexibility where you can apply CSS code and change the way the template looks and performs.

Below is an example of what I did for Hang Ten SEO’s Blog Layout.

Divi Magazine Blog Layout | Hang Ten SEO | Austin Texas

Divi Magazine Blog Layout

Today I would like to show you how to create a Divi Magazine Blog Layout using CSS code.  The benefit of a magazine layout is you can section off your posts by categories making it really easy for your readers to quickly get to the stories they want to read.  It also showcases your blogs and presents them in a way that is easily digestible.

In oder to create this awesome Divi Magazine Layout you will need the following CSS code and apply it to
Divi Menu Option –> Theme Options –> Custom CSS Section of your Divi Template.

Side Note: In CSS the line containing /* This is a comment */ allows you to add comments in your code.  Programmers these days don’t tend to add as many comments to when coding, but from my experience it’s a good practice implement.  It makes it much easier to see what is happening.

Copy All the CSS Code Below and add it to the Divi Menu Option –> Theme Options –> Custom CSS Section

/*————————————————*/
/* Divi Magazine Layout Recent Post Customization */
/*————————————————*/

.rpwwt-widget ul {
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)!important;}
.rpwwt-widget ul li {
padding: 0px 8px 0px;}
span.rpwwt-post-title {
font-size: 13px;
font-weight: 700;
line-height: 1px;}
.et_pb_widget_area .rpwwt-widget ul {
line-height: 14px!important;
padding: 10px 0 16px!important;}
.rpwwt-post-date {
font-size: 11px;}

/*————————————————*/
/* Divi Magazine Layout Blog Customization */
/*————————————————*/

/* Categories and Color Settings */
.category1 h3 {color: #4a4683; border-top: 4px solid #4a4683;}
.category2 h3 {color: #79c8cc; border-top: 4px solid #79c8cc;}
.category3 h3 {color: #008bdb; border-top: 4px solid #008bdb;}

/* Title Settings */
.gq-title-row, .gq-title {padding-bottom:0px!important; margin-bottom: 0px!important;}
.gq-title h3 {padding: 10px 5px 15px;}

/* More Button Settings */
.gq-more-button {
margin-right: 25px;
margin-top: 10px;
margin-bottom: 10px!important;}

/* Divi Magazine Two Column Layout */

/* post row */
.gq-double-column-row {
background-color: #fff;
padding-bottom: 0px!important;
padding-top: 0px!important;
padding-right: 10px!important;
padding-left: 10px!important;}

/* Divi Magazine Most Recent Post Column Layout */
.gq-double-column-most-recent { padding-right: 10px;}

/*————————————————*/
/* Divi Magazine More Posts Column Layout */
/*————————————————*/
.gq-double-column-more {margin-top: -30px; margin-bottom: 0px!important;}
.gq-double-column-more .et_pb_post {margin-bottom: 0px; height: 60px;}
.gq-double-column-more a img {width: 100px; height:auto; float: left; left: 0; padding-right: 14px;}
.gq-double-column-more a img:hover {opacity: 0.8;}
.gq-double-column-more h2 {font-size:13px!important; padding-bottom:0px;margin-top:30px!important; font-weight: bold;}
.gq-double-column-more a:hover {text-decoration: underline;}
.gq-double-column-more .post-content {display:none;}
.gq-double-column-more .post-meta {display:block; font-size:12px;}

Divi Magazine Blog Layout Page Formating

Once the CSS code has been added you will need to update the page you’re going to display the blog on.  For the Divi Magazine Blog Layout you will need to add the following.

  1. Specialty Section
  2. Divider Section
  3. Text Section
  4. 2 Blog sections
  5. 1 Button section
  6. 1 Sidebar section

When Finished it should look like the setup below.  For each category that you want to display in your Magazine Layout, you simply repeat 2 – 5 above.

Divi Magazine Blog Layout Specialty Section

Once you have the layout looking like above you will need to do a few things to get the magazine blog to work correctly, so let’s go over each.

Divider

Mine is set to the following parameters

Advanced Settings

  • Divider Weight: 4
  • Height: 1
  • Color: #0c71c3

Text

For the text section I choose to use “SEO Tips” and text to H2 (Header 2).

First Blog Column

Content

  • Post Number: 1
    (This represents the first post for the category selected below)
  • Included Categories: SEO
    (I choose “SEO”, yours will be different based on your own website’s categories)
  • Show Featured Image: YES

Advanced Settings

  • CSS Class: gq-double-column-most-recent
    (This is utilizing the CSS code we originally added)

Second Blog Column

Content

  • Posts Number: 5
  • Included Category: SEO
    (Same category as first column)
  • Offset Number: 1
    (This is important, by setting the offset number you will not repeat the first blog post in the 2nd column)
  • Show Featured Image: YES

Advanced Settings

  • CSS Class: gq-double-column-more
    (This is utilizing the CSS code we originally added)

Button

Content

  • Button URL: https://hangtenseo.com/category/seo
    (This is where you would add the link for the category you selected)

Advanced Settings

  • CSS Class: gq-more-button

Sidebar

For the Sidebar I used the Sidebar Widget and included the following sections.

  • Search
  • Text – Hang Ten SEO’s contact information
  • Recent Posts With Thumbnails
    (Recent Posts with Thumbnails comes from a Plugin with the same name)

Sidebar Widget

Divi Magazine Blog Layout Conclusion

If you want to tweak the Divi Magazine Blog Layout, have at it.  This layout works for me and was exactly how I wanted the blog to function.  I have tested the blog out on mobile and it works great.

Let me know how it works out for you.