Qu’est-ce que l’effet Parallax? Pourquoi et comment l’utiliser sur votre site WordPress

Qu'est-ce que l'effet Parallax? Pourquoi et comment l'utiliser sur votre site WordPress

L’effet de parallaxe est une fonctionnalité de conception extrêmement populaire qui est couramment utilisée sur les sites Web WordPress. Cet effet spécial fait son apparition dans le monde du jeu depuis des années, mais s’est récemment étendu à la conception Web. Et jusqu’à présent, cette tendance majeure ne semble aller nulle part, si ce n’est qu’elle est plus largement utilisée que jamais. Alors, quel est l’effet de parallaxe et pourquoi devriez-vous envisager de l’utiliser sur votre site WordPress?


Dans cet article, nous examinerons ce qu’est un effet de parallaxe et les avantages qu’il peut apporter à votre site et à votre entreprise. Nous verrons ensuite comment ajouter rapidement et facilement un effet de parallaxe à n’importe quel site Web, page ou publication WordPress, avec le plugin gratuit Parallax Scroll.

Qu’est-ce que l’effet parallaxe?

Vingt-dix-sept

L’effet de parallaxe implique une page Web fond se déplaçant à un rythme plus lent que le premier plan. Cela crée une illusion de profondeur sur la page, donnant au contenu un effet 3D lorsque les spectateurs défilent vers le bas.

La majorité des thèmes WordPress premium sont désormais livrés avec un effet de parallaxe intégré sur leur page d’accueil. Même le thème par défaut gratuit WordPress Twenty Seventeen est livré avec une fonctionnalité de parallaxe. La plupart des constructeurs de pages intègrent également un outil d’effet de parallaxe, vous permettant d’ajouter l’effet à n’importe quelle page ou publication sur votre site Web. Et bien sûr, il existe de nombreux plugins WordPress que vous pouvez installer pour ajouter des éléments d’effet de parallaxe à votre site Web..

Quels sont les avantages de l’utilisation d’un effet de parallaxe?

Il existe un certain nombre d’avantages à utiliser un effet de parallaxe sur votre site Web WordPress. Le premier, et le plus évident, est l’aspect visuel d’un effet de parallaxe. Un effet de parallaxe est esthétiquement plaisant, donner à votre site Web un aspect et une sensation frais, élégant et moderne. Cette effet wow peut rendre votre contenu vraiment pop et crée une expérience de navigation passionnante et intéressante.

Une autre raison clé d’utiliser l’effet de parallaxe sur votre site est d’aider casser une page, en particulier une page d’accueil, en morceaux lisibles. Utilisez cet effet pour mettre en valeur les différentes sections et types de contenu que vous souhaitez présenter. Cela peut aider à promouvoir différents aspects de votre site Web, à éclairer des informations importantes et à encourager les utilisateurs à naviguer sur votre site et à accéder au contenu de la manière de votre choix..

L’effet de parallaxe peut être utilisé sur n’importe quelle page ou publication d’un site Web, mais peut être particulièrement visible sur les pages d’accueil, les pages de destination ou les sites d’une page. La superbe parallaxe visuelle créée et l’effet positif qu’elle a sur l’expérience utilisateur peuvent faire en sorte que les visiteurs restent plus longtemps sur votre site et aider à améliorer les taux de conversion de votre site par rapport à ses objectifs..

Parallax sur mobile

Bien que la parallaxe soit idéale pour ajouter un intérêt visuel, elle ne fonctionne pas toujours bien sur les appareils mobiles. Étant donné que les téléphones et les tablettes utilisent généralement la navigation par balayage (au lieu d’un défilement comme les ordinateurs de bureau), les effets de parallaxe peuvent ne pas s’afficher correctement. Bien sûr, cela dépendra de la méthode et des animations que vous utilisez pour votre propre section de parallaxe, mais pour une bonne utilisation, vous pouvez envisager de désactiver la parallaxe sur les appareils.

Sélectionnez un thème avec effet de parallaxe

Total

Pour ceux d’entre vous qui commencent un nouveau projet, vous devez sélectionner un thème premium qui comprend une fonction d’effet de parallaxe. Et si vous souhaitez utiliser un effet de parallaxe sur une variété de pages de votre site Web, et pas seulement sur la page d’accueil, vous pouvez envisager un thème polyvalent fourni avec un constructeur de page avancé. Des thèmes comme Divi from Elegant Themes, Parallax by Themify et notre propre thème Total, incluent tous des constructeurs de pages fournissant des outils d’effet de parallaxe.

Ajouter des curseurs Parallax avec le plugin WordPress Slider Revolution

Slider Revolution Parallax

Si vous voulez un curseur vedette avec un effet de parallaxe, notre premier choix est le plugin Slider Revolution. Ce plugin premium comprend des centaines d’options et de fonctionnalités intégrées pour les polices, les calques, les effets de curseur, les mises en page et bien sûr la parallaxe.

Activer la Parallax de Slider Revolution

Installez d’abord le plugin, puis importez un modèle de curseur ou commencez à créer votre propre curseur à partir de zéro (vous pouvez lire notre guide complet sur la révolution du curseur pour plus de détails).

Paramètres de parallaxe de Slider Revolution

Ensuite, modifiez la diapositive Contexte principal ajouter un La source l’image d’arrière-plan et sélectionnez le Parallax / 3D pour attribuer un niveau de parallaxe. Ensuite, lorsque vous ajoutez des calques, sélectionnez Parallax / 3D option de calque pour la profondeur de parallaxe pour ajouter du mouvement à votre texte, image, bouton et autres calques. C’est si facile!

Lorsque vous avez terminé, enregistrez votre curseur et utilisez le shortcode pour l’insérer dans n’importe quelle publication ou page. Ou si vous utilisez un générateur de page comme Visual Composer, vous pouvez utiliser l’élément Slider Revolution du générateur de page pour sélectionner et insérer rapidement votre curseur.

Ajouter des sections Parallax avec le plugin WordPress Scroll Parallax

Défilement de parallaxe

Si vous avez déjà un thème et qu’il n’inclut pas d’option d’effet de parallaxe intégrée, vous devriez envisager d’utiliser un plugin WordPress pour faire le travail. Défilement de parallaxe est une option gratuite populaire qui vous permettra d’ajouter une image d’arrière-plan de défilement parallaxe à différents éléments sur une page ou une publication de votre site Web. Ajoutez un arrière-plan défilant à un seul élément, un texte d’en-tête ou une section complète contenant n’importe quel contenu, le tout en utilisant un simple shortcode.

Voyons maintenant comment installer et commencer à utiliser Parallax Scroll…

Installer Parallax Scroll

Pour installer Parallax Scroll, connectez-vous à votre tableau de bord WordPress en tant qu’administrateur et sélectionnez Plugins> Ajouter un nouveau du menu.

Ajouter un nouveau plugin

Chercher Défilement de parallaxe, puis sélectionnez Installer maintenant> Activer.

Activation du défilement Parallax

Vous allez maintenant trouver un onglet Parallax Scroll a été ajouté à votre menu WordPress.

Ajouter une section de défilement Parallax

Pour commencer avec Parallax Scroll, vous devez d’abord créer une nouvelle section de parallaxe. Pour ce faire, sélectionnez Défilement Parallax> Ajouter un nouveau depuis votre menu WordPress.

Défilement Parallax Ajouter un nouveau

Ici, vous pouvez maintenant créer votre nouvelle section de parallaxe…

Ajouter une nouvelle parallaxe

Définition de l’image d’arrière-plan de défilement parallaxe

Tout d’abord, vous devez définir une image pour votre arrière-plan de parallaxe de défilement. Pour ce faire, cliquez sur Définir l’image sélectionnée et ajoutez l’image à la section Image vedette.

L'image sélectionnée

Réfléchissez bien à l’image que vous utilisez pour chaque section d’arrière-plan. Assurez-vous qu’ils sont pertinents pour votre site et synchronisés avec votre image de marque. Si vous souhaitez afficher un en-tête ou un contenu supplémentaire au-dessus de cette image d’arrière-plan, envisagez d’utiliser une couleur de bloc ou des motifs subtils au lieu d’une photo ou d’un graphique accrocheur. Cela peut aider à garantir que votre image fonctionne avec et promeut votre contenu, au lieu de le distraire.

Si vous choisissez d’utiliser des photographies, les images doivent être de haute qualité. De belles images accrocheuses peuvent aider à donner à votre site une apparence professionnelle et unique. Ces visuels créeront une forte impression sur votre public, ce qui incitera les gens à se souvenir et à revenir sur votre site. Il existe un large éventail de sites Web de stock à partir desquels vous pouvez télécharger des images de qualité supérieure. Découvrez notre collection de sites Web de photos gratuits et premium où vous trouverez rapidement de superbes photographies pour vos arrière-plans de parallaxe.

Création d’un texte d’en-tête sur l’arrière-plan de parallaxe

Ajouter un en-tête

Si vous souhaitez créer un texte d’en-tête avec un arrière-plan de parallaxe, vous devez ensuite saisir un titre de publication. Ce titre apparaîtra alors comme votre titre d’en-tête en haut de votre image d’arrière-plan de parallaxe choisie.

Vous ne voudrez peut-être pas d’en-tête dans votre section de parallaxe. Si tel est le cas, vous devez toujours attribuer un titre à chaque parallaxe, de sorte que chaque section que vous créez est facilement identifiable. Vous devrez ensuite sélectionner pour masquer le titre dans le Options de défilement de parallaxe (traité plus loin dans cet article), de sorte qu’un en-tête ne s’affiche pas sur la face avant de votre site.

Afficher tout contenu avec un arrière-plan défilant Parallax

Vous souhaiterez peut-être que la section de parallaxe affiche d’autres contenus sur l’image d’arrière-plan. Cela peut inclure tout ce qui est nécessaire pour votre site, du texte et des images aux shortcodes. Décidez de ce que vous souhaitez afficher, puis entrez ce contenu dans la boîte aux lettres.

Personnalisation des paramètres de défilement Parallax

Une fois que vous êtes satisfait du contenu, vous devez personnaliser les paramètres de la section de parallaxe en fonction de votre page.

Options de défilement de parallaxe

Faites défiler jusqu’à Options de défilement de parallaxe. Sous Style, vous pouvez modifier la hauteur de parallaxe et la taille de l’image ainsi que la sélection de la pleine largeur pour forcer votre thème à afficher l’image d’arrière-plan sur toute la largeur de l’écran si ce n’est pas déjà fait..

Vous pouvez également modifier la position horizontale et verticale de l’en-tête sur le fond de parallaxe. Et si vous souhaitez masquer le titre du message, vous pouvez le faire ici en tapant affichage: aucun; dans Style d’en-tête.

Paramètres de parallaxe vous permettra de personnaliser le comportement de votre rouleau de parallaxe. Cela inclut la modification de la vitesse du fond de parallaxe. Essayez différentes vitesses pour voir ce qui fonctionne pour votre site Web et votre audience.

Il y a aussi Paramètres mobiles option, qui vous permet de désactiver l’image de fond et / ou le contenu de parallaxe sur les mobiles, si vous pensez que les sections de parallaxe ne fonctionnent pas bien sur les appareils mobiles.

Une fois que vous avez ajusté les paramètres et terminé de créer votre section de parallaxe, cliquez sur Publier.

Insertion de la section Parallax dans une publication ou une page

Ensuite, vous devez insérer votre section de parallaxe dans un article ou une page de votre site Web. Sélectionnez Parallax Scroll dans votre menu WordPress.

Shortcode Scroll Parallax

Dans le tableau présenté, vous verrez maintenant un shortcode pour la section de parallaxe que vous venez de créer. Copiez le code, puis ouvrez la page ou la publication appropriée. Collez le code dans le contenu de la page à la position appropriée.

Insérer un shortcode

Prévisualisez les modifications et si vous êtes satisfait de votre nouvelle section de parallaxe, cliquez sur Publier. Vous pouvez maintenant créer d’autres sections pour donner à la page ou publier un effet de parallaxe complet. Et si vous devez apporter des modifications, il vous suffit de rouvrir la page de la section de parallaxe et d’apporter les modifications nécessaires.

Dernières pensées

Si votre thème n’a pas de fonction d’effet de parallaxe intégrée, ou si vous souhaitez ajouter un effet à plus que votre page d’accueil, Parallax Scroll vous permettra de créer rapidement des sections de parallaxe à ajouter à vos pages ou publications.

Comme vous l’avez vu, l’ajout d’un effet de parallaxe à votre site Web peut être très utile. Non seulement il peut améliorer considérablement les visuels de votre site Web, mais il aidera également votre audience, leur permettra de naviguer facilement sur votre site et d’accéder au contenu, et d’augmenter le temps qu’ils passent sur votre site. Cette expérience utilisateur améliorée devrait en fin de compte aider votre site à se convertir par rapport à ses objectifs, qu’il s’agisse d’augmenter le nombre de visiteurs, de collecter des prospects ou de vendre des produits ou des services..

Allez-vous ajouter un effet de parallaxe à votre page d’accueil, une page de destination, un article ou ailleurs? Veuillez partager vos réflexions dans les commentaires ci-dessous…

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map