– You can use this tilt and Particles styles on your divi website.
Steps for Tilt + Particles JS Effect
1. Download Tilt + Particles JS Effect File.
2. Unzip files
3.Import Tilt + Particles JS Effect.json file on on Divi -> Divi Library -> Import & Export Button
4. After import layout json files you can see in below
5. Add New Page and Click on “Add From Library” OR “+” Icon below section
New Divi Builder
Old Divi Builder
7. After select layout,section then Publish Page and see on front end after done below point 8.
8. Here two way possibility of use tilt .
1. Using Child theme
On unzip folder you can found “DPDiviChild.zip” file so just upload and activate.
If child theme already exist then follow below step
-> Copy “js” folder and paste on your existing child theme.
-> Copy enqueue script function “dp_tilt_scripts” code and paste on your existing child theme functions.php file.
-> Copy style.css code and paste on your existing child theme style.css file.
2. Without Child theme
-> Upload “vanilla-tilt.min.js” & “particles.min.js” file on your server or anywhere and add that path on Divi-> Theme Options -> Integration Tab.
->Copy js code from init-tilt.js & init-particles.js file and paste on Divi-> Theme Options -> Integration Tab.
Just write Script tag before start code and end script tag after code finished.
See Image
-> Copy style code from style.css file and paste on Divi-> Theme Options ->General -> Custom CSS .
See Image
For Simple Effect use class “dp-tilt-column” on module and add class on jquery
For Parallax Effect use class “dp-tilt-column-parallex” on module and add class on jquery.
For Glare Effect use class “dp-tilt-column-glare” on module and add class on jquery.
For Particles Effect
Note : ID must be unique and only one time we can use ID per page.
Have created below ID’s
particles-js
particles-js-1
particles-js-2
particles-js-3
particles-js-4
Note : You can add more Particles init code base your requirement and remove extra particles init code if not use.
Click here to more information about particle js
Click here to more information about tilt js
See Image