Having a blog on your website is an extremely effective way of driving traffic to your website and, from an SEO perspective, increasing the authority of your site. The Divi Blog Module is extremely powerful and customisable, and this post will help you style the Read More text into a button.

I’ve also written a tutorial on how to style the Divi Blog Module into fantastic looking grid cards if you’re looking for elegant new blog layout.

** UPDATE: An updated version of the tutorial will be posted soon to reflect the new Module Settings in the recent Divi updates. The locations of module settings have moved but the tutorial should still work – if the recent Divi updates are affecting how you’ve followed this tutorial, please leave a comment. **



 

The Divi Blog Module

Out of the box, and with the “read more” text enabled within the settings, this is how the Blog Module looks (grid layout).

 

 

As you can see, the read more button by default is all lowercase and pretty uninspiring. Let’s change that with some simple CSS.

First, let’s give the Blog Module a custom class. Let’s call it custom-blog. Enter this within the CSS Class field within Custom CSS settings like so:

 

 

Now all we have to do is edit the CSS.

 

Custom CSS

Let’s capitalise the text and move it to the right-hand side of the grid. We can do this by using the CSS properties text-transform and float.

 

.custom-blog .et_pb_post a.more-link {
text-transform:capitalize;
color:#38a5ed;
background:white;
float:right;

 

I’m using the WordPress 4.7 CSS editor, but you can also put this in the Custom CSS box in Divi Theme Settings or in your child theme’s stylesheet.

 

 

 

Cool, we’ve made a start! Let’s turn it into a button by giving it a border. We can do this by adding this to the code:

 

border:solid 1px;
padding-left:5px;
padding-right:5px;

 

 

 

Now let’s add some animation and add a change of colour on hover to really make it into more of a button. Add this to the code we’ve just implemented to make the animation smooth:

 

transition:0.5s ease-out;

 

On a separate line, we can add some more CSS to change how the button appears when the mouse hovers over it. Here we’re simply inverting the colours and increasing the letter spacing:

 

.custom_blog .et_pb_post a.more-link:hover {
color:white;
background:#38a5ed;
letter-spacing:1.5px;
}

 

 

 

 

That’s it! You’ve now turned that simple, lowercase “read more” text on the Blog Module into a clickable call-to-action button. Go ahead and experiment with different colours to match your website’s colour scheme. Here’s the code in full for reference:

 

 

.custom-blog .et_pb_post a.more-link {
text-transform:capitalize;
color:#38a5ed;
background:white;
float:right;
border:solid 1px;
padding-left:5px;
padding-right:5px;
transition:0.5s ease-out;
}

.custom-blog .et_pb_post a.more-link:hover {
color:white;
background:#38a5ed;
letter-spacing:1.5px;
}

 

Thank you for taking the time to read this and I truly hope this helps you. If it has, please leave a comment below and feel free to buy me a coffee if you’re feeling generous!

Tim


BMC logoBuy me a coffee



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