Help Center
Elementor Particles Effect Not Visible on the Frontend

Elementor Particles Effect Not Visible on the Frontend

I cannot see the Elementor particles effect on the frontend

Modified on: Wed, 24 Jan, 2024

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 in. 

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

particles default colors

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.

editing 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.

particles js code input in elementor

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 front end. 

particles flowing on the frontend

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

Was this article helpful?

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.