Créer un fond de particules animées dans Divi - Divi Community

Il s’agit d’une animation que vous avez certainement déjà remarquée sur différents sites, car cet effet ne passe pas inaperçu.
Peut-être vous êtes-vous déjà demandé comment le mettre en place sur votre site ?
Si tel est le cas, je vous explique tout en détails dans cet article…

Tout commence par un plugin

Cet effet de particules animées est géré par une librairie JavaScript nommé Particles.js
Pour éviter d’avoir à mettre les mains dans le code pour l’implémenter dans votre thème, vous pouvez installer ce plugin gratuit ; très utile, il fera le boulot à votre place et permettra d’accueillir le code de configuration de l’effet.

Configurez votre effet

Rendez-vous sur le site de particles.js et faites les réglages qui vous intéressent.
Il y a déjà 5 exemples qui permettent d’illustrer les possibilités de la librairie, mais ensuite à vous de jouer avec les options pour configurer l’effet selon vos envies.
Vous pouvez changer beaucoup de choses comme la forme des particules, leur taille, leur nombre, leur couleur, leur vitesse, si elles sont reliées entre elles ou non, si on peut interagir avec la souris… bref, vous l’avez compris, il y a des millions de possibilités !

Ne vous souciez pas de la couleur de fond car celle-ci sera définie directement dans le Divi Builder (ce sera la couleur de fond de votre section, ligne ou module).

Une fois que vous êtes satisfait de vos réglages, cliquez sur Download current config (json), ce qui aura pour effet de télécharger sur votre ordinateur un fichier .json contenant votre configuration.

Ouvrez ce fichier avec un éditeur de texte et placez en première ligne particlesJS(‘VOTRE_IDENTIFIANT’, et en dernière ligne );
Prenez soin de modifier VOTRE_IDENTIFIANT par le terme de votre choix (par exemple : fond_particules)

Ce qui nous donne :

particlesJS('VOTRE_IDENTIFIANT',

=> ICI LE CODE QUE VOUS AVEZ TÉLÉCHARGÉ <=

);

Ensuite, copiez l’ensemble du contenu de votre fichier dans votre presse-papier.

Appliquez votre effet

Rendez-vous maintenant dans l’administration de WordPress.
Dans le menu de gauche, si vous avez bien installé et activé le plugin dont je vous parlais en début d’article, devrait apparaitre un nouvel élément de menu nommé Particle Background.  Cliquez dessus, collez le contenu de votre presse-papier dans le champ Add Your Json Code here et validez en cliquant sur le bouton bleu Enregistrer les modifications.

Allez sur la page où vous souhaitez ajouter votre effet de particules animées et ouvrez les paramètres de la section, de la ligne ou du module dans lequel doit apparaitre l’effet.
Dans Avancé -> ID et classes CSS -> ID CSS, précisez le nom de l’identifiant que vous avez choisi tout à l’heure.

Validez les changements, sauvegardez votre page et vous verrez apparaitre votre effet de particules animées.

Dernière précision

Si vous souhaitez appliquer sur votre site plusieurs effets différents de particules animées, il vous suffit de coller les différents codes (avec des identifiants différents), les uns au-dessous des autres dans le champ Add Your Json Code here de la page d’options du plugin.
Soyez créatifs, amusez-vous bien !