Make Divi Pop With Cool Highlights!
I’m sure you know by now that I love playing around with CSS. I have hundreds and hundreds of snippets that I use on clients sites, and gradually I am shareing them with you here on the blog. This week, I’m going to show you how to add text highlights in Divi. I have noticed these are becoming quite the trend in web design, so I wanted to show you wonderful folks how to get on board with them. I included four styles in this tutorial, but if you have more ideas please let me know.
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;
}2. Text CalloutEXAMPLE!
This text callout is great for highlighitn important things in your text, such as a notice, warning, or just as a fun accent. For this one, we need to specify which word or words we want to be highlighted using <span> tags. You can add these text highlights and accents in any Divi heading or text.
WARNING!This is very important! Just kidding, but I got your attention! Do you like this? Leave a comment if you think it’s cool!
To create a callout like this, just add a CSS class inside an HTML span tag. In these examples, we are using the class “callout” and “callout-2” so that each one can have a different color or spacing. You can copy the snippet below and then change the word “EXAMPLE” which is between the opening and closing span tags.
<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;
}3. Color Highlights In Text
This text callout is great for highlighitn important things in your text, such as a notice, warning, or just as a fun accent. For this one, we need to specify which word or words we want to be highlighted using <span> tags. You can add these text highlights and accents in any Divi heading or text.
To create a color highlight like this, just add a CSS class inside an HTML span tag. In this example, we are using the class “pa-color-highlight.” You can copy the snippet below and then change the word “EXAMPLE” which is between the opening and closing span tags.
<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;
}4. Highlight Around Bold Text
See what I did there? This was is pretty cool! Add the class “pa-bold-highlight” to any module that has bold text. Once you have the CSS snippet added to your page or website, the bold text will instantly have a yellow highlight color around it. Of course, you can always change the color and opacity of the highlight.
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> 
Cool tips! So simple and good looking. Thanks Nelson 🙂
Hey Samson, glad you like these! You are welcome! 🙂
Color highlights in text!
Hi, how do I change the color on number 3 from orange to #E8ADAA?
Thank you for these tips!
Hey Robyn,
To change the color just replace rgba(255,166,60,0.75) with your color. I used an rgb color there because it is 75% opacity, but your hex color will work perfectly too!
Thank you so much! Still learning all this stuff! Happy holidays.
Cool Nelson !!!!!. Thank´s again.
Guillermo
Hey Guillermo,
You are welcome! Glad you found this helpful! 🙂
Thank you, Nelson. I am learning a lot from you here. I am so appreciative.
You are welcome, Charles! Glad you can learn a lot here! 🙂
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!
Hi Peter, that’s pretty strange. Can you share the link so I can see?
Super useful tips. Thank you so much!
You’re welcome Ezinne, glad you enjoyed these!
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
I don’t see anything wrong with that code, should work whether it’s Divi or Gutenberg because it is just HTML.
Very useful, thanks Nelson!
You are welcome, Lydia!
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?
You’re welcome, Paula! And I do that all the time, just duplicate the code and add some variation to the class like “.pa-color-highlight-red” and just have one for each color and use the matching class in the span tag.
Thanks!! It worked! Looks amazing!
That’s great, feel free to customize it even more with color and size!
Great tips! Thank you 🙂
You’re welcome, Alex! Glad you like them!
Thank you for this it’s grat. But one question How do you apply this to Meta info
Hi Chadi,
Which one (number) are you thinking of adding to meta? Do you mean on the blog module, or somewhere else?
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.
The meta has a css class already, offhand I think .post-meta or something similar. So however you are targeting the title, do similar for this.
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 »
Hi Brittany,
I’m afraid I’m a little confused. Do you have an example link to show me?
Excellent tutorial. How can I make that the text is centered in option number 1? It’s always justified to the left. Thanks!
Hi Francisco,
Our code is not centering anything…that would be set in the module 🙂
this also works
<mark>highlight</mark>
That’s awesome, I had no idea!
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 ‘}’
Hi Emma,
That simply sounds like you are adding the CSS to the wrong place. Be sure to add the code to your Divi Theme Options Custom CSS or styl.css in a child theme.
i love it , thanks
Great, glad you love it!