Vertical Scroll Widget Tutorial

How to Use Vertical Scroll Widget

Elementor Vertical Scroll Widget allows you to create beautiful vertical scroll pages inside Elementor Page builder with many customization options. Vertical Scroll is a FREE widget included in Premium Addons for Elementor Plugin.

Requirements:

Requirements:

  • You will need Premium Addons free plugin installed and activated on your website.
  • Also, make sure that this widget/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 Widget
Elementor Vertical Scroll Widget

Vertical Scroll Content

There are two content type options: Elementor Template and Section ID. You can select the option that matches you need.

Elementor Template Method:

You can add your template to the page by selecting it from the Elementor Template dropdown.

For further clarification about creating a template for Elementor, please check this article.

Insert Elementor Template to Elementor Vertical Scroll Widget
Insert Elementor Template to Elementor Vertical Scroll Widget

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, set a unique ID for every section. Then add the ID to Section ID field.

Insert Section to Elementor Vertical Scroll Widget
Insert Section to Elementor Vertical Scroll Widget

Vertical Scroll Navigation Controls

When you finish adding your templates to 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.

A. 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.

B. 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.

– To add tooltips you have to separate each word with a comma “,”. For instance, Section 1, Section 2, Section 3, etc.. Then, you can adjust dots’ vertical and horizontal position.

– 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 squares.

Entrance Animation: Select the entrance animation for navigation dots.

Navigation Settings for Elementor Vertical Scroll Widget
Navigation Settings for Elementor Vertical Scroll Widget

Vertical Scroll Settings

From here, you can adjust scroll speed and scroll type.

  • Scroll Speed: Set vertical scrolling speed in seconds. The default value is 0.7 seconds.
  • Scroll Offset: Select the offset that add 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 section height is larger than screen height and add a scroll bar for the content. For example, please check the second section on the demo page from here.
Scroll Settings for Elementor Vertical Scroll Widget
Scroll Settings for Elementor Vertical Scroll Widget

Styling Vertical Scroll Widget

When you land to “Style” tab, you will find plenty of stying options available for Navigation Dots and Navigation Menu.

A. Navigation Dots:
Here you will find styling options for Tooltips, Dots, Dots’ Container 

Tooltips Styling Options:

  • 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

Container Styling Options:

  • Background Color
  • Border Radius
  • Shadow

A. 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
Elementor Vertical Scroll widget style tab options
Style tab for Elementor Vertical Scroll Widget

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.