Follow us

How to Create a Pinterest Style Blog Layout | Divi Soup

Want to learn how to use CSS with Divi?

Our CSS & Divi Beginner Course is now open for enrollment!

Update 29/09/2017: Due to all the recent Divi updates, the original recipe no longer worked as it should. I have now updated it for Divi 3.0.76+ so you will need to rework your layout if you are currently using this as per the updated recipe below. I also added a free layout download on the demo page wink

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 wink .

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.

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 = Fullwidth
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

Next, in the advanced tab, give the module a CSS Class of ds-pinterest-blog

how to create a Pinterest style blog layout

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 fullwidth layout, but let’s change that…

 

Method

 

So the first thing we will do is add our CSS. Here is what we are doing:

We are using the column-count property to define the number of columns we want to display. This can be anything you like but I have set it to 7 as this is what Pinterest currently displays on a large screen monitor.

We also set the column-gap property, that’s the space between each of the columns displayed.

.ds-pinterest-blog .et_pb_ajax_pagination_container {
    -webkit-column-count: 7;
    column-count: 7;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}

 

Next we are positioning our posts relatively and setting them to display as inline-block so they flow one after the other, and also adding a shadow and border radius to our posts to make them look more like a pin.

Then we also need to add that border radius to the featured image and the overlay effect.

.ds-pinterest-blog .et_pb_post {
    position: relative;
    display: inline-block;
    margin: 0 0 1em;
    background: #fff;
    border-radius: 10px;
    -webkit-box-shadow: 0px 1px 1px 0px rgba(184, 184, 184, 1);
    box-shadow: 0px 1px 1px 0px rgba(184, 184, 184, 1);
}

.ds-pinterest-blog .et_pb_post a img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
}

.ds-pinterest-blog .et_overlay {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

 

Then comes our post content. We add padding and margin to the content elements so they have some breathing room. The last declaration is optional, this adds the calendar icon before the published date in the meta data.

.ds-pinterest-blog .entry-title {
    padding: 0 20px 10px;
    margin-top: 10px;
}

.ds-pinterest-blog .post-content {
    padding: 0 20px 20px;
}

.ds-pinterest-blog .post-meta {
    padding: 0 20px;
}

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

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

 

As the blog module now comes with Ajax loading (yay!), we need to adjust the position of the pagination container so it sits below out posts, that’s what this declaration does.

.ds-pinterest-blog .pagination {
    clear: both;
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    display: block;
}

 

And finally some media queries. All we are doing here is defining the number of columns that we want to display on smaller screens. So we have 5 columns for smaller laptops, 3 columns for larger tablets, 2 columns for smaller tablets and 1 column on mobile.

You can adjust the breakpoints and columns as you see fit.

@media all and (max-width: 1440px) {
    .ds-pinterest-blog .et_pb_ajax_pagination_container {
        -webkit-column-count: 5;
        column-count: 5;
    }
}

@media all and (max-width: 1279px) {
    .ds-pinterest-blog .et_pb_ajax_pagination_container {
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media all and (max-width: 768px) {
    .ds-pinterest-blog .et_pb_ajax_pagination_container {
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media all and (max-width: 479px) {
    .ds-pinterest-blog .et_pb_ajax_pagination_container {
        -webkit-column-count: 1;
        column-count: 1;
    }
}

 

Copy the complete CSS with commenting from the toggle below and paste into your child theme stylesheet or Divi theme options custom CSS box.

Complete CSS
/*--------------------------------------------------*/
/*-----Pinterest Style Blog Layout by Divi Soup-----*/
/*--------------------------------------------------*/


/*Set the number of columns and the space between*/

.ds-pinterest-blog .et_pb_ajax_pagination_container {
    -webkit-column-count: 7;
    column-count: 7;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}


/*Position and style the posts*/

.ds-pinterest-blog .et_pb_post {
    position: relative;
    display: inline-block;
    margin: 0 0 1em;
    background: #fff;
    border-radius: 10px;
    -webkit-box-shadow: 0px 1px 1px 0px rgba(184, 184, 184, 1);
    box-shadow: 0px 1px 1px 0px rgba(184, 184, 184, 1);
}


/*Add border radius to the featured image*/

.ds-pinterest-blog .et_pb_post a img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
}


/*Add border radius to the image overlay*/

.ds-pinterest-blog .et_overlay {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}


/*Add padding and margin to the post title*/

.ds-pinterest-blog .entry-title {
    padding: 0 20px 10px;
    margin-top: 10px;
}


/*Add padding to the excerpt*/

.ds-pinterest-blog .post-content {
    padding: 0 20px 20px;
}


/*Add padding to the meta data*/

.ds-pinterest-blog .post-meta {
    padding: 0 20px;
}


/*Add margin to the published date*/

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


/*Add the calendar icon before the published date*/

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


/*Move the pagination container*/

.ds-pinterest-blog .pagination {
    clear: both;
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    display: block;
}


/*Media queries*/


/*Change the number of columns on smaller screens*/

@media all and (max-width: 1440px) {
    .ds-pinterest-blog .et_pb_ajax_pagination_container {
        -webkit-column-count: 5;
        column-count: 5;
    }
}

@media all and (max-width: 1279px) {
    .ds-pinterest-blog .et_pb_ajax_pagination_container {
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media all and (max-width: 768px) {
    .ds-pinterest-blog .et_pb_ajax_pagination_container {
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media all and (max-width: 479px) {
    .ds-pinterest-blog .et_pb_ajax_pagination_container {
        -webkit-column-count: 1;
        column-count: 1;
    }
}


/*--------------------------------------------------*/
/*---End Pinterest Style Blog Layout by Divi Soup---*/
/*--------------------------------------------------*/

 

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 after your last line of code paste the code below.

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 wink .

Then, save and upload to your child theme folder.

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

If you also want the Avatar showing as was in the previous version of this post, a better way to do that so it adds the image automatically is by following Recipe #29 – How to add the author avatar to your Divi blog.

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

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. 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.

Related Posts

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

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!