Horizontal Scroll Widget Tutorial

Intro

Creating an outstanding experience for visitors should be a top priority for any website also to make sure that their visitors are engaged with the design and content of the pages. So to help you achieve that, we have created an extraordinary widget which is Horizontal Scroll for Elementor Page Builder our newest widget addition to an ever-growing collection of Elementor widgets.

Horizontal Scroll widget provides you with a great tool to create a magnificent horizontal scroll effect on your Elementor pages. By using the Horizontal Scroll widget for Elementor page builder, you will be able to create exceptional pages that will captivate your visitors’ attention.

Click here to check Premium Horizontal Scroll Widget demo.

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.

Then, How Can I Use This Widget to Create an Eye-Catchy Website?

Well, this a very good question! All you have to do is to create your unique design by adding some cool effects using widgets like Image Layers and Background Transition, in addition, you can use Elementor’s section add-ons like Particles, Parallax, Ken Burns, and Animated Gradients. That’s beside, the Elementor’s entrance animation as they are fully compatible with the Horizontal Scroll Widget.

Wait, this is not all we have! You can add content before and after the horizontal scroll widget with no problems. Furthermore, you have an option to add a horizontal scroll to pages using either Sections IDs or Elementor Templates.

These features and many more will be discussed in further detail in this tutorial.

1. Creating an Elementor Templates for Horizontal Scroll

Here are a couple of steps to create your Elementor Template for Horizontal Scroll widget.

• Dashboard -> Templates –> Add New.

• Select the Section to create an Elementor Template for Horizontal Scroll.

• Name your Template.

• Create an Elementor template section to be used in Horizontal Scroll.

• Make sure that the Stretch Section option is disabled, then go and give your section a 100 VH as a minimum height.

Note: Please make sure that the sections used within Horizontal Scroll widget are not stretched, so disable Stretch Section option for all Elementor templates used within Horizontal Scroll.

Recommendation: Set the height for Elementor’s sections used within Horizontal Scroll widget to 100 VH. This will make the section’s height equal on all screen sizes including responsive devices.

Key Features

• Content
• Advanced Settings
• Navigation
• Pagination Numbers

Content

• Sections: Add items (sections) to the Horizontal Scroll widget.
• Background Transition Speed Works only when the Scroll Background Transition option is on. This will allow you to set the transition speed whether if you are using colors or images as backgrounds for the Elementor templates which added/inserted into the Horizontal Scroll Widget.
• Hide Section On: Hide section on desktop, tablet or mobile.

• Fixed Content Template: Add an Elementor Template to be displayed as a Fixed Content while scrolling on Horizontal Scroll widget. See an example from here. Once you add a Fixed Content Template, you will be able to customize its position/placement using the following options:
  • Vertical Offset
  • Horizontal Offset
  • Z-index
• 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.

• Content Type: There are two types of content available to be used within the Horizontal Scroll widget either through Section ID or Elementor Template.
  • 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.

Anchor ID: Set Anchor ID which will allow you to anchor to a specific slide on Horizontal Scroll.

Steps to Add Anchor ID to a Specific Slide on Horizontal Scroll Widget for Elementor

1. Set an anchor ID for section item (slide). For instance, you can name it “section-2”.
2. Add the anchor ID to a link or a button on your page, make sure to add slash and hashtag signs before the ID [#/], so it should be like [#/section-2].

• Scroll Background Transition:
  • Background Type: Set Background Transition for Horizontal Scroll Sections.
    • Color: Set a solid color for the Horizontal Scroll section’s background.
    • Image: Set an image background for the Horizontal Scroll sections. You can customize the background using the following controls:
      • Position
      • Attachment
      • Repeat
      • Size

Note: Please Make sure that the Elementor Templates which inserted into the Horizontal Scroll widget doesn’t have a section background – color or image – to avoid the overriding on the Background Transition option.

Advanced Settings

• Number of Slides in Viewport: This option will allow you to show part of the next slide within the viewport area. For instance, if you set it to 1.5 then half of the next slide will be shown on your screen view.

• Scroll Distance Beyond Last Slide (Works only when the number of slides in Viewport is more than 1) Set the value in pixels for the scroll distance after the last slide/template before scrolling down to the next section.
• Offset (PX): Set the point (in Pixels) to where the Horizontal Scroll should begin.
• Scroll Effect: Select the type of scroll within the Horizontal Scroll widget. There are two scrolling effects available Normal, and Snap.
  • Normal Scroll: The slides will scroll horizontally in a normal/smooth way on mouse scroll. See example.
  • Snappy Scroll: The slides will act more like a carousel that moves between slides on mouse scroll. See example.

• Decrease Scroll Effect by (only on Normal Scrolling): Allows you to control the speed at which the Horizontal Scroll will slide between sections, the bigger the number the slower Horizontal Effect will scroll.
  For instance, if you set it to 2 then it will slide at half (1/2) the speed of scrolling and if it’s set to 3 it will be one third (1/3) of the normal horizontal sliding speed and so on.
• Progress Bar: Enabling the progress bar will allow your website visitors to see the slides’ progress while scrolling and how far till the end of the horizontal scroll. When this option is enabled, you will be able to manage the following options:
  • Progress Bar Left Position (PX): Set progress bar left position on Horizontal Scroll widget.
  • Progress Bar Bottom Position (PX): Set progress bar bottom position on Horizontal Scroll widget.
• Opacity Scroll Effect: Enabling this option will make the next slide semi-transparent until it reaches to the viewport area.
• Keyboard Scrolling: Enable or disable the horizontal scrolling by keyboard up and down keys.

Navigation

• Navigation Dots: Enabling this option will allow you to navigate through the horizontal scroll slides using the navigation dots.
  • Navigation Dots Position: Set the position for navigation dots on Elementor Horizontal Scroll. There are three available positions: Bottom, Left, and Right.
  • Dots Offset: Set the offset position for navigation dots.
• Navigation Arrows: Enable or disable navigation arrows for Elementor horizontal scroll.
  • Left Arrow Icon: Choose an icon for the left navigation arrow.
  • Right Arrow Icon: Choose an icon for the right navigation arrow.
  • Arrows Position: Set Navigation Arrows Position in PX or EM.
  • Loop (Works Only if Navigation Arrows are Enabled): Enable or Disable Horizontal Scroll loop on navigation arrows.

Pagination Numbers

• Enable Pagination Number: Enable or Disable Pagination numbering for Elementor Horizontal Scroll widget, allowing you to know number of the current section you’re at and the total number of all the horizontal scroll sections.
• Horizontal Offset: Set the horizontal offset for horizontal scroll pagination’s position.
• Vertical Offset: Set the vertical offset for horizontal scroll pagination’s position.

Style

• Navigation Dots
• Navigation Arrows
• Progress Bar
• Pagination Numbers
• Container

Navigation Dots

If Navigation Dots Enabled from Widget Content –> Navigation

• Size: Set Navigation Dots size in PX, Percentage (%), or EM.
• Color: Set the color for Navigation Dots.
• Active Color: Set a color for active Navigation Dot.
• Border Color: Set border color for Navigation Dots.
• Active Border Color: Set border Color for active Navigation Dot.

Navigation Arrows

If Navigation Arrows Enabled from Widget Content –> Navigation

• Size: Set size for Navigation Arrows in PX, Percentage (%), or EM.
• Color: Set Navigation Arrows color.
• Hover Color: Set Navigation Arrows color on hover.
• Background Color: Set Background Color for Navigation Arrows.
• Hover Background Color: Set Background Color for Navigation Arrows on hover.
• Border-Radius: Set Border-Radius for Navigation Arrows Background.
• Padding: Set Padding for Navigation Arrows on Elementor Horizontal Scroll.

Progress Bar

If Progress Bar is enabled from Widget Content –> Advanced Settings.

• Progress Color: Set Progress Bar Color.
• Background Color: Set Background for Progress Bar Color.

Pagination Numbers

If Pagination Numbers is enabled from Widget Content –> Pagination Numbers

• Typography: Set font styling for Horizontal Scroll Pagination Numbers.
  • Family: Select Font Family for Pagination Numbers.
  • Size: Set Font Size for Horizontal Scroll Pagination Numbers.
  • Weight: Select Font Weight for the Pagination Numbers.
  • Transform: Select Font Transform for the Pagination Number.
  • Style – Select Font Style:
    • Normal
    • Italic
    • Oblique
  • Decoration – Select Font Decoration:
    • Underline
    • Overline
    • Line Through
    • None
  • Line-Height: Set Font Line-Height
  • Letter-Spacing: Set Font Letter-Spacing

• Spacing Between: Set Space between Pagination Numbers.
• Current Slide Color: Set color for the current slide number.
• Separator Color: Set color Pagination Numbers Separators.
• Total Slides Color: Set color for Total Slides Number.
• Background Type: Set Pagination Numbers Background, there are two types:
• Classic Background (If Background Type Classic is set): Color, or Image Background.
• Gradient Background (If Background Type Gradient is set): Set background using gradient colors.

• Border Type: Set a border type for the Horizontal Scroll Pagination Numbers. Choose from the following border types:
  • None (Default)
  • Solid
  • Double
  • Dashed
  • Groove
• Width (if Type is selected): Set border width for Horizontal Scroll Pagination Numbers.
• Color (if Type is selected): Choose a color for the Pagination Numbers border.

• Border Radius: Set Border Radius using PX, Percentage(%), or EM. Higher border-radius more circular border.
• Padding: Creates space around Pagination Numbers’ content, inside of any defined margins and/or borders. You can set Pagination Numbers Padding in PX, Em, or Percentage(%) Note* Padding does not accept negative values.

Container

• Background Color: Set Background Color for Horizontal Scroll Container.
• Padding Controls