How to Use Multi-Scroll Widget
Elementor Multi-Scroll widget was developed and tailored especially for Elementor Page Builder. Now, you can create a full multi-scroll one page website or even integrate a multi-scroll sections within your page easily inside Elementor with no coding required.
Requirements:
- You will need Premium Addons PRO 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. 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.
Multi-Scroll Widget Content Source
Multi-Scroll widget comes with two content options, text editor and templates.
A. Text Editor as a Content Option for Multi-Scroll Widget:
- Navigate to the page you need to add a Premium Multi-Scroll widget to.
- Create a new section and drag multi-scroll widget to it.
- Navigate to Content and press on “+ Add Item”. Now, you’ll find Left Content and Right Content options are selected to Text Editor by default, keep it as it is and start adding your content to the text editor.
- From text editor you can add Headings – from H1 to H6 – in addition, you can add a simple paragraph and media files.
B. Templates as a Content Option for Multi-Scroll Widget:
To add new templates, you will need to create a blank page as a step before using multi-scroll widget.
- You can use Elementor Live Templates feature to create/edit Elementor template on the same page. For more information, please check Elementor templates article from here.
- You can also select an existing Elemntor templates.
NOTE* Remember that you will need to create 2 templates per multi-scroll section; one will be placed as Left Content and the other one will be placed as Right Content. So, if you want to display 3 sections in multi-scroll widget, you have to create 6 templates.
Multi-Scroll Navigation Controls
When you finish adding your content to multi-scroll widget, you will need to adjust multi-scroll navigation controls.
Firstly, 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 switch on 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 name 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.
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.
Multi-Scroll Advanced Settings
A. Height:
From advanced settings you will have the ability to manage multi-scroll height to Min Height or Fit to Screen.
- Min Height:
Min height means that multi-scroll widget will appear on your page in a specific custom height. This height will not appear the same on different screen sizes. For instance, on wide screens, multi-scroll tallness will be less than how it will appear on small screens.
If you decided to use this option to set multi-scroll height, you will have the ability to use keyboard scrolling option.
- Fit to Screen:
Fit to Screen means that multi-scroll will be full screen, which means that its height will be the same on both wide and small screens.
B. Top & Bottom Loop:
If you turned on these 2 options, you will have the ability to jump to the last section in multi-scroll when you scroll up from the first section, and vice versa.
C. Scroll Speed:
Set scrolling speed to the value that can match your needs. Remember that the default value is 0.7 seconds.
Styling Multi-Scroll Widgets
A. Left & Right Side Content:
The styling options which exists here works with Text Editor as left/right side content for multi-scroll widget.
You can style your content according to the following options:
- Background Color
- Text Color
- Text Background Color
- Typography Settings
- Border Type
- Border Radius
- Content Vertical Position
- Margin & Padding Controls
B. Navigation Dots:
You will be able to add your own touch to Tooltips, Dots, and Dots’ Container.
- Tooltips
Text Color
Font - Dots
Dots Color
Active Dot Color
Dots Border Color - Container
Background Color
Border Radius
Shadow
C. Navigation Menu:
Customize your navigation menu using the following styling options:
- Typography Settings
- Text Color (Normal & Active)
- Text Hover Color (Normal & Active)
- Background Color (Normal & Active)
- Shadow (Normal & Active)
- Border Type
- Border Radius
- Margin & Padding Controls
