As a web designer, of course, we want our website to stand out from other websites. This means we have to give a great impression to the visitors. One of the ways the visitors have a great impression and make visitors more likely to come to our website is by decorating our website with particle effect.
Nowadays, particle effect is becoming one of the key elements of modern design techniques. In this article, we would like to show you how to add particle effects in Elementor with Happy Addons. There are three predefined particle effects provided by Happy Addons as follows:
- Polygon
- NASA
- Snow
But if you need to customize the particle effect, there are plenty of options for adding as much as you need using custom effect.
How to Add Particle Effects in Elementor with Happy Addons
Step 1: Install and Activate Happy Elementor Pro
The first thing you have to do is install Happy Addons Pro to your Elementor-powered WordPress site as the Particle Effects feature is only available on the pro version. You can download Happy Addons Pro on its official website. Simply install and activate once you have downloaded the Happy Addons file.
Step 2: Create a New Content (Post/ Page) or Select an Existing Content)
Now we will start to use this addon to add particle effects in Elementor. You can create a new page or select the existing one. In this example, we will create a new page. On your Dashboard go to Pages -> Add New. Next, press the Edit with Elementor button to bring you to the Elementor editor.
Step 3: Design the Content
Well, we are ready to design our page. First, we need to add a new section by clicking on the plus icon (+) Add New Section and then select a single column (or any structure you want).
Before adding the particle effect, you can make some basic settings to the section. You can click the section handle to open the settings panel. In this example, there are two things you need to do as below:
- Set the Height section to Fit To Screen
- Turn it to Yes on Stretch Section toggle.
Next, add a widget by clicking on the plus sign (+). In this example, we add the Image widget. Drag the Image widget to the column. Select your image by clicking the image selector. You can choose the image from your library by clicking on the Media Library or uploading the image by clicking on the Upload files button.
After you’ve chosen the image, set the image size to Shop Single by clicking on the Image Size drop-down and then choose Shop Single – 600 x 0.
You can add more widgets to the section to your liking. Once you done adding the widgets, you can continue to the next step to add the particle effect.
Step 4: Apply the Happy Particle Effects
Finally, we are going to apply the Happy Particle Effects to our section. Click the section handle to open section settings panel then go to the Style tab. On the Style tab, open the Happy Particle Effects block and switch the Enable Particle Background toggle on (Yes).
Now, you can choose the style of particle effects. In this tutorial, we choose the Snow option. Once the style is applied, you can play around with the settings, such as particle color, opacity, flow direction, and many more. In this example, we set the Particle Color to White Element.
We need the particle effects to be visible clearly and dramatically, so we should change the section’s background. On the Style tab, open the Background block, choose the Classic on Background Type option, and then set the color to black.
Alright, let’s see what it looks like.
Custom Effect
You are probably interested in what is the custom effect? Happy Particle Effects have one more effect that is possible for you to create particle effect with your creativity, and that’s what this effect is for.
Go to Style and choose Custom on the drop-down list. Read the appearing instructions and click here link, this will take you to the external page (particles.js) where you can set a custom particle effect.
There are five default effects that you can choose from. Let’s say we are going to stick with the snow effect. Choose the Snow from the drop-down list. Under that, you can start playing around with the parameters. In this example, the only parameter that we adjusted is the size. Go to particles -> size, set the value to 20, and check (✓) the random box.
After creating the particle effect, download the JSON file by clicking the Download current config (JSON) button (see the GIF).
After you have downloaded it, open the JSON file with Notepad or your favorite plain text editor, select all and copy the text. Next, go back to the Elementor editor, and paste it on that area (see the GIF).
The Bottom Line
About four to five years ago, the particle effects were a hot thing, and it was very new. But, at this moment maybe it’s been a little bit overused and cliché. So, we advise you to use the particle effects maybe just once or twice on your entire website.
