Elementor Scroll to Top Extension Documentation

Key Features of the Elementor Scroll to Top Extension

• Easy Navigation: Adds a floating button that scrolls users to the top of the page.
• Customizable Design: Adjust the button’s icon, size, colors, typography, and hover effects.
• Dynamic Visibility: Show or hide the button based on user preference.
• Responsive Design: Ensures functionality across all devices.
• User-Friendly: Requires no coding; all settings are accessible within Elementor.

What’s Needed?

To use the Scroll to Top Extension, ensure you have:

• Elementor Free Version
• Vertex Addons Free Version

Activate the Scroll to Top Extension

Before configuring the extension, make sure it’s activated:

1. Refer to the Extension Activation Guide for step-by-step instructions.
2. Confirm that the Scroll to Top Extension is enabled in Vertex settings.

How to Configure the Scroll to Top Extension in Elementor

Once activated, the Scroll to Top Extension can be set up in the Elementor Site Settings. Follow these steps to configure it effectively:

Step 1: Access Elementor Site Settings

1. Open your website in Elementor Editor.
2. Navigate to Site Settings from the Elementor panel.

Step 2: Enable Scroll to Top

1. In Site Settings, locate the Scroll to Top.
2. Toggle the Enable Scroll To Top option to activate the functionality.
3. Once enabled, additional customization options will appear.

Step 3: Configure Scroll to Top Button

The extension offers a wide range of customization options for both normal and hover states:

General Settings

1. Icon:
   • Click the icon library button to choose a scroll-to-top icon.
2. Show Title:
   • Toggle the Show Title option to display or hide the button title.
   • If enabled, provide a descriptive title in the Title field (e.g., “Back to Top”).

Design Options

Normal State

• Background Type: Choose between Classic or Gradient backgrounds.
• Text Color: Define the text color for the button.
• Typography: Customize font size, family, and styling for the button text.
• Alignment: Align the button to the left, center, or right of the screen.
• Height & Width: Adjust the button dimensions to fit your design.
• Margin: Add spacing around the button for optimal positioning.
• Border Type & Radius: Style the border and make the edges rounded.
• Box Shadow: Add shadows for a 3D effect or depth.

Hover State

Customize how the button looks when users hover over it:

• Background Type: Add dynamic gradients or classic colors.
• Text Color: Define hover-specific text colors.
• Border Type & Radius: Adjust border styling for hover interaction.
• Box Shadow: Enhance visual feedback by modifying the shadow on hover.

Best Practices for Scroll to Top Button

1. Keep it Visible: Ensure the button is prominently placed and contrasts well with the background.
2. Optimize for Mobile: Adjust alignment and size for smaller screens to maintain usability.
3. Test Hover Effects: Make sure hover effects are noticeable and consistent with your design.

Final Outcome

Once configured, the Scroll to Top button seamlessly integrates into your website, improving navigation and enhancing user experience. This button will be added to the bottom of the site. Whether you want a simple icon or a stylish, interactive button, this extension gives you full control to match your design goals.

Why Choose the Scroll to Top Extension?

The Scroll to Top Extension is a must-have for modern websites. It combines functionality with flexibility, empowering you to create a user-friendly interface. With easy setup and extensive customization options, it’s the ideal solution for enhancing user engagement.