Steps to add an image icon to read more button on the Divi blog module.
Step 1: Add the class customBlog to your blog module.
Step 2: Create your icon image. In this case I’m using a 30 x 30 pixel image. If you use a different size, update the 30px to the size of your image.
Step 3: Update the background-image: url to your image.
Step 4: Add the custom CSS to the Divi theme options / Custom CSS area.
Step 5: Style your read more button in the Divi module.
Scroll down to see what it looks like using a Divi blog module.
/* adding image icon to read more button on blog module BEGIN */
.customBlog .more-link::before {
content: "";
background-image: url(https://www.embryodesign.com/wp-content/uploads/2022/12/icon-red-club.png) !important;
background-size: 30px auto;
background-position: left top;
background-repeat: no-repeat;
min-height: 30px;
padding-top: 5px !important;
padding-right: 40px !important;
}
.customBlog .post-content-inner {
padding-bottom: 20px!important;
}
.customBlog .et_pb_image_container {
margin: 0 0 0 !important;
}
/* adding image icon to read more button on blog module END */Here’s what it looks like:
Integrate PHP Code into your Divi Web Pages
If you find yourself wanting to incorporate unique functionality into your web pages using Divi, this may be useful.
Guide to Removing/Replacing Google Fonts in Divi
To address potential GDPR compliance and security concerns associated with loading Google fonts from their server, it is recommended to take the following steps in Divi.
How to move the Divi blog module items with custom ordering using CSS.
Yes, you can move the Divi blog module items with custom ordering using CSS to whatever order you like.
0 Comments