Floating Elements

Introduction

Floating elements remain fixed as users scroll, providing easy access to navigation, call-to-action buttons, or notifications without disrupting the page 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 a Floating Elements widget ?

To activate the Progress Bar widget, follow these steps:

1. Go to Animation Addons → Elements in your WordPress dashboard.
2. Locate the Services Tabs widget in the list.
3. Toggle it on to enable the widget.

This will activate the Progress Bar widget for you to use!

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

Enable it, create a new page, set a title, choose the Elementor Full Width template, and publish. Adjust options as needed.

Note: Selecting full Elementor elements in a template unlocks all widgets and customization options, boosting design flexibility and functionality. 

Navigate to the Edit with Elementor option to access the editor interface. 

After selection, the Elementor panel appears with all tools and customization options.

Click the “+” icon to add a container, then select the appropriate column structure and layout.

Here’s the interface where you can configure the settings and customize the Floating Elements Widget across various tabs. 

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.

WCF Floating Elements.

• It’s time to set the elements, and you have the flexibility to add more items as per your preference.

• You will have plenty of settings options that will help you customize your design to perfection.

• I have adjusted all the settings here – chose an image, set the size, applied an animation, toggled the button for smooth scrolling, etc. I’ve just made sure that these changes align with the design I want to achieve.

I have designed my layout using the selected tools. I will make all the necessary adjustments and apply the same changes to observe the difference.

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!