The Divi Theme is a great tool with a simple interface and lots of ways to style the modules to fit your brand’s look and style. That being said, there are some small things that probably could be added.
The “Read More” links in the Divi Blog Module only inherit the styling of basic links. This can make them hard to spot when visitors browse your site’s blog — and we all know that user interface (UI) is incredibly important.
Catching the user’s eye with buttons instead of plain links encourages visitors to quickly spot where they need to click to read your articles.
In this tutorial, I will show you how to style the “Read More” links in the Divi Blog Module to look like buttons!
View the Live Snippet here on the Food Bank of the Southern Tier website.
Creating the Module
- When you add the Blog Module, make sure you switch the Show Read More Button to Yes.
- Now open the Advanced Tab and under the CSS Class: give the blog module the following class: fs-custom-blog
- Select the Save & Exit button and update the page.
Adding the Custom CSS
Here at FreshySites we use a child theme, so you would need to go to Appearance > Theme Editor to find the stylesheet.
If you don’t have a child theme, go to Divi > Theme Options > Custom CSS.
Add this CSS:
/* -- FS Blog & Posts -- */
/* styles the 'read more' link to look like a button */
.fs-custom-blog a.more-link {
margin-top: 15px;
display: inline-block;
text-transform: uppercase;
font-size: 22px;
font-weight: bold;
line-height: 1em;
letter-spacing: 1px;
background: #fdbf01;
padding: 10px 30px;
color: #ffffff!important;
text-align: center;
min-width: 175px;
max-width: 215px;
-webkit-transition: all .2s;
-moz-transition: all .2s;
transition: all .2s;
}
.fs-custom-blog a.more-link:hover {
background: #6ca973;
}
It’s as simple as that.
Keep in mind that you can change or add properties to fit the style of your site.
The example above is just matching the style of the example site.
You can even remove the fs-custom-blog class to change the styles globally so you don’t have to always add a class to the Blog Module.
