Widgets & Extensions

Scroll Indicator

General

Added in Extras 2.1, the Scroll Indicator widget provide an amazing way of indicating the scroll position of the page based on selected elements’ top position and their height. It does this and much more with its 3 skins: List, Bar and Bullets.

Why use Scroll Indicator?

This is an unique widget in the Elementor ecosystem of addons and is built by us from scratch to suite a couple of needs that were unmet since now. The three scenarios are tied to the 3 skins that are available:

  1. List Navigation: Provide a horizontal or vertical list of sections on your page. The user can navigate through the sections and see how much progress has been made until the end of the section, though the circle progress on the left.
  2. Bar Indicator: If you are familiar with the reading progress bar on top of articles that displays how much you have left to read, this is exactly what this is. You can split it into sections so visitors know they finished a certain chapter of the article and even click to navigate through them
  3. Bullets Navigation: The popular floating bullets allows visitors to navigate through areas of the page. You can add tooltips that display automatically when the page scrolls to the bullets’ corresponding section and style every state of the bullet. Together with Elementors’ new Custom Positioning features, you can fix this widget to any part of the page without any additional controls.

Custom Positioning

Due to the nature of this widget, in the sense that it indicates the current scroll position, it should always remain visible on the page, which means inside the viewport (the visible part of the page at any moment). To do that you have essentially two options to do this:

  1. Use sticky functions: You can use Extras’ sticky feature or Elementors’ default one to stick the widget inside the viewport on scroll.
  2. Use Fixed Positioning: The features from Elementor under Advanced > Custom Positioning allow you to set the position to Fixed and align it anywhere you like. IMPORTANT: Because for fixed elements Elementor does not have Height controls similar to the Width controls, for the Bullets skin we’ve added them in the widgets’ settings, under Style > Custom Positioning. This is useful when you want to stick the widget to the top right of the page and make sure it’s 100% of the height of the window.

General Settings

  • Content
    • Settings
      • Skin — Choose the skin you want from the provided ones
      • Enable Click — Enables click on the indicators for navigating through the sections
    • Sections — These are the most important piece of information to provide. Make sure you read carefully below
      • Element ID — This is the ID of the element that corresponds to this indicator. We call them sections but they can be any type of elements on the page.
      • Progress Start — Defines when the progress starts.
        • Top to Top — Starts when the top of the viewport (window) hits the top of the section.
        • Bottom to Top — Starts when the bottom of the viewport (window) hits the top of the section.
      • Progress End — Defines the conditions when the progress end.
        • Top to bottom — Ends when the top of the viewport (window) hits the bottom of the section.
        • Bottom to Bottom — Ends when the bottom of the viewport (window) hits the bottom of the section.
      • Title — The title of the section. Available only for the List and Bullets skin. In the Bullets skin this is shown inside the appearing tooltip.
      • Subtitle — The subtitle of the section. This is available only for the List skin.

List Skin Settings

  • Content
    • Settings
      • Direction — Whether to show the list stacked or inline. Horizontal is inline, Vertical is stacked.
      • Show — Choose what to show inside the list items. You can restrict this to only numbers with a progress circle surrounding them.
  • Style
    • Elements
      • States:
        • Default — Colours and styles for all content inside an indicator used by default
        • Hover — Colours and styles for all content inside an indicator used when hovering
        • Reading — Colours and styles for all content inside an indicator used when passing through the section and the indicator progress circle is between 1% and 99%
        • Read — Colours and styles for all content inside an indicator used when the section has passed and the progress circle is at 100%

Bar Settings

The Bar skin settings are straightforward as this skin is very simple. If you need help please contact us.

Bullets Skin Settings

  • Content
    • Settings
      • Direction — Whether to show the bullets horizontally or vertically.
      • Enable Tooltips — Turn tooltips on or off for the bullets. Please refer to the Global Tooltips documentation for explanation of the controls.
  • Style
    • Custom Positioning
      • Height — These settings are similar to the ones under Advanced > Custom Positioning > Width. They allow you to adjust the height of the widget in situations where you need the widget place to the right or left of the page, with a 100% height.