How To Add Text Highlights in Divi Tutorial by Pee-Aye Creative

How To Add Text Highlights, Accents, and Underlines in Divi

Here's a fun tutorial that will help you add several different styles of highlights, accents, and underlines to text in your Divi website. Enjoy!

1. Multi-Line Text With Color Background Around Each Line

The first example of text highlights in Divi is my favorite and is fairly popular on modern websites. To create a multi-line colored background highlight like this, just add a CSS class inside the module’s Advanced Tab Custom CSS input area. In this example, we are using the class “pa-multi-line-highlight.” 

Note that we are using this with an H2 in this example, so just change the H2 in your snippet to whatever you need such as H1, p, span, etc. Copy and paste one of your choice into the Divi>Theme Options>Custom CSS box.

There are two code snippets below, one for each of the examples. Copy and paste one of your choice into the Divi>Theme Options>Custom CSS box.

Copy and paste this code snippet into the Divi>Theme Options>Custom CSS box.

Change the Divi Gallery Image Aspect Ratio

Go ahead and copy and paste the CSS snippet into the Divi>Theme Options>Custom CSS box. (I added the “h2 strong” so that you could visually see it above, but you can remove that from the snippet.)

12

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
11 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Samson
Samson
6 months ago

Cool tips! So simple and good looking. Thanks Nelson 🙂

Robyn
Robyn
5 months ago

Color highlights in text!

Hi, how do I change the color on number 3 from orange to #E8ADAA?
Thank you for these tips!

Robyn
Robyn

Thank you so much! Still learning all this stuff! Happy holidays.

Guillermo
Guillermo
4 months ago

Cool Nelson !!!!!. Thank´s again.

Guillermo

CHARLES KIYIMBA
1 month ago

Thank you, Nelson. I am learning a lot from you here. I am so appreciative.

Peter
Peter
28 days ago

Hello my friend, so nice, thank you!

Unfortunately, I have a problem that I can’t see the highlights on my mobile device (I can’t see it even if reduce the chrome browser here on my computer to the smaller window.) Can you advise me what I’m doing wrong? Thank you!

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Browse By Hashtags

CSS Divi snippets style
0
Would love your thoughts, please comment.x
()
x

Pin It on Pinterest

0

Your Cart