How to Create a Letterbox Style Blog Layout

by | May 28, 2016 | Blog, CSS Tips & Tricks, Layouts

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

How to Create a Letterbox Style Blog Layout

Recipe #16 carries on the blog layout theme from Recipe #15 (maybe I should make this a series?), how to create a letterbox style blog layout. It’s true that Divi’s blog options are very limited, let’s hope those lovely guys over at Elegant Themes add some more options in Divi 3, but until then, I hope you enjoy this one ๐Ÿ™‚

You can view the demo here.

How to create a letterbox 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 modules, so add a new section with twoย columns and a blog moduleย in eachย column.

How to create a letterbox style blog layout tutorial for Divi

Now as our layout has white boxes with some shadows, 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 left blog module and apply the following settings:

Layout = Fullwidth
Posts Number = 1ย 
Include Categories = Any ones you want to include
Show Featured Image = Yes
Content = Show Excerpt
Read More Button = On
Show Author = No
Show Date = Yes
Show Categories = Yes
Show Comment Count = No
Show Pagination = No
Featured Image Overlay =Off (you can turn it on if you want, but it is off in my demo)

Leave any other settings at their defaults.

Click on the Custom CSS tab and give the module a custom class ofย ds-letterbox-left

How to create a letterbox style blog layout tutorial for Divi

Then Save & Exitย 

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

Layout = Fullwidth
Posts Number = 5ย 
Include Categories = Any ones you want to include
Show Featured Image = Yes
Content = Show Excerpt
Read More Button = Off
Show Author = Yes
Show Date = Yes
Show Categories = No
Show Comment Count = No
Show Pagination = Yes
Offset Number = 1
Featured Image Overlay =Off (you can turn it on if you want, but it is off in my demo)

Again, leave any other settings at their defaults.

Click on the Custom CSS tab and give the module a custom class ofย ds-letterbox-right

How to create a letterbox style blog layout tutorial for Divi

Then Save & Exit. Update the page and you should see something like this…

How to create a letterbox style blog layout tutorial for Divi

Ok, that’s the prep done, let’s get on with the styling ๐Ÿ™‚

method

There is no PHP editing required with this layout, just a little bit of clever CSS. Here is what you need to add to your Child Theme Stylesheet, epanel or even your page custom CSS box.

/*Styling for the left hand posts*/

.ds-letterbox-left .et_pb_post {
    background-color: #fff;
}


/*Styling for the right hand posts*/

.ds-letterbox-right .et_pb_post {
    background-color: #fff;
    min-height: 140px;
    margin-top: 0;
    margin-bottom: 34px;
}


/*Sets the featured imge size for the left hand posts*/

.ds-letterbox-left .et_pb_post a img {
    width: 100%;
    height: 630px;
    object-fit: cover;
}


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

.ds-letterbox-right .et_pb_post a img {
    float: left;
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin: 0 20px 20px 0;
}


/*This hides the excerpt for the right hand posts*/

.ds-letterbox-right .post-content {
    display: none;
}


/*This brings back just the meta data which was hidden as part of the paragraph text in the above section of CSS*/

.ds-letterbox-left .post-meta,
.ds-letterbox-right .post-meta {
    padding-bottom: 10px !important;
}

/*This adds the box shadow to the posts*/

.ds-letterbox-left .et_pb_post,
.ds-letterbox-right .et_pb_post {
    padding: 20px;
    -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);
}


/*Add a little top margin to the right hand post titles*/

.ds-letterbox-right h2 {
    margin-top: 20px;
}


/*This styles the read more link on the left hand posts*/

.ds-letterbox-left a.more-link {
    border: 1px solid #000;
    padding: 10px !important;
    margin-top: 20px !important;
    color: #000;
    max-width: 110px;
}


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

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


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

.ds-letterbox-left 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-letterbox-left 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;
}


/*----------------------*/


/*Not needed for tute*/

hr.ds-blog-line {
    display: none;
}

span.published:before {
    display: none;
}

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

.ds-author-image-excerpt {
    display: none;
}

.ds-author-excerpt {
    display: none;
}

.ds-letterbox-left.et_pb_bg_layout_light .et_pb_post p {
    padding-bottom: 0;
}

 

The clever part of this CSS is the ‘object-fit’ property, this 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. I’m just a little bit in love with it right now ๐Ÿ™‚ .

This also means you can use any image size with any aspect ratio you like and it won’t affect the blog layout, cool eh?.

Also, be sure to set the excerpt text in the excerpt field of your posts, otherwise the right hand blog module will take it from the start of your post and it will show in the right column.

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

Pin It on Pinterest

Share This
pro-membership

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

You have successfully joined the waitlist!