Floating Elements

Before setting up the Floating Elements, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all free Elementor widgets, including the Floating Elements—at no cost! Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

Floating elements stay fixed while scrolling, ensuring quick access to key actions or info without interrupting the layout.

Key Use Cases for the Floating elements in Elementor:

• Use the Floating Elements widget to display key components like navigation menus, call-to-action buttons, or notifications in a fixed position. 
• Customize the design and placement to ensure they stay accessible as users scroll, enhancing user experience without interrupting the page flow.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Floating Elements Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Locate the Floating Elements Widget in the list.
• Toggle the switch to enable the widget.
• That’s it! The Floating Elements Widget is now ready to use on your website.

How to Add the Floating Elements Widget in Elementor

1. Open the page where you want to add the Progress Bar.
2. Launch Elementor editor.
3. In the Elementor panel, search for “Floating Elements” .
4. Drag the Floating Elements widget to your desired section.
5. The Progress Bar widget will now be available for customization.

How to Configure the Floating Elements Widget

• In the Elementor panel, search for the “Floating Elements Widget.”
• Drag and drop the widget into the section where you want the floating effect to appear.
• Customize the widget settings using the available options in the Elementor panel, including animation style, direction, speed, and more to achieve your desired floating effect.

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

Once the Floating Elements widget is added to your page, you can configure its settings under different tabs: Content and Advanced.

Content Settings

You will find only one option there – WCF Floating Elements.

The Elements section within the WCF Floating Elements widget provides comprehensive control over the floating items you want to display on your webpage. Below is a breakdown of the configurable options available for each item: 

•  Choose Image: Allows you to upload or select an image from the media library to be used as the floating element.
• 2. Size: Lets you define the width and height of the floating image. This ensures consistent sizing across devices.

3. Offset: Provides control over the horizontal and vertical positioning of the element. You can fine-tune the placement by adjusting the offset values.

• 4. Z-Index: Sets the layering order of the floating element. A higher z-index value brings the element to the front over other page elements.
• 5. Live Animation: Enables dynamic visual effects for floating elements. Available animation styles include:

• Float Y – Vertical floating motion
• Float X – Horizontal floating motion
• Spin – Rotational movement
• Scale – Smooth zoom in/out effect
• Wiggle – Playful shaking motion

• 6. Enable Scroll Smoother: A toggle option to enable or disable smooth scrolling effects for the floating elements, making transitions appear more fluid.
• 7. Visibility Options: You can control the visibility of floating elements on various devices using the following toggles:

• Hide on Desktop
  
• Hide on Tablet Portrait
  
• Hide on Mobile Portrait

These options ensure that your floating elements display only on the intended devices, improving performance and user experience.

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

That’s it! You’ve successfully learned how to configure the Floating Elements widget in Elementor to create interactive, floating components on your website.

For any further assistance or inquiries, feel free to contact our support team!