Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

** updated for 3.0 **

In 2015 I set out to create a magazine style website using Divi. The end result was a little side project, called Monterey Bay Fun.

I almost turned it into a premium child theme but with the upcoming of Extra by Divi, I decided to wait it out. Extra seemed to have answered many people’s dream to have a magazine theme using Page Builder.

But I preferred to stick with Divi. Many people have asked how I got the custom post layouts to look like Extra. So here is the answer.

 

Let’s Get Started

1. Create a specialty section and choose the following layout.

001

 

First let’s create a double column section

2. In the first section, insert a single column.  In the custom CSS tab, give it a unique class. For this example let’s use: gq-title-row

015

 

3. Now insert a Text widget. In the Text Widget type in the name of your first section and make it h3.

002

 

4. Now open up the Module Settings and give it two unique classes. For this first example lets use: gq-title category1

003

 

5. Add a new row and make it two columns.

004

 

6.  In the custom CSS tab, give it a unique class. For this example let’s use: gq-double-column-row

016

 

7. In the first column insert a Blog Module and use these settings

  • Layout: Fullwidth
  • Posts Number: 1
  • Category: Select your category
  • Show Featured Image: Yes
  • Content: Show Excerpt (important)
  • Read More Button: Off
  • Show Author: Off
  • Show Date: On
  • Show Categories: No
  • Show Comment Count: Yes
  • Show Pagination: No
  • Offset Number: 0

 

8. Now open up the Module Settings and give it a unique class. For this first example lets use: gq-double-column-most-recent

005

 

9.  In the second column insert a Blog Module and use these settings

  • Layout: Fullwidth
  • Posts Number: 5
  • Category: Select your category
  • Show Featured Image: Yes
  • Content: Show Excerpt (important)
  • Read More Button: Off
  • Show Author: Off
  • Show Date: On
  • Show Categories: No
  • Show Comment Count: No
  • Show Pagination: No
  • Offset Number: 1 (important)

 

10. Now open up the Module Settings and give it a unique class. For this first example lets use: gq-double-column-more

006

 

11. In the second column just underneath the Blog Module add a Button Module. Now open up the Module Settings and give it a unique class. For this first example lets use: gq-more-button

007

 

12. So far your page should look something like this

008

 

 

Now lets create a couple single column sections

13. Add a new row and make it two columns. Then open up the Row Settings and in Advanced Settings select Yes for Equalize Column Heights

013

 

14. In the custom CSS tab, give it a unique class. For this example let’s use: gq-single-column-layout-row

014

 

15. In the first column, insert a text widget. In the Text Widget type in the name of the next section and make it h3.

009

 

16. Now open up the Module Settings and give it two unique classes. For this first example lets use: gq-title category2

010

 

17. Next insert a Blog Module and use these settings

  • Layout: Fullwidth
  • Posts Number: 1
  • Category: Select your category
  • Show Featured Image: Yes
  • Content: Show Excerpt (important)
  • Read More Button: Off
  • Show Author: Off
  • Show Date: On
  • Show Categories: No
  • Show Comment Count: Yes
  • Show Pagination: No
  • Offset Number: 0

 

18. Now open up the Module Settings and give it a unique class. For this first example lets use: gq-single-most-recent

011

 

19. Underneath that you will insert another Blog Module and use these settings

  • Layout: Fullwidth
  • Posts Number: 4
  • Category: Select your category
  • Show Featured Image: Yes
  • Content: Show Excerpt (important)
  • Read More Button: Off
  • Show Author: Off
  • Show Date: On
  • Show Categories: No
  • Show Comment Count: No
  • Show Pagination: No
  • Offset Number: 1 (important)

 

20. Now open up the Module Settings and give it a unique class. For this first example lets use: gq-single-more

012

 

21. Just underneath that add a Button Module. Now open up the Module Settings and give it a unique class. For this first example lets use: gq-more-button

007

22. Follow steps 13-21 in the second column. So far your page should look something like this

017

 

Now save and update page.

 

 

The Magic of CSS

Now lets start to dazzle things up a bit with some CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)


/*------------------------------------------------*/
/*------------[MAGAZINE BLOG LAYOUTS]-------------*/
/*--------------[BY GENO QUIROZ]------------------*/
/*------------------------------------------------*/


/* you can add categories and change category colors here */
	.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 module */
	.gq-title-row, .gq-title {padding-bottom:0px!important; margin-bottom: 0px!important;}
	.gq-title h3 {padding: 10px 5px 15px;}

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



/*=========== 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;}

/* most recent post column */
	.gq-double-column-most-recent { padding-right: 10px;}

/* more posts column */
	.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;}



/*=========== single column layout ==============*/

/* single column layout row */
	.gq-single-column-layout-row .et_pb_post {margin-bottom: 30px; }
	.gq-single-column-layout-row .et_pb_column {background-color: #fff;}
	.gq-single-column-layout-row {padding-top:0px; }

/* single column layout most recent post */
	.gq-single-most-recent .et_pb_post a img {max-height: 210px;}
	.gq-single-most-recent .et_pb_post h2 {margin-top: 12px;}
	.gq-single-most-recent a img:hover {opacity: 0.8;}
	.gq-single-most-recent h2 a {font-size:15px; text-transform: uppercase; font-weight: 900; line-height: 0;}
	.gq-single-most-recent h2 a:hover {text-decoration: underline;}
	.gq-single-most-recent h2, .gq-single-most-recent p {padding: 0px 10px;}

/* single column layout mores posts */
	.gq-single-more {margin-top:-30px; margin-bottom: 0px!important; padding-top:1px; padding-bottom:0px; padding-right: 10px;}
	.gq-single-more .et_pb_post {margin-bottom: -10px; height: 60px;}
	.gq-single-more .et_pb_post:last-child {margin-bottom: 35px!important;}
	.gq-single-more a img {max-width: 115px; max-height:70px; float: left; left: 0; padding-right: 14px; padding-left: 10px;}
	.gq-single-more a img:hover {opacity: 0.8;}
	.gq-single-more h2 {font-size:13px!important; padding-bottom:0px; margin-top:30px!important; font-weight: bold;}
	.gq-single-more .post-content {display:none;}
	.gq-single-more .post-meta {display:block; font-size:12px;}
	.gq-single-more a:hover {text-decoration: underline;}


 

 

I highly recommend going through these steps so that you understand the process and can make changes yourself. Plus it will result in less questions 🙂

But for your convenience, you can also download the page layout. Once downloaded you can import it using the Divi page layout import function. But you still need to add the CSS above to get it styled correctly.

DOWNLOAD THE PAGE LAYOUT

Important Tips to Keep in Mind

  • Blog headers should always be the same height as much as possible. The image dimensions used in this tutorial and in the demo are 1200×630
  • For any Divi blog post, always choose landscape (horizontal) images over portrait (vertical) images.
  • You must use an excerpt on each post. If you do not, the blog modules will pull content from the page and screw up your entire layout.

 

If you are interested in doing a little more for your sidebars,check out this tutorial to Add Thumbnails To Your Sidebar Recent Post List

And that’s it! Have fun!


Well that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest