Voulez-vous ajouter un arrière-plan de particules à votre site WordPress ?
Les effets animés de particle.js peuvent rendre votre site plus interactif et aider le contenu important à se démarquer. Dans ce guide, je vais vous montrer étape par étape comment ajouter des arrière-plans de particules dans WordPress en utilisant un plugin ou un constructeur de pages, sans aucun codage requis.
Vous verrez également comment personnaliser les particules pour votre propre style et garder votre site rapide et adapté aux mobiles.
Étapes rapides pour ajouter des arrière-plans de particules à WordPress :
Qu'est-ce qu'un arrière-plan de particules ?
Un arrière-plan de particules est un ensemble animé d'éléments mobiles (particules) 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.
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 peuvent ajouter une touche dynamique et interactive à votre site. Ils aident à attirer l'attention sur des sections clés et à maintenir l'engagement des visiteurs plus longtemps.
- Mettez en évidence le contenu important : Utilisez un arrière-plan de particules subtil derrière les sections principales ou les appels à l'action.
- Montrez votre créativité : Parfait pour les portfolios, les agences créatives ou les sites Web axés sur le design.
- Améliorez les temps de chargement perçus : Vous pouvez même utiliser les effets de particle.js comme animations de chargement pendant que des médias lourds se chargent en arrière-plan.
Voici un exemple : un site de portfolio de design pourrait ajouter une animation de particules douce à son en-tête pour montrer sa créativité sans distraire du travail exposé.
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.
Premièrement, 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. Nous recommandons 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 d'ajouter des effets de particules à votre site 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 WordPress.
La dernière option consiste à utiliser du code personnalisé pour ajouter manuellement des effets de particules à votre site Web. Nous ne recommandons cette option 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 !
Ajouter un arrière-plan de particules aux sections WordPress avec SeedProd
Tout d'abord, nous allons utiliser un plugin constructeur de pages WordPress avec la bibliothèque particles.js intégrée à ses fonctionnalités : SeedProd.
SeedProd est le meilleur constructeur de sites Web et de pages pour WordPress, avec plus d'un million d'utilisateurs. Vous pouvez utiliser son constructeur par glisser-déposer pour créer des thèmes WordPress personnalisés, des pages de destination, des sites Web WooCommerce et toute autre mise en page sans écrire de code.
Avec des centaines de modèles de pages préconçus, d'éléments de conception et d'arrière-plans de particules intégrés, la création d'animations de particules époustouflantes ne prend que quelques minutes.
Suivez les étapes ci-dessous pour ajouter des arrière-plans de particules à votre site avec SeedProd.
Étape 1. Installer et activer SeedProd
Tout d'abord, cliquez ici pour commencer avec SeedProd et télécharger le plugin. Ensuite, installez et activez le plugin sur votre site Web WordPress.
Si vous avez besoin d'aide pour cela, vous pouvez consulter notre documentation sur l'installation de SeedProd. Elle vous guide tout au long du processus d'installation et vous aide à trouver et 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 de modèle que vous sélectionnez dépend si vous souhaitez créer un thème WordPress ou une page de destination.
Avec le Theme Builder de SeedProd, vous pouvez créer un thème WordPress complet à partir de zéro. Cependant, le choix de cette option écrasera la conception de votre site Web existant.
Alternativement, le Landing Page Builder vous permet de créer n'importe quelle page sans toucher à votre thème existant. Pour ce guide, nous choisirons cette option.
Depuis votre tableau de bord d'administration WordPress, accédez à SeedProd » Pages de destination. Sur cette page, 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 les filtrer par type en cliquant sur 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 ouvrira une fenêtre contextuelle où vous pourrez entrer le nom de votre page de destination. SeedProd génère automatiquement le slug (URL) de la page de destination pour vous, mais si vous le souhaitez, vous pouvez le modifier.
Lorsque vous êtes satisfait de ces détails, cliquez sur le bouton Enregistrer et commencer à modifier la page.
Navigation dans le constructeur de pages
Votre modèle s'ouvrira maintenant dans l'éditeur visuel par glisser-déposer de SeedProd. Vous verrez un panneau de gauche avec des blocs, des sections et des paramètres, ainsi qu'un aperçu en direct sur le côté droit.
Cliquer n'importe où sur l'aperçu vous permet de visualiser et de personnaliser les paramètres de cet élément et de voir les changements en temps réel.
Par exemple, cliquer sur la section d'en-tête principale ouvre ses paramètres dans le panneau de gauche. À partir de là, vous pouvez choisir une nouvelle image d'arrière-plan, choisir une position d'arrière-plan différente et assombrir l'arrière-plan avec une superposition de couleur.
De plus, vous pouvez ajouter de nouveaux éléments à votre modèle en les faisant glisser depuis le panneau de blocs de gauche et en les déposant à l'endroit souhaité.
Étape 3. Activer et personnaliser les arrière-plans de particules
Comme nous l'avons mentionné précédemment, SeedProd intègre particle.js dans les paramètres de l'éditeur de pages. Actuellement, vous pouvez utiliser cette fonctionnalité sur n'importe quelle section de page.
Pour ce faire, cliquez sur n'importe quelle section jusqu'à ce que vous voyiez une bordure violette, puis sélectionnez l'onglet Avancé.
Trouvez maintenant l'en-tête Arrière-plan de particules, développez-le et activez le bouton Activer l'arrière-plan de particules.
Immédiatement, vous verrez un effet d'animation de polygone sur l'arrière-plan de la section.
Si vous cliquez sur le menu déroulant « Style », vous pouvez changer les particules en :
- Espace
- Neige
- Flocons de neige
- Noël
- Halloween
- Personnalisé
Après avoir choisi un style de particules, vous pouvez définir l'opacité des particules, la direction du flux et la couleur.
Si vous souhaitez plus de contrôle sur la personnalisation des particules, activez le bouton Paramètres avancés.
Ici, vous pouvez augmenter le nombre de particules, modifier leur taille et utiliser le sélecteur pour ajuster leur vitesse de déplacement.
Remarque : Augmenter le nombre de particules peut avoir un impact sur la vitesse de votre page. Il est préférable de maintenir ce paramètre aussi bas que possible pour de meilleures performances.
Dans le même panneau se trouve une option pour activer les effets de survol des particules. Si vous l'activez, les particules s'éparpilleront lorsque vous passerez votre curseur dessus. Cependant, vous ne pourrez voir cet effet qu'en prévisualisant votre page en dehors de l'éditeur.
Ajout d'arrière-plans de particules personnalisés
Si vous souhaitez ajouter des effets de particules personnalisés, choisissez simplement l'option Personnalisé dans le menu déroulant Style. Comme vous pouvez le voir, les instructions indiquent que vous devrez ajouter un fichier JSON personnalisé.
Heureusement, les instructions incluent un lien vers vincentgarreau.com/particle.js, une bibliothèque JavaScript qui vous permet de définir des attributs personnalisés pour votre arrière-plan de particules en pointant et en cliquant.
Dans le panneau de configuration JSON des particules, vous pouvez choisir des formes, des densités, des tailles, des vitesses, des couleurs personnalisées, et plus encore. Vous pouvez également définir un CSS personnalisé pour l'arrière-plan et activer les effets de mouvement.
Lorsque vous êtes satisfait de vos paramètres de particules, cliquez sur l'en-tête « Télécharger la configuration actuelle ». Cela téléchargera 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 de pages.
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. N'oubliez pas de cliquer sur Enregistrer pour sauvegarder vos modifications.
Étape 4. Publiez vos modifications
Une fois que vous êtes satisfait des personnalisations de votre page de destination, vous êtes prêt à la mettre en ligne.
Pour ce faire, cliquez sur la flèche déroulante Enregistrer, puis sur Publier.
Vous pouvez maintenant visiter votre page de destination pour voir votre arrière-plan de particules en action.
Utiliser le plugin Particle Background WP
Une autre façon d'ajouter des arrière-plans de particules à votre site WordPress est d'utiliser le plugin Particle Background WP.
| Tarifs : Gratuit |
| Plan gratuit / Essai : Oui |
| Fonctionnalités principales : 🔹 Effets de particules de base 🔹 Support 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 pour particle.js. Cependant, ses options de personnalisation ne sont pas aussi faciles ou étendues que celles de SeedProd.
Tout d'abord, vous devrez installer et activer Particle Background WP sur votre site WordPress. 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 d'arrière-plan de particules sur vos pages d'accueil et pages de blog ou avec le 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 WYSIWYG. Ici, vous pouvez entrer un titre pour votre bannière, une description et un appel à l'action.
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, vous pouvez visiter votre page de blog et voir la bannière avec un arrière-plan de particules en place.
Vous pouvez également utiliser le shortcode pour ajouter la même bannière sur n'importe quelle page ou publication. Cependant, il est important de noter que votre bannière se superposera au contenu, et non derrière, comme sur SeedProd.
Plus de façons d'ajouter Particle.js à WordPress
Si vous cherchez toujours d'autres moyens d'ajouter particle.js à votre site WordPress, les outils suivants pourraient vous être utiles :
- Ultimate Addons for Elementor : Avec ce module complémentaire, vous pouvez ajouter des effets de particules aux pages que vous avez créées à l'aide du constructeur de pages Elementor.
- Ultimate Addons for Beaver Builder : Ajoutez des animations de particules aux pages créées à l'aide du plugin Beaver Builder.
- Manuellement : Nous recommandons cette approche uniquement si vous êtes à l'aise avec le HTML, le PHP, le JavaScript et d'autres langages de codage.
En fin de compte, le moyen le plus simple d'ajouter des arrière-plans de particules à WordPress est avec SeedProd. Il est facile à utiliser, ne nécessite aucun codage et offre une multitude d'options de personnalisation qui s'installent en quelques clics.
FAQ sur les arrière-plans de particules WordPress
Non, vous n'avez pas besoin d'expérience en codage pour ajouter des arrière-plans de particules à WordPress. SeedProd dispose d'une interface sans code pour faciliter l'ajout de l'effet à votre site sans code.
Bien que les arrière-plans de particules.js puissent être visuellement attrayants, ils nécessitent du JavaScript supplémentaire et peuvent ralentir le temps de chargement de votre site Web. Il est important d'optimiser votre site pour garantir qu'il se charge rapidement et n'affecte pas négativement l'expérience utilisateur.
Nous suggérons de n'utiliser que des arrière-plans de particules à faible densité sur les zones les plus importantes de votre site.
Oui ! SeedProd vous permet de personnaliser la couleur, la forme, la densité et d'autres paramètres des particules pour créer un effet unique et visuellement attrayant sur votre site Web.
Oui, les arrière-plans de particules.js peuvent être adaptés aux mobiles s'ils sont correctement optimisés. Cependant, il est essentiel de tester votre arrière-plan de particules sur différents appareils et tailles d'écran pour vous assurer qu'il n'affecte pas négativement l'expérience utilisateur. Vous pouvez le faire avec la fonction d'aperçu mobile intégrée de SeedProd.
Oui, vous pouvez ajouter manuellement du code particle.js à votre thème WordPress, mais cela nécessite de modifier les fichiers de modèle et peut être plus difficile à maintenir.
Et voilà !
Nous espérons que ce guide vous a aidé à apprendre comment créer des arrière-plans de particules dans WordPress.
Vous pourriez également aimer ce guide sur les meilleurs plugins de galerie photo WordPress pour compléter vos nouveaux arrière-plans de particules. Ou ce guide sur comment ajouter des effets 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.
