brand-lws-red brand-lws-white
Tutoriels

WordPress
time_read26mn de lecture

Comment utiliser un effet parallaxe sur WordPress ?

14 septembre 2022

Comment utiliser un effet parallaxe sur WordPress ?

Lorsque vous créez votre site, le design est un aspect que vous ne devez pas négliger. En effet, la manière dont votre site s’affiche peut fortement influencer le comportement de vos visiteurs ou de vos clients. L’effet parallaxe est une des fonctionnalités de la conception web moderne. En l’implémentant sur votre site, il ajoute des effets spéciaux à vos pages qui se démarquent de l’ordinaire.🤗

Objectif

La manière d’ajouter un effet parallaxe sur WordPress est extrêmement simple. Mais, qu’est-ce que l’effet parallaxe ? Pourquoi et comment vous devez procéder pour le configurer sur votre site ? Si vous vous posez toutes ces questions, alors lisez cet article pour trouver les réponses.😊

En suivant nos explications à la lettre, vous pouvez configurer un effet parallaxe sur votre site en quelques minutes, quelles que soient vos compétences techniques.😇

Prérequis

L’ajout d’un effet parallaxe sur WordPress ne nécessite pas d’être webmaster. Il vous suffit d’avoir accès en tant qu’administrateur à votre tableau d’administration WordPress afin d’installer un plugin dédié à l’ajout de ce type d’effets, d’utiliser votre éditeur classique ou Gutenberg, d’installer un thème qui propose l’effet parallaxe ou encore de le configurer manuellement.

Qu’est-ce que l’effet parallaxe ?

ajouter un effet parallaxe sur WordPress

L’effet parallaxe est une technique de conception web où l’arrière-plan de la page défile plus lentement que le contenu imbriqué au premier plan. Cet effet spécial est devenu presque une tendance dans la conception web moderne. Et cela donne une impression de profondeur aux images de fond.

L’élément de l’arrière-plan peut être une image, une vidéo ou une couleur unique que vous avez configurée selon vos souhaits. L’effet visuel parallaxe peut être implémenté sur différentes sections de votre site. Vous voudrez, par exemple, l’afficher dans le fond d’un article ou d’une page web. Le plus souvent, vous pouvez l’ajouter à votre page d’accueil. Mais vous pouvez aussi l’utiliser sur une page d’atterrissage ou une page de présentation d’une entreprise.

Cet effet spécial offre un aspect moderne et sophistiqué à vos pages. L’esthétique créée peut plaire à certains de vos lecteurs. Ce qui peut davantage les encourager à vous lire et même partager vos contenus.

Des exigences pour utiliser l’effet parallaxe

exigences pour utiliser l'effet parallaxeL’effet parallaxe est plébiscité pour l’effet spécial qu’il donne aux pages. Cependant, lorsque vous l’utilisez de la mauvaise manière, il peut malheureusement nuire à l’expérience utilisateur. Il est de ce fait judicieux de prendre certaines exigences en compte au moment où vous souhaitez l’ajouter à votre site :

  • Utiliser les bonnes images : vous devez choisir des belles images accrocheuses et de haute qualité. Ce qui donne à votre site une présentation professionnelle.
  • Adapter les images à votre marque : prenez toujours le temps de réfléchir sur l’impression que donneront vos images lorsqu’elles seront mises en ligne. Restez cohérent et utilisez des images qui mettent en avant votre activité.
  • Des images qui n’empêchent pas la lecture : vous devez faire en sorte que l’image de fond ne soit pas un obstacle à la lecture de votre contenu en l’adaptant à la police du texte. La police du texte ne doit pas avoir la même couleur que l’image d’arrière-plan pour faciliter la lecture.

Ces quelques exigences peuvent vous permettre de configurer un bon effet parallaxe.

Comment ajouter un effet parallaxe sur WordPress ?

L’ajout d’un effet parallaxe ne prend que quelques minutes. Sur WordPress, vous pouvez ajouter un effet parallaxe en utilisant un thème, un plugin ou encore manuellement.

Ajouter un effet parallaxe à WordPress avec un plugin

Pour cela, vous pouvez utiliser le plugin gratuit Advanced WordPress Backgrounds. Cette extension semble être la plus populaire dans la catégorie et la plus facile à utiliser. Pour l’installer sur votre site, connectez-vous à votre espace d’administration et rendez-vous dans la section « Extensions › ajouter ».Extensions/ajouter Recherchez l’extension Advanced WordPress Backgrounds à l’aide de la barre de recherche et cliquez sur le bouton « Installer maintenant ».Installer le plugin Advanced WordPress BackgroundsAprès l’installation et l’activation, accédez à la section « Réglages › AWB ».réglages/AWB Vous serez redirigé vers une nouvelle interface. Dans cette page, vous pouvez cocher les options nécessaires et enregistrez vos modifications. Dans la section « Disable parallax » vous pouvez désactiver l’effet parallaxe sur certains navigateurs web.

Si vous avez configuré un effet parallaxe avec une vidéo, vous pouvez la désactiver sur certains navigateurs web ou sur les appareils mobiles. Par exemple, pour les téléphones mobiles, les vidéos peuvent être difficiles à afficher.configurer le plugin AWB

Ensuite, vous devez ajouter l’effet parallaxe en utilisant votre éditeur de contenus.

Ajouter un effet parallaxe à WordPress avec l’éditeur Gutenberg

Si vous utilisez l’éditeur Gutenberg, ouvrez la page ou l’article que vous souhaitez modifier. Cliquez sur le bouton « + » et recherchez l’option « Background ».séléctionner l'option Background Une fois que vous avez cliqué, un nouveau menu (bloc) s’ajoute aux paramètres de la page. Vous avez la possibilité d’utiliser une couleur, une image ou encore une vidéo pour créer votre effet. Pour utiliser une couleur, cliquez sur l’option correspondante.👇ajouter une couleur/effet parallaxePar la suite, en cliquant sur l’option « Background color », vous pouvez choisir votre couleur préférée dans la plage fournie. couleur d'arriere-plan/effet parallaxeDeuxièmement, vous pouvez également utiliser une image, ce qui est l’option la plus courante.utiliser une image/effet parallaxe Vous pouvez soit utiliser l’image mise en avant ou sélectionner une image dans la médiathèque. Pour choisir une image dans la médiathèque, cliquez sur le bouton « Select image ».choisir une image dans la mediathèque Après avoir choisi une image dans la médiathèque, vous devez aussi configurer d’autres options présentes dans l’interface. Vous pouvez par exemple modifier la taille ou l’opacité de l’image choisie.configurer d'autres options/effet parallaxeVous devez, par la suite, cliquer sur la section « Parallaxe » et choisir un type à appliquer. choisir le type de parallaxeUne fois que vous avez terminé, cliquez sur le bouton « Mettre à jour ». Vous pouvez prévisualiser votre publication pour voir comment cela apparaît.previsualiser l'effet parallaxe

Ajouter un effet parallaxe à WordPress avec l’éditeur classique

Si vous utilisez l’éditeur classique, vous devez remarquer qu’un nouvel élément s’est ajouté à la barre d’outils supérieure. En cliquant sur cette option, vous devez choisir le type d’arrière-plan à appliquer. Choisissez le type « Image ».choisir le type d'effet parallaxe Cliquez ensuite sur le bouton « Select image » et choisissez une image dans votre médiathèque. insérer une imageVous devez aussi choisir le type d’effet parallaxe et ajuster d’autres options présentes. Une fois que vous avez terminé, cliquez sur le bouton « Insérer ». 👍Et voilà, un code s’ajoute à votre interface d’édition. Ensuite, vous devez insérer votre contenu dans la zone prévue (entre les lignes de codes).insérer le contenu entre les lignes de codes Une fois que vous terminez l’édition, faites la mise à jour de votre publication.

Ajouter un effet parallaxe sur WordPress avec un thème

Il existe des nombreux thèmes équipés d’une fonctionnalité d’effet parallaxe. Cependant, la plupart de thèmes de cette catégorie sont premiums. Et ce sont, en général, des solutions prêtes à l’emploi. L’ajout d’un défilement parallaxe par le biais d’un thème vous donne plus de flexibilité, car vous disposez souvent d’une option pour activer ou désactiver cet effet visuel en un clic.

Parmi les thèmes qui intègrent l’effet parallaxe, vous avez entre autres :

  • Divi : le thème Divi connu pour ses nombreuses fonctionnalités et son architecture moderne. Avec Divi, vous pouvez ajouter un défilement parallaxe en quelques minutes à votre site.
  • Story : vous pouvez également utiliser cet autre thème polyvalent pour créer un site web avec design moderne et un effet parallaxe qui s’affiche sur toutes les tailles d’écrans.
  • Corpus : le thème Corpus est idéal pour les sites web d’entreprise. Il vous permet de concevoir votre site à partir de centaines des modèles disponibles. Il est parfait pour ajouter l’effet parallaxe à votre site sans toucher au code.

Configurer manuellement l’effet parallaxe sur WordPress

Pour commencer, accédez à la section « Médias › ajouter » et téléchargez une image d’arrière-plan à utiliser depuis votre ordinateur.mediathèque/ajouter une image Cliquez ensuite sur l’image et copiez son URL dans un endroit sûr.copier l'URL de l'image Ouvrez ensuite la page ou l’article sous lequel vous souhaitez afficher l’effet parallaxe dans n’importe quel éditeur de contenus. Puis collez le code ci-dessous. Dans l’éditeur Gutenberg, vous devez utiliser l’option « HTML personnalisé ». Sous l’éditeur classique, vous devez insérer le code en accédant au mode d’édition texte.

<div class="parallax">

<div class="parallax-content">

Saisir votre contenu ici.

</div>

</div>

Ajoutez votre contenu dans la section prévue entre les lignes de codes. Enregistrez vos modifications.

Ensuite, pour que le défilement parallaxe s’affiche, ajoutez le code CSS ci-dessous aux fichiers style de votre thème. Vous pouvez utiliser l’éditeur CSS intégré ou un client FTP. Remplacez le lien de l’image par l’URL personnalisée que vous avez copié précédemment.

.parallax {

background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");

height: 100%;

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

margin-left:-410px;

margin-right:-410px;

}

.parallax-content {

width:50%;

margin:0 auto;

color:#FFF;

padding-top:50px;

}

Enregistrez vos modifications et ouvrez votre page pour voir comment cela s’affiche.

Conclusion

🥳Toutes nos félicitations ! Comme vous avez pu le voir, ajouter un effet parallaxe sur WordPress n’est vraiment pas difficile. Vous pouvez utiliser un plugin, un thème ou y aller manuellement. Maintenant, vous avez toutes les connaissances nécessaires, vous savez ce qui vous reste à faire.

Avez-vous ajouté un effet parallaxe à votre site ? Montrez-nous ça en commentaires !

Avatar de l'auteur

Auteur de l'article

Joseph

Joseph est rédacteur web depuis quatre ans. Ses thématiques préférées sont le digital et le web marketing et l’e-commerce. La persévérance, l’assiduité et le courage font partie de sa méthode de travail. C'est ce qui lui permet d'affronter n’importe quel sujet.

Avis client de l'hébergeur LWS

Nos avis Trustpilot Nos avis Hostadvice Nos avis sur avis.lws.fr
Avis trustpilot 30/04/2022

LWS l'hébergeur par excellence !

LWS est pour moi l'hébergeur par excellence, que cela soit au niveau de l'hébergement qui est très performant, les mails qui sont d'une qualité professionnelle et de la gestion du domaine facile à comprendre.

PauseGreen

Avis hostadvice 27/04/2022

Super, au top !

Au top, prix attractif. Service très rapide et réactif. Je l'ai même personnellement recommandé à des proches. La vie est bien plus facile avec LWS

Masset Eliot

Avis avislws 26/04/2022

Support

Clair, efficace, rapide et à tarif abordable. J'ai maintenant un site superbe à mon image, puisque je le fais moi-même. L'équipe technique est au top, j'ai une réponse en 20 minutes, cela change d'autres hébergeurs pourtant plus connu.

Lady Whip

Avis hostadvice 24/04/2022

Bravo et merci

Bravo et merci aux équipes techniques pour leur réactivité et leur professionnalisme depuis plus de 10 ans chez eux et de nombreux sites !!! Merci

Olivier Delmas

Avis trustpilot 23/04/2022

Je suis très satisfait.

J'ai commandé un hébergement pour le site d'une association. Tout s'est passé très rapidement et sans la moindre embuche. La tarification est attractive et me parait très claire. Le panneau d'administration de l'hébergement est facile à utiliser et à comprendre. Je n'ai pas encore installé Wordpress car le contenu n'est pas prêt mais ce sera la prochaine étape et je suis très confiant. Merci !

Pierre-André Liné

Avis avislws 20/04/2022

Un service technique excellent

Je suis client chez LWS depuis 2011 avec une boutique OSCommerce qui tourne comme une horloge depuis cette date sur un hébergement mutualisé. La disponibilité de la boutique est très proche de 100%. Concernant les rares problèmes rencontrés en huit ans, j’ai eu à chaque fois un technicien compétent qui a résolu le problème très rapidement et efficacement. Je suis en train de migrer sur une plateforme Pretashop sur un VPS, avec l’offre LWS Debian 9 et Prestashop. Un technicien m’a grandement aidé pour finaliser l’installation de la boutique lors de la mise à jour vers la dernière version de Prestashop 1.7 qui posait problème. Je suis très satisfait de LWS, et ce sur la durée : réponses et réactions rapides et efficaces. Je recommande cet hébergeur et encore merci.

Alain

Avis trustpilot 16/04/2022

Une expérience jamais égalée !

Étant Développeur Web & Mobile Full-Stack depuis plus de 5 ans déjà, j'ai rarement eu un service client aussi rapide et efficace. Sans compter la qualité du service en ligne. Je recommande VIVEMENT LWS !

Chris KOUAKAM

Avis hostadvice 12/04/2022

Très bon hébergeur

J'ai un serveur VPS chez eux et je n'ai aucun problème, dès qu'il y a un problème le service technique est la pour vous aider et répond assez rapidement à votre demande. Je recommande vivement cet hébergeur.

Vanden Cruyce

Avis avislws 09/04/2022

Je suis ravie

Je suis ravie d'être avec LWS sur tous les plans, je remercie les Techniciens (Fabrice, Omar, Sandy-Mahitsison) depuis plus de 8 ans j'ai évolué avec LWS et toujours soutenue. Une véritable relation humaine même si les questions ou nos inquiétudes ne correspondent pas à leurs missions, ils sont là pour nous répondent et nous rassurent. Mon site c'est mon travail ma source de revenue donc il sont mes partenaires ! les travailleurs de l'ombre merci à eux ! Merci LWS

L'atelier-and-Co

Commentaires (0)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.