R15: How to Create a Pinterest Style Blog Layout

by | May 21, 2016 | Blog

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

How to Create a Pinterest Style Blog Layout

In Recipe #15 I’m going to show you something a little different, how to create a Pinterest style blog layout. When I started Divi Soup I deliberately didn’t start any social media accounts other than Facebook as I really wanted to focus on one at a time and do it well, and seeing as I am partial to bright shiny objects, Pinterest was the last place I should have been spending time ๐Ÿ˜‰ .

This week however, I decided it was time to bite the bullet and risk getting lost in the rabbit hole that is Pinterest, and I am glad I did. If you are a Pinner you can followย me hereย https://pinterest.com/divisoup.

You can view the demo for this recipe here.

Pinterest style blog layout tutorial for Divi

So let’s get cooking!

ingredients

The Divi Theme from Elegant Themes

An active child theme (we are going to be editing a little PHP so a child theme is a ‘must have’ for this recipe)

Some existing blog content or sample blog content with images

cooking-time

This should take you around 20 minutes max.

preparation

The first thing we are going to do is set up our blog module, so add a new section with a single column and a blog module inside the column.

Pinterest style blog layout tutorial for Divi

Next, open up the blog module and apply the following settings:

Layout = Grid
Posts Number = 20 (or any large number for the best Pinterest effect)
Include Categories = Anyones you want to include
Show Featured Image = Yes
Content = Show Excerpt
Read More Button = Off
Show Author = No
Show Date = Yes
Show Categories = No
Show Comment Count = Yes
Show Pagination = Yes
Featured Image Overlay = On
Overlay Icon Colour = White
Hover Overlay Colour =ย rgba(0,0,0,0.2)
Hover Icon Picker = Choose your icon, I have used the magnifying glass with the + sign as it is similar to Pinterest

Then Save & Exit and update your page. You will also want to set you section or page background to a colour other than white. I have used #e9e9e9 which is similar to the Pinterest background colour.

At the moment, it’s going to look like the standard Divi grid layout, but let’s change that…

 

method

So the first thing we will do is add our CSS. This is going to do a number of things:

Change the layout from 3 to 4 columns on desktop
Round off the corners
Reduce the margins between posts
Add a slight box shadow
Add styling to our custom content

Here is the CSS you need to add to your child theme stylesheet. You can use the epanel custom CSS box but you will still need a child theme for the PHP edits below so you might as well use the stylesheet.

/*-----Pinterest Blog Layout-----*/

@media only screen and ( min-width: 981px) {
.et_pb_column_4_4 .et_pb_blog_grid[data-columns]::before { content: '4 .column.size-1of4' !important;
}
.et_pb_column_4_4 .column.size-1of4 {
width:25% !important;
}
}

@media (max-width: 980px) {
.et_pb_column .et_pb_blog_grid .column.size-1of2, .et_pb_column .et_pb_widget:nth-child(n) {
    width: 50% !important;
	margin: 0 !important;
}
}

@media (max-width: 767px) {
.et_pb_column .et_pb_blog_grid .column.size-1of1 .et_pb_post {
    margin-bottom: 0 !important;
}
}

.et_pb_column_4_4 .column.size-1of4 {
margin-right: 0% !important;
padding-right: 0 !important;
}

.et_pb_blog_grid .et_pb_post {
    margin: 6px !important;
    margin-bottom: 12px !important;
    border-radius: 10px !important;
    border: none;
    -webkit-box-shadow: 0px 1px 1px 0px rgba(184,184,184,1);
    -moz-box-shadow: 0px 1px 1px 0px rgba(184,184,184,1);
    box-shadow: 0px 1px 1px 0px rgba(184,184,184,1);
}

.et_pb_blog_grid .et_pb_image_container img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.et_pb_blog_grid .et_overlay {
	border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.et_pb_post .post-meta {
	font-size: 11px;
	line-height: 1.2em;
}

.ds-author-image-excerpt {
    float: left;
    margin: 0 10px 10px 0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.ds-author-excerpt {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}

hr.ds-blog-line {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin-left:  -20px;
    margin-right: -20px;
}

span.published {
 margin-left: 20px;
}

span.published:before {
 font-family: 'ETmodules';
 content: "\e023";
 position: absolute;
 margin-left: -20px !important;
}

So now your blog should be looking a little more ‘Pinterest-like’. But what about those images, they are all the same size right? Let’s fix that.

This is where we edit some PHP, if you have a child theme active like I mentioned in the prep, then you will already have a functions.php file. Open that up, copy and paste the contents into a text editor and save it somewhere (so you have a back up in case the worst happens!)

Now, in your functions.php file, scroll to the bottom and find the closing tag (question mark and right arrow like this ?>)

Copy and paste the code below right before that.

function mycustom_featured_width( ) { return 320; /* Custom featured post image width */ }
add_filter( 'et_pb_blog_image_width', 'mycustom_featured_width');

function mycustom_featured_height( ) { return auto; /* Custom featured post image height */ }
add_filter( 'et_pb_blog_image_height', 'mycustom_featured_height');

function mycustom_featured_size( $image_sizes ) {
$custom_size = mycustom_featured_width() . 'x' . mycustom_featured_height();
$image_sizes[$custom_size] = 'et-pb-post-main-image-thumbnail';
return $image_sizes;
}
add_filter( 'et_theme_image_sizes', 'mycustom_featured_size' );

What we are doing is adding a custom function to change the height of the blog featured images so they are not uniform like default. We have changed the height to ‘auto’ so Divi will always display the image at it’s full height and this is what gives us our staggered Pinterest look. Make sure you save.

Now we need to make one more PHP adjustment and for this we need to add a file to our child theme. The function we just added adjusts the images for the blog grid but not for the single post layout, so if you have tall featured images as you see in my demo then on the single page those are going to get cut off by Divi’s default image settings, we are going to fix that now.

You are going to need an unzipped copy of Divi, make sure it’s the latest version which you can download from Elegant Themes. In the root folder you will find a file called single.php, copy that file to your child theme folder.

Now open up your single.php file and locate the following lines:

$width = (int) apply_filters( ‘et_pb_index_blog_image_width’, 1080 );

$height = (int) apply_filters( ‘et_pb_index_blog_image_height’, 675ย );

These are the standard Divi featured images sizes for the single post layout. What we need to do is change the height to auto so it looks like this:

$height = (int) apply_filters( ‘et_pb_index_blog_image_height’, auto );

This will changeย the single post featured image so it always shows at full height. You can skip this bit if you don’t have tall images but it is kind of the point of a Pinterest style layout ๐Ÿ˜‰ .

Then, save and upload to your child theme folder.

OK, that’s all the PHP done (phew!). Now we need to do a little work in the excerpts of our posts. What we are going to do next is what gives us this effect at the bottom of each post.

Pinterest style blog layout tutorial for Divi

 

 

We could do this with custom fields which would make creating new posts a little quicker but that requires a lot more PHP work and I didn’t want to make this recipe too complicated.ย 

So open up a post and scroll down to the excerpt field. Then copy and paste the following HTML into the excerpt field. (yes you can add HTML to the excerpt!)

ADD THE TEXT YOU WANT TO SHOW AS THE EXCERPT HERE 
<hr class="ds-blog-line">
<p class="ds-author-excerpt"><img class="ds-author-image-excerpt" src="ADD YOUR AUTHOR IMAGE URL HERE" alt="author" width="50" height="50" />ADD AUTHOR NAME HERE<br>ADD CATEGORIES HERE</p>

Now you need to fill in the fields with your own information. So add the text you want to show as the excerpt, add the URL to the image of the post author, the image needs to be square in order to show as a circle rather than an oval, then add the author name and the categories you want to show the post is included in.

When you are done update the page and you should now see that info in your blog. A good thing to do here is to save this post to the Divi library as a page layout, you can then just load the layout each time you create a new post and all the excerpt info will already be there and you can just edit it as you need to.

And that’s it. you should now have a Pinterest style blog layout similar to my demo.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. ๐Ÿ™‚

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.
Join the Divi Soupies Facebook Group

Like us on Facebook

Categories

Archives

WP Theme FAQs
WordPress Theme Editor
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!