Elementor Vertical Scroll widget is a free widget in Premium Addons for Elementor plugin. It helps you to create an Elementor vertical scroll slider and select between four different scroll effects: Default, Parallax, Zoomed Parallax and Cube. This way of showing things is easy and useful. Use dots, tooltips, and buttons to make it easy for people to navigate between the vertical slides.
Check Elementor Vertical Scroll Widget demo page.
You can check out the demo page to learn more about Elementor Vertical Scroll Widget.
Requirements:
- You will need Premium Addons PRO plugin installed and activated on your website.
- Also, make sure that this addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Key Features
- Content
- Navigation
- Scroll Settings
Content
There are two content type options: Elementor Template and Section ID. You can select the option that matches your needs.
- Create / Edit Template: Create a new template or edit an existing one for the section. For more information, check Elementor templates article.
- Select Existing Template: Dropdown to choose from templates you have already created.
- Section ID: Field to assign a unique ID to the template section for identification and targeting purposes.
Important Notice: Ensure all page sections have a default height and use consistently sized templates. Add all navigation items first before configuring the menus.
Navigation
After setting up your templates in the Elementor Vertical Scroll widget, you should configure the navigation settings.
You have three navigation methods for the vertical scroll slider: Mouse Scrolling, Navigation Menu, and Navigation Dots. You can choose Mouse Scrolling, or use it in combination with the other two methods.
- Navigation Menu
- Position: Select the alignment of the navigation menu (Left/Right).
- Offset Top: Adjust the vertical positioning of the menu from the top.
- Offset Left: Adjust the horizontal positioning of the menu from the left.
- Menu Items: Add and customizes individual navigation menu items.
- Navigation Dots
- Horizontal Position: Set the horizontal alignment of the navigation dots (Left/Right).
- Vertical Position: Set the vertical placement of the dots (Top/Middle/Bottom).
- Shape: Choose the shape of the navigation dots (Circles/Squares/etc.).
- Tooltips Text: Toggle the display of text tooltips on hover.
- Dots Tooltips Text: Customize the text for the tooltips, with options for each dot.
- Entrance Animation: Select the animation effect for the dots when they appear on the page.
You have to separate each word with a comma “,”. For instance, Section 1, Section 2, Section 3, etc…
Scroll Settings
From here, you can adjust the scroll effect, scroll speed, and much more.
- Scroll Effect: Selects the type of scrolling effect, with Default, Parallax, Zoomed Parallax, or Cube.
- Scroll Speed (sec): Sets the time in seconds for the scroll action to complete. The default is 0.7 seconds.
- Scroll Offset: Allows setting a specific offset for the scroll start point.
- Full Section Scroll: Enables scrolling through full sections.
- Save to Browser History: If enabled, saves the current section ID to the browser history.
- Enable Full Section Scroll on Touch Devices: Determines whether full section scroll is active on touch devices.
- Check Content Overflow: Checks if the section’s height is larger than the screen height and adds a scrollbar if necessary. 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
Style
When you land on Style tab, you will find plenty of styling options available for Navigation Dots and Navigation Menu.
Navigation Dots
Tooltips
- Tooltips Text Color: Set the color of the text inside the tooltips.
- Typography: Adjust the font settings for the tooltip text.
- Tooltips Background: Set the background color of the tooltips.
- Border Type: Choose the style of the border for the tooltips (e.g., solid, dashed).
- Border Radius: Adjust how rounded the corners of the tooltips are.
- Box Shadow: Add a shadow effect around the tooltips.
- Margin: Control the space around the tooltips.
- Padding: Set the space inside the boundaries of the tooltips, with individual controls for top, right, bottom, and left.
Dots
- Dots Color: Adjust the color of the navigation dots.
- Active Dot Color: Set the color of the dot that represents the current section.
- Dots Border Color: Change the color of the border around the navigation dots.
- Border Radius: Control the roundness of the navigation dots’ corners.
Container
- Background Color: Sets the background color of the container that holds the navigation dots.
- Border Radius: Controls the roundness of the container’s corners.
- Shadow: Adds a shadow effect to the container.
Navigation Menu
- Typography: Adjust the font properties for both normal and active menu items.
- Text Color: Set the color of the text in the navigation menu.
- Text Hover Color: Change the text color when hovering over menu items.
- Background Color: Determine the background color of the navigation menu.
- Shadow: Add a shadow effect to the navigation menu.
- Border Type: Select the style of the border for the menu (e.g., solid, dashed).
- Border Radius: Control the roundness of the navigation menu’s corners.
- Margin: Adjust the space around the entire navigation menu.
- Padding: Set the space inside the navigation menu items.
Conclusion
Finally, Premium Addons Elementor Vertical Scroll feature is a useful and creative tool that can be used to add vertical slider in Elementor. You can choose from more than just Default. There is Parallax, Zoomed Parallax, Cube, and more. There are a lot of fun and interesting ways for people to show what they know with this. Different navigation options, like helpful tooltips, simple control dots, and a menu that you can change, make it easy to navigate through the vertical slides on your page. You can use it to tell a story, show off your products, or just make your site easy to navigate.
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 YouTube channel to get updates about new features, improvements, and bug fixes.
