Comment ajouter un arrière-plan animé dans WordPress (2 méthodes)

Pensez-vous qu'ajouter un arrière-plan animé dans WordPress est compliqué ? Détrompez-vous.

Nous pensions la même chose, mais après quelques expérimentations, nous avons découvert que ce n'est en fait pas si difficile.

Nous savons à quel point il est important de captiver vos visiteurs dès qu'ils arrivent sur votre site. Un arrière-plan animé est un excellent élément de conception WordPress pour créer une première impression mémorable sans submerger votre contenu.

Mais si vous craignez les temps de chargement lents, un codage complexe ou des plugins coûteux, ne vous inquiétez pas. Nous avons découvert une solution simple utilisant particle.js, une bibliothèque JavaScript légère qui crée de superbes arrière-plans animés sans compromettre les performances de votre site.

Dans ce guide, nous vous montrerons exactement comment ajouter de belles animations de particules à votre site WordPress, que vous préfériez utiliser un plugin ou un peu de code. Faisons ressortir votre site Web !

Pourquoi ajouter un arrière-plan animé dans WordPress ?

La personnalisation de votre arrière-plan de site Web peut sembler sans importance au début. Mais, après des années passées dans le monde de WordPress et de la conception Web, nous avons remarqué que les sites avec des arrière-plans animés conçus avec soin ont tendance à maintenir l'engagement des visiteurs plus longtemps.

Un arrière-plan animé peut améliorer l'attrait visuel de votre site Web, le rendant plus interactif et accrocheur pour les visiteurs. Il donne l'impression que votre site WordPress utilise une conception innovante et de haute qualité.

De nombreux sites Web utilisent également des effets animés lorsqu'ils souhaitent célébrer une occasion spéciale.

Par exemple, vous pouvez voir des boutiques e-commerce ajouter des flocons de neige animés ou des sapins de Noël qui tombent sur leurs pages Web pour créer une atmosphère festive pour la période des fêtes.

Certains sites Web utilisent également une animation de fond de préchargement.

Avec cela, les visiteurs peuvent avoir l'impression que le site se charge, ce qui les rend plus susceptibles d'attendre patiemment que les éléments de la page Web apparaissent. Vous pouvez lire notre article sur l'ajout d'une animation de fond de préchargement pour plus d'informations.

Dans ce guide, nous vous montrerons comment ajouter un arrière-plan animé à l'aide de particle.js. Si vous souhaitez savoir ce que c'est, continuez simplement à la section suivante.

Qu'est-ce que particle.js ?

particle.js est une bibliothèque JavaScript qui vous permet de créer des effets visuels époustouflants avec des particules, qui sont de petits éléments graphiques animés.

Ces particules peuvent être personnalisées par taille, couleur, forme et mouvement. Elles réagissent également aux interactions de l'utilisateur, telles que les mouvements de la souris ou les clics, pour ajouter une couche supplémentaire d'engagement à votre site Web.

Maintenant que vous savez ce qu'est particle.js, voyons comment vous pouvez l'utiliser pour ajouter un arrière-plan animé dans WordPress. Il existe deux méthodes pour les débutants, et vous pouvez naviguer dans ce guide avec les liens rapides ci-dessous :

• Méthode 1 : Comment ajouter un arrière-plan animé avec un constructeur de pages (sans code)
• Method 2: How to Add an Animated Background With Code (Free)

Méthode 1 : Comment ajouter un arrière-plan animé avec un constructeur de pages (sans code)

La première méthode consiste à utiliser SeedProd, qui est le meilleur plugin de création de pages WordPress sur le marché. Il offre une fonctionnalité de fond de particules intégrée et hautement personnalisable.

Avec lui, vous pouvez choisir l'une des animations de particules déjà disponibles ou en ajouter une personnalisée vous-même. Il est également possible de modifier le nombre de particules, les mouvements d'animation et les effets de survol pour répondre à vos préférences.

Pour plus d'informations sur SeedProd, vous pouvez consulter notre avis détaillé sur SeedProd. Nous avons couvert tous les aspects, y compris les options de personnalisation, les choix de modèles et de blocs, ainsi que les intégrations tierces.

Dans ce guide, nous utiliserons la version premium de SeedProd, car la fonctionnalité d'arrière-plan de particules y est disponible.

Pour utiliser SeedProd, vous devrez d'abord installer et activer le plugin. Vous trouverez plus de détails à ce sujet dans notre guide pour débutants sur l'installation d'un plugin WordPress.

Après cela, copiez-collez simplement votre clé de licence dans le plugin. Allez simplement dans votre tableau de bord WordPress, naviguez vers SeedProd » Paramètres, et insérez la clé de licence dans le champ approprié. Cliquez ensuite sur « Vérifier la clé ».

Si vous souhaitez d'abord personnaliser votre thème avant d'ajouter un arrière-plan de particules dans WordPress, vous pouvez suivre notre guide sur comment créer facilement un thème personnalisé avec SeedProd.

Maintenant, vous devez ouvrir l'éditeur par glisser-déposer pour la page dans laquelle vous souhaitez insérer l'arrière-plan de particules. Si vous avez créé un thème avec SeedProd, vous devriez déjà avoir des pages ajoutées dans WordPress pour vous.

Ensuite, allez simplement dans Pages » Toutes les pages et survolez une page avec votre curseur, comme une page d'accueil, une page à propos, ou autre chose. Choisissez ensuite le bouton « Modifier avec SeedProd ».

Si cette option n'apparaît pas de votre côté, ne vous inquiétez pas.

Cliquez simplement sur le bouton « Modifier » à la place, et dans l'éditeur de blocs, cliquez sur le bouton « Modifier avec SeedProd ».

Vous devriez maintenant être dans le constructeur de pages de SeedProd.

Survolez simplement votre curseur sur la section de la page où vous souhaitez ajouter l'arrière-plan de particules dans WordPress et sélectionnez-la. Vous saurez que vous avez sélectionné une section si une bordure violette et une barre d'outils apparaissent en haut de celle-ci.

Une fois que vous avez cliqué sur une section, la barre latérale de la section à gauche devrait apparaître.

Tout ce que vous avez à faire maintenant est de passer à l'onglet « Avancé » et d'activer le paramètre « Activer l'arrière-plan de particules ».

Il existe plusieurs paramètres d'arrière-plan de particules que vous pouvez configurer.

L'un est le Style, où vous pouvez choisir parmi tous les effets d'animation disponibles, qui sont Polygone, Espace, Neige, Flocons de neige, Noël, Halloween et Personnalisé.

Nous parlerons davantage de l'ajout d'une animation d'arrière-plan de particules personnalisée plus loin dans l'article.

Il y a aussi l'Opacité, qui contrôle l'opacité de l'animation, et la Direction du flux, qui définit la direction vers laquelle les particules doivent se diriger.

Pour certains styles de particules, vous pouvez également personnaliser leurs couleurs.

Cependant, pour Noël et Halloween, il n'y a pas de paramètres de couleur, car les particules sont des images.

Sous Couleur se trouvent les « Paramètres avancés ». L'activation de cette option vous permet de personnaliser le Nombre de particules, la Taille des particules, la Vitesse de déplacement et l'Effet de survol.

Avec la dernière fonctionnalité, les particules se déplaceront selon la direction de votre souris. Notez que cela ne fonctionnera pas lorsque vous visualisez votre site Web WordPress dans la zone du constructeur de pages ou si le contenu de la section occupe tout l'espace de cette section.

Et c'est tout ce que vous avez à faire.

Une fois que vous avez terminé de personnaliser votre arrière-plan de particules WordPress, vous pouvez cliquer sur le bouton « Enregistrer » en haut à droite pour publier les modifications. Vous pouvez également choisir le bouton « Aperçu » pour voir à quoi ressemble l'arrière-plan de particules.

Créer un arrière-plan de particules personnalisé pour votre site Web

Si les effets animés disponibles ne répondent pas à vos besoins, vous pouvez également en créer un personnalisé. Ce que vous devez faire est de sélectionner le style « Personnalisé » dans les paramètres de l'arrière-plan de particules.

Après cela, cliquez sur le lien dans la ligne « Veuillez visiter le lien ici et choisissez les attributs requis pour la particule. »

Ce lien vous mènera au site web de Vincent Garreau, qui propose une bibliothèque Javascript pour les animations de particules.

Sur ce site web, vous pouvez personnaliser le design de vos particules, leur interactivité et la couleur de fond.

Dans le réglage « particules », vous pouvez ajuster le nombre de particules, leur couleur, leur forme, leur taille, leur opacité, les lignes qui les relient, et leur mouvement.

En dessous se trouve « interactivité ».

C'est ici que vous pouvez ajuster le comportement des particules lorsque vous passez la souris dessus et que vous cliquez dessus.

Enfin, vous avez « arrière-plan de la page (css) ». Ici, vous pouvez changer la couleur de fond de l'animation de particules et modifier sa taille, sa position et sa répétition.

Si nécessaire, vous pouvez également télécharger l'URL d'une image d'arrière-plan personnalisée.

Une fois que vous avez terminé, vous pouvez cliquer sur le bouton « Télécharger la configuration actuelle (json) » en bas.

Cela téléchargera le fichier de code JSON de l'arrière-plan de particules, que vous devez ouvrir à l'aide d'un éditeur de texte. Gardez la fenêtre de l'éditeur de texte ouverte pendant que vous continuez les étapes suivantes.

Maintenant, revenons au constructeur de pages SeedProd.

Naviguez à nouveau vers le menu Arrière-plan de particules dans les paramètres avancés. Ensuite, copiez et collez le code JSON dans la zone de texte appropriée.

Vous devriez maintenant voir votre arrière-plan de particules dans la section d'aperçu.

Cliquez sur « Aperçu » pour voir à quoi ressemble l'arrière-plan de particules sur le front-end et sur « Enregistrer » pour finaliser les modifications.

Voici un exemple de ce à quoi peut ressembler l'arrière-plan de particules :

Méthode 2 : Comment ajouter un arrière-plan animé avec du code (gratuit)

Si l'utilisation d'un constructeur de pages pour insérer un arrière-plan animé vous semble trop compliquée, vous pouvez également l'ajouter en utilisant du code. Ne vous inquiétez pas si vous n'êtes pas un expert en codage, car nous utiliserons WPCode pour rendre ce processus sûr et simple.

Vous pouvez utiliser la version gratuite ou premium de WPCode pour ce tutoriel. Bien que la version gratuite fonctionne parfaitement, la version premium inclut des fonctionnalités utiles comme la génération de code par IA et un mode de test.

Vous pouvez lire notre avis sur WPCode si vous avez besoin de plus d'informations.

Tout d'abord, installez le plugin sur votre administration WordPress.

Après l'activation, allez dans Extraits de code » + Ajouter un extrait dans votre tableau de bord, puis cliquez sur ‘Ajouter votre code personnalisé (Nouvel extrait)’ suivi du bouton ‘+ Ajouter un extrait personnalisé’.

Maintenant, vous devrez sélectionner le type de votre extrait.

Comme nous allons travailler avec une combinaison de HTML, JavaScript et CSS, vous pouvez choisir ‘Extrait HTML’ parmi les options.

Maintenant, donnez un nom facile à retenir à votre extrait.

Cela peut être quelque chose de simple comme ‘Arrière-plan Particle.js’.

Maintenant, copiez et collez le code ci-dessous.

Ce code a été adapté du même site web de Vincent Garreau que celui présenté dans la première méthode, mais nous allons vous montrer comment le personnaliser davantage avec du code uniquement :

<!-- HTML --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Particles.js Background</title> <!-- Include the particles.js library --> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <!-- Include your custom styles --> <style> /* Reset styles */ body { margin: 0; font: normal 75% Arial, Helvetica, sans-serif; } canvas { display: block; vertical-align: bottom; } /* Particles.js container */ #particles-js { position: fixed; top: 0; width: 100%; height: 100%; /* Background color; change this to any valid CSS color value */ background-color: #b61924; /* <-- Customize background color here */ /* Optional background image; add the URL inside the quotes */ background-image: url(""); /* <-- Add background image URL here */ background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; z-index: -1; /* Ensure the particles are behind other content */ } /* Optional stats styles */ .count-particles { background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: 0.8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; border-radius: 0 0 3px 3px; -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } .js-count-particles { font-size: 1.1em; } </style> </head> <body> <!-- Particles.js container --> <div id="particles-js"></div> <!-- Optional Stats Display --> <div class="count-particles"> <span class="js-count-particles">--</span> particles </div> <!-- Initialize particles.js --> <script> /* Customize the particles.js parameters below */ particlesJS("particles-js", { "particles": { "number": { "value": 80, /* <-- Number of particles; adjust this value */ "density": { "enable": true, "value_area": 800 /* <-- Particle density area */ } }, "color": { "value": "#ffffff" /* <-- Particle color; change to any valid CSS color */ }, "shape": { "type": "circle", /* <-- Particle shape: "circle", "edge", "triangle", etc. */ "stroke": { "width": 0, "color": "#000000" /* <-- Stroke color of particles */ }, "polygon": { "nb_sides": 5 /* <-- Number of sides for polygon shape */ }, "image": { "src": "img/github.svg", /* <-- URL of custom image for particles */ "width": 100, "height": 100 } }, "opacity": { "value": 0.5, /* <-- Opacity of particles */ "random": false, /* <-- Whether opacity is random */ "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 3, /* <-- Size of particles; adjust to change particle size */ "random": true, /* <-- Whether particle size is random */ "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, /* <-- Enable lines between particles */ "distance": 150, /* <-- Maximum distance for linking particles */ "color": "#ffffff", /* <-- Color of the lines */ "opacity": 0.4, /* <-- Opacity of the lines */ "width": 1 /* <-- Width of the lines */ }, "move": { "enable": true, /* <-- Enable particle movement */ "speed": 6, /* <-- Speed of particle movement */ "direction": "none", /* <-- Direction of movement */ "random": false, /* <-- Randomize movement direction */ "straight": false, /* <-- Move in straight lines */ "out_mode": "out", /* <-- Action when particles go out of canvas */ "bounce": false, /* <-- Enable particles to bounce off edges */ "attract": { "enable": false, /* <-- Attract particles toward mouse */ "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", /* <-- Interaction events occur on "canvas" or "window" */ "events": { "onhover": { "enable": true, /* <-- Enable interaction on hover */ "mode": "repulse" /* <-- Interaction mode on hover: "grab", "bubble", "repulse" */ }, "onclick": { "enable": true, /* <-- Enable interaction on click */ "mode": "push" /* <-- Interaction mode on click: "push", "remove", "bubble", "repulse" */ }, "resize": true /* <-- Enable reactivity to window resize */ }, "modes": { "grab": { "distance": 400, /* <-- Distance for grab mode */ "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, /* <-- Distance for bubble mode */ "size": 40, /* <-- Size of particles in bubble mode */ "duration": 2, /* <-- Duration of bubble effect */ "opacity": 8, /* <-- Opacity of particles in bubble mode */ "speed": 3 /* <-- Speed of bubble effect */ }, "repulse": { "distance": 200, /* <-- Distance for repulse mode */ "duration": 0.4 /* <-- Duration of repulse effect */ }, "push": { "particles_nb": 4 /* <-- Number of particles added on click */ }, "remove": { "particles_nb": 2 /* <-- Number of particles removed on click */ } } }, "retina_detect": true /* <-- Enable retina display support */ }); /* Optional: Variables for stats.js (if used) */ var count_particles, stats, update; </script> </body> </html> 

Ce code est assez long, alors examinons les parties que vous pouvez personnaliser.

Pour changer la couleur de fond, modifiez la propriété background-color sous #particles-js. Remplacez #b61924 par n'importe quelle valeur de couleur CSS valide, telle que #FF0000 pour le rouge ou rgb(255,0,0) ou même des noms de couleur comme red.

background-color: #b61924; /* <-- Customize background color here */ 

Pour ajouter une image d'arrière-plan, définissez la propriété background-image en ajoutant l'URL de votre image à l'intérieur de url("").

Assurez-vous que le chemin ou l'URL de l'image d'arrière-plan est correct.

background-image: url("path/to/your/image.jpg"); /* <-- Add background image URL here */ 

Pour changer le nombre de particules, ajustez la "value" sous "number".

Augmenter la valeur ajoute plus de particules, tandis que la diminuer réduit le nombre.

"number": { "value": 80, /* <-- Number of particles; adjust this value */ // ... } 

Pour changer la taille des particules, vous pouvez modifier la "value" sous "size".

Un nombre plus grand augmente la taille des particules, et vice versa.

"size": { "value": 3, /* <-- Size of particles; adjust to change particle size */ "random": true, /* <-- Set to false for uniform size */ // ... } 

Pour changer la couleur des particules, remplacez la "value" dans "color" par n'importe quelle valeur de couleur CSS valide.

"color": { "value": "#ffffff" /* <-- Particle color; change to any valid CSS color */ }, 

Pour changer la forme des particules, vous pouvez modifier le "type" sous "shape".

Vous pouvez utiliser des formes comme "circle", "edge", "triangle", "polygon",  ou même "star".

"shape": { "type": "circle", /* <-- Particle shape: "circle", "edge", "triangle", etc. */ // ... }, 

Pour changer les propriétés des lignes entre les particules, vous pouvez ajuster les propriétés sous "line_linked".

Par exemple, si vous changez "enable": true en "enable": false, vous ne verrez aucune ligne reliant les particules.

"line_linked": { "enable": true, /* <-- Enable lines between particles */ // ... }, 

Vous pouvez également changer la couleur, l'opacité et la largeur des lignes.

"line_linked": { "color": "#ffffff", /* <-- Line color */ "opacity": 0.4, /* <-- Line opacity */ "width": 1, /* <-- Line width */ // ... }, 

Ne vous inquiétez pas si vous devez apporter des modifications plus tard, car vous pouvez toujours modifier le code même après l'activation.

Une fois que vous avez personnalisé le code à votre guise, il est temps de configurer où et quand votre arrière-plan animé apparaît.

Faites défiler vers le bas jusqu'à la section Insertion de votre extrait WPCode. Assurez-vous de sélectionner « Insertion automatique » comme méthode d'insertion et choisissez « Pied de page de tout le site » pour l'emplacement.

WPCode offre également une fonctionnalité puissante appelée logique conditionnelle, disponible dans les versions gratuites et premium. Cette fonctionnalité vous permet de contrôler exactement où votre arrière-plan animé apparaît sur votre site Web.

Pour utiliser cette fonctionnalité, localisez la section « Logique conditionnelle intelligente » et activez l’option « Activer la logique ». Vous verrez des options pour définir des conditions spécifiques pour l’affichage de votre arrière-plan.

Par exemple, si vous souhaitez que l’arrière-plan animé n’apparaisse que sur votre page d’accueil, sélectionnez « URL de la page » dans le menu déroulant des conditions, choisissez « Est » et entrez l’URL de votre page d’accueil.

Vous pouvez ajouter plusieurs groupes de conditions en cliquant sur le bouton « + Ajouter un nouveau groupe ».

La dernière étape consiste à activer votre extrait. Recherchez le bouton « Inactif » en haut de la page et cliquez dessus pour le changer en « Actif ». N’oubliez pas de cliquer sur « Enregistrer l’extrait » pour conserver vos modifications.

C’est tout ! Visitez votre site Web sur mobile ou sur ordinateur pour voir votre nouvel arrière-plan animé en action. Voici à quoi il ressemble sur notre site de test :

Les arrière-plans animés ralentissent-ils les sites Web ?

Si ce n’est pas fait correctement, les arrière-plans animés peuvent ralentir votre site Web. Mais il existe des moyens d’éviter cela.

Pour les arrière-plans à particules, le nombre de particules et leur vitesse de déplacement peuvent affecter la rapidité de chargement de votre page. Plus il y a de particules et plus le mouvement est rapide, plus la puissance de traitement nécessaire est importante, ce qui peut ralentir les choses.

Pour résoudre ce problème, vous pouvez essayer différents réglages pour la densité et la vitesse des particules afin de trouver ce qui convient le mieux à votre site Web. Pendant ce processus, vous pouvez effectuer des tests de vitesse WordPress pour voir les effets.

Il est également conseillé de n’utiliser des arrière-plans animés que sur les pages où ils sont le plus importants. Vous n’en avez pas besoin partout, sinon ils pourraient devenir ennuyeux.

Enfin, pour que votre site web soit rapide avec un arrière-plan de particules, assurez-vous de suivre les meilleures pratiques en matière de vitesse de site web. Vous pouvez en apprendre davantage dans notre guide ultime pour rendre WordPress plus rapide.

Nous espérons que cet article vous a aidé à apprendre comment ajouter un arrière-plan de particules animé dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment obtenir des retours sur la conception de votre site web dans WordPress et notre sélection d'experts des meilleurs constructeurs de thèmes WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.