Using “Stars Background Widget” you can add stunning star background effects to your Elementor pages in a matter of seconds. The Stars Background widget is customizable with many options to create an amazing star background that suits your Elementor page the best. It also comes with interactive click and hover effects that allows visitors to mouse interact with star particles.
Let’s look at each of the options in the “Stars Background Widget” below.
Install Stars Background Widget for Elementor #
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Click on the Background Widgets option in the sidebar menu.
- Hover over the Stars Background Widget and click install
Add Snow Background to Elementor Page Section #
Select edit page section in Elementor>>>Go to Style tab>>>Go to Unlimited Background option>>>Select the background type as “Stars Background”
Stars Background Settings #
Set the number of stars to display.
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
Set the color for stars.
Set the size of background star elements.
Turn on/off the random size option.
Set the opacity of star elements.
Set the distance to move stars.
Select the stars moving direction from the given options.
- Left
- Right
- Bottom
- Top
- Bottom Right
- Bottom Left
- Top Right
- Top Left
This will add twinkling effect to stars.
Set the flickering speed of stars.
Set the minimum size of stars while flickering.
Select the mouse detection option.
- Canvas(Section)
- Window(Viewport)
Select the option for on hover activity.
- None
- Grab
- Bubble
- Repulse
- Grab + Bubble
Select the option for on click activity.
- None
- Push
- Remove
- Bubble
- Repulse
Set the star particle size on bubble effect.
Set Background Location #
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.
- Background
- Foreground
Usage Examples #
Here are some live use cases for the Star Background widget.
