Multi-Scroll Widget Tutorial

You are here:
< Back

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.

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.
Premium Multi-Scroll Widget for Elementor

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.

From WordPress dashboard, navigate to Pages -> Add New -> Edit with Elementor
– Add new section, then jump to ‘Edit Section’ to apply some changes to this section according to the following instructions:

  • Layout: Do whatever changes you want without touching Stretch Section option as you will control section width from multi-scroll widget itself.
  • Style: Go and add the style you want.

– When you finish, go to section’s top controls, right click on the middle dots and press on ‘Save as Template’. Then, give your template a name and click ‘Save’. And now, you have created your first template. Well done!

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.

Elementor Multi-Scroll Widget

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

Multi-Scroll for Elementor Page Builder

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

Elementor Multi-Scroll

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
Multi-Scroll Widget Options for Elementor

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
Elementor Multi-Scroll Widget

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

Download Now it's free!

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

Close Menu