Comment ajouter un effet Parallax à n’importe quel thème WordPress

Récemment, un de nos lecteurs nous a demandé comment ajouter un effet parallax à un thème WordPress? L’effet Parallax est une tendance de conception Web où une image d’arrière-plan défile plus lentement que le contenu de premier plan. Dans cet article, nous allons vous montrer comment ajouter facilement un effet parallax à n’importe quel thème WordPress.

Qu’est ce qu’un effet parallax?

L’effet parallax est une technique de conception Web moderne où l’élément d’arrière-plan défile plus lentement que le contenu de premier plan. Cet effet ajoute de la profondeur aux images d’arrière – plan et les rend interactives.

L’effet parallax peut être utilisé sur les pages de destination , le contenu de forme longue, les pages de vente ou la page d’accueil d’un site Web d’entreprise . C’est un excellent moyen de mettre en évidence différentes sections sur une longue page.

De nombreux thèmes WordPress premium ont un effet parallax intégré sur leur page d’accueil. Vous pouvez également utiliser l’effet parallax dans la plupart des plugins permettant de construire des pages WordPress.

Jetons un coup d’oeil rapide à la façon d’ajouter facilement un effet parallax à n’importe quel thème WordPress.

Méthode 1: Ajouter un effet Parallax à n’importe quel thème WordPress à l’aide d’un plugin

Cette méthode ne vous oblige pas à ajouter du code à votre thème WordPress. C’est plus facile et recommandé pour la plupart des utilisateurs.

La première chose à faire est d’installer et d’activer le plugin Advanced WordPress Backgrounds .

Lors de l’activation, vous devez éditer la page ou l’article où vous voulez ajouter l’effet parallax. Vous remarquerez le nouveau bouton ‘Advanced WordPress Backgrounds‘ dans l’ éditeur visuel .

effet Parallax

Cliquez dessus pour faire apparaître une fenêtre contextuelle dans laquelle vous pouvez modifier différents paramètres pour l’arrière-plan que vous souhaitez ajouter.

Tout d’abord, vous devez sélectionner une image comme type d’arrière-plan, puis cocher l’option ‘stretch‘.

effet Parallax

Ensuite, vous devez cliquer sur le bouton «Sélectionner une image» pour télécharger ou sélectionner une image que vous souhaitez utiliser. Assurez-vous que vous utilisez une grande image sinon elle apparaîtra pixelisée.

Après cela, vous devez activer Parallax en choisissant un type. Il existe un certain nombre de styles disponibles que vous pouvez expérimenter. L’effet parallax le plus couramment utilisé est le défilement.

Cliquez sur le bouton Insérer pour continuer.

Le plugin va maintenant ajouter un shortcode dans votre éditeur de publication WordPress. Cela ressemblera à ceci:

effet Parallax

Remplacez “Votre contenu ici” par votre propre contenu, puis enregistrez votre page. Vous pouvez maintenant visiter votre site Web pour le voir en action.

Méthode 2: Ajouter un effet parallax à n’importe quel thème WordPress grâce au CSS

Cette méthode nécessite que vous ayez une bonne compréhension de HTML / CSS ainsi que du fonctionnement des thèmes WordPress.

Tout d’abord, vous devrez télécharger l’image que vous souhaitez utiliser pour l’effet parallax sur votre bibliothèque multimédia WordPress.

Après le téléchargement de l’image, vous devez copier l’URL de l’image en modifiant l’image dans la bibliothèque multimédia WordPress.

effet Parallax

Ensuite, vous devez ajouter le code HTML suivant dans la page ou l’article où vous souhaitez afficher l’effet parallax. Vous pouvez également ajouter ce code HTML dans votre thème WordPress ou votre thème enfant.

effet Parallax

Ensuite, vous devez ajouter le CSS personnalisé suivant à votre thème WordPress.

effet Parallax

N’oubliez pas de remplacer l’URL de l’image d’arrière-plan par votre propre image d’arrière-plan. Vous pouvez maintenant enregistrer vos modifications et visiter votre site Web pour le voir en action.

Remarque: Vous devrez peut-être ajuster le CSS pour travailler avec la mise en page de votre site.

Nous espérons que cet article vous a aidé à apprendre comment ajouter facilement un effet de parallaxe à n’importe quel thème WordPress.

Profitez de nos hébergements WordPress 

 

Laisser un commentaire

%d blogueurs aiment cette page :