** updated for 3.0 **

In 2015 I set out to create a magazine style website using Divi. The end result was my little side project, Monterey Bay Fun, an online travel/destination website.

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.

You can check out the demo here. 

 

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.


DISCLOSURE: I may be an affiliate for some of the products that I recommend. If you purchase those items through my links I will earn a commission which helps cover the cost of the free resources we provide. If you ever have any questions about my affiliations, please do not hesitate to ask..

Pin It on Pinterest

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!