Comment ajouter un arrière-plan de particules à WordPress (sans code) 

Vous avez un site portfolio ou une section principale qui semble plate, et vous souhaitez ajouter de la profondeur visuelle sans reconstruire toute la page. Un arrière-plan de particules, ces points qui bougent lentement et les lignes qui les relient derrière votre contenu, est l'un des moyens les plus rapides d'y parvenir.

Dans ce guide, je vais vous montrer comment ajouter un arrière-plan de particules dans WordPress à l'aide d'un plugin, sans aucun codage requis. Vous verrez également comment personnaliser les particules pour votre propre style et garder votre site rapide et adapté aux mobiles.

Qu'est-ce qu'un arrière-plan de particules ?

Un arrière-plan de particules est un ensemble animé d'éléments en mouvement qui s'affichent derrière le contenu de votre site Web. Ces particules peuvent bouger, changer de couleur et réagir aux interactions de l'utilisateur.

La plupart des arrière-plans de particules sont alimentés par particle.js, une bibliothèque JavaScript légère. Elle vous permet de personnaliser les formes, les couleurs, les tailles et les mouvements des particules sans affecter votre contenu principal.

Une chose à savoir : la bibliothèque particle.js d'origine n'est plus activement développée et est maintenant maintenue sous le nom de tsParticles. Si vous utilisez SeedProd ou le plugin Particle Background WP, l'intégration s'en charge pour vous. Si vous souhaitez créer une configuration personnalisée à partir de zéro, l'outil actif se trouve sur tsparticles.js.org.

Voici un exemple d'arrière-plan de particules en action :

Pourquoi utiliser des arrière-plans de particules dans WordPress ?

Les arrière-plans de particules ajoutent une touche dynamique et interactive à votre site et aident à attirer l'attention sur des sections clés. L'astuce consiste à faire correspondre l'effet au type de site que vous gérez.

Voici quatre cas d'utilisation où un arrière-plan de particules a sa place :

• Sites portfolio : Une subtile animation de polygones sur la section principale montre la créativité sans distraire du travail.
• Pages de destination Tech et SaaS : Les particules de lignes de connexion signalent une marque moderne et axée sur les données.
• Promotions saisonnières : Particules de neige pour les ventes de fêtes, ou formes flottantes pour un lancement de printemps.
• Pages "Bientôt disponible" : Une animation de particules maintient la page visuellement vivante pendant que votre contenu est encore en développement.

C'est pour ce dernier cas que j'utilise le plus cet effet. Les pages "Bientôt disponible" sont la fonctionnalité la plus solide du niveau gratuit de SeedProd, et un arrière-plan de particules donne quelque chose à regarder à une page de remplacement autrement vide.

Comment ajouter des arrière-plans Particle.js à mon site WordPress ?

Il existe plusieurs façons d'ajouter des arrière-plans de particules à votre site WordPress, même si vous êtes débutant.

Tout d'abord, vous pouvez utiliser un plugin WordPress particle.js ou un constructeur de pages WordPress avec des fonctionnalités d'effets de particules intégrées. Je recommande cette option pour les débutants car elle ne nécessite généralement aucune connaissance en codage ni compétences techniques.

Une autre façon est d'utiliser un thème WordPress qui inclut particle.js. C'est pratique si vous créez un nouveau site et avez encore besoin d'un thème.

La dernière option consiste à utiliser du code personnalisé pour ajouter manuellement des effets de particules. Je ne recommande cela que si vous êtes à l'aise avec le codage.

Dans ce guide, nous allons nous en tenir à l'option la plus simple : utiliser un plugin WordPress. Allons-y.

Comment ajouter un arrière-plan de particules dans WordPress avec SeedProd

SeedProd est un constructeur de sites web par glisser-déposer avec des arrière-plans de particules intégrés directement dans son éditeur. Vous n'avez pas besoin d'un plugin séparé ni de code personnalisé, l'effet est à portée de clic.

Plus de 700 000 sites WordPress utilisent SeedProd pour créer des pages et des thèmes sans toucher au code. Vous pouvez l'utiliser pour créer des thèmes WordPress personnalisés, des pages de destination, et à peu près n'importe quelle mise en page dont vous avez besoin.

Avec des centaines de modèles de pages préconçus et des arrière-plans de particules intégrés, la mise en place d'un effet de particules WordPress ne prend que quelques minutes. Suivez les étapes ci-dessous pour en ajouter un à votre site.

Étape 1. Installer et activer SeedProd

Tout d'abord, commencez avec SeedProd et téléchargez le plugin. Installez-le et activez-le ensuite sur votre site WordPress.

Si vous avez besoin d'aide pour cela, consultez la documentation d'installation de SeedProd. Elle vous guide à travers le processus d'installation et comment activer votre clé de licence de plugin.

Étape 2. Choisir un modèle préconçu

Votre prochaine étape consiste à choisir un modèle préconçu. Le type que vous sélectionnez dépend si vous souhaitez créer un thème WordPress ou une page de destination.

Avec le constructeur de thèmes de SeedProd, vous pouvez créer un thème WordPress complet à partir de zéro. Choisir cette option écrasera la conception de votre site web existant.

Le constructeur de pages de destination vous permet de créer n'importe quelle page sans toucher à votre thème existant. Pour ce guide, nous allons opter pour cette option.

Depuis votre tableau de bord d'administration WordPress, allez dans SeedProd » Pages de destination. Vous verrez différents modes de page en haut et l'option de créer votre propre page personnalisée.

Cliquez sur le bouton Ajouter une nouvelle page de destination. Ici, vous pouvez choisir parmi des centaines de modèles de pages de destination préconçus.

Vous pouvez filtrer les modèles par type en utilisant les onglets en haut, y compris :

• Bientôt disponible
• Mode Maintenance
• Page 404
• Ventes
• Webinaire
• Page de capture de prospects
• Merci
• Connexion

Pour choisir un design de modèle, cliquez sur l'icône de coche orange.

Cela ouvre une fenêtre contextuelle où vous pouvez entrer le nom de votre page de destination. SeedProd génère le slug de la page pour vous, mais vous pouvez le modifier si vous le souhaitez.

Lorsque vous êtes satisfait de ces détails, cliquez sur le bouton Enregistrer et commencer à modifier la page. Une fois votre modèle ouvert dans l'éditeur, vous êtes prêt à activer les effets de particules.

Étape 3. Activer et personnaliser les arrière-plans de particules

SeedProd a particle.js intégré dans l'éditeur, et vous pouvez l'utiliser sur n'importe quelle section de page. Cliquez sur une section jusqu'à ce que vous voyiez une bordure violette, puis sélectionnez l'onglet Avancé.

Recherchez l'en-tête Arrière-plan de particules, développez-le et activez le bouton Activer l'arrière-plan de particules. Vous verrez immédiatement un effet d'animation de polygones apparaître sur l'arrière-plan de la section.

Cliquez sur le menu déroulant Style pour changer les particules en l'une des options intégrées :

• Espace
• Neige
• Flocons de neige
• Noël
• Halloween
• Personnalisé

Après avoir choisi un style, vous pouvez définir l'opacité des particules, la direction du flux et la couleur. Pour plus de contrôle, activez le bouton Paramètres avancés.

Ici, vous pouvez augmenter le nombre de particules, modifier leur taille et ajuster leur vitesse de déplacement.

Garder votre arrière-plan de particules rapide sur mobile

La densité des particules est le paramètre qui affecte le plus les performances. Plus vous rendez de particules, plus le navigateur effectue de travail à chaque image.

Quelques directives que je suis pour que tout reste fluide :

• Limitez la densité : Gardez les particules en dessous d'environ 60 pour les sections d'en-tête sur ordinateur, et autour de 30 pour le mobile.
• Testez les effets de survol sur mobile : Les interactions de survol ajoutent du JavaScript supplémentaire, alors vérifiez comment elles se comportent sur un téléphone avant de publier.
• Utilisez l'aperçu mobile : L'aperçu mobile intégré de SeedProd vous permet de vérifier les performances de rendu avant que la page ne soit mise en ligne.

SeedProd propose également une option d'effet de survol dans le même panneau. Lorsque vous l'activez, les particules s'éloignent de votre curseur et reviennent à mesure que vous vous déplacez dans la section.

Une chose à noter : vous ne pouvez voir l'effet de survol que lors de la prévisualisation de votre page en dehors de l'éditeur, pas dans le constructeur lui-même.

Ajout d'arrière-plans de particules personnalisés

Pour ajouter un effet de particules personnalisé, choisissez l'option Personnalisé dans le menu déroulant Style. Les instructions vous indiqueront que vous devez ajouter un fichier de configuration JSON personnalisé.

Les instructions incluent un lien vers vincentgarreau.com/particles.js, un outil qui vous permet de définir des attributs personnalisés en pointant et en cliquant. Le même format de configuration JSON fonctionne avec la bibliothèque actuelle tsParticles, donc une configuration que vous y construisez fonctionnera dans SeedProd.

Dans le panneau de configuration, vous pouvez choisir des formes, des densités, des tailles, des vitesses et des couleurs personnalisées. Si vous souhaitez utiliser votre propre logo ou image comme forme de particule, l'approche JSON personnalisée est la solution. Vous pointez la configuration de forme vers une URL d'image personnalisée.

Lorsque vous êtes satisfait de vos paramètres, cliquez sur l'en-tête Télécharger la configuration actuelle pour enregistrer le fichier de configuration sur votre ordinateur.

Ouvrez maintenant le fichier, copiez le code, et collez-le dans la boîte vide de votre éditeur.

Votre arrière-plan de particules personnalisé apparaîtra instantanément. À partir de là, continuez à personnaliser votre page de destination jusqu'à ce qu'elle vous plaise exactement, et cliquez sur Enregistrer pour sauvegarder vos modifications.

Étape 4. Publiez vos modifications

Une fois que votre page de destination vous convient, vous êtes prêt à la mettre en ligne. Cliquez sur la flèche déroulante Enregistrer, puis cliquez sur Publier.

Visitez maintenant votre page de destination pour voir votre arrière-plan de particules en action.

Avant de considérer que c'est terminé, ouvrez la page sur votre téléphone en utilisant l'aperçu mobile de SeedProd pour confirmer que l'effet est correct sur un écran plus petit. Il est également utile de faire passer la page en direct par Google PageSpeed Insights pour vérifier que le fond de particules n'a pas ralenti votre temps de chargement.

Utiliser le plugin Particle Background WP

Une autre façon d'ajouter des fonds de particules à votre site WordPress est le plugin Particle Background WP.

Tarifs : Gratuit
Plan gratuit / Essai : Oui
Fonctionnalités remarquables : Effets de particules de base, prise en charge des shortcodes, paramètres simples
Note : B
Idéal pour : Les utilisateurs qui souhaitent une option gratuite et légère

Ceci est un plugin WordPress gratuit particle.js. Ses options de personnalisation ne sont pas aussi faciles ou étendues que celles de SeedProd.

Tout d'abord, installez et activez Particle Background WP sur votre site. Ensuite, cliquez sur l'élément de menu Particle Background dans votre panneau d'administration WordPress.

Dans le premier panneau, vous pouvez afficher la bannière de fond de particules sur votre page d'accueil et vos pages de blog ou avec un shortcode. Nous avons activé la bannière pour notre page de blog.

En dessous se trouve une zone de contenu que vous pouvez personnaliser avec l'éditeur. Ici, vous pouvez entrer un titre, une description et un appel à l'action pour votre bannière.

Le panneau suivant comprend des options de personnalisation des particules, notamment la densité, la couleur et la couleur d'arrière-plan. Vous pouvez également entrer du CSS personnalisé.

Après avoir enregistré vos modifications, visitez votre page de blog pour voir la bannière avec son fond de particules en place.

Vous pouvez également utiliser le shortcode pour ajouter la même bannière sur n'importe quelle page ou article. Une chose à noter : votre bannière se superpose au contenu, et non derrière comme c'est le cas avec SeedProd.

Plus de façons d'ajouter Particle.js à WordPress

Si vous utilisez un constructeur de pages différent, quelques extensions peuvent apporter des effets de particules à votre configuration existante :

• Ultimate Addons for Elementor : Ajoute des effets de particules aux pages créées avec le plugin de construction de pages Elementor.
• Ultimate Addons for Beaver Builder : Ajoute des animations de particules aux pages créées avec le plugin Beaver Builder.
• Manuellement : Je ne recommande cette approche que si vous êtes à l'aise avec le HTML, le PHP, le JavaScript et d'autres langages de codage.

La façon la plus simple d'ajouter un fond de particules à WordPress est d'utiliser SeedProd. Cela ne nécessite aucun codage et vous offre des options de personnalisation qui se configurent en quelques clics.

FAQ sur les arrière-plans de particules WordPress

L'ajout d'un fond de particules ralentit-il mon site WordPress ?

Cela peut arriver, car particle.js exécute du JavaScript supplémentaire que le navigateur traite à chaque image. L'impact dépend du nombre de particules que vous rendez.

Gardez la densité faible, limitez l'effet à une section clé et testez sur mobile. Un fond de particules léger sur une section principale provoque rarement un ralentissement notable.

Puis-je utiliser un fond de particules sur n'importe quelle section de ma page WordPress ?

Avec SeedProd, oui. Les fonds de particules fonctionnent sur n'importe quelle section d'une page, vous pouvez donc appliquer l'effet à un bloc principal, une bande d'appel à l'action ou un pied de page sans affecter le reste de la page.

Quels styles de particules SeedProd prend-il en charge ?

SeedProd inclut six styles intégrés : Polygon (par défaut), Space, Snow, Snowflakes, Christmas et Halloween. Il existe également une option Personnalisé qui vous permet de charger votre propre configuration JSON particle.js pour un contrôle total de la forme, de la densité et du mouvement.

Existe-t-il un plugin WordPress gratuit pour les arrière-plans de particules ?

Oui. Particle Background WP est un plugin gratuit qui ajoute une bannière de particules à l'aide d'un shortcode ou d'un réglage de page d'accueil. Il est plus limité que SeedProd, et la bannière se superpose à votre contenu plutôt que de se trouver derrière.

Les arrière-plans de particules fonctionnent-ils sur les appareils mobiles ?

Oui, à condition de les optimiser. Réduisez la densité des particules pour mobile, environ 30 particules est une cible sûre, et testez l'effet sur un appareil réel.

L'aperçu mobile intégré de SeedProd vous permet de vérifier le rendu de l'arrière-plan sur un écran plus petit avant de publier.

Commencez à ajouter des arrière-plans de particules dès aujourd'hui

Une fois que vous avez votre pièce de portfolio ou votre section héros à l'esprit, un arrière-plan de particules transforme cette mise en page plate et lui donne de la profondeur en quelques clics. Avec SeedProd, vous pouvez le construire, le personnaliser et le publier sans écrire une seule ligne de code.

Vous pourriez également aimer notre guide sur les meilleurs plugins de galerie photo WordPress pour compléter vos nouveaux arrière-plans de particules. Ou consultez comment ajouter un effet de neige dans WordPress.

Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.