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.
▶️ Please watch the video above to get all the exciting details! 👆
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 your website.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
.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 your website.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*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 highlighting 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 your website.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*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> 
Thank you Nelson….I am wondering….what if you already have a span style….how would that look like….
Thanks,
Mark
If you already have a span tag and you want to highlight that then just give the class of your preferred style that is mentioned in the tutorial to the span tag and then paste the code in the Theme Options. You can change the color with the color that you want to give to your span. If you want to highlight the whole h1 then wrap that h1 tags in the span tags and then give that span a class mentioned above.