Pricing Process Reviews Contact

Divi Guy blog

Add image icon to read more button on Divi blog module

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.

/* 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 */

Need a hand?

Need help with your Divi website?

Book a Divi consultation and we can fix it together over Zoom, or ask for an estimate for bigger jobs.

0 Comments

Submit a Comment

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

Search

Browse

More tips

Got a question?

Ask me anything

Stuck on something in Divi or WordPress? Ask away and I will reply by email, usually within 24 hours.

Ask a Question

Tell me about your project. The more details the better.

"*" indicates required fields

Make a payment

Got an invoice?

Pay an invoice, a deposit or a tip in about a minute. Card or PayPal, secure checkout, and I never see your card number.

Make a payment