The Divi blog simply hooks into the WordPress blog loop just like any other theme and there is no inclination to interfere with that process. The Divi blog module on the other hand does offer some basic styling options like presentation of posts in grid or fullwidth style, but it remains very basic. In order to customise it to fit in to your website it needs plenty of custom styling.

The WordPress loop presents the post components sequentially in a certain order, so first may come the title, then meta data, then featured image, then content. Because of this, it’s far easier to style a container with the components styled vertically of which we have seen some lovely examples. The most appealing have come from Elegant Themes in various forms; plugin extensions and layouts.

Another plugin is ‘the divi custom blog module’ available at awesomethemedesigners.com

It can be a pain when you want a fullwidth styled blog but it can be done, to a point, with another plugin called ‘divi custom modules’ written by Guilherme Fonseca and available from the Elegant Marketplace. If you are familiar with getting hands on then you can style both grid and fullwidth versions yourself using a little or a lot of CSS depending on how intricate the design required.

As we discussed at the start, the basic blog is a pretty linear affair. One thing the theme designer, i.e. Elegant Themes, must decide is the size of the image container. In this example it is set to fit 100% of its container and so we see a splendid large image for our blog as shown here:

Below: Using the Grid option in the Divi blog module. More about the blog module here.

Perhaps the simplest explanation and tutorial in setting out the fullwidth style, comes from Geno Quiroz. Have a look at this post from his website. This is a clever and compact way to turn your post presentation from vertical to the horizontal.

The problem with the basic blog layout in Divi is that there’s not much spacing allowed between the posts so it can be difficult to ascertain at first glance where one ends and another one starts. Does the post container start with the image or the title? So if you do use the basic layout then at least create a little more spacing between post items.

The moment you edge into placing a border around the blog item in order to distinguish it further, then you’re delving into CSS styling and you might as well go whole-hog and redesign it entirely. Until the plugins mentioned above arrived, it seemed rather remiss of Elegant Themes not to have addressed it initially as part of the theme.

In the Facebook forums devoted to Divi, I’ve seen many people asking for tips, seemingly taken by the lack of customisation available to style their blog. Having looked around for solutions I purchased Guilherme Fonseca‘s plugin. It helped to get me several steps closer to what I wanted to achieve but the plugin was limited and Guilherme advised me that he was busily developing more functionality to his code, and so I was compelled to apply my own styling.

Since creating my own letterbox style, I’ve been able to adapt it easily enough for use in other themes. The image below is a blog from a website that uses the Elegant Themes Nexus theme:

As mentioned, having come across several posts in the Divi facebook groups; I provided my CSS code as a starting point for anyone wanting to style their blog. This code is listed below, feel free to use it as a base in your Divi theme. Firstly, you place the class name letterbox-blog into the Custom CSS tab of your Divi blog module. Second, place the CSS below in your child stylesheet or if not using a child; place the code in the Divi Theme options Custom CSS box.

Note that there are many other factors in designing the blog format, like what happens when you do a search, or select a category, or click on an author. These events I have accounted for with more CSS to handle them but it would be too bitty and probably confusing to include in this post at this time. Contact me if you do want it, however probably the best solution for this is to use a plugin by Tortoise IT called ‘Divi/Extra Layout Injector’ available from Elegant Marketplace.

This is what my letterbox style looks like:

Class: letterbox-blog


/* LETTERBOX BLOG */
.letterbox-blog .et_pb_post {
	width: 100%;
	height: 270px;
	padding-right: 10px;
	padding-bottom: 40px;
	background-color: #FFF;
	box-shadow: 4px 4px 2px grey;
}

.letterbox-blog .et_pb_post img {
	float: left;
	width: 560px;
	height: 269px;
	margin: 0 40px 0 0;
}

.letterbox-blog .et_pb_post h2 {
	margin-top: 15px;
}

.letterbox-blog .et_pb_post a {
	font-family: walter turncoat;
	font-size: 30px;
	padding-top: 1px;
	color: #F48618;
	line-height: 1em;
}

.letterbox-blog .et_pb_post a:hover {
	color: #8F908C;
}

.letterbox-blog .et_overlay {
	width: 560px;
	height: 270px;
}

.letterbox-blog .post-meta {
	margin-top: -10px;
	font-size: 16px;
	color: #CDC0B7 !important;
}

.letterbox-blog .post-meta a {font-size: 16px;}

.letterbox-blog .et_pb_posts .et_pb_post .post-content {padding-top: 5px;}

.letterbox-blog .et_pb_post p {
	padding-top: 6px;
	background-color: #inherit;
	line-height: 1.3em;
	font-size: 16px;
	word-break: normal !important;
	color: #777;
}

.et_pb_posts a.more-link {
	font-size: 16px;
	float: right;
	margin-right: 10px;
	margin-top: -40px;
}

.pagination a {
	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);
	background: #D7D8D2;
	color: #000;
	font-family: walter turncoat; ariel;
	font-side: 16px;
}

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

@media screen and (max-width: 1615px) {
.letterbox-blog .et_pb_post{
	width: 100%;
	height: auto;
	padding-right: 0px;
	}
.letterbox-blog .et_pb_post img {
	float: none;
	width: 100%;
	height: auto;
	}
.letterbox-blog .et_overlay {
	width: 100%;
	height: 100%;
}
.et_pb_posts h2 {
	margin-top: 10px;
	padding-left: 20px;
}
.letterbox-blog .post-meta {padding-left: 20px;}
.et_pb_posts .et_pb_post .post-content {
	margin-left: 20px;
	padding-right: 20px;
	padding-bottom: 10px;
}
.et_pb_posts a.more-link {
	display: none;
}
}
/* END of letterbox-blog */