Interactive background in Divi: Particles.js, constellations & starry sky

Updated on 24/06/2019 | Published on 07/11/2018 | 41 comments

How to integrate the Javascript library "Particles.js" in Divi? Have you ever seen this type of interactive background in Divi or on any other type of site? Constellations that magnetize when you move your mouse, stars or even snow falling? This type of interactive background is possible thanks to the Javascript library of Vincent Garreau Particles.js.

There's nothing more hypnotizing than that kind of background, is there?

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

 

In this article, I will explain how to add an interactive background with Particles.js. You will see that in a few minutes, and without much knowledge (without coding), you can get this wonderful effect and use it on your Divi sites.

Here is the procedure:

  1. Install the plugin that will allow you to use the Particles.js library
  2. Define the type of particles you want to display
  3. Add the interactive background in a Divi section
  4. What are the other possibilities?

 

Update of June 23, 2019: after many readers contacting me or leaving a comment about errors encountered, I confirm that Particles.js is well compatible with the latest version of Divi or WordPress. After your many comments, I have just done an audit with the version 3.25.2 of Divi and version 5.2.2 of WordPress. Everything is working well. If you encounter errors, check each step and make sure there is no code error: a simple misplaced space or comma could turn into a failure. I also advise you to do your tests on a Dev site and not on a production site.

 

1. Install the plugin that will allow you to use the Particles.js library in Divi

Even if this plugin is not essential, it will make your life easier and prevent you from getting your hands on your Divi child theme. Even if in many cases, it is interesting not to add too many plugins, this one is really light and will make your life easier, so why not do without it?

So, to add an interactive background in Divi, the first step will be to download, install and activate the extension named ParticleJS-WP-Plugin. If you would like to know more, here is the link to the Github directory.

This means that it is not an extension that is available directly from the official WordPress plugin directory (via the menu Extensions > Install) but from Github, a repository dedicated to developers and in which you can have confidence.

Once you have installed and activated this extension, a new tab appears: "Particle Background"

Arrière-plan interactif / particle-background

So far, nothing good folichon... It's what follows that will be interesting...

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"

 

2. Define the type of particles you want to display on your site

The second important step will be to set the type of particles you want to appear as an interactive background. To do this, I would like to meet you at the official website of Particles.js.

Particles.js

This screen will allow you to create your particles and you will be able to define:

  • the particle style: circles, polygons, stars, images etc....
  • speed and number,
  • the binding of particles,
  • the direction of movement,
  • interactivity with the Internet user,
  • the color of the particles / the background color,
  • etc....

Once you have set the ideal particles using the control panel (top right), all you need to do is download the generated code. To do this, click on "Download current config (json)"the last item at the bottom of the particle control panel.

Export current config

 

3. Add the interactive background in a Divi section

Now you have the two essential elements to create your beautiful interactive background in Divi:

  • the Particle Background plugin
  • as well as the code of your particles.

All you have to do is put it all together and integrate it into Divi. Here's what you'll have to do:

 

3.1 - Add the appropriate code in the Particle Background plugin

Go to the Particle Background tab and add this code:

particlesJS('my-particles',
AJOUTEZ VOTRE CODE ICI
);

In this example, the unique identifier (ID) is "my-particles". This can be changed by an identifier of your choice. However, please note that an identifier (HTML ID) can only be used once in a page. This is important information that you should keep in mind.

The line where is noted "ADD YOUR CODE HERE" is the place where you must paste the code obtained after configuring your particles. The one you got in step 2 of this tutorial.

So the code to paste in the field provided in the Particle Background tab should look like this:

particlesJS('my-particles',
{
"particles": {
"number": {
"value": 109,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3.9458004845442964,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
);

 

Since each ID must be unique, if you want to use various interactive backgrounds, you will need to change the ID each time you repeat the code.

If you watched my video at the beginning of the article, you may have noticed that I added 3 backgrounds in a row. This was possible because for each background, I used different IDs such as "my-particles", "my-particles-2" or "my-particles3".

 

Update of June 23, 2019: here is the example of the code I used to integrate 3 different Background Particles within the same page. The 3 code pieces were pasted together in a row with 1 double line break to separate them =>

particlesJS('my-particles',
{
  "particles": {
    "number": {
      "value": 109,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3.9458004845442964,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}
);

particlesJS('my-particles-2',
{
  "particles": {
    "number": {
      "value": 213,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "star",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 7.891600969088593,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}
);

particlesJS('my-particles-3',
{
  "particles": {
    "number": {
      "value": 128,
      "density": {
        "enable": true,
        "value_area": 2209.648271344806
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "image",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "https://astucesdivi.com/wp-content/uploads/2017/12/icon-new.png",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 27.620603391810075,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "bottom-right",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}
);

 

3.2 - Integrating your particles into a Divi section

Now, everything is ready to insert your particles into a Divi section. Depending on whether you prefer to use the Divi Builder or Visual Builderhere is the method:

 

Method with the Divi Builder (in the back office):

When you build your layout (layout)you add sections, lines and modules.

The idea is that these particles cover the bottom of a section (standard section, full width section or even special section).

1 - You will therefore have to add (or edit if already present) a section :

éditer une section

 

2 - Add a colored background of your choice (especially if your particles are white) via the tab Content > Background :

fond particules

 

3 - Insert the ID (unique identifier) you used in the code of the Particle Background plugin (code seen above, example "my-particle"). This ID is inserted in the tab Advanced > ID and CSS classes :

ID particules

 

Want to take it to the next level? Get the Divi theme now!

 

4 - Save your changes, update your page and admire your starry sky! Note that you may need to add some internal margin to enlarge the section.

 

Method with the Visual Builder (front-office):

If you prefer to use the Visual Builder, it will be the same procedure.

IMPORTANT : note you will not see your particles appear live when using the Front End Builder. You will need to save and exit the visual builder to see your intercative background appear.

fond via le visual builder

Add a colored background so that we can see your interactive particles

 

ID via le visual

Add the ID via the Advanced tab > ID and CSS classes

 

4. What are the other possibilities?

Finally, I wanted to inform you that there are other ways to insert particles as an interactive background.

You could simply download the Javascript library and add it to your child theme. This would require the integration of this one manually.

Otherwise, there is a free plugin on the official directory. These are as follows Particle Backgroung WP. It is very easy to use. The only concern is that you will not be able to customize your particles, only the background color. A shortcode will allow you to add it easily but it is not ideal to integrate it into a Divi section....

Before you leave: do you like unusual designs? Discover how to insert a background that changes color in Divi.

Need more resources on Divi? Visit ElegantTheme's blog full of ideas and tutorials!

 

Comment intégrer la librairie Particles.js dans Divi

how to insert Particles.js library into Divi Theme ?

2,146 words

9

You should like it too:

Vidéo mise en avant dans les articles Divi avec ACF

Video highlighted in Divi articles with ACF

This step-by-step tutorial shows you how to create a new custom field in your Divi Articles to add highlighted YouTube videos. You can do this easily with the Theme Builder and ACF.

41 Commentaires

  1. tantin damien

    bonjour,
    merci pour votre tuto,
    j’ai un petit souci pour configurer plusieurs arrière plans(j’en ai un seul qui fonctionne ou aucun selon la syntaxe), quelle est la syntaxe exacte dans particles background pour pouvoir le faire?
    Comment fait t’on pour charger des images (glaces dans le tuto)?
    merci d ‘avance pour la réponse

  2. Lycia

    Salut Damien, dans mon tuto, j’explique que si tu veux utiliser plusieurs arrières-plan tu dois utiliser des ID différents, c’est très important (voir section 3 => Ajouter le code adéquat dans le plugin Particle Background : l’exemple « my-particles » doit être changé pour chaque nouveau code).

    Concernant l’image à insérer (comme la glace dans ma vidéo), tu dois la paramétrer lorsque tu définis tes particules sur le site https://vincentgarreau.com/particles.js/

    Cette image doit déjà être déjà hébergée dans ton site. Tu vas dans ta bibliothèque de médias et tu récupères l’URL de l’image en question.

    Ensuite, cette URL doit être insérée dans le paramétrage de tes particules au chemin suivant : PARTICLES > SHAPES > IMAGE > IMAGE.SRC

    Tu me diras…

  3. knabach

    bonjour
    je voulais ajouter un logo citroen sur le fond de ma page d’acceuil
    j’indique le chemin dans PARTICLES > SHAPES > IMAGE > IMAGE.SRC et l’image sous forme jpg se trouve dans ma bibliotheque
    pourtant il ne semble pas la reconnaitre et affiche des particules en mouvement
    que faire?

  4. Lycia Diaz

    C’est plutôt bizarre, ça devrait marcher. Avez-vous réessayé ? N’auriez-vous pas une erreur dans le lien de l’image ?

  5. Sonny

    Bonjour, merci pour ce tuto.
    J’ai malheureusement un problème aucune image ne fonctionne lorsque je rentre l’url d’une image cela me remet des particules de bases pourrais tu m’aider stp ?
    Merci

  6. Lycia Diaz

    Bonjour Sonny,
    Dommage, il y a certainement une étape qui s’est mal passée. Par exemple : est-ce que l’URL de l’image est bonne ? As-tu essayé avec une autre URL pour voir si ça ne venait pas de l’image en elle-même ? Parfois, ça ne tient à pas grand chose !

  7. Desportj

    Bonjour, comment puis-je utiliser plusieurs backgrounds différents pour différentes pages ?
    Sur votre tuto je lis de les différencier d’un ID différent.
    Je ne suis pas sûr de la syntaxe dans le code JSon, je ne sais pas comment ajouter un deuxième id.
    J’ai essayé de les « raccorder » comme ça :

    https://www.zupimages.net/up/19/19/rxdm.png

    Et comme ça :

    https://www.zupimages.net/up/19/19/dzai.png

    J’ai ensuite préciser l’idée my-particles-2 dans les id css,
    mais aucun des deux ne semble fonctionner.
    Si vous pouviez me renseigner svp, ça m’aiderait beaucoup 🙂

  8. Lycia Diaz

    Salut Desportj,
    Tu as trouvé finalement ? Tes captures me semblent bonnes. Tu peux effectivement préfixer l’ID pour pouvoir dupliquer le code et qu’il n’y ait pas de conflits : my-particle, my-particle-2, my-particle-3
    Peut-être que le souci vient d’ailleurs ?
    As-tu copié-collé le code de mon article ? Si c’est le cas, regarde que les « apostrophes-droites » n’aient pas été remplacées par des « apostrophes-virgule » par exemple. C’est souvent le cas quand on copie-colle.

  9. Morgane Lento

    Bonjour j’ajoute les particules elles fonctionnent en haut de page mais j’aimerais uniquement l’insérer dans une section divi et rien ne fonctionne. pouvez vous m’aidez?

    Quand j’inscris le code « json » il s’inscrit sur tout le site.
    Comment puis-je faire?

  10. Lycia Diaz

    Salut Morgane,
    Je ne comprends pas trop ta question. Je crois que tout est bien expliqué dans le tuto. As-tu suivi les étapes scrupuleusement ?

  11. yoyo

    pouvez vous indiquer comment vous faites pour mettre plusieurs particle background, au niveau du codage ? plusieurs personnes on ce probleme on dirait. une capture d’ecran par exemple ?

  12. Laurent SEGURA

    Bonjour,
    Merci pour ce tuto, cependant fonctionne t-il avec la version 3.23.2 du thème divi ?

    Cela ne fonctionne pas chez moi….. :/

  13. Lycia Diaz

    Bonjour Laurent, ça devrait fonctionner normalement… je crois…

  14. Lycia Diaz

    Salut Yoyo!
    Je vois que certains n’arrivent pas à utiliser plusieurs backgrounds au sein de la même page. Pourtant, je ne peux pas être plus claire, c’est écrit dans le tutoriel :
    « Étant donné que chaque ID doit être unique, si vous souhaitez utiliser divers arrières-plans interactifs, vous devrez changer l’identifiant à chaque fois que vous répétez le code.
    Si vous avez regardé ma vidéo en début d’article, vous avez pu remarqué que j’ai ajouté 3 arrières-plans à la suite. Cela a été possible car pour chaque background, j’ai utilisé des ID différents comme « my-particles », « my-particles-2 » ou « my-particles3 ». »

  15. Gilles Sénard

    Bonjour,
    Je rencontre un petit problème avec ce plugin
    J’ai suivi à la lettre les instructions d’installation et de paramétrage
    Il fonctionne très bien avec Chrome, mais les particules sont invisibles avec Mozilla ou Safari
    Merci d’avance pour votre aide
    Cordialement

  16. Lycia Diaz

    Salut Gilles,
    Hummm… C’est très bizarre. Pour ma part, j’ai réalisé le tuto sur Firefox et ça marchait très bien… Je n’ai pas réessayé depuis mais je ne vois pas pourquoi ça ne marcherait pas ?

  17. BobiBobBoby

    Bonjour, je ne comprend pas, dans l’onglet paramètre j’ai seulement « Personnaliser Css » et rien d’autre.
    Je ne peux donc pas rentrer l’ID CSS.

  18. Antoine

    Bonjour,

    Après 150 essais je n’arrive toujours pas à mettre en oeuvre les particules !
    Pourtant j’ai le sentiment de tout faire, j’ai peur qu’un élément de mon divi donne un contre ordre ou je ne sais quoi.

    Pouvez vous m’aider ?
    Bien à vous.

  19. Lycia Diaz

    Salut Boby
    Ça dépend de ce que tu cherches. Dans « personnaliser CSS », tu peux saisir l’ID et la Class normalement.

  20. Lycia Diaz

    Salut Antoine,
    Tu n’es apparemment pas le seul qui rencontre des problèmes d’intégration. Du coup, je viens de suivre mon tuto comme un internaute le ferait. Tout fonctionne. Je confirme donc que Particles.js est compatible avec la dernière version de Divi et de WordPress (soit 5.23 et 5.2).
    Par contre, j’attire ton attention sur le fait que si tu insères l’ID depuis le Visual Builder (en front-end), c’est normal de ne pas les voir apparaître au moment de la confection de ta page. Ajoute bien l’ID, enregistre le module et la page puis quitte le Visual Builder : les particules apparaîtront.
    Si rien ne fonctionne, tu as peut-être un conflit avec un autre plugin.

  21. Djin

    Salut Lycia,

    Merci pour tous tes tuto.
    Je rencontre non pas un souci d’intégration mais un souci au niveau des dimensions.
    Dans l’impression d’écran ci dessous, la section fait 300px.
    Du coup l’effets est totalement écrasé.
    https://zupimages.net/up/19/26/chyv.png

    Ça te parle ?

  22. Lycia Diaz

    Ah oui, effectivement les particules sont écrasées. Lors de mes tests, moi aussi l’icône de mon logo (la glace) s’est affichée écrasée pendant un instant, mais après rechargement de la page, le logo est redevenu normal. Peut-être une histoire de cache ?
    Aurais-tu mis une règle CSS pour donner une taille spécifique à ton BG ?
    Genre [width:300px height:200px]. Si c’est le cas, il vaudrait mieux mettre un truc du genre [width:300px height:auto].
    Sinon inspecte le code, ça pourrait venir de là.
    Tu nous diras…
    Bonne journée.
    Lycia

  23. Djin

    Merci de ta rapidité.
    Ce n’était pas un problème de cache et je n’avais rien de spécifié au niveau du BG.
    Par contre le plugin ajoute un parametre de style « width: 100%; height: 100%; »

    En ajoutant un parametre sur la class qui va bien, tout est OK 🙂 !

    .particles-js-canvas-el {
    height: auto!important;
    }

  24. Lycia Diaz

    Ah super !
    J’en étais sûre que c’était une histoire de height:auto !!!
    Pour ma part, je n’ai pas rencontré ce problème car mon icône est un .png carré. Genre 200px par 200px.
    Ton image ne devait pas être carrée, d’où le problème rencontré je pense !
    Ton cas pourras en aider d’autres…
    Merci 😉

  25. Rolando Segovia

    Très bien, merci pour vos commentaires, une requête, j’utilise un curseur et je veux mettre cet effet sur ce curseur, mais l’effet n’apparaît que lorsque la page est chargée et que la diapositive suivante est affichée, l’effet disparaît. ou cet effet ne fonctionne pas sur un curseur?

    Je vous serais reconnaissant de bien vouloir m’aider, Lycia, merci beaucoup pour votre aide.

    Rolando Segovia
    Lima Pérou

  26. Lycia Diaz

    Salut Rolando, en parlant de curseur, tu parles d’un diapo ? Effectivement, c’est possible que cela ne marche pas, à moins de trouver l’ID qui va bien mais je n’ai pas testé et je ne sais pas si cela est possible. Désolée de ne pas pouvoir plus t’aider…

  27. Skander Nej

    Bonjour lycia je n’ai pas trouvé les autres vidéos pour la suite de ce démo, comment faire des particules en images dans ta chaine sur YouTube

  28. Lycia Diaz

    Salut Skander. Ce tuto est pour Divi et WordPress. Je ne pense pas que tu puisses t’en servir pour ta chaine YT.

  29. amandine

    Bonjour, je souhaiterais utiliser mon logo (comme vous vous utilisez la glace) comment faire s’il vous plaît.

  30. Lycia Diaz

    Bonjour Amandine,
    Tout est expliqué dans le tuto. Tu devras héberger ton image sur ton site et récupérer le lien (adresse URL). Ensuite, tu paramètres les particules depuis le site officiel de ParticleJS avec l’adresse de ton image. Tu récupères le code et tu l’insères dans ton site. Elle doit être en .png (fond transparent).
    Bonne journée

  31. levy kambay

    bonjour j’aimerai configurer des particules dans ma section mais le problème est que ma section à déjà un id qui me permet de faire reference à mon menu ancre comment je peux gérer ça?

  32. Lycia Diaz

    Salut Levy, je vois ce que tu veux dire… Je ne sais pas, il faudrait regarder de plus près. Peut-être que tu pourrais utiliser une CLASSE CSS au lieu d’un ID ? Il faudrait voir si ça fonctionne… Je parle pour les particules, car pour ton ancre de lien, tu es obligé d’utiliser un ID…

  33. Charly Rouget

    J’ai un problème. J’ai bien installé les particules, ça fonctionne super, tant que je suis connecté. . .
    Dès que je ne suis plus connecté, plus de particules.

    Savez-vous d’où ça peut venir ?

  34. Lycia Diaz

    C’est bizarre Charly.
    Y’a peut-être un conflit quelque part ?

  35. Charly Rouget

    Possible, effectivement faudrait que je fasse des petits tests à ce niveau.

  36. Jonathan

    Bonjour,
    Le tuto est parfait, merci. J’arrive à mettre des flocons de neiges ou même des images, le problème que je rencontre c’est que je ne peux pas faire les deux en même temps. Que ce soit sur une même page ou deux pages différentes, j’ai l’impression que dès que je change l’ID ça rentre en conflit.

    Aurait tu une idées.

  37. Jonathan

    Bonjour,

    Après un nouvel essais en utilisant ton code à toi, ça fonctionne parfaitement sur une même pages. Par contre lorsque je veux appeler les différents ID sur des pages différentes ça ne fonctionne pas, aurais tu une astuce pour contrer le bug ?

  38. Lycia Diaz

    Salut Jonathan.
    Je ne vois pas trop… Il te faut utiliser des ID bien distinct à chaque fois, comme expliqué dans ce tuto. As-tu fait attention à cela ?

  39. Lycia Diaz

    Ah d’accord, j’avais pas vu ton second commentaire !
    Euh, normalement ça dois marcher si c’est sur une autre page.

  40. Chris Joe Barcelon

    Hi, im just having some issue. 🙁 When i am logged in in DIVI it is working. But when i logged out it is not working.
    I tried to inspect and it says Uncaught ReferenceError: particlesJS is not defined.

  41. Lycia Diaz

    Hello Chris,
    I don’t know what is wrong. Did you made the tutorial step by step ?

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This