The Bubble Float Background widget for Elementor creates a mesmerizing floating bubble effect that adds depth and motion to your website’s background. With customizable bubble sizes, colors, and density, this dynamic widget enhances visual appeal. You can effortlessly adjust the settings to match your brand’s style and bring your design to life.
Let’s look at each of the options in the Bubble Float Background Widget for Elementor below.
Add a Free Bubble Float Background to Elementor
Navigate to Unlimited Elements >> Background Widgets >> Bubble Float Background
Hover over the widget and click install.
Add a Free Bubble Float Background to a Container in Elementor
Select edit page container in Elementor>>>Go to Style tab>>>Go to Unlimited Background option>>>Select the background type as “Bubble Float Background”
Elementor Bubble Float Background Settings
Styles
Choose the bubble animation style:
- Simple Bubbles – Displays basic floating bubbles with smooth motion.
- Bubbles With Dots(Pro) – Adds small dots inside the bubbles for a textured effect.
- Random Bubbles(Pro) – Generates bubbles of varying sizes and speeds, creating a more dynamic and unpredictable animation.
Bubbles Color
Set the color of the bubbles.
Number of Bubbles
Define the number of bubbles displayed.
Background
Customize the background color or image.
(Pro options indicate features available in the Unlimited Elements Pro.)
Background Location in Elementor Bubble Float Background
Set the background location.
- In Background – Places the background behind all other content within the section or element.
- In Foreground – Places the background in front of other content, making it more visually prominent.
- Site Body Background – Applies the background to the entire website’s body, affecting all pages.
- Site Body Foreground – Places the background in the foreground of the entire site’s body.
- Layout Background – Applies the background specifically to the layout container.
- Layout Foreground – Places the background in the foreground of the layout container.
Bubble Float Background Design Examples For Elementor
Here are some live use cases for the Bubble Float Background Widget.
Free Elementor simple white Bubble Float Background
Free Elementor random Bubble Float Backgorund.
We hope this guide helped you explore the powerful features of the Bubble Float Background widget. With its customizable floating bubbles animation effects, and seamless integration, you can create a captivating and dynamic backdrop effortlessly. If you have any questions or need further assistance, feel free to reach out. Happy designing!
