Comment créer des arrière-plans animés Particle.js dans WordPress

Voulez-vous ajouter un effet de fond de particules animées à votre site Web WordPress ?

En ajoutant un arrière-plan avec particule.js à votre site, vous pouvez faire ressortir le contenu important et augmenter l'interactivité de votre site WordPress. Dans cet article, nous allons vous montrer comment ajouter facilement des arrière-plans de particules à n'importe quelle page WordPress.

Considérez-le comme un feu d'artifice numérique, où chaque particule est comme un petit feu d'artifice qui peut se déplacer et changer de couleur en réponse aux interactions de l'utilisateur ou à d'autres événements sur la page.

Pourquoi ajouter des arrière-plans Particle.js à WordPress ?

Les arrière-plans de particules peuvent ajouter une couche supplémentaire d'intérêt visuel et d'interactivité à votre site WordPress, le rendant plus attrayant et mémorable pour les visiteurs.

Par exemple, si vous dirigez une agence de création ou un portefeuille de conception, vous pouvez utiliser Particle.js pour créer un effet visuel accrocheur qui met en valeur votre créativité et vos compétences en conception. Vous pouvez utiliser des arrière-plans de particules pour créer un arrière-plan dynamique et visuellement attrayant pour votre en-tête, votre section héros ou toute autre section de site.

Particle.js peut également créer des animations de chargement uniques et créatives pour garder les visiteurs engagés et divertis en attendant le chargement de votre site. Ceci est particulièrement important pour les zones avec de grandes images ou vidéos, qui peuvent prendre un certain temps à se charger sur des connexions plus lentes.

Dans l'ensemble, Particle.js est un excellent moyen d'ajouter un sentiment d'interactivité et de dynamisme à votre site WordPress, le rendant plus attrayant et mémorable pour vos visiteurs.

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 page WordPress avec des fonctionnalités d'effet de particules intégrées. Nous recommandons cette option aux débutants car elle ne nécessite généralement aucune connaissance en codage ou compétences techniques.

Une autre façon d'ajouter des effets de particules à votre site consiste à utiliser un thème WordPress qui inclut particule.js. C'est pratique si vous démarrez un nouveau site et que vous avez toujours besoin d'un thème WordPress.

La dernière option consiste à utiliser un 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 nous en tiendrons à l'option la plus simple : utiliser un plugin WordPress. Allons-y !

Ajouter un arrière-plan de particules aux sections WordPress à l'aide de SeedProd

Tout d'abord, nous allons utiliser un plugin de création de page WordPress avec la bibliothèque de particules.js intégrée à sa fonctionnalité : 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 page prédéfinis, 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 démarrer avec SeedProd et télécharger le plugin. Ensuite, installez et activez le plugin sur votre site WordPress.

Si vous avez besoin d'aide, vous pouvez consulter notre documentation sur l'installation de SeedProd. Il vous guide tout au long du processus d'installation et de recherche et d'activation de votre clé de licence de plug-in.

Étape 2. Choisissez un modèle prédéfini

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

Avec le générateur de thèmes 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 utiliserons cette option.

Depuis votre tableau de bord d'administration WordPress, accédez à SeedProd » Landing Pages . Sur cette page, vous verrez différents modes de page en haut et la possibilité de créer votre propre page personnalisée.

Allez-y et cliquez sur le bouton Ajouter une nouvelle page de destination .

Ici, vous pouvez choisir parmi des centaines de modèles de page de destination prédéfinis.

Vous pouvez les filtrer par type en cliquant sur les onglets en haut, notamment :

• À venir
• Mode de Maintenance
• 404 pages
• Ventes
• Séminaire en ligne
• Compression de plomb
• Merci
• Connexion

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

Cela ouvrira une fenêtre contextuelle dans laquelle vous pourrez entrer le nom de votre page de destination. SeedProd génère automatiquement le slug de page de destination (URL) 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 .

Naviguer dans le générateur de page

Votre modèle va maintenant s'ouvrir dans l'éditeur visuel glisser-déposer de SeedProd. Vous verrez un panneau de gauche avec des blocs, des sections et des paramètres et un aperçu en direct sur le côté droit.

Cliquer n'importe où sur l'aperçu vous permet d'afficher et de personnaliser les paramètres de cet élément et de voir les modifications 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 couleurs.

De plus, vous pouvez ajouter de nouveaux éléments à votre modèle en les faisant glisser depuis le panneau des blocs de gauche et en les déposant en place.

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

Comme nous l'avons mentionné précédemment, SeedProd a intégré le fichier particule.js dans les paramètres du générateur de page. 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é .

Recherchez maintenant l'en-tête Particle Background , développez-le et activez la bascule Activer l'arrière-plan des particules .

Immédiatement, vous verrez un effet d'animation 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
• Coutume

Après avoir choisi un style de particule, vous pouvez définir l'opacité, la direction du flux et la couleur des particules.

Si vous voulez plus de contrôle sur la personnalisation des particules, activez la bascule Paramètres avancés .

Ici, vous pouvez augmenter le nombre de particules, modifier la taille des particules et utiliser le sélecteur pour régler la vitesse de déplacement des particules.

Remarque : L'augmentation du nombre de particules peut avoir un impact sur la vitesse de votre page. Il est préférable de garder ce paramètre aussi bas que possible pour obtenir les 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 se disperseront lorsque vous passerez dessus avec votre curseur. Cependant, vous ne pouvez voir cet effet que lors de la prévisualisation de votre page en dehors du générateur de page.

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 des particules json, vous pouvez choisir des formes, des densités, des tailles, des vitesses, des couleurs personnalisées, etc. 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.

Maintenant, ouvrez et copiez le code du fichier, puis collez-le dans la zone vide de votre générateur de page.

Votre arrière-plan de particules personnalisé apparaîtra instantanément !

À partir de là, continuez à personnaliser votre page de destination jusqu'à ce qu'elle ressemble exactement à ce que vous souhaitez. N'oubliez pas de cliquer sur Enregistrer pour enregistrer 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 de la liste déroulante Enregistrer, puis cliquez 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 consiste à utiliser le plugin Particle Background WP.

Il s'agit d'un plugin WordPress particule.js gratuit. Cependant, ses options de personnalisation ne sont pas aussi simples ou étendues que 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 de fond de particules sur vos pages d'accueil et 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 saisir un CSS personnalisé.

Après avoir enregistré vos modifications, vous pouvez visiter la page de votre blog et voir la bannière avec un fond 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 sera placée au-dessus du contenu, et non derrière, comme sur SeedProd.

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

Si vous cherchez toujours d'autres façons d'ajouter des particules.js à votre site WordPress, les outils suivants peuvent vous être utiles :

• Addons ultimes pour Elementor : avec cet addon, vous pouvez ajouter des effets de particules aux pages que vous avez créées à l'aide du plug-in de création de pages Elementor.
• Addons ultimes pour Beaver Builder : Ajoutez des animations de particules aux pages créées à l'aide du plug-in Beaver Builder.
• Manuellement : nous ne recommandons cette approche que si vous êtes à l'aise avec HTML, PHP, 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 propose des tonnes d'options de personnalisation qui se configurent en quelques clics.

Questions fréquemment posées

Voilà!

Nous espérons que ce guide vous a aidé à apprendre à créer des arrière-plans de particules dans WordPress. Vous aimerez peut-être aussi ce guide sur les meilleurs plugins de galerie de photos WordPress pour compléter vos nouveaux arrière-plans de particules.

Merci d'avoir lu. Veuillez nous suivre sur YouTube, Twitter et Facebook pour plus de contenu utile pour développer votre entreprise.