R17: How to Create a Large Thumbnail Style Blog Layout

blog

by Michelle | Jun 4, 2016 | Recipes | 66 comments

Like our free content? Then you'll love our exclusive Club!

Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!

Find Out More

Recipe #17 is the third of the blog layout series, how to create a large thumbnail style blog layout.

If you haven’t yet checked them our you can read How to Create a Pinterest Style Blog Layout (Recipe #15) here, and How to Create a Letterbox Style Blog Layout (Recipe #16) here.

You can view the demo for this recipe here.

How to create a large thumbnail style blog layout tutorial for divi

So let’s get cooking!

Ingredients

The Divi Theme from Elegant Themes

Some existing blog content or sample blog content with images

Cooking time

This should take you around 15 minutes max.

Preparation

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

Now as our layout has white boxes, we don’t want the background to be white as you won’t see the full effect, so open up the section settings and give the section a background colour, I am using #f7f7f7.

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

Layout = Fullwidth
Posts Number = Whatever you want, I have 5
Include Categories = Any ones you want to include
Show Featured Image = Yes
Content = Show Excerpt
Read More Button = On
Show Author = Yes
Show Date = Yes
Show Categories = Yes
Show Comment Count = No
Show Pagination = Yes
Featured Image Overlay = On
Hover Overlay Colour = Whatever you want, I am using black with a opacity of .35
Hover Icon Picker = Whatever you want, I am using the magnifying glass with the + symbol

Leave any other settings at their defaults.

Click on the Custom CSS tab and give the module a custom class of ds-thumbnail-blog

Then Save & Exit

Ok, that’s the prep done, let’s get on with the styling

Method

Here is what you need to add to your Child Theme Stylesheet, epanel or even your page custom CSS box.

/*Styling for the posts*/

.ds-thumbnail-blog .et_pb_post {
    background-color: #fff;
    min-height: 350px;
    margin-bottom: 50px;
}


/*Sets the image size posts and moves it to the left of the text*/

.ds-thumbnail-blog .et_pb_post a img {
    float: left;
    width: 400px;
    height: 350px;
    object-fit: cover;
    margin: 0 40px 0 0;
}


/*Resize the overlay to fit the image*/

.ds-thumbnail-blog .et_overlay {
    width: 400px !important;
    height: 350px !important;
}


/*Stack the image and content on smaller screens*/

@media only screen and (max-width: 980px) {
    .ds-thumbnail-blog .et_pb_post a img {
        width: 100%;
        height: 500px;
        object-fit: cover;
        margin: 0 0 40px 0;
    }
    /*Resize the overlay on smaller screens*/
    .ds-thumbnail-blog .et_overlay {
        width: 100% !important;
        height: 500px !important;
    }
    .ds-thumbnail-blog .et_pb_post h2 {
        margin: 40px 30px 20px 30px !important;
    }
    .ds-thumbnail-blog .et_pb_post p {
        margin: 0 30px;
    }
    .ds-thumbnail-blog a.more-link {
        margin: 20px 0 30px 30px;
    }
    
    .ds-thumbnail-blog .post-content {
        padding: 30px 30px 80px 30px;
    }
}


/*Add a little top padding to the post titles*/

.ds-thumbnail-blog .et_pb_post h2 {
    padding: 40px 0 20px 0 !important;
}

.ds-thumbnail-blog .et_pb_post p {
    font-size: 18px;
    margin-right: 40px;
}

.ds-thumbnail-blog .post-meta {
    font-size: 14px !important;
}

/*This styles the read more link*/

.ds-thumbnail-blog a.more-link {
    display: inline-block;
    position: absolute;
    left: 440px;
    border: 1px solid #000;
    padding: 10px !important;
    color: #000;
    margin-top: 50px;
    text-transform: uppercase;
}

@media only screen and (max-width: 980px) {
    .ds-thumbnail-blog a.more-link {
        margin: 40px 0 20px 0;
    }
}

/*This styles the read more link on hover*/

.ds-thumbnail-blog a.more-link:hover {
    border: 1px solid #fff;
    color: #fff;
    background: #000;
}


/*This adds the double arrow icon to the read more link*/

.ds-thumbnail-blog a.more-link:after {
    font-family: 'ETmodules';
    content: "\39";
    color: #000;
    margin-left: 5px;
    vertical-align: middle;
}

/*This styles the double arrow on hover*/

.ds-thumbnail-blog a.more-link:hover:after {
    color: #fff;
}


/*This styles the post pagination links*/

.pagination a {
    background: #fff;
    color: #000;
    padding: 10px;
    margin-top: 30px !important;
    -webkit-box-shadow: 6px 7px 5px -6px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 6px 7px 5px -6px rgba(0, 0, 0, 0.75);
    box-shadow: 6px 7px 5px -6px rgba(0, 0, 0, 0.75);
}


/*This styles the post pagination links on hover*/

.pagination a:hover {
    background: #000;
    color: #fff;
}

We re using the ‘object-fit’ property again, which enables us to set a height and width for our featured images using pixels or percentages, and the ‘cover’ value of the object-fit property will essentially resize the image, keep it central and clip where necessary without affecting the aspect ratio. One downside of this method is that it is not supported in IE (is anything?) or Microsoft Edge, however it is officially on the Edge list of requested CSS support so hopefully it shouldn’t be too long.

Also, be sure to set the excerpt text in the excerpt field of your posts, this will work if you aren’t using a manual excerpt but you may have a few issues with alignment of the read more button as Divi will pull the excerpt from the main post content which makes controlling the amount of content and targeting it with CSS more difficult. More on controlling the excerpt length soon .

And that’s it. you should now have a large thumbnail 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 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.