Elementor Floating Effects Tutorial

Intro

Premium Floating Effects for Elementor page builder is a new global feature in Premium Addons for Elementor that helps you to apply outstanding floating animations on any Elementor widget, column, or section. Elementor Floating Effects can be used to add Motion Transitions such as Translate, rotate, etc., CSS transitions such as opacity, background color, or Filter Transitions such as Blur, Brightness, Grayscale, etc.

Today, we’ll show how you can use Floating Effects in Premium Addons for Elementor to build your website and add some magic to your Elementor elements.

Click here to check Elementor Floating Effects Feature demo.

Elementor Floating Effects
Floating Effects for Elementor Page Builder

Requirements:

  1. You will need Premium Addons free plugin installed and activated on your website.
  2. Premium Addons Pro is required for:
  3. Make sure that this feature is enabled so you can find it in the Elementor editor.
  4. Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

How to Enable Elementor Floating Effects Feature?

Head up to your WP Dashboard -> Premium Addons for Elementor tab -> Global Features tab and make sure that Floating Effects feature is enabled.

Red Arrow Pointing to Elementor Floating Effects Feature From Premium Add-ons Settings Page in WP Dashboard
Enable Floating Effects Feature for Elementor

How to apply Floating Effects for Elementor?

Premium Floating Effect for Elementor can be applied on any Elementor element. To apply those animations to your Elementor elements, please follow the steps below:

First, navigate to your Elementor widget settings > Advanced tab > Floating Effects.

Options in Style and Filters tabs are available in Premium Addons Pro plugin.
Red Arrow Pointing to Floating Effects Switcher in Elementor Panel
Activating Elementor Floating Effects

Motion Floating Animations for Elementor

Motion tab contains the floating effects that change the position of your Elementor element like Translate, Rotate, Scale, and Skew.

Red Arrow Pointing to Motion Tab in Elementor Floating Effects
Elementor Floating Effects Motion Tab

Translate Floating Animation for Elementor

Translate floating effect for Elementor option is used to create a transition between two position points. Let’s start by enabling Translate option in Motion tab.

  • Translate X: Set the horizontal position in pixels on Desktop, Tablet and Mobile devices.
  • Translate Y: Set the vertical position in pixels on Desktop, Tablet and Mobile devices.
  • Duration (ms): Set the animation duration in milliseconds.
  • Delay (ms): Set the delay time before the animation starts.
Switching on Translate Animation in Elementor Floating Effects
Translate Floating Animation for Elementor

Rotate Floating Animation for Elementor

Rotate floating effect for Elementor option is used to rotate Elementor element from and to specific degrees. Let’s start by enabling Rotate option in Motion tab.

  • Rotate X: Set the start and end values for x-axis rotation animation in degrees on Desktop, Tablet and Mobile devices.
  • Rotate Y: Set the start and end values for y-axis rotation animation in degrees on Desktop, Tablet and Mobile devices.
  • Rotate Z: Set the start and end values for z-axis rotation animation in degrees on Desktop, Tablet and Mobile devices.
  • Duration (ms): Set the animation duration in milliseconds.
  • Delay (ms): Set the delay time before the animation starts.
Switching on Rotate Animation in Elementor Floating Effects
Rotate Floating Animation for Elementor

Scale Floating Animation for Elementor

Scale floating effect for Elementor option is used to create zoom-in and zoom-out effect and enlarge your Elementor elements. Let’s start by enabling Scale option in Motion tab.

  • Scale X: Set values for x-axis for scaling animation in pixels on Desktop, Tablet and Mobile devices.
  • Scale Y: Set values for y-axis for scaling animation in pixels on Desktop, Tablet and Mobile devices.
  • Duration (ms): Set the animation duration in milliseconds.
  • Delay (ms): Set the delay time before the animation starts.
Switching on Scale Animation in Elementor Floating Effects
Scale Floating Animation for Elementor

Skew Floating Animation for Elementor

Skew floating effect for Elementor option is used to add skew animation to your Elementor element using x-axis and y-axis. Let’s start by enabling Skew option in Motion tab.

  • Skew X: Set values for x-axis for skewing animation in degree on Desktop, Tablet and Mobile devices.
  • Skew Y: Set values for y-axis for skewing animation in degree on Desktop, Tablet and Mobile devices.
  • Duration (ms): Set the animation duration in milliseconds.
  • Delay (ms): Set the delay time before the animation starts.
Switching on Skew Animation in Elementor Floating Effects
Skew Floating Animation for Elementor

Style Floating Animations for Elementor

In Style tab in Elementor Floating Effects, you can apply style floating animations like Opacity and Background Color.

Options in Style tab are available in Premium Addons Pro plugin.
Red Arrow Pointing to Style Tab in Elementor Floating Effects
Elementor Floating Effects Style Tab

Opacity Floating Animation for Elementor

Opacity floating effect for Elementor option is used to create floating animation by changing the opacity of your Elementor element between two values. Let’s start by enabling Opacity option in Style tab.

  • Value: Set the start and end opacity values of the animation.
  • Duration (ms): Set the animation duration in milliseconds.
  • Delay (ms): Set the delay time before the animation starts.
Switching on Opacity Style in Elementor Floating Effects
Opacity Floating Animation for Elementor

Background Color Floating Animation for Elementor

Background Color floating effect for Elementor option is used to create animation by changing the background of your Elementor element between two colors. Let’s start by enabling Background Color option in Style tab.

  • From: Set the first color of the animation.
  • To: Set the second color of the animation.
  • Duration (ms): Set the animation duration in milliseconds.
  • Delay (ms): Set the delay time before the animation starts.
Switching on Background Color Style in Elementor Floating Effects
Background Color Floating Effect for Elementor

Filters Floating Effects for Elementor

In Filters tab in Elementor Floating Effects, you can apply animations like Blur, Contrast, Grayscale, Hue, Brightness and Saturation.

Options in Filters tab are available in Premium Addons Pro plugin.
Red Arrow Pointing to Filters Tab in Elementor Floating Effects
Elementor Floating Effects Filters Tab

Blur Floating Animation for Elementor

Blur floating effect for Elementor option is used to create blur floating animation by changing the blur of your Elementor element between two values. Let’s start by enabling Blur option in Filters tab.

  • Value: Set start and end values for blur filter.
  • Duration (ms): Set the animation duration in milliseconds.
  • Delay (ms): Set the delay time before the animation starts.
Switching on Blur Filter in Elementor Floating Effects
Create CSS Blur Filter Floating Animation for Elementor

Contrast Floating Animation for Elementor

Contrast floating effect for Elementor option is used to create contrast animation by changing the contrast of your Elementor element between two values. Let’s start by enabling Contrast option in Filters tab.

  • Value: Set start and end values for contrast filter.
  • Duration (ms): Set the animation duration in milliseconds.
  • Delay (ms): Set the delay time before the animation starts.
Switching on Contrast Filter in Elementor Floating Effects
Create CSS Contrast Floating Animation for Elementor

Grayscale Floating Animation for Elementor

Grayscale floating effect for Elementor option is used to add grayscale (change element from colorful to black and white) filter to any Elementor element by settings minimum and maximum values. Let’s start by enabling Grayscale option in Filters tab.

  • Value: Set start and end values for grayscale filter in percentage(%).
  • Duration (ms): Set the animation duration in milliseconds.
  • Delay (ms): Set the delay time before the animation starts.
Switching on Grayscale Filter in Elementor Floating Effects
Create CSS Grayscale Floating Animation for Elementor

Hue Floating Animation for Elementor

Hue floating effect for Elementor option is used to create Hue floating animation by changing the Hue filter of your Elementor element between two values. Let’s start by enabling Hue option in Filters tab.

  • Value: Set start and end values for Hue filter in degrees.
  • Duration (ms): Set the animation duration in milliseconds.
  • Delay (ms): Set the delay time before the animation starts.
Switching on Hue Filter in Elementor Floating Effects
Create CSS Hue Floating Animation for Elementor

Brightness Floating Animation for Elementor

Brightness floating effect for Elementor option is used to create animation by changing the brightness of your Elementor element between two values. Let’s start by enabling Brightness option in Filters tab.

  • Value: Set start and end values for brightness filter in percentage(%).
  • Duration (ms): Set the animation duration in milliseconds.
  • Delay (ms): Set the delay time before the animation starts.
Switching on Brightness Filter in Elementor Floating Effects
Create CSS Brightness Floating Animation for Elementor

Saturation Floating Animation for Elementor

Saturation floating effect for Elementor option is used to create animation by changing CSS saturation filter of your Elementor element between two values. Let’s start by enabling Saturation option in Filters tab.

  • Value: Set start and end values for saturation filter in percentage(%).
  • Duration (ms): Set the animation duration in milliseconds.
  • Delay (ms): Set the delay time before the animation starts.
Switching on Saturation Filter in Elementor Floating Effects
Create CSS Saturation Filter Floating Effect for Elementor

General Settings for Floating Effects for Elementor

Customize your animation direction, loop and easing settings.

  • Direction: Set whether animation should play normal, reverse and alternate.
    • Normal: Forward direction, this is the default value.
    • Reverse: The animation is set in the reverse direction (backward).
    • Alternate: The animation plays normally first and then reverse.
  • Loop: Set if animation loops forever or for custom limited time.
    • Number: Set how many times animations will run.
  • Easing: Specify the rate of animation changes over time.
  • Disable Floating Effects On Safari: You can disable Floating Effects on Safari browser to prevent any layout breaks that can result from compatibility between Safari browser and the modern CSS used to create the floating animations.
Red Arrow Pointing to Floating Effects General Settings
General Settings in Elementor Floating Effects

How to Apply Floating Effects Using Custom CSS Selector?

Basically, CSS custom selector option is used when you need to apply Floating Effect animation on a specific element in your widgets using Custom CSS Selector option in the feature settings. For more clarification please check the below example.

Suppose, we need to apply the floating animation option on a specific element in the widget. We will use Elementor Dual Heading Widget and we will apply Floating Effects to Second Heading.

  1. Head up to Dual Heading widget settings > Advanced tab > Floating Effects.
  2. Switch on Enable Floating Effects.
  3. In Custom CSS Selector, insert Second Heading CSS Class (.premium-dual-header-second-header).
Red Arrow Pointing to CSS Class in Elementor Floating Effects
Inserting CSS Class in Elementor Floating Effects

Once you’ve inserted your CSS Selector and set your animation to this element.

Second Heading in Elementor Dual Heading Widget Translate Effect
Translate Effect for Elementor Dual Heading Widget Second Heading

How to Get Element CSS Class Using Browser Dev Tools?

  1. Locate Second Heading CSS Class on your page by right-clicking anywhere on your page, then click on “inspect” from Drop Down menu.
  2. Then, select element from HTML.
  3. Copy element CSS so we can insert it in Custom CSS Selector option in Elementor Floating Effects feature settings.
Getting Class for Elementor Floating Effect from Inspector
Get Elementor Element CSS class for Elementor Floating Effects

Conclusion

Elementor Floating Effects feature brings magic and motion animations to your Elementor content and allows you to make your website alive without any need to have CSS knowledge. So, it will be very helpful for website designers and creators to enhance your pages and attract your web visitors. Also, you can use those animations to take the attention of your customers to your CTA buttons.

We hope we were able to help you through this guide. You can check out the rest of our Global Features for Elementor from here.

If you still need any further assistance, feel free to contact Premium Addons support team from here. We would be more than glad to help 😁


Join the Community

You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 25+ Elementor Widgets Totally Free of charge.

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.