How To Create a Full-Width “Read More” Button with the Divi Blog Module

I recently styled a custom blog for a client whose website underwent a complete rebuild and re-brand. During the process, I played around with various effects to make the Divi Blog Module “pop” inline with the new funky, colourful appearance of the website. I ended up sticking with a full-width Read More button aligned at the bottom of each blog post’s grid.

This tutorial will show you how to replicate a full-width button that sticks to the bottom of each blog grid with some simple CSS – and this will work perfectly when matched with my tutorial on making the Divi blog grid posts the same height.

How To Create A Full-Width “Read More” Button

Firstly, insert a Blog Module and ensure that these settings are enabled:

Content Tab – “Read More Button” set to Yes

Design Tab – “Layout” set to Grid

In my example, I’ve used a standard single column and I’ve set the row to full-width within the Row Module Settings.

As standard, this is how the Blog Module will look:

Assigning a Custom CSS Class to the Blog Module

First up we will give the Blog Module a Custom CSS class.

To do so, open up the Blog Module Settings and within the Advanced Tab, enter the following into the CSS Class field: ic-blog

Adding The CSS

Now we need to add some CSS to turn the “read more” text into a button, and then to position it accordingly.

Firstly, insert the following CSS snippet into your child theme’s style-sheet or within the Custom CSS field in the Divi Theme Options. The padding simply adds more space to the grids so that the content won’t be hidden behind the button – edit this figure if your button hides and of your text! The position:relative declaration allows us to position the button later on.

.ic-blog .et_pb_post {
padding-bottom:60px;
position:relative;
}

The following snippet will turn the “read more” text into a button, and the positioning declarations is what makes the button full-width, aligned to the bottom of the grid. If you’ve read my tutorial on styling the read more text into a button then some of this will be familiar!