Are you looking for new scrolling effects that will surprise your clients? Elementor Vertical Scroll Widget allows you to create beautiful vertical scroll pages inside Elementor Page builder with outstanding scroll types and many customization options. Elementor Vertical scroll widget is coming with four amazing scroll effects Default, Parallax, Zoomed Parallax, and Cube.
Check Elementor Vertical Scroll Widget demo page.
Requirements:
- You will need Premium Addons free plugin installed and activated on your website.
- Also, make sure that this widget/feature/addon is enabled so you can find it in the Elementor editor
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Elementor Vertical Scroll Content Settings
There are two content type options: Elementor Template and Section ID. You can select the option that matches your need.
Elementor Template Method:
You can add your template to the page by selecting it from the Elementor Template dropdown.
- You can use Elementor Live Templates feature to create/edit Elementor templates on the same page. For more information, check Elementor templates article.
- You can also select an existing Elemntor template.
Section ID Method:
You can also use exiting sections on the current page, you will need to navigate to section settings -> Advanced tab -> CSS ID, and set a unique ID for every section. Then, add the ID to Section ID field.
Elementor Vertical Scroll Navigation Controls
When you finish adding your templates to Elementor vertical scroll widget, you will need to adjust the navigation controls.
Please consider that you actually have 3 navigation options, not only 2! Those 3 are Mouse Scrolling, Navigation Menu, and Navigation Dots. If you don’t want to use Navigation Menu or Navigation Dots, thus, mouse scrolling will do the job.
But please keep in mind that mouse scrolling works even if you enable the 2 other navigation controls.
Navigation Menu:
– First, add list items by pressing on “+ Add Item” then, start naming your sections, for instance, Section 1 | Section 2 | Section 3, etc…
– When you finish, go and set menu position to the left or the right side of the page.
– Not only menu position but we have added offset controls, so you can manage menu top and left/right spacing.
Navigation Dots:
In navigation dots, you have the option to add tooltips or you can keep it empty if you don’t want to add any.
– In addition, you can set dots horizontal and vertical positions.
- Horizontal: Right and Left Options.
- Vertical: Top, Middle, and Left.
Shape: Select the shape of the navigation circle or lines.
Dots Tooltips Text: To add tooltips you have to separate each word with a comma “,”. For instance, Section 1, Section 2, Section 3, etc…
Entrance Animation: Select the entrance animation for navigation dots.
Elementor Vertical Scroll Settings
From here, you can adjust the scroll effect, scroll speed, and much more.
- Scroll Effect: Set scroll effect for vertical scroll widget: Default, Parallax, Zoomed Parallax or Cube.
- Scroll Speed: Set vertical scrolling speed in seconds. The default value is 0.7 seconds.
- Scroll Offset: Select the offset that adds to the first item.
- Full Section Scroll: This option means that you will navigate between your sections by doing one scroll. But, if you switched off this option then, you will need to do more than one scroll until you reach to each section. You can disable this option on the touch device from Enable Full Section Scroll on Touch Devices option.
- Save to Browser History: Enabling this option will save the current section ID to the browser history.
- Check Content Overflow: Enable this option to check if the section height is larger than the screen height and add a scroll bar for the content. For example, check the second section on the demo page.
Default Scroll Effect for Elementor Vertical Scroll
Parallax Scroll Effect for Elementor Vertical Scroll
Zoomed Parallax Scroll Effect for Elementor Vertical Scroll
Cube Scroll Effect for Elementor Vertical Scroll
Styling Elementor Vertical Scroll Widget
When you land on Style tab, you will find plenty of styling options available for Navigation Dots and Navigation Menu.
Navigation Dots:
Here you will find styling options for Tooltips, Dots, Dots’ Container
Tooltips Styling Options:
- Tooltips Text Color
- Typography
- Tooltips Background
- Border Type
- Border Radius
- Box Shadow
- Margin & Padding Controls
Dots Styling Options:
- Dots Color
- Active Dot Color
- Dots Border Color
- Border Radius
Container Styling Options:
- Background Color
- Border Radius
- Shadow
Navigation Menu:
Navigation menu styling options are:
- Typography
- Text Color (Normal/Active)
- Text Hover Color (Normal/Active)
- Background Color (Normal/Active)
- Shadow (Normal/Active)
- Border Type
- Border Radius
- Margin & Padding Controls
If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁
Join the Community
You’re most welcome to join our Facebook group and YoutTube channel to get updates about new features, improvements, and bug fixes.
