skip to Main Content

Comment ajouter un effet parallaxe sur n’importe quel thème WordPress

Divi : le thème WordPress le plus facile à utiliser

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Récemment, un de nos lecteurs nous a demandé comment ajouter un effet de parallaxe à n’importe quel thème WordPress ? L’effet Parallaxe est une tendance très utilisée de nos jours sur le Web où une image d’arrière-plan défile plus lentement que le contenu de premier plan. Dans ce tutoriel, nous vous montrerons comment ajouter facilement un effet de parallaxe à n’importe quel thème WordPress.

Qu’est-ce qu’un effet Parallaxe ?

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

L’effet Parallaxe peut être utilisée sur les pages d’atterrissage, le contenu à long terme, les pages de vente ou la page d’accueil d’un site Web d’entreprise. C’est une excellente façon de mettre en évidence différentes sections sur une longue page.

Beaucoup de thèmes premium WordPress sont dotés d’un effet de parallaxe intégré sur leur page d’accueil. Vous pouvez également utiliser l’effet de parallaxe avec la plupart des plugins de création de pages WordPress.

Cependant, tous les thèmes ne comportent pas un effet parallaxe intégré et vous ne souhaitez peut-être pas utiliser un générateur de pages pour créer des mises en page personnalisées juste pour un effet de parallaxe.

Examinons comment ajouter facilement l’effet de fond parallaxe à n’importe quel thème WordPress.

Méthode 1: Ajouter l’effet Parallaxe à n’importe quel thème WordPress utilisant le plugin

Cette méthode ne nécessite pas d’ajouter un code à votre thème WordPress. C’est plus facile et recommandé pour la plupart des utilisateurs.

La première chose que vous devez faire est d’installer et d’activer le plugin Advanced WordPress Backgrounds. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.

Après l’activation du plugin, vous devez éditer la page où vous souhaitez ajouter de l’effet parallaxe. Vous remarquerez le nouveau bouton «Advanced WordPress Backgrounds» sur l’éditeur visuel.

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

En cliquant dessus, vous afficherez une fenêtre contextuelle où 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 vérifier l’option « étirement ».

Ensuite, vous devez cliquer sur le bouton « Sélectionner l’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 pixelée.

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

Cliquez sur le bouton Insérer pour continuer.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

Le plugin ajoutera maintenant un shortcode sur votre éditeur de publication WordPress. Il ressemblera à ceci :

[nk_awb awb_type=”image” awb_stretch=”true” awb_image=”22″ awb_image_size=”full” awb_parallax=”scroll” awb_parallax_speed=”0.5″ awb_mouse_parallax=”true” awb_mouse_parallax_size=”30″ awb_mouse_parallax_speed=”10000″]
Votre contenu ici
[/nk_awb]

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 l’effet « Parallaxe » à n’importe quel thème WordPress avec du CSS

Cette méthode vous oblige à avoir quelques connaissances en « HTML/CSS » ainsi que de la manière dont fonctionnent les thèmes de WordPress.

Tout d’abord, vous devrez télécharger l’image que vous souhaitez utiliser pour l’effet de parallaxe dans votre bibliothèque multimédia WordPress en visitant les « médias > Ajouter un nouveau ».

Après avoir téléchargé l’image, vous devez copier l’URL de l’image en éditant l’image dans la bibliothèque média WordPress.

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

div class="parallax">
<div class="parallax-content">
 
Votre contenu ici...
 
</div>
</div>

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

.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; 
}

N’oubliez pas de remplacer l’URL de l’image de fond par votre propre image d’arrière-plan.

Vous pouvez maintenant enregistrer vos modifications et visiter votre site Web pour le voir en action.

C’est tout pour ce tutoriel, j’espère qu’il vous permettra d’ajouter l’effet parallaxe sur WordPress.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Thèmes WordPress cool que j'ai trouvé sur
Et il y a plus de 50 000 thèmes et modèles parmi lesquels choisir!

Back To Top
6 Partages
Partagez3
Tweetez
Enregistrer3
WhatsApp