Add image icon to read more button on Divi blog module

TIPS

Dec 7, 2022 | Divi Tips | 0 comments

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.

[css]
/* 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 */
[/css]

Here’s what it looks like:

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

More Tips

Ad - Web Hosting from SiteGround - Crafted for easy site management. Click to learn more.

Cloudways Hosting

WPEngine Hosting

Pressable Hosting

AccuWeb Hosting

Ask the Divi Guy a Question

"*" indicates required fields