The Clouds Background widget lets you create a floating cloud animation that enhances the visual appeal of your website. You can bring a dreamy and dynamic touch to your Elementor designs with the Clouds Background Widget. Whether you’re designing a serene landing page or an engaging section, the customizable settings allow you to achieve the perfect atmosphere effortlessly.
Let’s look at each of the options in the Clouds Background Widget for Elementor below.
Add a Free Clouds Background to Elementor
Navigate to Unlimited Elements >> Background Widgets >> Clouds Background
Hover over the widget and click install.
Add a Free Clouds 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 “Clouds Background”
Elementor Clouds Background Settings
Cloud Style
Choose a predefined cloud style from the available options.
- Style 1 – A basic cloud style.
- Style 2-Realistic (Pro) – A more detailed and realistic cloud appearance.
- Style 3-Realistic (Pro) – Another realistic style with different visual characteristics.
- Style 4 (Pro)– Another basic cloud style.
Background Opacity
Adjust the transparency of the background using a slider or input field.
Duration
Set the animation duration in seconds for the cloud background.
Layer 1 Cloud Color
Define the color for the first cloud layer.
Layer 2 Cloud Color
Set the color for the second cloud layer.
Layer 3 Cloud Color
Define the color for the third cloud layer.
Layer 1 Blur
Adjust the blur intensity for the first cloud layer.
Layer 2 Blur
Set the blur intensity for the second cloud layer.
Layer 3 Blur
Adjust the blur intensity for the third cloud layer.
(Pro options indicate features available in the Unlimited Elements Pro.)
Background Location in Elementor Clouds 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.
Clouds Background Design Examples For Elementor
Here are some live use cases for the Clouds Background Widget.
Free Elementor Clouds Background with realistic clouds style.
Free Elementor Clouds Background on toys website.
We hope this overview of the Clouds Background Widget has inspired you to incorporate its features into your Elementor projects. By adding animated cloud effects, you can create a serene and engaging atmosphere that enhances user experience across various types of websites. If you have any questions or need further assistance, feel free to reach out. Happy designing!
