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:
Why Hiring a Skilled Web Developer is Better Than Building a Website Yourself
In today's digital age, having a professional and effective online presence is essential for businesses and personal brands alike. While DIY website builders may seem like a cost-effective solution, hiring a skilled web developer offers numerous advantages that can...
How to Choose a WordPress Website Designer That Uses the Divi Builder
When selecting a WordPress website designer, especially one specializing in the Divi Builder, it is crucial to find someone who aligns with your business needs and design preferences. Divi is a versatile and powerful WordPress theme that allows for extensive...
Why You Need a Seasoned WordPress Professional for Building a WooCommerce Website
Building a successful WooCommerce website involves much more than simply installing a plugin. To create a secure, functional, and optimized online store, it's essential to hire a seasoned WordPress professional who understands the intricacies of eCommerce design,...
0 Comments