Animated Particles Effect in Elementor (No Plugin)

[@jimfahaddigital]

🔥Download Exclusive Elementor Templates: kitpapa.com 🔥

[@nosuofficial.]

Some fixes to the code I made to make it work: changed z-index on line 6 of the HTML to 0, changed position on line 5 to fixed. Hope this helps!

[@victorianiaba107]

thank you so much, I don't know how to thank you so much your message arrived in time. I have been looking for a solution to make this animation work for 2 hours and as if by a miracle I found your message. You are an angel, I send you lots of kisses.

[@Juniorgamers99]

This also worked for me, thanks buddy❤

[@daudhossain2889]

Thank you so much

[@LaIAcomunica]

a real hero! thanks!!

[@mironga7]

Thank you, buddy!

[@samakinsai]

I must say Jim you are exceptional in what you do here. I don't need to use any Plugins rather. This is the best training video ever..... Love it, Thanks Jim for all you do.

[@Jc-si6pj]

Yes I think this Jim Fahad is one the best if not the best web KZbin guys ! I always come to his vids when I need to make something cool !

[@ashamkakar7505]

Your tutorials are becoming awesome day by day.

[@miyw0608]

This is amazing dude, Hats off.. Thanks for sharing with us

[@agnojrrogelior6363]

TNice tutorials is just the pick up I needed, thanks man

[@simoneagresti3691]

It worked perfectly, I just had to change the z-index in the snippet

[@arsalanayyyy]

Thanks man

[@paulomiguel9362]

If it doesn't work change z-index on line 6 of the HTML to 0, changed position on line 5 to fixed. Also, if you have buttons or something else you need to change their Z-index to a higher number or you wont be able to click the buttons. Example: particles Z-index: 0 Button Z-index: 1 Also changing position to fixed wont react to the cursor, i advise to let it absolute. Hope this helps!

[@mybeautyclinicbogor]

thank brother

[@jakariaahmed-EN]

Thank you so much brother

[@janderchp]

Just simply put the code, it works! thanks!

[@DealBanao110]

Great Knowledge about wordpress animation

[@deepuchintapalli1430]

Luv u brother..❤️❤️❤️❤️❤️❤️❤️ U r a King 👑

[@sakib0511]

Best video for all Elementor lover

[@sherlwinc]

Thanks Jim for sharing your knowledge!... You deserve to have many more subscriptions!!!

[@yasinrumi8778]

Man!! You are an angel!!

[@Marvelous_YtShorts]

You solved my big issue. appreciated your effort🎉

[@m_aderm]

I learnt everything from this channel and I'm still learning. Infact I'm soo used to your teaching. It'll be great if you help with videos on crocoblocks and ACF! Thank you.

[@upbeataffiliate]

This was fantastic. Thank you. I will now start creating my videos with all the effects I always wanted to make. BIG thank you.. I truly appreciate how Jim Fahad is helping us informative videos.

[@nicoleluyten9385]

Absolutely amazing Jim, thank you so much for your tutorials - I am so grateful!

[@hemanannunto2768]

Hello Jim Thank you very much for this tutorial. Waiting for your next video 😊

[@NativeMedia-eg4fz]

Hi Jim. Followed each steps but nothing appears on the page. Using latest version of Elementor Pro and Flexbox. Any idea where it went wrong?

[@mohammedminoddinsharker8460]

thanks a lot for your nice tutorial

[@pixelgap]

Amazing as always. Thank you

[@StephenPiddingtonLongbow]

Thanks, that's very helpful.

[@moondriver4171]

In The setup thank you so much!

[@finnw.4575]

Awesome work. Have you guys any idea, how I can place it in the background when I use a hero background in black and a background picture as well? I want the picture to be in front of the particles. Can anyone help me?

[@64mo22]

Add a z-index. 2 or 3

[@TMKami]

Thank you so much for this tutorial.. you are really a Great mentor ..I am impressed with you.. your channel is so informative with full knowledge.. I love you and Your work also .. I am your student and big fan ❤

[@BillyMinxFashion]

You are a life saver! Kudos to you! You rock!!

[@fofoseengracados5484]

hanks lot Sir.. You helping us..

[@DanielaTapia-o2x]

You're a life saver, thank you so much

[@learnearn3166]

Assalamo Alikum bro you are the best trainer in the world, I am always waiting for your new tutorials. Thank you such a nice tutorials. 😀

[@district119Toastmasters]

Wow, this is fantastic! There's an little error in the code, but thank you for everyone's comments, I corrected it and it worked amazing! Thank you Jim Fahad!

[@mohamednishath1731]

can u give the corrected code

[@neektwothousand5797]

It worked perfectly!!! Thank you so much

[@uzairanjum2252]

how it didnt work for me?

[@sumreenismsil6080]

@@uzairanjum2252 set main container z index value to 0 or 1 it will work.thanks me later🙂

[@uzairanjum2252]

@@sumreenismsil6080 yes it works thanks

[@YComercial]

Thank you so much this helped a lot!!!! You saved my life

[@itsmesumonbhai]

Nice tutorial, Thank You Bro

[@ddmarketingdigital]

THANKS YOU VERY MUCH!! 10 / 10 !!!!

[@learnfrenchwithlaperlefren4933]

I really love your videos

[@LawsOfMarketing]

Hi Jim, thanks for the tutorial, just wondering how I can paste the js co so it appeas above a background? CUrrently it doesnt show whilst I have bacgkround colours on my site

[@limitationsoflanguage]

i am wondering the same trying to add a video background behind the particles

[@julianmercado5498]

if you don't have Elementor you can create a html element with this text and will be work:

[@anubhavmaurya8959]

Great tutorial.... but I am having an issue, when we use this html in a particular section, all the buttons in that section are not working or to be clear, we are unable to click on the button. Can someone please help?

[@empowerspiritualworld]

same issue, got any solution?

[@Webs_Designer]

Set the z-index of your button to be higher than that of the particles E.g if the z-index in the code you copied from his website is -1, you can set the z-index of your buttons to 0 or 1. It should work that way.

[@anowerhossen1]

Thanks for informative video shearing

[@rabbykhan5636]

Great thanks 🙂

[@tipdrB]

Great content. Thanks

[@jack2media]

Thats really cool! How much does it effect page speed?

[@leongraff7476]

I'm just so greateful because you've been helping me so much along the way, thank you very much you're doing holy work here tks

[@wallyhennessy9074]

This is awesome!

[@sohamdas7820]

can i apply same animation particle into multiple container using same class id name from same html widget? coz i cant use the same css class id more than in 1 container.

[@CogitoVista]

Keep it up bro

[@innocent_girl2017]

Amazing 👏

[@pranitsaigaonkar1039]

I followed the exact steps but getting an error Uncaught ReferenceError: particlesJS & Uncaught ReferenceError: Stats is not defined is not defined Can you please provide solution for this

[@minhat8468]

Thanks, its work

[@jimfahaddigital]

Welcome 👍

[@MOTIVATIONALTALKS8287]

Just amazing bro

[@Joe-w2e]

if we edit the js particle to for example snow how do we get a hmtl snippet of that code

[@techwithcoding641]

why this code is not workign now?

[@Liav-jc3cm]

You are the best!!

[@mdminhaz4892]

Your tutorials are becoming awesome day by day.. Thank You .. Please make a Master class video for ecommerce store through Woo commerce.. Thanks Again

[@ashamkakar7505]

also add functionalities to that site. it will be great

[@hackgagdets9596]

I learned so many things from this channel.. but unfortunately, I did 100 percent the same as u mentioned in this video.. but Particles Snippet animation is not working on my website.. why?? even I love this animation.

[@eduardo4d_]

my frind change the z-index : -1 ; for it to work make it 1 or a positive value

[@HolyQuran0992]

Thank you but what did you do I did it exactly but nothing happened...

[@taurusartistry]

Hey the particles are infront of the text and photo, how do I get it behind or not on them like yours?

[@nadodigital]

Change the Z Index?

[@diamolsa]

You never know how much you have in common with so people.

[@ArtboldDesign]

Wow! Super nice! I have my Logo in the Middle, can i change the code that it not reach the middle of the page?

[@Zrihan]

thank you so much

[@almahmud1834]

nice tutorial

[@RaisingClouds]

Awesome bro

[@EmilioAzevedo-nt4mx]

it does not work for me! Is there something I'm missing?

[@mehedihasanshimul9543]

বাংলাদেশের গর্ব,,,

[@excelanalysis]

Awesome!!

[@Sourkitty]

Always a great tutorial.. but using the royal elementor addons plugin is easier and faster.

[@moinulislamhemel7041]

excellent methods

[@alisajjad4131]

good one bro

[@maxb1154]

GOD!!!My broo

[@tiemsachhoangtube]

What an amazing tutorial. I don't use Elementor but FLATSOME. Can you help me change the css id to css class so I can apply it to the banner section?

[@fatokifemiemmanuel8565]

you are the boooooooooommmmmmm😁😁😁

[@learnwitharbia3477]

Great work

[@novacc5639]

Thanks. Is it possible to reuse particles-js in different sections? I tried to convert from ID to class but doesnt work? Thanks again in advance.

[@clean7886]

so sNice tutorialt like that

[@senadtopic9095]

Hi, can you made some tutorial for multilangues with free version :)

[@asiyeholia]

Hi, dear Jim, I did every step like what you did, but it doesn't work properly on my website. I'm running it on a local host as a test version. Is it the reason why it doesn't work?

[@arlinn13]

jim, wedding card full animation pleasee 😅

[@mdrakibhossen7868]

amazing

[@blertsinani6436]

I followed the same steps as you did, but it didn’t work. Is there anything that we need to change on snippet or javascript code? It shows only the background color that I’ve set it up

[@SamirAkram39]

it didnt work for me either

[@VijayKumar-dm4qy]

Same its not working

[@VijayKumar-dm4qy]

Is there any solution?

[@learnwitharbia3477]

me too I did same steps but it didn't work

[@cocoznuts1537]

in the snippet you copied from the link in the bio, make sure to change the z-index to "1" instead of "-1", that did it for me! hope this helps :)

[@shivshakti4896]

can we do this without elementor as well?

[@dashcourse4261]

Great work as always... Could you do a tutorial showing on how to create adblocker detector in Elementor? Thanks in advance.

[@onemanoutfit]

only working in containers and not sections on my end ? Will it work with elementor basic sections ??

[@mariomontoya6052]

Hi...following you since few month ago in KZbin...thanks for everything you made....can you do some examples of e car dealers website or tips to make more funcional the website

[@oluwadunsinolorunsola4820]

Hello Mario, I can get some car dealers website done for you and also the tips to make them functional and also Drop integration for ranks and increase in leads. Contact me @helix_firm

[@RaphaelVosen]

@Jim - this is absolutely awesome, thanks a lot!! @all - does anyone know what to change if the section in which you are using the animation does not have the same height/width? I am trying on a section with a height of about 2 viewports, and it stretches a bit ugly there...

[@lusechlubainboubalaikapi3394]

my animation appears at the bottom of the container can you help me put it in the middle in the background like on the video?

[@marketrooper6473]

Thanks very much for this tutorial! Very helpful! Has anyone found a way to make the particles go slower on mobile? Even speed 2 looks super fast on mobile devices.

[@advinwong6590]

can see n move in wordpress...but come to live ...cant show....can anybody pls help me?

[@nadodigital]

Yeah same here... not sure what's happening

[@Javiergcrespo]

Thanks

[@hektordigital4395]

I did it and it worked, but it numbed the CTA buttons on the hero section. CTAs are no longer clicking and are non-responsive. Also, no widgets can go into the hero section anymore after using the particle effect. Quite painful.

[@SazidAhmedNassir]

Thanks for the video Sir. Sir can you video tutorial on a custom dashboard using WordPress

[@stellawei-sn1er]

Can you help me, when I added the particles, the button on the home page not working

[@milangerloff5252]

Hi Jim thank you for this amazing tutorial i followed the exact steps ,but unfortunately i am not getting any particles effects at all i am using the latest elementor pro 3.10.2 can you feedback ?

[@meharali8027]

Same issue please help me

[@jobbox5124]

@@meharali8027 bro change the z- index value positive

[@brunomdoss]

@@jobbox5124 Thank you. How can I still see the particles when I scroll down?

[@rubabsiddiqui8514]

changed z-index on line 6 of the HTML to 0

[@md.moshiurrahman9588]

sir your works fantastic. will you give us a video on Online course (LMS) website. Plesase consider my request.

[@inamullah4711]

Make video on portfolio section with gallery and on portfolio widget

[@americomanuel9834]

Sera que essa hopedagem e boa ?

[@tachtouktelmehdi7248]

thank u

[@CHAIMLURAN]

hi jim i am a huge fan of yours and by now i have watched all your video but some how even after trying 20 times this effect doesnt show on my website. i noticed also that on the pen code i had a red icon saying :Uncaught ReferenceError: Stats is not defined. would really appriciate if you get let me know whats wrong about it by me.... thanks in advance

[@jmstatusworld5068]

Can you please make a video on Wordpress SEO

[@BTM-u5k]

Ggreat video. However, every time I try it the particles remain under the heading, text and images. I have elementor and elementor pro. Yes I am a rookie but I can follow direction. I need more direction please..