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.

Check Elementor Floating Effects Feature demo page.

Requirements:

1. You will need Premium Addons free plugin installed and activated on your website.
2. Premium Addons Pro is required for:
   • Style Floating Effects.
   • Filters Floating Effects.
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.

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.

• Enable Floating Effects: Switch on to enable floating effects for Elementor element.
• Custom CSS Selector: Set this option if you want to apply floating effects on specfic selector inside your widget. For example, please check this section.
• We’ve three parent animation tabs:
  • Motion tab
    • Translate
    • Rotate
    • Scale
    • Skew
  • Style tab
    • Opacity
    • Background Color
  • Filter tab
    • Blur
    • Contrast
    • Grayscale
    • Hue
    • Brightness
    • Saturation

Options in Style and Filters tabs are available in Premium Addons Pro plugin.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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).

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

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.

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. Check out the rest of the Global Features in Premium Addons.

If you still need any further assistance, feel free to contact Premium Addons support team. 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.