< All Topics

Text Highlighter

This free Text Highlighter Block and Addons lets you emphasize important words or phrases with eye-catching highlight shapes.
You can choose from various styles like zigzag, underline, curly, and more to create engaging headings or content.
It also supports pre and post text, custom positioning, and animation effects to make your text stand out beautifully.

Adding the block

To add the block:

  1. Click the “+” button to add a new block.
  2. Search for “Text Highlighter” and select it.
  3. For detailed instructions on how to add blocks in Gutenberg, please refer to the official WordPress Block Editor documentation.

Configuration

  • Pre / Main / Post Text
    Add text before (Pre), as the main highlighted text (Main), and after (Post) to build your full sentence or phrase.
  • Text Highlighter Shape
    Select the shape style that will appear behind the main text:
    • Zig Zag
    • Underline
    • Double Underline
    • Circle
    • Diagonal
    • Cross
    • Curly Line
  • Display in Stack
    Enable this option to show the pre, main, and post texts stacked vertically instead of inline.
  • Wrap in Heading Tag
    Wrap the highlighted text inside a heading tag (H1 to H6) for semantic structure or styling.

Design customization

Highlighter shape settings

  • Highlighter Color
    Choose the color used for the highlighter shape behind the text.
  • Stroke Width
    Set the thickness of the highlighter shape.
  • Stroke Paint Animation Delay
    Control the delay time before the shape painting animation starts.
  • Custom Position for Highlighter
    Manually adjust the highlighter position:
    • Vertical – Move the highlighter up or down.
    • Horizontal – Move the highlighter left or right.

Text settings

  • Global / Main / Pre / Post Text Color
    Set text color individually for global, main, pre, and post text parts.
  • Global Text Alignment
    Align the text (left, center, or right).
  • Global Typography
    Control the typography settings for text, including:
    • Size – Adjust font size
    • Letter Spacing – Adjust space between characters
    • Letter Case – Change text case (uppercase, lowercase, capitalize)
    • Line Height – Adjust the height between lines of text