Voulez-vous créer un effet de parallaxe sur votre site Web WordPress ? L’effet de défilement parallaxe est un effet de conception qui fait défiler l’image d’arrière-plan plus lentement que le contenu de premier plan. Cela donne un sentiment de profondeur qui s’ajoute à la page sur laquelle l’effet se produit.

Cela peut ajouter une dynamique cool à vos pages WordPress sans avoir à acheter un thème premium.

Il y a trois lignes directrices à suivre lors de la création d’un site Web : avoir un bon contenu, s’assurer que le site fonctionne correctement, et faire en sorte que le site soit beau. L’ajout de simples effets de design à vos pages peut rendre un thème WordPress gratuit commun plus attrayant que certains thèmes premium.

Aujourd’hui, je vais démontrer comment ajouter l’effet parallaxe à WordPress en utilisant n’importe quel thème.

Pourquoi utiliser l’effet parallaxe pour améliorer votre site Web ?

L’amélioration de l’apparence de votre site Web est une tâche permanente. Vous devez toujours vous améliorer et réfléchir à des moyens de rendre votre site plus attrayant. De nombreux visiteurs jugent un site Web uniquement sur la base de l’apparence de la page d’accueil et dès le premier coup d’œil. Ils choisiront de rester ou de partir, ce qui rend la première impression particulièrement importante.

L’apparence de votre site Web commence par le thème que vous choisissez d’utiliser. Il existe de nombreuses façons de modifier l’apparence des thèmes gratuits, mais vous pouvez parfois choisir de payer pour un thème premium qui intègre la fonctionnalité souhaitée.

Bien sûr, vous pouvez ne pas vouloir payer pour des thèmes premium et vous serez heureux de savoir que vous pouvez créer un site Web génial sans dépenser d’argent.

L’une des meilleures façons de rendre un thème dynamique est d’ajouter l’effet de défilement parallaxe à vos pages. Selon la nature de vos images d’arrière-plan et d’avant-plan, la profondeur ajoutée peut vraiment les mettre en valeur.

Aujourd’hui, je vais vous montrer comment ajouter des effets de parallaxe à WordPress en utilisant n’importe quel thème. Il existe plusieurs façons d’ajouter l’effet de parallaxe à votre site Web WordPress. Je vous montrerai comment le faire avec un plugin, et comment le faire en utilisant le HTML.

En relation  Comment découvrir quel thème WordPress est utilisé par un site

Jetons un coup d’œil au plugin en question et voyons tout ce qu’il a à offrir.

Méthode 1 : Utilisation d’un plugin WordPress pour l’effet de défilement parallaxe

Advanced WordPress Backgrounds vous permet d’utiliser des arrière-plans parallaxes avec des images, des vidéos, YouTube et Vimeo. Le plugin a le support de Gutenberg et de WPBakery Page Builder. C’est un plugin simple et facile à utiliser. Il fournit beaucoup de fonctionnalités, mais reste léger et ne ralentira pas votre site Web.

Voici quelques-unes des principales fonctionnalités de Advanced WordPress Backgrounds :

  • Fond de couleur
  • Fond d’image
  • Images de motifs
  • Vidéo auto-hébergée
  • Vidéos YouTube / Vimeo
  • Option de vitesse personnalisée
  • Activer ou désactiver pour les appareils mobiles
  • Effet de défilement
  • Effet d’opacité
  • Effet d’échelle
  • Couleur de superposition
  • Créateur visuel de shortcodes

Et ceci n’est que la partie émergée de l’iceberg. Le plugin vous donne tous les outils dont vous avez besoin pour créer WordPress parallaxe. Nous allons l’installer et le configurer ensemble.

Étape 1 : Installer et activer le plugin

Afin de créer des effets de parallaxe dans WordPress, vous devez d’abord installer et activer le plugin. Cliquez sur Plugins et sélectionnez l’option Add New dans le panneau d’administration à gauche.

Recherchez AWB dans le champ de recherche disponible. Vous obtiendrez des plugins supplémentaires qui pourraient vous être utiles.

Faites défiler vers le bas jusqu’à ce que vous trouviez le plugin Advanced WordPress Backgrounds et cliquez sur le bouton “Installer maintenant” et activez le plugin pour l’utiliser.

Etape 2 : Allez dans n’importe quel article ou page

Contrairement aux autres plugins, le plugin Advanced WordPress Backgrounds n’a pas de page de réglages principale. Au lieu de cela, vous pouvez y accéder sur n’importe quelle page ou article de votre site web.

Allez sur la page ou l’article auquel vous souhaitez ajouter l’effet de parallaxe. Regardez dans la barre d’outils, vous devriez maintenant voir le bouton “Advanced WordPress Background”. Cliquez dessus.

Étape 3 : Configurer la boîte pop-up Parallax.

Une fenêtre pop-up apparaît. Dans cette fenêtre, vous pouvez créer de nombreux effets et combinaisons d’arrière-plan autres que l’effet de parallaxe, mais nous allons nous concentrer sur celui-ci. Sélectionnez l’option “Image” dans la liste déroulante Type d’arrière-plan. Cliquez sur la case à cocher Stretch qui apparaît à côté de la liste déroulante.

En relation  Comment héberger localement des polices Google sur WordPress

Cliquez sur le bouton “Select Image” et choisissez l’image que vous voulez utiliser comme arrière-plan. Comme il s’agira d’une image d’arrière-plan, assurez-vous qu’elle est de grande taille, sinon l’étirement la pixellisera.

La case suivante correspond à la couleur de superposition, que vous pouvez utiliser ou non. Faites défiler vers le bas et vous verrez la section Parallaxe. Par défaut, elle est désactivée, mais vous pouvez la remplacer par l’un des nombreux effets disponibles.

L’effet le plus courant est l’effet de défilement vers le bas, mais n’hésitez pas à choisir celui que vous préférez. Vous pouvez toujours expérimenter avec chacun d’eux jusqu’à ce que vous trouviez celui qui convient parfaitement à votre site Web. Vous pouvez ensuite choisir la vitesse de défilement et déterminer si le site est adapté aux téléphones portables ou non.

Une fois que vous êtes satisfait des paramètres ou prêt à tester leur apparence, cliquez sur le bouton “Insérer”.

Étape 4 : Ajoutez le contenu que vous voulez

Vous allez maintenant voir apparaître quelques lignes de shortcode sur la page. Il devrait se lire comme ceci :

Remplacez simplement le “Your Content Here” par votre contenu réel et vous avez terminé !

Félicitations, vous avez réussi à ajouter l’effet de parallaxe à votre site Web. Gardez à l’esprit qu’il y a plusieurs effets que vous pouvez faire avec ce plugin et vous pouvez ajouter différents effets à différentes pages.

Rappelez-vous, il n’y a pas d’option de masse, donc si vous voulez ajouter le même effet à plusieurs articles ou pages, vous devrez copier le shortcode et le coller sur chaque page que vous voulez.

Ajouter l’effet de défilement Parallax avec Gutenberg

Ajouter le même effet que celui décrit ci-dessus en utilisant l’éditeur de bloc Gutenberg ne pose aucun problème. Le plugin Advanced WordPress Backgrounds est livré avec son propre bloc. Si quelque chose, le processus est plus facile.

Il suffit d’aller sur l’article ou la page à laquelle vous voulez ajouter l’effet et d’ouvrir l’éditeur.

Cliquez sur le bouton “Ajouter un bloc”. S’il n’apparaît pas, recherchez le bloc en utilisant le terme “Background (AWB)”. Lorsqu’il s’affiche, ajoutez simplement le bloc et modifiez-le comme vous le souhaitez en utilisant les paramètres sur la droite.

Méthode 2 : Effet de défilement Parallaxe avec CSS

Si vous n’avez pas d’expérience en HTML, je ne vous recommande pas d’essayer cette méthode, car vous risquez d’insérer le code au mauvais endroit et de perturber le site Web. Vous devez télécharger l’image que vous souhaitez utiliser comme image d’arrière-plan dans votre bibliothèque multimédia. Une fois l’image téléchargée, sélectionnez-la pour afficher le lien URL et copiez-le pour une utilisation ultérieure.

En relation  Comment exclure des articles, des pages, des catégories ou des auteurs de la recherche WordPress

C’est maintenant que vos connaissances en HTML vont entrer en jeu. Vous devez ajouter les lignes HTML suivantes dans votre message ou votre page où vous souhaitez que l’effet soit présent :

Bien sûr, vous devez mettre votre contenu à la place de Insert Content Here.

Il est maintenant temps d’utiliser le CSS pour ajouter l’effet. Vous devez maintenant ajouter le CSS suivant aux fichiers de votre thème :

Remplacez “IMAGE URL HERE” par l’URL de l’image que vous avez sélectionnée au départ. Vous pouvez également modifier les autres paramètres à votre convenance. Veillez à enregistrer vos modifications. L’effet de parallaxe devrait maintenant fonctionner sur votre article ou votre page.

La conception de sites Web ne s’arrête jamais

Presque tous les sites Web importants subissent des modifications significatives de leur conception chaque année et il est important qu’ils le fassent. Dans certains cas, ils ne veulent pas que l’apparence change radicalement. Déplacer un champ de recherche de quelques pixels vers la gauche ne semble pas être un gros problème, mais ça l’est !

Il est important de s’assurer que votre site Web se distingue de tous les autres. Une première impression forte grâce à une page d’accueil bien conçue incitera les visiteurs à jeter un coup d’œil. Vous pouvez le faire en utilisant les techniques ci-dessus, ou en utilisant un thème WordPress à effet de parallaxe.

Réflexions finales

L’ajout de superbes effets à votre site WordPress peut attirer plus d’utilisateurs et les retenir plus longtemps sur votre site. Cela contribue à la stimulation visuelle et montre aux gens que vous avez un site Web professionnel et bien construit.

J’espère que cet article a pu vous montrer à quel point il est facile d’ajouter un effet de parallaxe à n’importe quel thème WordPress. Vous pouvez utiliser un plugin, ce qui est le moyen le plus facile, ou vous pouvez utiliser votre propre code, ce que vous pourriez préférer.

Quel type d’effet avez-vous ajouté à votre site Web ? Préférez-vous utiliser le plugin ou la méthode CSS ?