In today’s tutorial, I’m going to show you how to create a free vertical scroll section using Elementor and the Premium Addons for Elementor.
In this elementor vertical scroll, a user can be able to navigate through the content using the dots navigation or using the premium vertical scroll menu.
I’ll also show you how you can use the dots navigation and disable the menu navigation.
You can as well choose to use your Elementor header on your vertical scroll page. To do this you can go to Settings and under Page Layout, change from Elementor canvas to the Default layout (01:04).
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Elementor Vertical Scroll Tutorial
What you’ll need
To create the vertical scroll, all you’re going to need is the free version of Elementor, and the free version of Premium Addons for Elementor. The elementor vertical scroll widget is found in the Premium addons.
Adding the Premium Vertical Scroll Section
Inside your Elementor editor click the (+) to create a new section (01:20). Make it a one-column section.
After creating a new one-column section, go to the widgets area on the left and search for the Premium Vertical Scroll widget and drag it to your section. (01:28)
Make sure the Vertical Scroll is enabled (active) in the Premium Addons.
To enable it, go to your Plugins area and find the Premium Addons for Elementor. You can quickly get to it by pressing CMD/CTRL+E then in the finder type in premium addons. Under the premium addons plugin find the widgets and addons section, click on it and here you’ll find the vertical scroll, make sure it is turned on (in green) (01:48).
Also Read: How to Use Animated Toggle Hamburger Icon in Elementor [Pro]
With your Vertical Scroll widget enabled, go back to your Elementor editor, select the vertical scroll section, under Content you can choose to use either Elementor Templates or Section ID.
In this case, use Elementor Templates, select it and then click on the Add Item button, here you have a dropdown list of a number of pre-made templates that are in your Elementor website. (02:17).
Creating Elementor Templates
In case you do not know how to create Elementor Templates here’s a quick way for you to create a template to use in your vertical scroll section:
Click the (+) icon to add a new one column section. Select the section and in the Edit Section area on the right, under Layout, set content width to full width, set column gap to no gap, under minimum height give it VH 90 (02:37).
Now under Style, go to Background and enable animated gradient, then click on the add item button and select your first gradient color, add another item and choose your second color. Next enable the web effect option and then set gradient angle to -145 degrees (03:06)
After styling your section, you can populate it with a number of widgets like headings, buttons, images and text widgets.
When you’re done, select the section, right-click on it and say save as a template, then give it a name. (03:18)
Back to your editor select your vertical scroll section, under content type select Elementor Template then go choose a template to use (the template you just created for this purpose).
Go back again to the main section, under Layout in the Edit Section area set Content Width to full width, on the Height option select Minimum height and give it 100 VH. After setting this up click the Update button at the bottom. (03:53)
Another way to create Elementor Templates is:
On your dashboard, under Elementor select Templates and here you’ll find the Section option which shows you all the available template sections (04:11).
To Read: How to Make Glassmorphism Forms in Elementor [PRO]
To create a new template here you can just click on the Add New button, give the template a name and click the create template button (04:24). With the new template you can now just go and populate it like you did the first one; with text widgets, images, etc, then click the Publish button at the bottom.
Now that you have your templates all ready, go back to your Elmentor editor and select your premium vertical scroll, in the Edit area on the left, with content type set to Elementor Template, now you can add your sections.
Do this by clicking the add new button then choosing the sections /templates you created. When you’re done, update and preview. This is my vertical scroll, with it’s navigation on the right.
However, there’s a white stripe on the sides of the page and to eliminate this:
Go back to the editor and select the section, in the Edit area on the left, under Layout change Column gap from default to no gap. That will remove the white lines.
Now you need to do some styling on your vertical scroll navigation, so in the Edit Premium Vertical Scroll area on the left, select Navigation; the navigation dots are set to enabled, horizontal position on the right and the vertical position middle, and shapes for the Nav; circles. (06:29)
The Tooltips Text option also has to be enabled; that is the text that appears when you hover over an item in the navigation. To add a tooltip text, go to the Dots Tooltips Text and type in the names of your items, separated by a comma (,) (06:45).
To Read: Create an Elementor vCard with Download Link and Contact Modal Popup
When you’re done setting this up just update and then reload your preview page. And you’ll see that every dot now has a name assigned to it. And when you click on a particular dot it takes you straight to that section of the page.
And now to style the dots:
Get back to your Edit Premium Vertical Scroll area and go to Style. Here, on Navigation dots set the color of the dot to purple, active dots color to a transparent purple, and the dots border color to white.
Then select the container (that’s where the dots are seated), set the background color to purple.
Next is the tooltips option; set the tooltips text color to white and tooltips background to purple. Leaving the rest on default, just Update and preview. (08:14)
Elementor Vertical Scroll Responsive Settings
Here you are going to make sure your vertical scroll section is responsive on all devices. (08:22)
To do this, select the Responsive Mode icon at the bottom left, choose the tablet device; and preview to make sure it looks good, it does.
Go ahead and choose the mobile device and see that it’s also responsive.
To make sure your sections are well responsive on all devices you need to set up the responsive settings when you’re creating the sections.
If you want to use the custom navigation instead of the header, you can go back to your Elementor editor and in the Settings change the Page Layout from default to Elementor Canvas. This will hide the header and you’ll just have your vertical scroll section with the navigation (09:09).
To enable custom navigation for your elementor vertical scroll, go to your Elementor editor and select your premium vertical scroll widget, in the Edit area on the left go to Content.
Under Navigation enable the Navigation Menu option. Under Position, you can choose to have it on the left or right side.
After enabling, you have to add your items for the Navigation Menu down on the Menu Items options, just click the Add Item button and type in the names for your items.
To Read: 15 Fun Elementor Features You Don’t Know Exist
Set the Offset Top option to 35 pixels and the Offset Right to 35 pixels. This is to position the navigation on the page. (10:04)
Go to Style; under Navigation Menu go to Typography and change Text Color to white, set Text Hover Color to yellow and the Background Color to purple. Under Border Type set the border-radius to 35 pixels to make the borders rounded.
On Active; set text color to yellow, hover color to white and background color to purple.
The Navigation Menu is all set, and it’s also linked to the dots menu. (11:04)
In Closing
That’s how you can create a vertical scroll section for free using the Premium Addons for Elementor.
Please use the comment section if you have any comments or questions. Feel free to share with me on what you’ve been able to create with the elementor vertical scroll widget. Don’t forget to subscribe to my Youtube channel and newsletter letter for more tips and tutorials straight into your inbox.
