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:
Cloud Hosting Cost Calculator for AMA Systems
If you find yourself wanting to incorporate unique functionality into your web pages using Divi, this may be useful.
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.
0 Comments