Code by Day | Explore By Weekend

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.

.pa-multi-line-highlight h2 {
  color: #ffffff;
  background-color: #e03574;
  line-height: 1.7em;
  padding-bottom: 0px;
  display: inline;
  box-shadow: 10px 0 0px 0px #e03574, -10px 0 0px 0px #e03574;
  box-decoration-break: clone;
}
<span class="pa-callout">EXAMPLE!</span>

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.

/*text callout 1*/
.pa-callout {
  position: relative;
  color: #ffffff;
  background-color: #2cba6c;
  font-size: inherit;
  padding: .2em .4em;
  border-radius: 6px;
  margin: 0 6px;
}
/*text callout 2*/
.pa-callout-2 {
  position: relative;
  color: #ffffff;
  background-color: #e03574;
  font-size: inherit;
  padding: .2em .4em;
  border-radius: 6px;
  margin: 0 6px 0 0;
  font-weight: bold;
}
<span class="pa-color-highlight">EXAMPLE!</span>

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

/*color highlights in text*/
.pa-color-highlight {
    text-decoration: none;
    box-shadow: inset 0 -.5em 0 rgba(255,166,60,0.75);
    color: inherit;
}
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.)

/*add highlight around bold text*/
.pa-bold-highlight p strong, h2 strong {
    padding: 0 5px;
    background-color: rgba(255,255,0,0.5);
}

Highlighted Text In General

In the comments nordie pointed out a trick to highlight text in general. This is different than what I was doing here with the bold text, but if you just want highlights, this works great!

<mark>Your highlighted text here</mark> 
33
Last updated Jan 3, 2021 @ 1:12 pm

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.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

Subscribe
Notify of
guest
37 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Samson
Samson
1 year ago

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

Robyn
Robyn
1 year 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
1 year ago

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

Guillermo

CHARLES KIYIMBA
10 months ago

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

Peter
Peter
9 months 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!

Ezinne
Ezinne
8 months ago

Super useful tips. Thank you so much!

Fernando
Fernando
8 months ago

Hi,
I try to do this but I cant do. I use in Gutenberg editor. <span class=“pa-color-highlight”>EXAMPLE!</span> in html but not work

Lydia
8 months ago

Very useful, thanks Nelson!

Paula Cabezas Alvarez
8 months ago

Thanks for the tips!

But I would like to use different colors in case number 3, not only one, I mean in different texts, for example one text with #fbf7ef and another with #eefeee. How can I do that?

Paula Cabezas Alvarez

Thanks!! It worked! Looks amazing!

Alex
7 months ago

Great tips! Thank you 🙂

Chadi
Chadi
7 months ago

Thank you for this it’s grat. But one question How do you apply this to Meta info

Last edited 7 months ago by Chadi
Chadi
Chadi

I am using this on blog titels, and I would like to extend this to the meta info under the title. Such as the date and the category and author info. Is there a way to do that as a hole, or do I have to put a seperate css for the meta.

brittany
brittany
6 months ago

Thank you very much for the tip, they worked great. I thought it would be easy to make a specific tweak, but I’m struggling. Is it possible to use the bold as a way of changing one link to another color? I thought maybe just taking out the ‘background’ of ‘background-color’ plus a million other variations I tried. I have somehow worked myself into a complex design solution that utilizes links as a way of having 2 different sized and coloured text in one running text box, but would like just one of them to start out in a different… Read more »

Francisco
Francisco
5 months ago

Excellent tutorial. How can I make that the text is centered in option number 1? It’s always justified to the left. Thanks!

nordie
nordie
5 months ago

this also works
<mark>highlight</mark> 

Emma
Emma
3 months ago

Cool tips however number one keeps coming up with an expected RBRACE error – can you help?

.pa-multi-line-highlight h2 {
EXPECTED RBRACE
 color: #ffffff;
 background-color: #e03574;
 line-height: 1.7em;
 padding-bottom: 0px;
 display: inline;
 box-shadow: 10px 0 0px 0px #e03574, -10px 0 0px 0px #e03574;
 box-decoration-break: clone;
}
UNEXPECTED TOKEN ‘}’

pan
pan
1 month ago

i love it , thanks

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,200 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart