L'effet de parallaxe est une tendance de conception Web où une image d'arrière-plan défile plus lentement que le contenu du premier plan. Cela crée une illusion de profondeur et de mouvement, offrant une expérience utilisateur plus interactive sur votre site Web.
À notre avis, l'utilisation d'un effet de parallaxe est un excellent moyen d'attirer l'attention des visiteurs. Cela attire les gens et les encourage à rester plus longtemps, ce qui peut augmenter l'engagement. Nous avons constaté que cela donne non seulement à votre site une apparence élégante et professionnelle, mais peut également entraîner des conversions plus élevées.
Dans cet article, nous vous montrerons comment ajouter facilement un effet de parallaxe à n'importe quel thème WordPress. Nous explorerons diverses méthodes, y compris l'utilisation de plugins et de code personnalisé, pour vous offrir des options flexibles.
Qu'est-ce qu'un effet de parallaxe ?
L'effet de parallaxe est une technique moderne de conception Web où l'arrière-plan défile plus lentement que le contenu du premier plan. Cet effet ajoute de la profondeur aux images d'arrière-plan et les rend plus interactives.
L'effet de parallaxe peut être utilisé sur les pages de destination, le contenu long, les pages de vente ou la page d'accueil d'un site Web d'entreprise.
Il peut mettre en évidence différentes sections sur une longue page, améliorer l'attrait visuel général du site, augmenter l'engagement des utilisateurs et être un outil incroyable pour transmettre un message ou raconter une histoire sur votre blog.
De nombreux thèmes WordPress premium incluent un effet de parallaxe intégré sur leur page d'accueil. Vous pouvez également utiliser cet effet dans la plupart des plugins de constructeur de pages WordPress.
Cependant, tous les thèmes n'ont pas cette fonctionnalité, et vous ne voudrez peut-être pas utiliser un constructeur de pages pour créer des mises en page personnalisées juste pour un effet de parallaxe.
Cela dit, examinons comment ajouter facilement un effet d'arrière-plan de parallaxe à n'importe quel thème WordPress. Nous couvrirons quelques méthodes différentes, et vous pouvez utiliser les liens rapides ci-dessous pour accéder à celle que vous souhaitez utiliser :
- Méthode 1 : Ajouter un effet de parallaxe au thème WordPress à l'aide d'un plugin
- Méthode 2 : Ajouter un effet de parallaxe au thème WordPress avec CSS
- Bonus : Ajouter une vidéo YouTube comme arrière-plan plein écran dans WordPress
Méthode 1 : Ajouter un effet de parallaxe au thème WordPress à l'aide d'un plugin
Cette méthode ne nécessite pas l'ajout de code à votre thème WordPress. Elle est facile et recommandée pour la plupart des utilisateurs.
Tout d'abord, vous devez installer et activer le plugin Advanced WordPress Backgrounds. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.
Après l'activation, visitez la page Paramètres » AWB depuis le tableau de bord WordPress. Ici, vous pouvez cocher les cases pour les navigateurs ou les appareils sur lesquels vous ne souhaitez pas afficher l'effet de parallaxe.
Par exemple, si vous ne souhaitez pas afficher l'effet de parallaxe aux utilisateurs sur les appareils mobiles, vous pouvez cocher cette case.
Après cela, cliquez sur le bouton « Enregistrer les modifications » pour enregistrer vos paramètres.
Ensuite, ouvrez une page ou un article de votre choix dans l'éditeur de blocs Gutenberg éditeur de blocs.
Une fois sur place, cliquez sur le bouton ‘+’ pour ajouter un bloc dans le coin supérieur gauche de l'écran pour ouvrir le menu des blocs.
À partir de là, vous devez trouver et ajouter le bloc Arrière-plan (AWB) à l'article.
Ouvrez maintenant le panneau de blocs sur le côté droit de l'écran et basculez vers l'onglet ‘Image’ si vous souhaitez ajouter une image comme arrière-plan parallax.
Après cela, cliquez sur le bouton ‘Sélectionner une image’ pour lancer la médiathèque. Vous pouvez également cliquer sur le bouton ‘Utiliser l'image mise en avant’ pour ajouter automatiquement l'image mise en avant comme arrière-plan.
Vous pouvez même ajouter une couleur d'arrière-plan ou une vidéo pour l'effet en basculant vers ces onglets.
Lors de l'ajout d'une image, vous pouvez ajuster son point focal depuis le panneau de bloc et configurer la taille de l'arrière-plan. Cependant, nous vous recommandons de laisser la taille de l'arrière-plan sur « Couvrir ».
Ensuite, vous pouvez utiliser le curseur pour modifier l'opacité de l'image.
Une fois que vous avez fait cela, faites défiler vers le bas jusqu'à l'onglet « Parallaxe » et développez-le.
À partir de là, vous pouvez choisir votre type de parallaxe dans le menu déroulant. Une fois que vous avez choisi une option, les modifications seront automatiquement appliquées dans l'éditeur de bloc où vous pourrez les tester.
Dans notre exemple, nous utilisons « Opacité + Défilement ».
Après avoir ajouté l'effet, cliquez sur le bouton « + » dans le bloc AWB pour ouvrir le menu des blocs.
Vous pouvez maintenant ajouter un paragraphe, une image, une vidéo, une citation ou tout autre bloc de votre choix. Ce bloc sera alors affiché avec l'effet de parallaxe.
Enfin, cliquez sur le bouton « Mettre à jour » ou « Publier » en haut pour enregistrer vos paramètres.
Vous pouvez maintenant visiter votre site WordPress pour voir l'effet de parallaxe en action.
Méthode 2 : Ajouter un effet de parallaxe au thème WordPress avec CSS
Si vous souhaitez utiliser une seule image comme arrière-plan de parallaxe sur l'ensemble de votre site Web, alors cette méthode est faite pour vous.
Tout d'abord, vous devrez télécharger l'image que vous souhaitez utiliser dans votre bibliothèque de médias WordPress en visitant la page Média » Ajouter un nouveau fichier média.
Une fois cela fait, vous devez copier l'URL de l'image en cliquant dessus et en ouvrant son invite « Détails de la pièce jointe ».
Une fois que vous avez fait cela, vous devez ajouter du code CSS personnalisé aux fichiers de votre thème. Cependant, la moindre erreur lors de la saisie du code peut casser votre site et le rendre inaccessible.
C'est pourquoi nous recommandons d'utiliser WPCode. C'est le meilleur plugin d'extraits de code WordPress du marché qui rend l'ajout de code personnalisé, y compris du CSS, très sûr et facile.
Tout d'abord, vous devez installer et activer le plugin WPCode. Pour des instructions détaillées, consultez notre guide pour débutants sur comment installer un plugin WordPress.
Remarque : WPCode dispose également d'un plan gratuit que vous pouvez utiliser. Cependant, opter pour le plan premium peut débloquer des fonctionnalités telles qu'une bibliothèque cloud de snippets de code, une logique conditionnelle, et plus encore.
Après l'activation, visitez la page Extraits de code » + Ajouter un extrait depuis le tableau de bord WordPress et cliquez sur le bouton ‘Utiliser l'extrait’ sous l'option ‘Ajouter votre code personnalisé (Nouvel extrait)’.
Cela vous mènera à la page « Créer un snippet personnalisé », où vous pourrez commencer par ajouter un titre à votre code personnalisé.
Après cela, choisissez l'option « Snippet CSS » dans le menu déroulant « Type de code » sur la droite.
Ensuite, ajoutez le code CSS personnalisé suivant dans la boîte « Aperçu du code » :
.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;
}
Une fois que vous avez fait cela, assurez-vous de remplacer l'URL d'exemple dans la ligne background-image: url du code par l'URL de votre image.
Cette image sera utilisée comme arrière-plan de l'effet de parallaxe sur l'ensemble de votre site Web.
Ensuite, faites défiler jusqu'à la section « Insertion » et choisissez le mode « Insertion automatique ».
Le snippet sera automatiquement exécuté sur votre site Web une fois que vous y aurez ajouté du code HTML.
Enfin, faites défiler la page vers le haut et basculez le commutateur « Inactif » sur « Actif ».
Ensuite, cliquez sur le bouton « Enregistrer l'extrait » pour sauvegarder vos paramètres.
Il est maintenant temps pour vous d'ouvrir le article ou la page WordPress où vous souhaitez ajouter l'effet de parallaxe.
Une fois que vous y êtes, cliquez sur l'icône à trois points dans le coin supérieur droit de l'écran pour ouvrir un menu. Ensuite, sélectionnez le mode « Éditeur de code ».
Maintenant, vous devez ajouter le code HTML suivant dans l'éditeur de code avec le contenu de l'effet de parallaxe entre les deux :
<div class="parallax">
<div class="parallax-content">
Your content goes here...
</div>
</div>
Vous pouvez ensuite revenir facilement à l'éditeur visuel en bloc en cliquant sur le lien « Quitter l'éditeur de code » en haut.
Après cela, ajoutez le reste du contenu de la page ou de l'article dans l'éditeur visuel en bloc.
Enfin, cliquez sur le bouton « Mettre à jour » ou « Publier » pour enregistrer vos paramètres.
Visitez maintenant simplement votre blog WordPress pour voir l'effet parallaxe en action.
Bonus : Ajouter une vidéo YouTube comme arrière-plan plein écran dans WordPress
En plus de l'effet parallaxe, vous pouvez également ajouter une vidéo YouTube comme arrière-plan plein écran dans WordPress.
Cela peut offrir une expérience immersive à vos utilisateurs et améliorer l'attrait visuel de votre site WordPress. Une vidéo YouTube plein écran en arrière-plan peut évoquer des émotions et créer un lien plus profond avec votre public.
Par exemple, si vous organisez un concours sur votre site Web, vous pouvez utiliser une vidéo YouTube en arrière-plan pour rendre la page plus attrayante et encourager les utilisateurs à participer au concours.
De même, si vous avez une organisation caritative à but non lucratif, vous pouvez utiliser des arrière-plans vidéo pour présenter l'impact, la mission de votre organisation et les histoires des personnes ou des communautés que vous servez. Vous pourriez même présenter des réussites dans l'arrière-plan vidéo plein écran.
Pour plus de détails, vous pouvez consulter notre tutoriel sur comment ajouter une vidéo YouTube comme arrière-plan plein écran dans WordPress.
Nous espérons que cet article vous a aidé à apprendre comment ajouter facilement un effet parallax à n'importe quel thème WordPress. Vous voudrez peut-être aussi consulter notre guide pour débutants sur comment ajouter un défilement infini à votre site WordPress et notre liste des meilleures alternatives à Canva pour les graphiques de sites Web.
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.
Jiří Vaněk
J'aime l'effet de parallaxe car, lorsqu'il est ajouté à un site Web avec une certaine attention aux détails, il peut créer un effet vraiment magnifique. Cependant, personnellement, j'ai toujours été capable de créer cet effet uniquement avec Elementor, où c'était facile pour moi. Sur les sites Web sans Elementor, j'ai dû renoncer à cet effet car je ne savais pas comment l'obtenir. Advanced WordPress Backgrounds semble être une excellente solution pour mes sites Web sans Elementor, et je serai certainement heureux d'essayer de travailler avec ce plugin.
Mrteesurez
J'ai entendu parler de l'effet de parallaxe mais je ne comprenais pas comment il fonctionnait réellement. Ce guide est utile car il l'explique clairement avec la mise en œuvre. Je vais aimer l'essayer. Merci.
Support WPBeginner
Glad we could help show what the effect is
Admin
Christer
Peut-être que je suis stupide mais que dois-je insérer sous « votre propre contenu ici » dans le shortcode ? Le contenu est-il le post ou quoi ?
Chris
Support WPBeginner
Vous inséreriez le contenu que vous voudriez sur cette page.
Admin
Saswata Baksi
Puis-je ajouter cela dans le code de l'en-tête du post, c'est-à-dire avant le titre sur un post individuel ?
Support WPBeginner
Vous voudriez probablement un en-tête fixe pour ce que vous semblez vouloir, sinon, vous devriez contacter le support de votre thème spécifique pour cette personnalisation.
Admin
Jessica
Pourquoi ne pas montrer un exemple en direct (URL) de l'effet de parallaxe ? Je ne peux même pas l'imaginer.
Support WPBeginner
Thanks for your feedback, we’ll certainly take this into consideration for any updates to this article
Admin
Andres
Bonjour et merci pour ce guide.
J'ai implémenté la Solution #2 sur mon site, elle fonctionne très bien sauf qu'elle ne fonctionne pas sur mobile. Y a-t-il un problème connu à ce sujet ?
Merci
Chris
Salut, j'ai essayé la deuxième solution de code mais elle n'est pas responsive et est pénalisée par Google.
J'ai essayé quelques correctifs, principalement en utilisant des points de rupture média et en jouant avec les marges, mais je n'arrive pas à la faire fonctionner.
Ou
Comment désactiver sur mobile ?
Merci d'avance
Chris
Support WPBeginner
Pour le moment, nous n'avons pas le CSS recommandé pour détecter les appareils mobiles.
Admin
Alex
J'adore ce plugin, cependant, j'essaie de créer une image d'arrière-plan pleine hauteur qui s'adaptera à tout l'écran, quelle que soit la taille de la fenêtre du navigateur. Ensuite, une fois la fenêtre chargée, je peux faire défiler pour voir le reste de ma page Web. Je vois que la démo nK utilise fonctionne de cette façon :
Je me demande quels CSS ou paramètres supplémentaires je dois utiliser pour créer cet effet.
Merci beaucoup !
gayana
j'ai ajouté le plugin parallax. j'ai obtenu le symbole qui était sur l'image mais je ne sais pas où ajouter le code. Je l'ai ajouté dans le CSS personnalisé dans l'apparence. Je n'obtiens aucune image ni aucun effet.
David
Plutôt que de répéter cela pour chaque page/article, puis-je le faire une seule fois en utilisant la boîte CSS supplémentaire ?
Je veux l'effet parallax sur tout le site.
Merci
Mahdi Sadeghi
That was Awesome
Thank You.
Thomas Greenbank
Si j'utilise le plugin pour cela, dois-je le laisser actif, ou puis-je désactiver le plugin une fois que j'ai configuré l'effet parallax ?
Support WPBeginner
Salut Thomas,
Vous devrez continuer à utiliser le plugin tant que vous voudrez conserver les effets d'arrière-plan parallax.
Admin
Ed
Existe-t-il un moyen de faire de l'arrière-plan (son URL) une variable qui peut être définie lorsque le HTML associé est ajouté à un article ? L'alternative d'avoir plusieurs segments CSS personnalisés (.parallaz1, .parallax2, .....) pour couvrir chaque arrière-plan possible est au mieux peu pratique.
Un novice en CSS qui essaie d'apprendre. Montrez-moi un ou deux sites et je trouverai moi-même, mais pour l'instant, je ne sais même pas quoi chercher.
Merci
Ed
WPBeginner ?
Quelqu'un ??
Support WPBeginner
Salut Ed,
Vous pouvez ajouter des classes CSS en utilisant Champs personnalisés. Vous pouvez attribuer un champ personnalisé à un article, puis dans les fichiers de votre thème rechercher les métadonnées personnalisées et les utiliser comme votre classe CSS.
Admin