Text Highlighter

Highlights can be used effectively in web design to draw visitors’ attention to specific sentences or words. This is because you know that all content is not equally important and that many readers scan your content instead of reading it. Basically, highlights can provide a better user experience by guiding users through your content.

View Demo →

Text Settings

The Text Highlighter module allows you to add highlighted text, prefixes and suffixes. In the Content → Text tab you can also select 1 of the 24 highlighting shapes and chose Text Wrapper Tag. Prefix, Suffix, Highlighted Text and Shape can be customized in the Design tab.

In Content → Settings toggle you can choose Prefix/Suffix Direction and Z-index of Highlight Shape.

Animation

The Divi Pixel Text Highlighter module comes with advanced settings that allow you to control animation. You can select when the animation will start (on page load or in the viewport), and define animation delay, duration and delay after animation. Using the Repeat Mode function, you can select whether the animation will be repeated or not. You can also select the “No Animation” option to make the highlighting shape static. When the Repeat Mode is used you can also select Count Mode (Every time in viewport or Cumulative) and define Repeat Counts.

Highlight Shape

To customize the highlight shape go to Design → Highlight Shape toggle. Here you can change the highlight shape color, stroke width, line cap (round, square, butt), and tweak the highlight shape position by changing horizontal and vertical offset.

Text Customization

The Text Highlighter module allows you to add highlighted text, prefixes and suffixes. You can change text styles in Design → Text toggle, which features 4 tabs: All, Prefix, Highlighted Text and Suffix. In the All tab, you can change text alignment and add global styles that will apply to all texts within the module. You can customize Prefix and Suffix texts style in corresponding tabs. The Highlighted Text tab has additional settings for spacing (margin and padding), so you can correct spacing between the prefix/suffix and highlighted text. The padding will also help to add spacing inside the highlight shape.