Page Scroll - Snap Scroll
Updated over a week ago

We are working on making this feature compatible with containers.

Page Snap Scroll is part of Page Scroll controlled by the “Page Settings” gear at the bottom left of the Elementor interface.

End enable the Page Scrolling settings


Page Snap Scroll performs a snap effect between the sections of the page.

Settings

You can choose:

  • you can apply to the snap only on a custom selected CSS class;

  • to define the interstitial section of your theme. Here you can define the CSS selector for non-full-height sections, such as a header and footer. It's very important to define it or the snap will be applied to them! View the article on HTML structure of themes;

  • speed control in milliseconds;

  • offset, a distance in pixels to offset the position of each section by;

  • to set heights, to definite whether Page Snap Scroll assigns a height to the sections;

  • overflow scroll, to define whether Page Snap Scroll will allow scrolling over overflowing content within sections;

  • update hash, to define whether Page Snap Scroll updates the browser location hash when scrolling through sections;

  • to show scrollbars, to define whether scroll bars are visible or not;

  • touch scroll, to define whether Page Snap Scroll handles touch scroll events.

Navigation

You can enable navigation with a progress bar and choose between many styles:

  • Dynamic;

  • Dots;

  • Bars;

  • Vertical Bars;

  • Lines (no title);

  • Squares;

  • Circles;

  • Circles line (SVG);

  • Triangles;

  • Icons or custom icons.

For each style you can choose:

  • to show the title of the section between number, section CSS ID or nothing; example for the title of the section with a number:if you want to show a text title you need to write a custom CSS ID on Advanced (if you use - or _ characters in the CSS ID they will be converted into spaces) and after you can select "Section CSS ID"

  • title typography;

  • title color;

  • size of the element;

  • space between single elements of navigations;

  • side space of the element;

  • color of the element;

  • border color of the element;

  • border size of the element.

You can apply to the Snap on Desktop, Tablet, or Mobile. The responsive mode will take effect only on the preview or live page, and not while editing in Elementor.

Demo (with navigation)

Did this answer your question?