How To Configure The Slickstream Highlighter

The Slickstream Highlighter allows you to draw your readers’ attention to any element on your page. When the element comes into view, the rest of the content on the page is greyed out, temporarily highlighting the selected element.  

Scroll down the page to see a live example.

Highlight Anything

The Slickstream Highlighter will highlight anything on your page.

  • Text:  A quote or specific paragraph you want to bring to your visitors' attention.
  • Forms:   A form you'd like your visitors to consider filling in. Highlighter will work with any form from any provider, including all inline subscription forms from all email service providers (ConvertKit, ActiveCampaign, etc.). 
  • Images:  An image on the page you'd like to stand out.
  • Custom elements:  Any custom block of content like a recipe card or an infographic that you'd like to stand out.
  • Calls to action:  Any call to action you'd like to promote as the next step in your readers’ journey.

How To Configure The Highlighter

The Slickstream Highlighter will highlight one element per page when it comes into view for the first time. Once an element is highlighted, it will not be highlighted again during that pageview. The element will be highlighted again only if the visitor navigates away from the page and then returns. 

You can turn on the Highlighter Feature in the Slickstream portal.

Config > Features > turn on toggle. Hit the ‘Save’ button in the lower left corner.

Highlight - features-2

Highlight - feature setting

You can select the element to highlight on the ‘Site Wide’ tab.

Config > Site Wide > Highlighter  > enter the CSS selectors 

Enter the CSS selector(s) for the element you wish to highlight on desktop (large screens) and mobile (small screens). Most valid CSS selectors can be used. If you need help identifying a selector, don't hesitate to contact Slickstream Support.

You can also set the time for the element to remain highlighted if the visitor stops scrolling. The default is 10 seconds.

Config > Site Wide > Highlighter  > Fade out duration > enter number of seconds

Below is an example of an element on this page that is being highlighted. To see the effect again, just refresh this page.

Highlighter - highlighted element

Additional Styling

Some additional CSS properties can be used to control the highlighting behavior. These styles are applied to the body element on the page.  

  • highlight-backdrop-color: Sets the color of the backdrop. Default value is rgba(0,0,0,0.6)
  • highlight-backdrop-zindex: Sets the z-index of the backdrop. Default value is 999.
  • Highlight-element-zindex: Sets the z-index of the element being highlighted, when highlighted. This value should be higher than the z-index of the backdrop. Default value is 999999.

In addition to these CSS properties, the Highlighter will add a class name:  highlighter-is-highlighting, to the specified element when it is being highlighted. This allows you to customize the look and feel of the element if you'd like it to change when highlighted.

To add these properties in the portal, select the CSS option under the Site Wide tab and add the properties in the Global CSS text box, as shown below.

Highlighted - CSS-1

If you have any questions about the Highlighter, don't hesitate to contact us at support@slickstream.com.