Follow us

How to Create a Letterbox Style Blog Layout | Divi Soup

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!

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 smile

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 smile

 

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;
}

 

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

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