Scroll Elements

The Scroll Elements Widget in Animation Addons for Elementor is a Pro feature. To use this widget, ensure the plugin is properly installed and activated on your website. You can explore both free and pro widgets using the filtering options, but this specific widget is available only in the pro version.

Introduction

The Scroll Elements Widget adds interactive scroll animations to your content, enhancing user experience with dynamic effects as users scroll.

Key Use Cases for the Scroll Elements Widget:

• Add dynamic scroll animations to your content for better user engagement.
• Customize the scroll effects to align with your website’s design and branding.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Scroll Elements Widget:

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Scroll Elements Widget in the list.
• Toggle it on to enable the widget.
• Now, the Scroll Elements Widget is ready to use!

How to Add Scroll Elements Widget in Elementor:

• Open the page where you want to add the Scroll Elements Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Scroll Elements Widget.”
• Drag the widget to your desired section.

How to Configure Scroll Elements Widget : 

• In the Elementor panel, search for the “Scroll Elements Widget.”
• Drag and drop the widget into your desired section.
• Add your content elements and define how each should behave during scroll—like fade, slide, rotate, or zoom.
• Adjust trigger settings, scroll distance, and animation direction for dynamic effects.
• Use the Style tab to refine the appearance—customize spacing, colors, typography, and motion styles to match your website’s design.

Configuring Scroll Elements Widget : A Step-by-Step Guide

Once the Scroll Elements Widget is placed on your page, you can configure its settings by navigating through the following tabs: Content, Style, and Advanced. 

Each tab offers specific customization options to adjust the widget’s behavior and appearance according to your design requirements.

Content Settings

In the Content section, you have three key customization options: Scroll Contents, Settings, and Scroll Navigation/Title. Each option allows you to adjust specific aspects of the Scroll Elements widget, such as the content structure, widget behavior, and navigation settings-

• Scroll Contents: This section allows you to add and manage the content that will appear within the scrollable area. You can customize the content displayed in each scrollable section, such as text, images, or other widgets.

• Settings: Here, you can control the behavior of the scroll element. Options include adjusting the scroll speed, direction, and enabling/disabling auto-scroll, among other settings to fine-tune the scroll effect.

• Scroll Navigation/Title: This section allows you to manage the navigation controls, including setting up the scroll navigation buttons or titles. You can customize the appearance and functionality of the navigation controls to improve the user experience.

Style Settings

In the Style section, you’ll find customization options for Scroll Navigation/Title, Image, and Content–

• Scroll Navigation/Title: In this section, you can customize the appearance of the scroll navigation buttons or titles. Adjust settings like color, typography, background, alignment, and spacing to align with your website’s design.
• Image: This section lets you style the images within your scrollable sections. You can modify settings such as image size, borders, margins, and shadows, giving you control over how the images appear within the scroll.
• Content: The content section enables you to style the text and other content within the scrollable area. You can adjust typography, font size, color, line height, padding, and other styling options to match your site’s theme and layout.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

In summary, the Scroll Elements Widget provides advanced customization options to create interactive scroll-based effects, enhancing both functionality and user engagement. For further assistance or inquiries, please contact our support team.