Troubleshooting //
How to Make Elementor Particles Visible on the Frontend

How to Make Elementor Particles Visible on the Frontend

Question

I cannot see the Elementor particles effect on the frontend

Answer

First and foremost, have you gotten the particles.js config file from a JavaScript library by Vincent Garreau? If so, you might want to double-check the color of the Particles section and the background you are trying to put it to. 

By default, the particles are painted white and displayed on a vibrant red background:

particles default colors on particles.js source

Once you click the “Download current config (json)” button, this very configuration will be exported. Afterward, when trying to submit the code to Elementor, it seems that the interactive particles effect widget is invalid. That is a false impression. 

To see the particles effect at its best, try to perform the following actions:

Go to edit the particles.js in Elementor.

Open the section you’d like the particles to be dropped to in the Elementor page builder. Click the Style tab. In the Background Type control, click “Default” and you’ll see the color-correcting toolkit pop up. Press the latter item in the Color control, then pick any color you want in the Color Picker popup window and fill out the entire section.

changing the section background color in Elementor

Apply the particles.

Click the Advanced tab in the left-side Elementor menu and find the JetTricks drop-down item. Activate the Enable Particles toggle. After that, copy the particles.js config code and paste it to the Particles JSON text area.

copy-pasting the particles.js config code

You might want to object that no particles are visible whatsoever. But that’s how it works. You cannot see them circulating in the editor window, so just press the “Update” button and go check out this section on the frontend. 

particles effect on the frontend

Last but not least, make sure you adjusted the section’s height so it works best for your project. Good luck!

Was this article helpful?
YesNo
Still need help?
Submit a request