Comment ajouter des flèches et des puces de navigation à Slider Revolution

Cet article fait partie de notre série en cours de didacticiels Slider Revolution. Vous pouvez trouver tous les articles de cette série dans notre guide complet de la révolution des curseurs.

Une navigation intuitive et bien conçue est la clé d’une bonne expérience utilisateur. Cela est également vrai pour toutes les parties individuelles de votre site Web comme pour le site dans son ensemble. En ce qui concerne votre curseur, la navigation permet non seulement à vos utilisateurs de basculer entre vos diapositives, mais leur permet également de savoir en un coup d’œil qu’il y a plus de diapositives à regarder. Donc, aujourd’hui, nous allons voir comment ajouter la navigation à Slider Revolution.

Il existe deux types de navigation de base pour un curseur : les flèches et les puces. Nous allons utiliser la navigation par flèches pour les écrans plus grands, comme les ordinateurs de bureau et les ordinateurs portables. Nous réserverons la navigation par puces pour les petits appareils comme les tablettes et les téléphones.

Comment ajouter des puces de navigation à Slider Revolution

Lorsque vous utilisez un curseur orienté horizontalement, il est logique d’ajouter des flèches à gauche et à droite de l’écran. Pour activer les flèches dans Slider Revolution, accédez à Navigation > Flèches et interrupteur Type de flèche à AU.

Il existe plusieurs styles de flèches par défaut. Pour changer l’apparence de votre style de flèches, consultez le Style de flèche liste déroulante pour voir quelles options sont disponibles.

Une fois que vous avez décidé du style de vos flèches, vous pouvez continuer et personnaliser chaque flèche séparément (gauche et droite). Il y a pas mal de choses avec lesquelles vous pouvez jouer ici.

Les flèches peuvent être alignées sur votre diapositive (Dimensions des modules), ou à vos grilles (Teneur).

Ensuite, vous pouvez définir l’alignement des flèches et ajouter des rembourrages horizontaux et verticaux.

Les flèches peuvent également être animées. L’animation qui apparaît par défaut est une simple Disparaître. Si vous souhaitez modifier la façon dont il entre à l’écran, choisissez une animation différente dans la liste déroulante.

Vous pouvez également modifier la vitesse et le délai de l’animation, ainsi que masquer les flèches sur les petits appareils. Les flèches seront toujours visibles à moins que vous ne tourniez AU le commutateur à côté de Masquer sous. Ensuite, il vous suffit de saisir la taille d’écran en dessous de laquelle vous souhaitez que les flèches disparaissent. Nous utilisons normalement la valeur de 778px. En faisant cela, on masque les flèches sur tous les appareils tactiles (tablettes et mobiles).

Le style de la navigation peut être facilement personnalisé, à tel point que vous pouvez créer votre propre style entièrement original sans aucune connaissance en matière de codage.

Ajout de puces de navigation à Slider Revolution

Comme nous l’avons déjà mentionné, étant donné que les balles sont plus petites et ne prennent pas autant de place à l’écran, elles sont principalement utilisées pour la navigation sur les appareils tactiles. Ils servent d’indicateur agréable et subtil qu’il y a plus de diapositives à afficher.

Pour activer les puces dans Slider Revolution, accédez à Navigation > Puces et interrupteur Type de balles à AU.

Tout comme les flèches de navigation, les puces ont également une liste déroulante qui vous permet de choisir une variété de styles.

Pour définir l’espacement entre les puces, modifiez simplement le gap valeur.

Pour définir la direction de vos balles, choisissez entre horizontal ou vertical pour le Orientation. Vous devez utiliser la direction verticale lorsque vous avez un curseur vertical. Et, dans ce cas, nous vous recommandons d’utiliser uniquement des puces, sans flèches. Dans tous les autres cas, nous vous suggérons d’utiliser des puces uniquement pour les appareils plus petits, avec leur direction horizontale.

Pour masquer les puces sur les écrans de bureau et d’ordinateur portable, activez le Masquer sur la largeur et définissez la largeur sur 1024px.

Vous pouvez également jouer avec le style de navigation de vos balles si vous souhaitez leur créer un look original.

En conclusion

Et c’est tout. Vous savez maintenant comment ajouter une navigation à Slider Revolution. Vous devriez toujours essayer de faire de votre mieux pour personnaliser vos flèches de navigation et vos puces de navigation afin de mieux les adapter au style de votre site Web. Mais même en ajoutant simplement les éléments de navigation par défaut à votre slider, vous boosterez l’UX de votre site et le rendrez plus intuitif pour vos visiteurs.