Qu’est-ce que et comment créer un effet de parallaxe dans WordPress

De nos jours, il est très courant d’utiliser l’effet de parallaxe dans la conception de pages Web , ce qui le rend plus dynamique et attrayant. C’est pourquoi dans ce blog, nous expliquerons ce que c’est et comment créer un effet Parallax dans WordPress .

L’effet Parallax est celui qui est appliqué à la conception d’une page Web et est activé par la touche de verrouillage de défilement. Il consiste à faire bouger l’image d’arrière-plan de la page, en le faisant différemment du reste du contenu. Il s’agit également d’ajouter de la profondeur à la conception, la rendant intéressante et attrayante pour l’utilisateur.

Maintenant que vous savez ce qu’est un effet de parallaxe, nous allons vous expliquer comment vous pouvez le faire en utilisant WordPress . La première chose à garder à l’esprit est que vous pouvez appliquer deux méthodes, sans code et en utilisant du code, ces méthodes vous seront expliquées ci-dessous.

Comment faire l’effet de parallaxe sans code dans WordPress

L’application d’un effet de parallaxe à votre conception Web est totalement simple sans appliquer de codes. Ensuite, nous vous l’expliquons étape par étape:

• Tout d’abord, accédez à la page d’accueil de WordPress.org.
• Sur le bureau, recherchez «Plugin» et cliquez sur «Ajouter nouveau», dans le champ de recherche copiez » Parallax «. Vous aurez ainsi une grande variété, choisissez celui qui vous convient le mieux, installez-le et activez-le.
• Une fois installé, » Parallax scroll » apparaîtra sur le côté gauche du bureau , entrez-y et ajoutez-en un nouveau, placez le titre que vous voulez. Dans le champ de contenu, vous obtiendrez deux onglets: «Visuel» et «HTML». Dans ce cas, sélectionnez «Visuel».
• Dans ce champ de contenu, vous pouvez saisir le texte que vous souhaitez que votre Parallax contienne. Vous pouvez appliquer la configuration de texte typique proposée par WordPress.
• Attribuez ensuite une » Image en vedette «; Nous recommandons une image qui a une bonne résolution, par exemple 2000 x 1000 pixels.
• Une fois que l ‘»Image en vedette» est attribuée, allez en bas, où vous pouvez configurer l’ effet Parallax . Vous pouvez modifier la taille, la position, la vitesse et d’autres options.
• Avec cela, ce que vous devez faire est d’aller en haut à droite et de sélectionner «Publier».
• Ensuite, allez dans le menu du bureau et sélectionnez à nouveau Parallax Scroll, il vous montrera dans une liste celle que vous venez de créer. Là, copiez les données qui apparaissent sous l’élément «Shortcode».
• Ouvrez votre page d’accueil et sélectionnez l’option «Modifier la page».
• Localisez le site de votre page où vous souhaitez que votre Parallax apparaisse, puis collez le «Shortcode» que vous venez de copier à l’étape précédente.
• Enfin, cliquez sur «Mettre à jour» pour que les modifications soient appliquées à votre page d’accueil.
• Sélectionnez dans le menu WordPress «Visiter le site» et vous verrez l’ effet de parallaxe sur votre page .
• Si vous souhaitez apporter des modifications, vous pouvez le faire en retournant au menu du tableau de bord WordPress. Dans Parallax Scroll, vous pouvez localiser celui que vous venez de créer à nouveau et apporter les modifications appropriées.

Comment faire l’effet de parallaxe à l’aide de code

Vous pensez peut-être que créer cet effet à l’ aide de code est compliqué, mais ce n’est pas le cas. Faites très attention à cette procédure simple, que vous pouvez faire à partir de l’ éditeur WordPress classique.

• La première chose à faire est de supprimer le Shortcode que vous venez de placer lors de l’édition de votre page d’accueil. De plus, vous devez désactiver la parallaxe que vous avez installée , dans le menu Plugins.
• Ouvrez la page ou l’article auquel vous souhaitez ajouter un effet de parallaxe.
• Dans le champ de contenu, recherchez l’onglet du langage «HTML».
• Localisez le site sur lequel vous souhaitez que votre Parallax apparaisse. Vous y placerez les éléments suivants:

<div class = «Nom de la parallaxe»>

<h1> Titre de la parallaxe </h1>

</div>

• Comme vous pouvez le voir, vous devez attribuer un nom à votre Parallax et à son «h1». Cliquez ensuite sur mettre à jour.
• Ensuite, pour configurer toutes les fonctionnalités, nous devons ajouter des éléments CCS supplémentaires . Là, nous pouvons ajouter l’image, en utilisant son URL, ainsi que régler sa taille et sa position.
• De la même manière, nous pouvons configurer les lettres de la parallaxe, la taille, la couleur et la position. Nous ferons tout cela en copiant ce qui suit dans le champ de code:

.miparallax {

image de fond: URL (http: //….jpg);

largeur: 100%;

hauteur: 300%;

débordement caché;

background-attachment: fixe;

taille du fond: 100%;

}

.miparallax h1 {

couleur: #fff;

texte-align; centre;

marge supérieure: 130px;

}

C’est aussi simple que vous pouvez faire l’effet de parallaxe via WordPress, suivez notre page pour savoir quelles autres techniques et ressources vous pouvez apprendre à le faire.