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
You can view the demo here.
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.
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
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
Then Save & Exit. Update the page and you should see something like this…
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; }
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
Hi Michelle,
I’m using your wonderful letterbox style blog layout on a website I’m just creating:
https://indeinenworten.de/blog/
But I have a problem with the right post: The headline of the post isn’t aligned with the image. I tried my luck with changing some margins to bring the headline up, but that didn’t work. Could you please explain which mistake I made and how it could be fixed? Thanks so much in advance.
Best regards
Jörg
If you add the following to your custom CSS it should bring the title up:
.ds-letterbox-right h2 {
padding-top: 0 !important;
margin-top: 0px; /* Was 30px Originally*/
}
.et_pb_post .entry-featured-image-url {
margin-bottom: 0px;
}
Works perfectly. Thanks a bunch, Shay.
Best regards
Jörg
Really like the post and information, thanks!
I am having a problem getting the feature images in right side blog posts to appear left justified on the same line as Title and Meta info, any suggestions? The images currently appear left justified on the next line below the Title and Meta info.
Impossible to say without a link to the issue Eric
Hi
How do I get the right blog to display in he left blog if selected by the user. I am new to wordpress and have not figured this out
Thanks
Asha
That is not possible with this recipe
Thank you.
I used this on http://thecaregiverspace.org/magazine/ and it’s great. Thanks!
Looks great Cori thanks for sharing
Hi there and thx for your guide. I just wondering how I easy can get a break between the date and the categories in the meta line, both on front page and single post?
Picture
Date
Categories
A breakline instead of ” | “
Replied via email
I just helped myself to the little snippet to remove the excerpt, which was all I was trying to do. Thanks Michelle
Most welcome Cath
Hi Michelle,
thank you, this is great, it’s exactly what I’ve been looking for!
Although it doesn’t seem to be working for me. I only need the white box around my fullwidth blog module so I didnt use your whole tutorial but just the very 1st code. I gave the CSS class: white.box
and then added this code into the child theme’s stylesheet
.white-box .et_pb_post .et_pb_post {
background-color: #fff;
}
but nothing is happening. Any tips will be sooo welcome!
Thank you!
Ignore me, it’s working now! Thank you, this is perfect. Great tutorial
Glad you got it fixed
Hi, Michelle! I’m so excited to check out this and all your recipes! Thank you for sharing so much.
This may be a strange question…but when I click on page 2 in the pagination I do indeed get to the next page (which is great) but the first blog module is now showing the second most recent posts. Is that supposed to happen? I was hoping to find a way to get them to go in chronological order. Does that make sense? Thanks for any help you can offer!
Hi Kathy. Thanks for your kind words
Yes it does do this by default, its just the way it works. You could probably change that with PHP but that’s above my pay grade
Hi Michelle. I love this Blog layout but its only half working for me. I can get the main post on the left to show BUT no “read more” button appears and I can’t get the right column to show at all. I’m getting “No Results Found – The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.” When I click on the left post it takes me to the interior blog page and my other blogs are listed there but I can’t get them to show in that… Read more »
Are you certain you have selected the categories you want to display and that the offset is only set to one?
Didn’t get around trying this until today, but it is absolutely smashing! Thank you, Michelle!
Welcome Helen
Thanks for this Michelle!
Also, I tweaked this a bit by mixing it up with your other tutorial:
https://divisoup.com/how-to-change-the-excerpt-length-of-divi-blog-posts
but instead of just changing the character count, a also added a “p” tag, so now i can target that and users don’t really have to fill the excerpt field :
echo ”;
truncate_post( 120 );
echo ”;
Very Clever Dani
Hello Michelle, Your tutorials are awesome! Thank you so much. I am mocking up a new website and have a slight issue. How do I add extra padding at the top of the page so that the navigation menu doesn’t cover parts of the layout? You can see what I mean on this screenshot: I’m seeing the same issue on all my pages: the nav bar is semi transparent, but I’d like to add some padding at the top of each page so that there is extra space of 100px before the header starts firing and the bottom of the… Read more »
If you want it on all pages then you can add some margin to the main area like this
#et-main-area {
margin-top: 50px;
}
And then adjust the pixel value to what you need
Is there a way to do this in a single column in those instances where you have a blog as a home page with 2 columns blog and sidebar. So the main post appears with the full size image , then below it are the smaller letterboxes. It is such a beautiful way to display the blog. Well done.
Yes Tiffany, set it to single column and place the right hand module underneath the left rather than to the side
Excited to try it today. Your recipes are fabulous!
Thank you Tiffany
Lovely, Michelle, thanks so much! I am using a section background image and am having trouble with the left post getting a background colour, even though it says background-color: #fff in the CSS.
Any ideas?
Try adding !important Tari, look like something may be overriding it
Thanks, Michelle. I addressed it by putting a background #fff in the Row Column 1 settings.
Thank you for a great tutorial…
Looks great David
Hi Michelle – I copied over the CSS again and only changed the color of the “read more” box, but still the right column is showing the excerpt. Would you have time to take a look at it? Thanks, Patti
Hi Patti
Where is your excerpt text coming from? Auto generated or in the excerpt field?
Auto generated.
Um, difficult with just CSS for auto generated excerpts Patty as Divi doesn’t seem differentiate between the meta and the excerpt paragraphs in that scenario. Three options I think.
First you can try this CSS (which I haven’t tested)
.ds-letterbox-right .et_pb_post p {
display: none;
}
span.author.vcard, span.published {
display: block !important;
}
Secondly, I am writing a post on how to limit the excerpt length this weekend, but this is PHP so would affect all blog modules
Thirdly, switch to using manual excerpts so they can be controlled more effectively
Michelle – this is brilliant! do you have a way that we can also include a sidebar?
Just add a sidebar as you normally would Lisa, it works fine
Brilliant stuff. Love your work Michelle, thanks for all you give to the Divi community.
Thanks very much Simon
This is so beautiful Michelle! Thanks for all of your fun recipes, love Divi Soup!
Thank you Julie
I’ve also just tried it and followed the instructions step by step, but I’m not seeing any changes. Everything is update etc x
my website is http://kcvirtualsolutions.co.uk/latest-ramblings/ if it helps x
Kelly I do not see the custom classes in your code, can you confirm you gave the left and right modules their classes?
I have gone through and tried this several times, but the when I copy the CSS into child’s theme most of it doesn’t change… the pagination button does, but as far as the formatting, removing excerpts in the right-hand column, etc. nothing happens. I’m pretty sure I’m not missing a step, but is there some sort of setting that might be causing this?
Can’t be sure without a link Julie but sounds like you forgot to give the modules their custom classes?
No, I have those… it’s very strange. The current link for the site until it’s ready to go live is:
Julie if you want to email me admin details I can take a look for you
So Julie’s is all fixed. For anyone having similar issues, be sure when you add the custom classes to the modules you do not use the preceding dot so in the CSS it should look like this:
.ds-letterbox-left
in the module it should look like this:
ds-letterbox-left
Hi Michelle,
You are amazing and very gifted. Thanks for sharing. I love your work!
Thanks Colin, hope it is useful
I love this layout! Excellent creativity and CSS execution. Thanks for sharing!
Thanks Sandy!
Awesome Look ! Excellent Design !! Michelle is great !!!
Thank you Manas, gracious as always
Thank you so much!
Played a bit around with it and am totally happy now!
Great Kirstin, glad its all working for you
Thank you!! Simple and Sweet..I love it!
Welcome Amanda
Thanks for this Michelle
I’m going to set it up on a local install and if all goes well… I’ll add it to my live site.
Thanks for doing all the hard work so that the rest of us don’t have to.
Haha no worries Keith
Spectacular. Love the look of the right side for an entire site’s blog. Thanks
Great, thanks Bob
This looks so amazing !!! My mind is in overdrive on where all I can use this ! Thanks a lot !!!
Would love to see what you do with it Puru