Récemment, un de nos lecteurs nous a demandé comment ajouter un effet de parallaxe à n’importe quel thème WordPress ? L’effet de parallaxe 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 de parallaxe à n’importe quel thème WordPress.
Qu’est-ce qu’un effet de parallaxe ?
L’effet de parallaxe est une technique de conception Web moderne dans laquelle 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 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. C’est un excellent moyen de mettre en évidence différentes sections sur une longue page.
De nombreux thèmes WordPress premium sont livrés avec un effet de parallaxe intégré sur leur page d’accueil. Vous pouvez également utiliser l’effet de parallaxe dans la plupart des plugins de création de pages WordPress.
Cependant, tous les thèmes n’ont pas d’effet de parallaxe intégré et vous ne souhaiterez peut-être pas utiliser un générateur de page pour créer des mises en page personnalisées uniquement pour un effet de parallaxe.
Voyons comment ajouter facilement un effet de fond de parallaxe à n’importe quel thème WordPress.
Méthode 1 : ajouter un effet de parallaxe à n’importe quel thème WordPress à l’aide d’un plugin
Cette méthode ne nécessite pas que vous ajoutiez du code à votre thème WordPress. C’est plus simple et recommandé pour la plupart des utilisateurs.
La première chose à faire est d’installer et d’activer le Arrière-plans WordPress avancés brancher. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Lors de l’activation, vous devez modifier la page ou la publication où vous souhaitez ajouter l’effet de parallaxe. Vous remarquerez le nouveau bouton « Arrière-plans WordPress avancés » dans l’éditeur visuel.
En cliquant dessus, une fenêtre contextuelle s’affichera dans laquelle vous pourrez 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 « étirer ».
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 la parallaxe en choisissant un type de 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.
Le plugin va maintenant ajouter un shortcode dans votre éditeur de publication WordPress. Cela ressemblera à quelque chose comme 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]
Remplacer « Votre contenu ici » avec 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 de parallaxe à n’importe quel thème WordPress avec CSS
Cette méthode nécessite que vous ayez une bonne compréhension du 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 de parallaxe dans votre médiathèque WordPress en visitant Média » Ajouter un nouveau page.
Après avoir téléchargé l’image, vous devez copier l’URL de l’image en modifiant l’image dans la médiathèque WordPress.
Ensuite, vous devez ajouter le code HTML suivant dans la page ou la publication où vous souhaitez afficher l’effet de parallaxe. Vous pouvez également ajouter ce code HTML dans votre thème WordPress ou votre thème enfant.
<div class="parallax"> <div class="parallax-content"> Your content goes here... </div> </div>
Ensuite, vous devez ajouter le 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 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 qu’il fonctionne 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. Vous pouvez également consulter notre méga liste des conseils, astuces et hacks WordPress les plus recherchés.