The “Animated Ripples Background” widget lets you add a mesmerizing ripple effect to your containers in WordPress Elementor websites. This effect gracefully expands from a corner of the container, adding fluid motion and visual interest to your layout. You can customize the ripple’s color, scale, position, and duration to perfectly match your site’s style and enhance the user experience.
Let’s explore the features of the “Animated Ripples Background Widget” below.
Add an Animated Ripples Background Widget to Elementor
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
Go to Unlimited Elements and click "Background Widgets".
Search for "Animated Ripples Background" in the widget library.
Hover over the widget and click Install.
Add Animated Ripples Background to Elementor Page Section
Click edit container in Elementor.
Go to the "Style" tab.
Click on "Unlimited Background".
Select the background type “Animated Ripples Background“.
Elementor Animated Ripples Background Settings
Ripple Color
Select the ripple color using the color picker.
Vertical Position
Set the vertical starting point of the ripple effect (e.g., Top, Center, Bottom).
Horizontal Position
Set the horizontal starting point of the ripple effect (e.g., Left, Center, Right).
Duration
Specify how long the ripple animation lasts (in seconds).
Ripple Scale
Adjust the size and spread of the ripple effect using a scale slider (e.g., 0–100).
Set Background Location in Elementor Animated Ripples Background
In some cases, you may want the ripple animation to appear in front of your content rather than behind it. You can control the placement of the Animated Ripples Background by selecting one of the following options under Background Location:
In Background
Places the ripple animation behind your content, ideal for subtle effects.
In Foreground
Displays the ripple effect in front of your content for more emphasis.
Site Body Background
Applies the ripple effect to the entire site body background.
Site Body Foreground
Places the effect on top of all body content.
Layout Background
Restricts the effect to the layout background of the specific section or widget.
Layout Foreground
Displays the effect in front of the section or widget layout.
Usage Examples of Elementor Animated Ripples Background
Here are some live use cases for the Animated Ripples Background widget.
360° Product Viewer with Elementor Animated Ripples Background.
Image Scroll with Elementor Animated Ripples Background.
Thank you for using the Animated Ripples Background Widget for Elementor! With its graceful ripple effect expanding from the corner of any container, this is the perfect widget for adding a mesmerising and dynamic touch to your website. If you have any questions or need support, don’t hesitate to get in touch. For more use cases and live examples, visit the demo on our website.
