Horizontal Scroll Widget Tutorial

Intro

Explore the cutting edge website design with Elementor Horizontal Scroll widget by Premium Addons, designed to bring a dynamic twist to your WordPress website. Ideal for Elementor enthusiasts, this widget introduces an elegant horizontal scrolling effect that can transform your website’s storytelling capabilities. Perfect for any WordPress project, from e-commerce to blogging or portfolios, it’s a breeze to integrate and utilize.

Experience this widget in action and see how it can revolutionize your site by visiting our live showcase, where you can witness the potential of horizontal design firsthand.

Elementor Horizontal Scroll Widget Video Tutorial

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 Template for Horizontal Scroll

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

  • Dashboard -> Templates –> Add New.
Screenshot an Arrow Points at Add New in WordPress Dashboard Templates for Elementor Page Builder
Add New Elementor Template
  • Select the Section to create an Elementor Template for Horizontal Scroll.
New Template Popup to Select Template Type
Choose Elementor Template Type
  • Name your Template.
Elementor's New Template Popup, Choosing Template Type and Adding Template Name
Name Your Elementor Template
  • Create an Elementor template section to be used in Horizontal Scroll.
Creating New Elementor Template
  • Ensure that the Stretch Section option is turned off, and then set a minimum height of 100 VH for your section.
Elementor Template Screenshot Two Arrows Pointing at Stretch Section Option
Elementor Template Section: Stretch Section Disabled and The Minimum Height is 100 VH

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
  • Responsive Settings

Content

  • Sections: Add items (sections) to the Horizontal Scroll widget.
  • Background Transition Speed: Set the speed for background changes in the Horizontal Scroll Widget when the Scroll Background Transition feature is active. This applies to both color and image backgrounds in your Elementor templates.
Horizontal scroll widget
Elementor Horizontal Scroll Widget – Content Sections
  • Fixed Content Template
  • Create / Edit Template to make a new template or modify an existing one.
  • OR Select Existing Template
    • Dropdown to choose from previously created templates.
  • Horizontal Offset
    • Slider/Input for setting the horizontal offset in pixels.
  • Vertical Offset
    • Slider/Input for setting the vertical offset in pixels.
  • Width
    • Slider/Input for defining the width in pixels.
  • Z-index
    • Input field for setting the Z-index value, allowing layering of elements over one another.
Fixed Content Template Option in Elementor Horizontal Scroll Widget
Elementor Horizontal Scroll Widget – Fixed Content Template
  • Content Type: Two types of content can be used within the Horizontal Scroll widget through Section ID or Elementor Template.
    • You can use Elementor Live Templates feature to create/edit Elementor templates on the same page.
    • You can also select an existing Elemntor template.
  • 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
      • Set an anchor ID for section item (slide). For instance, you can name it “section-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.
Selecting Elementor Template as a Content Type in Horizontal Scroll Widget for Elementor.
Elementor Horizontal Scroll – Elementor Template Content Type

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

Screenshot for Horizontal Scroll Widget for Elementor Content Type Section ID
Add Section ID as a Content Type for Horizontal Scroll Widget for Elementor

Advanced Settings

  • Number of Slides in Viewport: Adjusts how many slides are shown at once.
  • Scroll Distance Beyond Last Slide: Sets pixel distance to scroll past the last slide.
  • Offset (PX): Pixel offset for triggering horizontal scroll.
  • Scroll Type: Defines the scroll effect (e.g., ‘Normal’).
  • Scrub: Enables a smoother scrolling animation.
  • Decrease Scroll Speed by: Slows down the scroll speed by a set factor.
  • Progress Bar: Toggles the display of a progress bar.
  • Opacity Scroll Effect: Adds fading effect on scroll.
  • Keyboard Scrolling: Allows scrolling with keyboard keys.
  • RTL Mode: Activates right-to-left scroll for RTL languages.
  • Disable Horizontal Scroll On: Disables horizontal scrolling under specified conditions.
Screenshot Displays Horizontal Scroll Widget Advanced Settings.
Elementor Horizontal Scroll Widget – Advanced Settings

Navigation

  • Navigation Dots: Toggles the display of navigation dots.
    • Navigation Dots Position: Sets the position of navigation dots (e.g., Left).
    • Dots Offset: Adjusts the position of the dots relative to their set position.
    • Tooltips: Enables or disables tooltips on navigation items.
  • Navigation Arrows: Turns the navigation arrows on or off.
    • Left Arrow Icon: Allows choosing or uploading an icon for the left arrow.
    • Right Arrow Icon: Allows choosing or uploading an icon for the right arrow.
    • Arrows Position: Adjust the position of the navigation arrows.
    • Loop: Enables continuous loop navigation.
Screenshot Shows the Available Settings for Navigation dots and arrows in Horizontal Scroll Widget
Elementor Horizontal Scroll – Navigation Settings

Pagination Numbers

  • Enable Pagination Number: Switch to display pagination numbers.
  • Horizontal Offset: Slider to adjust the horizontal placement of the pagination numbers.
  • Vertical Offset: Slider to adjust the vertical placement of the pagination numbers.
Pagination Numbers Settings in Horizontal Scroll Widget Content
Elementor Horizontal Scroll – Pagination Numbers

Responsive Settings

  • Put Columns Next to Each Other: When enabled, this option ensures that columns are positioned side by side rather than stacking on small screens.
Enabled responsive settings for Elementor Horizontal Scroll widget to be position in columns on small screens
Elementor Horizontal Scroll – Responsive Settings

Style

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

Navigation Dots

  • Size: Adjust the size of the navigation dots.
  • Color: Sets the default color for the navigation dots.
  • Active Color: Choose the color for the dot representing the current slide.
  • Border Color: Determines the color of the dots’ borders.
  • Active Border Color: Sets the border color for the dot that is currently active.
  • Border Radius: Controls the roundness of the dots’ corners.
Elementor Horizontal Scroll widget Navigation Dots Styling Controls
Elementor Horizontal Scroll – Navigation Dots Style

Navigation Arrows

  • Size: Adjusts the size of the navigation arrows.
  • Color: Sets the color of the arrows.
  • Hover Color: Defines the color of the arrows when hovered over with a cursor.
  • Background Color: Determines the background color of the arrow area.
  • Hover Background Color: Sets the background color of the arrows on hover.
  • Border Radius: Controls the roundness of the arrows’ corners.
  • Padding: Adjusts the space around the arrows inside their container.
Screenshot Displays The Available Settings for Navigation Arrows in Horizontal Scroll Widget
Elementor Horizontal Scroll Widget for Elementor Styling Options of Navigation Arrows

Progress Bar

  • Progress Color: Sets the color of the progress indicator.
  • Background Color: Determines the color of the progress bar’s background.
Progress Bar Styling colors
Elementor Horizontal Scroll Widget – Progress Bar Style

Pagination Numbers

  • Typography: Adjust the font properties of the pagination numbers.
  • Spacing Between: Set the space between pagination numbers.
  • Current Slide Color: Choose the color for the current slide number.
  • Separator Color: Set the color of the separator between pagination numbers.
  • Total Slides Color: Determine the color for the total slides number.
  • Background Type: Allow selection of a solid or gradient background for the pagination area.
  • Color: If a solid background is selected, this sets its color.
  • Location: For gradient backgrounds, this adjusts the location of the color transition.
  • Second Color: If using a gradient, this is the secondary color.
  • Type: Select the type of gradient (Linear, Radial, etc.).
  • Angle: Set the angle of the gradient.
  • Border Type: Choose the style of border (solid, dashed, etc.).
  • Border Radius: Control the roundness of the pagination area’s corners.
  • Padding: Adjust the padding around the pagination numbers.
Available Styling Options for Styling Pagination Numbers on Horizontal Scroll Widget
Elementor Horizontal Scroll Widget – Pagination Numbers

Container

  • Background Color: Set the color of the container’s background.
  • Padding: Adjust the space inside the container’s border, with individual controls for top, right, bottom, and left padding.
Container style for Horizontal Scroll
Elementor Horizontal Scroll – Container Style

Conclusion

In summary, Elementor Horizontal Scroll widget by Premium Addons is an indispensable asset for enhancing your WordPress site, providing a sophisticated and interactive scrolling experience within the Elementor editor. Your site will capture and retain user interest with its state-of-the-art horizontal layout, setting you apart from the competition. For developers and website owners alike, this widget is a step towards modernizing your digital space, ensuring your content is displayed in a compelling and memorable way. Elevate your online presence today with this exceptional tool.


Related Docs

Related Docs:

Download Now it's free!

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

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.