1. Home
  2. Docs
  3. Dynamic Contents
  4. Multi Scroll

Multi Scroll EA Element

Multi Scroll EA Element for Elementor Page Builder allows you to create two divided sections with a vertical scroll. This widget will help you to bring more content and show it off just in one section! Not only you can create a complete one-page layout with this widget but also you can add as many multi scroll widgets to the page as you want. You can even add one multi scroll section inside the page which gives you unlimited possibilities for creating new unconventional layouts. Here in this tutorial, you’re going to learn how to use the Multi Scroll element into Elementor Page Builder. So let’s get straight into it:

 

 

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Multi Scroll Element

»Content

Content

Adding the data

⇒Left Content: Select the left content of the multi scroll section. You can choose either a text editor or Elementor Template.

⇒Left Template/Text: Select the Elementor Template if you choose a template as left content. Or if you choose text editor then add the text. Relevant options will appear after your selection.

⇒Hide on Tabs: Show/hide the multi scroll on the tablet devices. This option works only when multi scroll disabled on tablets.

⇒Hide on Mobiles: Show/hide the multi scroll on mobile devices. This option works only when multi scroll disabled on mobile.

⇒Right Content: Select the right content of the multi scroll section. You can choose either a text editor or an Elementor template.

⇒Right Template/Text: Select the Elementor template if you choose a template as right side content. Or if you choose text editor then add the text. Relevant options will appear after your selection.

⇒Hide on Tabs: Show/hide the multi scroll on the tablet devices. This option works only when multi scroll disabled on tablets.

⇒Hide on Mobiles: Show/hide the multi scroll on mobile devices. This option works only when multi scroll disabled on mobile.

⇒Add Item: Use the ‘+Add Item’ button to add a more multi scroll section on the page.

 

Navigation

: Enable/disable the navigation menu.

: Set the menu position to the left or the right side of the page.

Adding the Menu

: Add list items by pressing on “+ Add Item” then, start name your sections. For instance, Section 1 | Section 2 | Section 3, etc.

: Enable/disable the navigation dots and customize the settings.

: Add the dots tooltips text here. To add tooltips you have to separate each word with a comma “,”. For instance, Section 1, Section 2, Section 3, etc.

: Adjust the dots horizontal position.

Adjust the dots vertical position.

 

Advanced Settings

⇒Left Section Width (%): Customize the left section width manually.

⇒Right Section Width (%): Customize the right section width manually.

: From advanced settings, you will have the ability to manage multi-scroll height to Min Height or Fit To Screen.

⇒Keyboard Scrolling: Enable/disable the keyboard scrolling.

⇒Loop Top: Defines whether scrolling up in the first section should scroll to the last one or not.

⇒Loop Bottom: Defines whether scrolling down in the last section should scroll to the first one or not.

: Set scrolling speed to the value that can match your needs. Remember that the default value is 0.7 seconds.

: Disable multi scroll on tabs

⇒Disable on Mobiles: Disable multi scroll on mobile phones

 


»Style

 

Left & Right Side Content

The styling options which exist here work 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

 

Navigation Dots

Dots

⇒Dots Color: Customize the navigation dots color.

⇒Active Dots Color: Customize the navigation active dots color.

⇒Dots Border Color: Add a custom color to the navigation dots border.

Container

⇒Background Color: Add a custom background color to the container.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the container for different dimensions.

⇒Shadow: Customize the shadow color, control the blur radius and set the horizontal and vertical value of the shadow.

 

Navigation Menu

Customize your navigation menu using the following styling options:

      • Typography
      • Text Color (Normal & Active)
      • Text Hover Color (Normal & Active)
      • Background Color (Normal & Active)
      • Shadow (Normal & Active)
      • Border Type
      • Border Radius
      • Margin & Padding Controls

 

After done with all customization, Update changes to the page by clicking the APPLY button at the top


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Multi Scroll Element.


Was this article helpful to you? Yes No

How can we help?