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.

Click here for a live example of the full-width Read More button.

The result of this tutorial showing a full width button aligned to the bottom of the Divi blog module's grid

 

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:

The Divi Blog Module without customisation

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

Giving the Blog Module a custom CSS Class

 

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!

.ic-blog a.more-link {
text-transform:uppercase;
text-align:center;
border:solid 1px #38a5ed;
padding:5px;
position:absolute;
bottom:0;
left:0;
right:0;
transition:all ease 0.5s;
}

 

And this snippet simply gives the button a hover effect. Change the colours here (and on the previous snippet) to match the colours on your website.

.ic-blog a.more-link:hover {
background:#38a5ed;
color:#fff;
}

 

This is all you need to create a full-width button that sticks to the bottom of the blog grid!

Here is the snippet in full for copying and pasting into your style-sheet.

.ic-blog .et_pb_post {
padding-bottom:60px;
position:relative;
}
.ic-blog a.more-link { 
text-transform:uppercase; 
text-align:center; 
border:solid 1px #38a5ed; 
padding:5px; 
position:absolute; 
bottom:0; 
left:0; 
right:0; 
transition:all ease 0.5s; 
}
.ic-blog a.more-link:hover {
background:#38a5ed;
color:#fff;
}

 

That’s it! I hope this helped. As always, please Subscribe using the form below and let me know how you get on in the Comments!

Tim

You May Have Missed These...

The following two tabs change content below.
Founder of Inline|Creative and Digital Content Producer at IMG Artists. Freelance WordPress web designer, blogger, and musician.

Pin It on Pinterest

Share This