** 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.
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
3. Now insert a Text widget. In the Text Widget type in the name of your first section and make it h3.
4. Now open up the Module Settings and give it two unique classes. For this first example lets use: gq-title category1
5. Add a new row and make it two columns.
6. In the custom CSS tab, give it a unique class. For this example let’s use: gq-double-column-row
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
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
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
12. So far your page should look something like this
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
14. In the custom CSS tab, give it a unique class. For this example let’s use: gq-single-column-layout-row
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.
16. Now open up the Module Settings and give it two unique classes. For this first example lets use: gq-title category2
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
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
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
22. Follow steps 13-21 in the second column. So far your page should look something like this
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.
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.
That looks pretty amazing. I would think though Geno that a true magazine layout would make use of the sidebar more. Right now it’s not doing much. Thanks for sharing though – your tuts are great!
Thanks Mike. Yeah this tutorial is just aimed at the blog modules. I have other tuts to help spiffy up the sidebar. The tutorial was based on this site. As you can see it makes great use of the sidebar and people can use it for inspiration as they add to this basic template 🙂 http://www.montereybayfun.com/
So, where are your tutorials to help spiffy up the sidebar?
I think I have a few in the Divi Tutorials page and Divi Snippet page 🙂
Here is one I did shortly after this conversation 🙂 https://quiroz.co/add-thumbnails-to-your-sidebar-recent-post-list/
Thanks Genius 🙂
Once again, your tutorials give me the push I need to figure out how to do something. Working on revamping my Church’s site with The Journey as a foundation, but this is going in to replace the blog page 😀 Now just need to get content written lol
Awesome! Please share when you are done 🙂
Impressive. I really though MontereyBayFun was built on Extra. Something I wish Extra provided was an easy way to layout and style the homepage along with the category modules. Haven’t found a way to do that yet.
This is exactly what I needed! A great feature of Extra brought into Divi! Thanks so much for your hard work Geno!
Geno your tutorials are so great. Thank you very much for them.
Would you mind if I asked you one question?
I don’ know why, but I have pictures next to the text insteaf of having them above the text. Dunno what to do with it. I followed your instruction precisely. Take a look here: https://dl.dropboxusercontent.com/u/2822774/Sn%C3%ADmek%20obrazovky%202016-05-27%20v%C2%A013.38.28.png
Thank you for awesome work.
Double check step 18
Thanks, that worked!
Amazing! Thank you for this awesome inspiration! Will try it on my own website! Best from Germany, Bettina
On montereybayfun.com, what plugin did you use for your events calendar?
The Events Calendar by Modern Tribe 🙂
I can not get the more posts to not display the paragraph text
I have tried everything I can think of.
http://pamperyourdogs.com
I also can not upload the layout json file not sure why.
Any help would be appreciated.
Looks like you are not using excerpts on your posts (See Important Tips). To upload the file you have to upload from the actual page you want to upload it to 🙂
Im actually having a same issue. I am not able to import your Json to wordpress I have copied and uploaded css to theme but the excerpts still show on the more tabs. Other than that I think that is a great tutorial you did.
https://Roguegfx.com
This only works if you follow the settings detailed in the tutorial on steps 9 & 19. If you want to to use the additional meta information, you will have to modify the css to keep the posts from running over into each other
You’re missing a ; at the end of .gq-double-column-more .post-meta {display:block; font-size:12px}
Thank you for visiting and letting us know!
This is really helpful for me. I do blogging and I have to modify my Divi to be like this in the front page so I can reach more clicks. Thank you so much.
Awesome! Glad it is a benefit to you. Thanks for visiting!
Its really confusing. I can’t make up where to put the unique classes specialty section. And importing the .json file also say “This file should not be imported in this context”
There are a lot of detailed steps that can get confusing. To import the file, create a new page, switch to Divi Builder, and then click the Import icon (up and down arrows), then choose the Import Tab, Choose the file, and Import.
Oh! Thank you Simmons. I’m good to go.
Geno, you’re a genius!
I would like to ask you just a detail: how can we avoid the sticky posts been displayed twice? If I add a slider in the top part of the page to show sticky posts, they are been re displayed in the bottom sections.
And, similar, if a post is categorized in two sections it will be displayed in both of them. Is there a way to avoid this?
I’ve found that some posts can be excluded from the loop ( http://www.wpbeginner.com/wp-themes/how-to-exclude-sticky-posts-from-the-loop-in-wordpress/ ) but can’t figured out how this could work in your example.
Thanks for all your effort!
Glad you like Geno’s hard work! I don’t think there is a way to address your concerns with the standard Divi modules. Categories are the main selection criteria. To do what you are looking for would require significant customizations.
i just updated divi and a few plugins and my front page is all messed up. Looks like the excerpt problem but why would they disapear? I was also using a child theme. I went back and checked every post about 6 excerpts were gone so I added them back and still looks messed up. Any ideas? http://pamperyourdogs.com
Hi Stephen.
“In a recent update Divi separated the meta and the excerpt and gave the excerpt its own class” – Michelle Nunan
Replace this:
.gq-double-column-more p {display:none;}
With this:
.gq-double-column-more .post-content {display:none;}
And replace this:
.gq-single-more p {display:none;}
With this:
.gq-single-more .post-content {display:none;}
Hi,
I had followed your tutorial months back and it worked amazingly! However, tonight I decided to upgrade to Divi 3.0 and sadly the CSS command to hide excerpt is no longer being recognised. Has anyone experienced this as well upon updating? My site can be viewed at:
http://www.omgtom.net/collin/playground2/news/
Hi Collin. I see you got this resolved thanks to Michelle Nunan on Facebook. Just thought I would share the answer share as well.
“In a recent update Divi separated the meta and the excerpt and gave the excerpt its own class” – Michelle Nunan
Replace this:
.gq-double-column-more p {display:none;}
With this:
.gq-double-column-more .post-content {display:none;}
And replace this:
.gq-single-more p {display:none;}
With this:
.gq-single-more .post-content {display:none;}
Hi Geno
Thank you for this amazing tutorial
I have a question . The images are being resized from featured image , that are bigger.and increase the page size unnecessarily .Is there any way we can use thumbnails for the small images.
It is possible to manage the image sizes using CSS, but I can’t quite picture the issue you are describing. Do you have a link to the page so we can see it and suggest some modifications to the CSS?
Hi Jerry,
I am saying that we are serving the bigger resolution and then resizing them using css .It adds up to page size and thus a slower page.
Is there any way that we can use smaller resolution images instead of resizing them using css.
Oh, I see. I think that would require much more extensive changes than this tutorial provides.
Thank you very much for sharing this.
I followed your tutorial and it looks good to me.
My blog url is http://www.thewordcracker.com/
Nice! Looks great!!!
I am not having any success with importing the layout. I get the error of: THIS FILE SHOULD NOT BE IMPORTED IN THIS CONTEXT. The error seems to be relating to importing in the wrong place. I have just imported other layouts without any issues. I don not see anyone else mentioning this problem. Anyone have an idea?
I am on a multi-site.
There are a lot of detailed steps that can get confusing. To import the file, create a new page, switch to Divi Builder, and then click the Import icon (up and down arrows), then choose the Import Tab, Choose the file, and Import.
I could hug you. Thank you.
I take hugs 😉
So is there a way to style this so there is a full width slider at the top of the page? And just push the sidebar down? Or does it need to shift to a four-column layout? Or.. ???
Hi Paradice. All you have to do is add the fullwidth section to the top of the page layout above the specialty section used for this layout.
i can not download page layout
https://quiroz.co/wp-content/uploads/2016/05/Divi-Magazine-Layout-By-Geno-Quiroz.zip
please re upload
I just tested it and it seems to be downloading just fine. Maybe the server was having issues when you tried. Try it again.
i am import layout… warning
This file should not be imported in this context.
help me
For this layout I exported it from the actual page and not from the Divi library. So you have to use the import settings that are on the actual page and not from the Divi Library. Here is a screenshot https://www.screencast.com/t/xqz1mu1D
how to use full with slider on this layout…because i use full with slider , view not full
You can add a fullwidth slider on the page. And then just use some custom css to style it to match the rest of the page.
Hi Geno,
Where should I link to (or what should the URL be) if I’d like to view more blog posts when I click on the “MORE” button? Here’s a link to the site I’m designing:
http://cuzariodavid.adevehosting.com/blog/
Thanks so much!
You should link to the actual category page. Go to categories and for each category, click on the view link
Hi Geno, help me
I made a video post from youtube, but the view is broken
http://prntscr.com/gvfmds
This has not been tested with the Video Post Type. Try changing it back to a standard post type.
not working to a standart post type…
not working to a post format gallery with picture
Hi Geno, really great stuff here. Helped me a ton in building my blog magazine layout. Question though, I cant seem to get a couple of the modules to not stretch their featured images. I have tried adjusting the margins and padding in effort to compress (visually) but that doesn’t seem to work. They look totally fine on mobile but when I view on a larger screen they are so stretched is almost hard to tell what the image even is. Any ideas how to stop the feature image stretching?
Can you send me a link?