Introduce enhanced interaction and design to your website with the Elementor Vertical Scroll widget by Premium Addons. This widget offers a range of scroll effects including Default, Parallax, Zoomed Parallax and Cube, providing a simple yet powerful way to present content. With straightforward navigation options like dots, tooltips, and menus, site visitors can easily explore your pages. Upgrade your Elementor toolkit with this widget for a more dynamic and engaging user experience.
Check Elementor Vertical Scroll Widget demo page.
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 available: 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
In conclusion, Elementor Vertical Scroll widget by Premium Addons is a versatile and innovative tool that brings a layer of depth and creativity to any webpage. With multiple scroll effects such as Default, Parallax, Zoomed Parallax, and Cube, it provides a rich user experience, allowing for the display of content in a dynamic and engaging way. The addition of varied navigation options, including intuitive navigation dots, informative tooltips, and a customizable navigation menu, ensures that users can seamlessly interact with the webpage. Whether you’re looking to create a storytelling experience, showcase products, or simply guide visitors through your site, the Vertical Scroll widget enhances your design capabilities within the Elementor ecosystem. Embrace the power of this widget and elevate your website’s visual appeal and functionality.
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.
