Avez-vous déjà repéré ce type d’arrière-plan interactif dans Divi ou sur tout autre type de site ? Des constellations qui se magnétisent au passage de votre souris, des étoiles ou même de la neige qui tombe ? Ce type d’arrière-plan interactif est possible grâce à la librairie Javascript de Vincent Garreau : Particles.js. Rien de plus hypnotisant que ce genre d’arrière-plan, n’est-ce pas ?

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

 

Dans cet article, je vais vous expliquer comment ajouter un arrière-plan interactif avec Particles.js. Vous verrez qu’en quelques minutes, et sans grandes connaissances (sans codage), vous pourrez obtenir ce magnifique effet et l’utiliser sur vos sites Divi. Voici la procédure :

  1. Installer le plugin qui vous permettra d’utiliser la librairie Particles.js
  2. Définir le type de particules que vous souhaitez afficher
  3. Ajouter l’arrière-plan interactif dans une section de Divi
  4. Quelles sont les autres possibilités ?

 

1. Installer le plugin qui vous permettra d’utiliser la librairie Particles.js

Même si ce plugin n’est pas indispensable, il va vous faciliter la vie et vous éviter de mettre les mains dans votre thème enfant Divi. Même si dans de nombreux cas, il est intéressant de ne pas ajouter trop de plugins, celui-ci est vraiment léger et va vous faciliter la vie, alors pourquoi s’en priver ?

Donc, pour ajouter un arrière-plan interactif dans Divi, la première étape va être de télécharger, d’installer et d’activer l’extension nommée ParticleJS-WP-Plugin. Si vous souhaitez en savoir plus, voici le lien du répertoire Github.

Cela signifie que ce n’est pas une extension qui est disponible directement depuis le répertoire officiel des plugins de WordPress (via le menu Extensions > Installer) mais depuis Github, un dépôt dédié aux développeurs et en lequel vous pouvez avoir confiance.

Une fois que vous aurez installé et activé cette extension, un nouvel onglet apparait : « Particle Background »

Arrière-plan interactif / particle-background

Jusqu’à présent, rien de bien folichon… C’est ce qui suit qui va être intéressant…

 

2. Définir le type de particules que vous souhaitez afficher

La deuxième étape importante va être de paramétrer le type de particules que vous souhaitez voir apparaitre en tant qu’arrière-plan interactif. Pour cela, je vous donne rendez-vous sur le site officiel de Particles.js.

Particles.js

Cet écran va vous permettre de créer vos particules et vous pourrez définir :

  • le style de particule : des cercles, des polygones, des étoiles, des images etc…
  • la vitesse et le nombre,
  • la liaison des particules,
  • la direction de mouvement,
  • l’interactivité avec l’internaute,
  • la couleur des particules / la couleur de fond,
  • etc…

Une fois que vous aurez paramétré les particules idéales à l’aide du panneau de configuration (en haut, à droite), il ne vous restera plus qu’à télécharger le code généré. Pour cela, cliquez sur « Download current config (json) », le dernier élément situé en bas du panneau de configuration des particules.

Export current config

 

Découvrez le thème Divi maintenant !

 

3. Ajouter l’arrière-plan interactif dans une section de Divi

À présent, vous avez les deux éléments indispensables pour créer votre magnifique arrière-plan interactif dans Divi : le plugin Particle Background ainsi que le code de vos particules. Vous n’aurez plus qu’à assembler le tout et l’intégrer dans Divi. Voici ce que vous devrez faire :

 

=> Ajouter le code adéquat dans le plugin Particle Background

Rendez-vous dans l’onglet Particle Background et ajoutez ce code :

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

Dans cet exemple, l’identifiant unique est « my-particles ». Celui-ci peut être changé par un identifiant de votre choix. Toutefois, sachez qu’un identifiant (ID en HTML) ne peut être utilisé qu’une seule fois dans une page. C’est une information importante que vous devez garder à l’esprit.

La ligne où est noté « AJOUTEZ VOTRE CODE ICI » est l’emplacement où vous devez coller le code obtenu après configuration de vos particules. Celui que vous avez obtenu à l’étape 2 de ce tutoriel.

Donc le code à coller dans le champ prévu à l’onglet Particle Background devrait ressembler à cela :

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
}
);

 

É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 ».

 

=> Intégrer vos particules dans une section de Divi

Maintenant, tout est prêt pour insérer vos particules dans une section de Divi. Selon si vous préférez utiliser le Divi Builder ou le Visual Builder, voici la méthode :

 

Méthode avec le Divi Builder (en back-office) :

Lorsque vous construisez votre layout (mise en page), vous ajoutez des sections, des lignes et des modules.

L’idée est que ces particules tapissent le fond d’une section (section standard, section pleine largeur ou même section spéciale).

1 – Vous devrez donc ajouter (ou éditer si déjà présente) une section :

éditer une section

 

2 – Ajoutez un fond de couleur au choix (surtout si vos particules sont blanches) via l’onglet Contenu > Fond :

fond particules

 

3 – Insérez l’ID (identifiant unique) que vous avez utilisé dans le code du plugin Particle Background (code vu précédemment, exemple « my-particle »). Cet ID s’insère à l’onglet Avancé > ID et classes CSS :

ID particules

 

4 – Enregistrez vos modifications, mettez à jour votre page et admirez votre ciel étoilé !!! Notez que vous devrez peut-être ajouter un peu de marge interne afin d’agrandir la section.

 

Méthode avec le Visual Builder (en front-office) :

Si vous préférez utiliser le Visual Builder, ce sera la même procédure. Toutefois, sachez que vous ne verrez pas apparaitre vos particules en direct. Vous devrez enregistrer et quitter le visual builder pour voir apparaitre votre arrière-plan intercatif.

fond via le visual builder

Ajoutez un fond de couleur pour qu’on puisse voir vos particules interactives

 

ID via le visual

Ajoutez l’ID via l’onglet Avancé > ID et classes CSS

 

Obtenir Divi

 

4. Quelles sont les autres possibilités ?

Pour finir, je tenais à vous informer qu’il existe d’autres solutions pour insérer des particules en guise d’arrière-plan interactif.

Vous pourriez simplement télécharger la librairie Javascript et l’ajouter dans votre thème enfant. Cela nécessiterait l’intégration de celle-ci de manière manuelle.

Sinon, il existe un plugin gratuit sur le répertoire officiel. Il s’agit de Particle Backgroung WP. Il est très simple d’utilisation. Le seul souci est que vous ne pourrez pas personnaliser vos particules, seulement la couleur de fond. Un shortcode vous permettra de l’ajouter facilement mais ce n’est pas l’idéal pour intégrer cela dans une section de Divi…

Arrière-plan interactif dans Divi : Particles.js, constellations & ciel étoilé
4 pour 4 votes

D'autres Tips pour Divi :

Pin It on Pinterest

Shares
Share This