The “Stars Background Widget” allows you to add stunning animated star effects to your Elementor pages. This premium widget creates a captivating atmosphere by displaying star particles with interactive hover and click effects, adding depth and engagement to your sections. You can customize star density, size, motion behavior, and background styling to perfectly match your site’s design.
Let’s explore the features of the “Stars Background Widget” below.
Add a Stars Background for 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 "Stars Background" in the widget library.
Hover over the widget and click Install.
Add Snow Background to Elementor Page Section
Click edit container in Elementor.
Go to the "Style" tab.
Click on "Unlimited Background".
Select the background type “Stars Background“.
Elementor Stars Background Settings
Number of Stars
Set the number of stars to display.
Type
Select the type of snow background.
- Custom
- Circle
- Star 1
- Star 2
- Star 3
- Star 4
- Star 5
- Star 6
- Star 7
- Star 8
- Star 9
- Star 10
- Star 11
- Star 12
- Star 13
- Star 14
- Star 15
- Star 16
- Star 17
- Star 18
Star Color
Set the color for stars.
Size
Set the size of background star elements.
Random Size
Turn on/off the random size option.
Opacity
Set the opacity of star elements.
Move Stars
Set the distance to move stars.
Direction
Select the stars moving direction from the given options.
- Left
- Right
- Bottom
- Top
- Bottom Right
- Bottom Left
- Top Right
- Top Left
Flicker/Twinkle
This will add twinkling effect to stars.
Flicker Speed
Set the flickering speed of stars.
Flicker Min Size
Set the minimum size of stars while flickering.
Detect Mouse On
Select the mouse detection option.
- Canvas(Section)
- Window(Viewport)
On Hover
Select the option for on hover activity.
- None
- Grab
- Bubble
- Repulse
- Grab + Bubble
Star on Click
Select the option for on click activity.
- None
- Push
- Remove
- Bubble
- Repulse
Size on Bubble
Set the star particle size on bubble effect.
Set Background Location in Elementor Stars Background
In some cases, you may want to move the background widget in front of your content. Determine the placement of the background by changing the setting to your liking.
In Background
Appear behind your content.
In Foreground
Overlay on top of content.
Site Body Background
Covers the entire page background globally.
Site Body Foreground
Overlay all site content (header to footer).
Layout Background
Restricted to a specific section/widget.
Layout Foreground
Overlay a single section/widget.
Usage Examples of Elementor Stars Background
Here are some live use cases for the Stars Background widget.
Stars Background for Elementor with Twinkling Particle Effects
Interactive star animations to your Elementor sections for a vibrant and dynamic background.
Thank you for using the Stars Background Widget for Elementor! With its stunning animated star effects and interactive features, this is the best Stars Background Widget for Elementor, perfect for adding a magical and engaging atmosphere to your website sections. If you have any questions or need assistance, feel free to reach out. For more use cases and examples, visit the live demo on our website.