Text Scroll Highlighter

The Text Scroll Highlighter widget offers an elegant solution for drawing attention to important text throughout your site. With animations that are tied to scrolling, this widget effectively partners with your site visitor to actively highlight selected content as they move around your site.


Preview: https://demo.wocode.com/text-scroll-highlighter

SETUP

WIDGET PLACEMENT

  • Drop the widget onto your site. If you are using the widget to add new text, place it where you would like the new text to be seen. If you are using the widget to add a highlight effect to text elsewhere on the page, you can add the widget anywhere you like. Note that the black placeholder will not appear on the published site.

Note: Avoid placing the widget in the header or footer unless you wish to apply the effect to text across the entire site.

WIDGET OPTIONS

  • Open the widget option panel.

  • Highlight In: This dropdown allows you to specify how you would like to target text for highlighting:

    • Everywhere: This option searches and highlights all matching text across the page, including text in other widgets, not just the text widget.

    • All Text Widgets: This option will highlight corresponding text within every text widget on the page.

    • This Widget Content: This option will use the text within the widget itself, as specified in the Custom Text field. When selected, the following options will become visible and available:

    • Custom Title: Adds a custom title to your widget.

    • Custom Text: Used in conjunction with the "This Widget Content" option, this field is where you add the text content the widget will use to highlight.


  • <mark> HTML Tags: The <mark> HTML element represents text which is marked or highlighted for reference or notation purposes due to the marked passage's relevance in the enclosing context.
  • Underlined Content: Targets and styles underlined text.
  • Italic Content: Targets and styles italicized text.
  • Custom CSS Selectors: Use to target specific elements by their CSS class.
  • Custom CSS Selectors *: Enter the desired CSS class in this field to apply your custom styles.

  • Animation Duration (ms): Sets the duration of the highlight animation in milliseconds.
  • Highlight Offset (px): Sets the offset distance in pixels for the start of the highlight effect.
  • Debug Markers (Editor Only): Debug markers serve the purpose of visually indicating where the widgets scroll animation will take place on the page. These markers will only be seen inside the editor, and not on a published site.

DESIGN SETTINGS

The Design section allows you to customize the look and feel of the Text Scroll Highlighter widget. Most of these options are related to padding and text styling and are self explanatory, however there are a number of design options worth mentioning specifically.


  • Widget Styling: This section controls the styling for the widget container when using the "This Widget Content" highlight option.

    • Background Color: Sets the background color that is visible behind the text within the widget.


  • Highlight Styling: This section controls the styling for the text highlight.

    • Highlight Style: Sets the highlight style. There are three options: background, half, and underline.

    • Highlight Only Once: Ensures text is only highlighted once per page visit.

    • Highlight Color: Sets the color of the text highlight.

    • Highlighted Text Color: Defines the text color after it's highlighted.

    • Half Style Line Height (px): This option appears when the "half" Highlight Style is selected and adjusts the height of the text highlight.

    • Hide Text Underline: This removes the underline effect while keeping the text highlighted if the “Underlined Content” option is being used.

    • Hide Italic Font Look: This removes the italicized effect while keeping the text highlighted if the “Italic Content” option is being used.