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.

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.

• 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.

• Ensure that the Stretch Section option is turned off, and then set a minimum height of 100 VH for your section.

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.

• 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.

• 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.

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.

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.

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.

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.

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.

---

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.

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.

Progress Bar

• Progress Color: Sets the color of the progress indicator.
• Background Color: Determines the color of the progress bar’s background.

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.

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.

---

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

• How to Fade Element on Scroll Using Elementor Magic Scroll Addon
• How to Fix Container Flicker in Elementor Magic Scroll Addon
• How to use Image Comparison Widget with Elementor Magic Scroll Addon
• How to Play Video on Scroll with Elementor Magic Scroll Addon
• How to Create Image Sequence Animation with Elementor Magic Scroll
• How to Animate Progress Bar with Elementor Magic Scroll Global Addon
• How to Animate a Carousel on Scroll Using Magic Scroll Elementor Addon
• How to Create Multi-Layered Changeable Images Using Parallax Section Add-on and Elementor Magic Scroll?
• How to Change Text Color Using Elementor Magic Scroll Addon
• How to Draw an SVG Text with Elementor Magic Scroll Global Addon
• Settings Not Saved in Elementor Magic Scroll Addon