How to Create a Large Thumbnail Style Blog Layout

by | Jun 4, 2016 | Blog, CSS Tips & Tricks, Layouts

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

How to Create a Large Thumbnail Style Blog Layout

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.

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

 

method

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

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

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 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 me on Facebook

WP Theme FAQs
Divi Switch
WordPress Theme Editor
Stock Images for as little as $0.69 each
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!