How to Highlight a Text in Divi (with Examples)

Sometimes, you want to highlight a certain phrase on a text element on your design to show your site visitors that it is a crucial part to notice. If you use Divi and still don’t know how do so yet, this article will show you how.

Divi itself has a Text module which you can use to add a text element to your design. Be it a paragraph or heading. The module comes with built-in setting options to style up the text. You can effortlessly change the font family, font size, text color, to applying a gradient to your text in Divi. One thing you can’t do with the built-in settings is adding a highlight.

Since Divi has no built-in settings to highlight a text, you need to add custom CSS to do so. If you have no CSS knowledge, no worries. We have provided four highlight styles along with the CSS snippets.

— Highlight One

The CSS snippet:

.wpb-highlight-one {
  background-color: #f40ef0;
  line-height: 1.7em;
  padding-bottom: 0px;
  display: inline;
  box-shadow: 10px 0 0px 0px #f40ef0, -10px 0 0px 0px #f40ef0;
  box-decoration-break: clone;
}

— Highlight Two

The CSS snippet:

.wpb-highlight-two {
  position: relative;
  color: #ffffff;
  background-color: #55d2fc;
  font-size: inherit;
  padding: .2em .4em;
  border-radius: 6px;
  margin: 0 6px;
}

— Highlight Three

The CSS snippet:

.wpb-highlight-three {
    text-decoration: none;
    box-shadow: inset 0 -.5em 0 #f9c695;
    color: inherit;
}

— Highlight Four

The CSS snippet:

.wpb-highlight-four {
    padding: 0 5px;
    background-color: #f9f220;
}

How to Implement to Above Highlights

First, you can select a highlight style you like and copy the CSS snippet. Next, go to Divi -> Theme Options on your WordPress dashboard and scroll down to the Custom CSS option. Paste the code to the available field and click the Save Changes button.

All CSS snippets above use a class selector to make it easy for you call them (the CSS code). Class selector is the text that has a dot prefix — the text before the opening curly bracket.

You can call the class selectors above on a text element on your design. First, add the Text module to your Divi design and edit the text content on the text editor. Make sure to specify the text type (paragraph or heading).

Once done editing the text, switch to the text mode by clicking the Text tab on the editor.

Select a part that you want to highlight and add the span tag between it. On the opening span tag, add the class you want to call. Example:

<h2 >I want to <span class="wpb-highlight-three">highlight</span> this part</h2>

If you want to apply the highlight to the entire text, you can simply add the class to the opening tag of the text. Example:

If you want to highlight a paragraph, you can manually add the <p></p> tag to your text.

The Bottom Line

Highlighting a certain part of a text is a simple method to let your visitors know that it is (the highlighted part) a crucial part of the text. Divi — and most other page builder plugins — has no built-in setting option to highlight a certain part of a text. Fortunately, it has custom CSS feature to allow you to apply custom styling using your own CSS code. You can implement what we have just covered above to highlight a certain part of a text on your Divi design. Be it a page or custom templates you created with Divi theme builder.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,500+ WordPress users receiving tips and insights on creating on WordPress with Divi.

Creating with WordPress?​

Subscribe and join 1,500+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.