How To Add Particles Effect in WordPress Website (Using Elementor )

by

Introduction: In this tutorial, we will guide you step-by-step on how to add mesmerizing particle effects to your WordPress website using Elementor. These captivating animations can bring life to your webpages and leave a lasting impression on your visitors. Follow the easy instructions below to create this eye-catching effect effortlessly.

Moving Particle effect (using elementor)

Step 1: Adding HTML Code Start by inserting the provided HTML code into the section or container where you want the particle effect to appear.

<style>
.particles-js-canvas-el {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    top: 0;
    left:0;
}
</style>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 
<script>
//JS Code Here
</script>

Step 2: Designing the Animation Next, head over to the this website and design the animation you desire using their intuitive tool. Once you are satisfied with your creation, click on the “CodePen” icon.

Step 3: Copying the JavaScript Code In the CodePen interface, you’ll find three sets of code: HTML, CSS, and JavaScript. Copy the JavaScript code provided.

Step 4: Pasting JavaScript Code Now, return to your Elementor editor and paste the JavaScript code in the appropriate section, indicated by “// js code here.”

Step 5: Applying the Animation to Your Container Locate the container in Elementor where you want to apply the animation. Click on it and access the Advanced settings.

Step 6: Adding CSS ID In the Advanced settings, find the CSS ID field and paste the previously copied “particles-js”.

Step 7: Publishing Your Page Almost done! Just publish the page, and you’ll see the captivating particle effect come to life before your eyes.

Conclusion: With these simple steps, you can effortlessly add stunning particle effects to any Elementor container. These dynamic animations will undoubtedly enhance the visual appeal of your website and leave your visitors in awe. Enjoy the creative possibilities and watch your website come to life with these mesmerizing particle effects.

Leave a Comment