particlesjs-og

Votre Site WordPress Manque d’Étoiles dans Vos Yeux ? Essayez Particle.js !

TL;DR
– Particles.js ajoutera un effet de constellation animé sur votre site WordPress.
– Pour L’intégrer, il suffit de suivre ce tuto.
– Plusieurs façons de faire : Ajouter le code dans le thème ou dans élémentor ou dans une extension Snippets

Salut les astrogeeks ! Vous cherchez à apporter une touche de magie cosmique à votre site WordPress ? Que vos visiteurs se disent, « Waaahhhh » dès qu’ils arrivent sur votre page ?

Alors, aujourd’hui, je vais vous montrer comment intégrer Particle.js, une bibliothèque JavaScript légère qui permet de créer des effets de particules animées. Grâce à ce guide, vous allez pouvoir ajouter des constellations, des bulles, ou des étoiles scintillantes qui captiveront vos visiteurs.

Mais… Pourquoi faire ?

Particle.js, c’est l’outil qui transforme votre site en un espace visuel dynamique avec des effets de particules animées. Non seulement cela apporte une touche moderne et élégante, mais ça améliore également l’expérience utilisateur en rendant votre site plus interactif, attrayant et dynamique. Vous allez voir, c’est super simple à mettre en place.

Étape 1 : Générer Votre Code JavaScript

Option 1 : Utiliser le site officiel de Particle.js

  1. Rendez-vous sur Particles.js.
  2. Personnalisez votre effet de particules selon vos envies.
  3. Une fois satisfait, Cliquez sur « CodePen » en haut à droite du site.
  4. copiez le code JavaScript généré.

Étape 2 : Intégrer Particle.js dans WordPress

Vous avez trois méthodes pour ajouter ce JavaScript à votre site WordPress. Choisissez celle qui vous convient le mieux.

Option 1 : Ajouter le JavaScript dans le Thème

  1. Accédez à votre tableau de bord WordPress :
    • Allez dans « Apparence » > « Éditeur de thème ».
  2. Ajoutez le code JavaScript dans le fichier header.php avant la balise de fermeture </head>.
  3. Enregistrez et publiez vos modifications.

Option 2 : Ajouter le JavaScript avec Elementor

  1. Ouvrez votre page avec Elementor :
    • Cliquez sur « Éditer avec Elementor ».
  2. Ajoutez un widget HTML :
    • Faites glisser le widget HTML dans la zone souhaitée.
    • Collez le code JavaScript dans le champ HTML.
  3. Mettez à jour votre page pour appliquer les modifications.

Option 3 : Utiliser Fluent Snippets

  1. Installez et activez Fluent Snippets (Gratuit).
  2. Créez un nouveau snippet :
    • Allez dans « Fluent Snippets » > « Ajouter un nouveau ».
    • Donnez un titre à votre snippet.
    • Collez le code JavaScript dans la zone de texte du snippet.
    • Sélectionnez « JavaScript » comme type de snippet.
  3. Enregistrez et activez le snippet.

Étape 3 : Ajouter le Conteneur HTML

Enfin, ajoutez le conteneur HTML dans lequel les particules vont s’afficher.

  1. Accédez à l’éditeur de votre page ou article :
    • Ajoutez le code HTML suivant à l’endroit souhaité :
    htmlCopier le code<div id="particles-js"></div>
  2. Enregistrez et publiez vos modifications.

Conclusion

Voilà, c’est tout pour aujourd’hui ! En intégrant Particle.js sur votre site WordPress, vous allez non seulement améliorer son apparence, mais aussi offrir une expérience utilisateur unique et captivante. Avec des outils simples comme le site officiel de Particle.js et des méthodes accessibles pour intégrer du JavaScript, vous pouvez facilement suivre cette tendance de design comme un vrai pro. Allez, à vos claviers, et faites briller votre site !

Publications similaires