L'effet Parallax est ce qui est appliqué à la conception d'une page Web et est activé par la touche de verrouillage du défilement. Elle consiste à faire bouger l'image de fond de la page, différemment du reste du contenu. Il s'agit également d'ajouter de la profondeur au design, le rendant intéressant et attrayant pour l'utilisateur.
Maintenant que vous savez ce qu'est un effet de parallaxe, nous allons vous expliquer comment pouvez-vous 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 un 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'expliquerons étape par étape :
- Tout d'abord, accédez à la page d'accueil sur WordPress.org.
- Sur le bureau, recherchez "Plugin" et cliquez sur "Ajouter un nouveau", dans le champ de recherche de copie " Parallaxe ". De cette façon, vous aurez une grande variété, choisissez celui qui vous convient le mieux, installez-le et activez-le.
- Une fois installé, " Défilement de parallaxe « 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 ait. Vous pouvez appliquer la configuration de texte typique offerte par WordPress.
- Ensuite, attribuez un " Image sélectionnée "; Nous recommandons une image avec une bonne résolution, par exemple 2000 x 1000 pixels.
- Une fois que vous avez attribué l'"Image en vedette", allez en bas, où vous pouvez configurer le Effet de parallaxe. 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 ce que vous venez de créer. Là, copiez les données qui apparaissent sous la rubrique « Shortcode ».
- Ouvrez votre page d'accueil et sélectionnez l'option "Modifier la page".
- Localisez le site sur 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 le effet de parallaxe sur votre page.
- Si vous souhaitez apporter des modifications, vous pouvez le faire en revenant au menu du tableau de bord WordPress. Dans Le défilement de parallaxe est Vous pouvez localiser celui que vous venez de créer et apporter vos modifications.
Comment faire l'effet de parallaxe en utilisant le code
Vous pouvez penser que créer cet effet en utilisant le code c'est compliqué, mais ça ne l'est pas. Portez une attention particulière à cette procédure simple, que vous pouvez effectuer à partir de l'éditeur WordPress classique.
- La première chose que vous devez faire est de supprimer le Shortcode que vous venez de saisir lors de la modification de votre page d'accueil. Aussi, vous devez désactiver le Parallax que vous avez installé, dans le menu Plugin.
- 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".
- Trouvez le site sur lequel vous souhaitez que votre Parallax apparaisse. Vous y placerez les éléments suivants :
Titre de parallaxe
- Comme vous pouvez le voir, vous devez nommer votre Parallax et son "h1". Cliquez ensuite sur Mettre à jour.
- Donc, pour configurer toutes les fonctionnalités que nous devons ajouter éléments CCS supplémentaires. Là, nous pouvons ajouter l'image, en utilisant son URL, ainsi qu'ajuster sa taille et sa position.
- De même, 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 :
.miparallasse {
image de fond : URL (http : //….jpg);
largeur : 100 % ;
hauteur : 300 % ;
débordement caché;
attachement à l'arrière-plan : fixe ;
taille de l'arrière-plan : 100 % ;
}
.miparallasse h1 {
couleur : #fff ;
alignement du texte, centre ;
marge supérieure : 130 px ;
}
C'est si 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.
