Elementor Multi-Scroll Widget Tutorial

With Elementor Multi-Scroll widget from Premium Addons Pro for WordPress, you can easily create pages with vertical split scrolling or add these scrolling sections to your site.

This guide will walk you through the straightforward settings and choices you have with this widget in Elementor.

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.

Key Features

• Content
• Navigation
• Advanced Settings

Content

Elementor Multi-Scroll widget comes with two content options: Text Editor, and Elementor Templates.

Text Editor

From the text editor you can add Headings – H1 to H6 – in addition, you can add a simple paragraph and media files.

Elementor Templates

You can use Elementor Live Templates feature to create/edit Elementor template on the same page. For more information, please check Elementor templates article.

• Left Content
  • Selection: Elementor Template
  • Button: Create/Edit Elementor Template
• OR Select Existing Template
  • Dropdown to select an existing template
• Hide On
  • Option to select conditions for hiding this content
• Right Content
  • Selection: Elementor Template
  • Button: Create/Edit Template
• OR Select Existing Template
  • Dropdown to select an existing template
• Hide On
  • Option to select conditions for hiding this content

• Custom Navigation Element Selector:  Use this to add an element selector to be used to navigate to this slide. For example #slide-1. Check this article to know how to use Elementor elements to navigate through Multi Scorl widget slides.

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.

Fixed Content

Elementor Multi Scroll widget allows for dynamic layering of content in slides, providing a rich interactive experience. Each fixed content layer within a slide can be customized using the following controllers:

• Create / Edit Template: To create or modify a custom Elementor template.
• Select Existing Template: Dropdown to choose from pre-made Elementor templates.
• Entrance Animation: Select how the content appears on the scroll.
• Custom Position: Enable manual positioning of the content.
• Horizontal Position: Set the content’s horizontal position.
• Vertical Position: Adjust the content’s vertical position.
• Width: Set the content’s width.
• Z-index: Set the stack order of the element in the layout.

Navigation Controls

Once you add content to the multi-scroll widget, you will need to adjust multi-scroll navigation controls.

Please note 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.

Navigation Menu

• Navigation Menu: Toggle Yes/No (Note: This option works only on the frontend)
• Horizontal Position: Three icons indicating different alignment options
• Vertical Position: Checkbox (Unchecked) with vertical alignment icons
• List Items:
  • Sections with options to edit or delete (X icon)
  • Add list items by pressing the “+ Add Item” button and start naming your sections.

Navigation Dots:

• Navigation Dots: Toggle to enable or disable the display of navigation dots.
• Dots Tooltips Text: Field to enter the tooltip text for each dot, separated by semicolons.
• Dots Horizontal Position: Dropdown to select the horizontal alignment of the dots on the page.
• Dots Vertical Position: Dropdown to choose the vertical alignment of the dots on the page.

To add tooltips you have to separate each word with a comma “,”. For instance, Section 1, Section 2, Section 3, etc..

Advanced Settings

• Left Section Width (%): Adjusts the width of the left section as a percentage of the total container width.
• Right Section Width (%): Adjusts the width of the right section as a percentage of the total container width.
• Height: Dropdown to select the type of height setting, with “Min Height” currently selected.
• Min Height (px): Slider to set the minimum height of the sections in pixels.
• Keyboard Scrolling: Toggle to enable or disable navigation through sections using the keyboard.
• Loop Top: Toggle to allow or prevent looping back to the last section when scrolling up from the first section.
• Loop Bottom: Toggle to allow or prevent looping back to the first section when scrolling down from the last section.
• Scroll Speed: Slider to adjust the speed of the scrolling animation.
• Disable on Tablets: Toggle to enable or disable the multi-scroll functionality on tablet devices.
• Disable on Mobiles: Toggle to enable or disable the multi-scroll functionality on mobile devices.

NOTE* If you decide to use this option to set multi-scroll height, you will have the ability to use the 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.

Style

• Left/Right Side.
• Navigation Dots.
• Navigation Menu.

Left/Right Side

• Background Color: Choose a color for the background.
• Text Color: Select a color for the text.
• Text Background Color: Pick a background color for text boxes.
• Typography: Adjust font settings.
• Border Type: Set the type of border (default selected).
• Border Radius: Adjust the roundness of the border corners.
• Vertical Position: Toggle for vertical alignment.
• Margin: Set the space outside the element’s border.
• Padding: Set the space inside the element’s border.

Navigation Dots: These settings allow you to style the appearance of the navigation dots and their container, providing visual cues to the user for navigation through different sections of content.

• Dots
  • Dots Color: Select the color for the dots.
  • Active Dot Color: Choose a color for the dot that represents the current section.
  • Dots Border Color: Pick a color for the border of the dots.
• Container
  • Background Color: Set the background color for the dots container.
  • Border Radius: Adjust the roundness of the container’s corners.
  • Shadow: Add a shadow effect to the container.

Navigation Menu: ٍStyling options for both the normal and active states

• Typography: Access font settings for normal and active states.
• Text Color: Choose the color for the menu text.
• Text Hover Color: Set the color for the text when hovered over.
• Background Color: Select a background color for the menu.
• Shadow: Add or configure a shadow effect for the menu.
• Border Type: Choose the type of border (default is selected).
• Border Radius: Adjust the roundness of the menu corners.
• Margin: Set the space outside the menu’s border, with individual adjustments for top, right, bottom, and left.
• Padding: Set the space inside the menu’s border, also adjustable for top, right, bottom, and left.

Conclusion

For those aiming to craft a remarkable webpage on an Elementor site, Elementor Multi-Scroll widget stands ready to assist, offering a wealth of customization possibilities!

We trust this guide has been instrumental in aiding your design journey, and we eagerly anticipate witnessing the incredible pages you’ll create!

If you still need any further assistance, feel free to contact the Premium Addons support team from here. We would be more than glad to help 😁