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.
Qu’il s’agisse d’appels à l’action, de parties de l’interface utilisateur ou de simples liens, les boutons sont un élément essentiel de tout site Web. Lorsqu’il est conçu avec soin et considération, ils peuvent aider à guider les utilisateurs à travers votre site et à améliorer l’expérience globale de vos visiteurs. Mais en plus de savoir comment concevoir un bouton efficace, vous devez également considérer où vous positionnez vos boutons. Et un curseur au-dessus du pli est toujours un bon choix pour le placement de tout élément important du site Web. Ainsi, dans le didacticiel d’aujourd’hui, nous allons vous montrer comment ajouter des boutons à Slider Revolution. Cela peut être fait soit par en ajoutant un shortcode de bouton au curseur ou en créant un nouveau calque de bouton. Nous avons déjà expliqué comment ajouter des codes courts à Slider Revolution dans un article dédié, alors assurez-vous de vérifier cela si vous souhaitez ajouter d’autres codes courts à vos curseurs.
Vous pouvez également consulter notre vidéo sur la façon d’ajouter des boutons à Slider Revolution :
Ou, si vous préférez un guide de texte étape par étape, lisez la suite.
Ajout d’un shortcode de bouton à Slider Revolution
L’ajout d’un bouton à votre curseur via un shortcode est assez simple. Mais avant d’ajouter le code réel à votre curseur, Je vous recommande de « construire » un bouton sur une page de test, et assurez-vous que tout se présente comme vous le souhaitez.
Pour les besoins de ce didacticiel, nous utiliserons le Eventuellement Thème WordPress. Nous construirons notre bouton avec le shortcode du bouton personnalisé du thème.
Dans le shortcode Général paramètres, vous pouvez voir que nous avons diverses options de personnalisation. La manière exacte dont vous définissez les options de votre bouton dépendra du thème que vous utilisez et du style de bouton que vous recherchez.
Le bouton de ce thème a également Concevoir options afin que vous puissiez « concevoir » le bouton vous-même. Vous pouvez choisissez les couleurs initiales et survolées pour l’arrière-plan, le texte et la bordure du bouton, ainsi que choisir une taille de police, une épaisseur de police et personnaliser la marge et le remplissage du bouton.
Une fois que vous avez défini l’apparence de votre bouton, passez en mode d’édition de texte et copiez le shortcode du bouton. Dans mon cas, le code est [mkdf_button size=”small” text=”Purchase” target=”_blank” icon_pack=”” font_weight=”700″ link=”https://evently.mikado-themes.com/” color=”#ffffff” hover_color=”#ffffff” background_color=”#356bf8″ hover_background_color=”#0141f5″ border_color=”#356bf8″ hover_border_color=”#0141f5″ font_size=”13″ padding=”16px 46px”].
Maintenant, allez à votre curseur et ajouter un simple calque de texte. Puis coller le code vous avez précédemment copié dans ce calque. Il apparaîtra dans votre cadre de travail sous forme de texte.
Cependant, lorsque vous enregistrez votre curseur et accédez à la page sur laquelle il est placé, le bouton devrait s’afficher correctement. Vous pouvez maintenant jouer avec la position, la réactivité et l’animation du bouton.
Ajout d’un calque de bouton à la révolution du curseur
Vous n’êtes peut-être pas fan du design des boutons fournis avec votre thème. Ou peut-être que le thème n’a pas du tout de shortcode de bouton prédéfini. Quelle que soit la raison de votre décision de créer votre propre bouton dans Slider Revolution, vous allez maintenant apprendre exactement comment le faire.
Tout d’abord, ajoutez un calque de bouton au cadre de travail du curseur.
Lorsque vous ajoutez le bouton, il apparaîtra sous forme de texte dans votre cadre de travail, jusqu’à ce que vous le personnalisiez.
Sur le côté droit de l’écran, vous trouverez beaucoup de styles de boutons prédéfinis, et vous pouvez simplement choisir celui qui correspond au style de votre site Web.
En plus de ces styles de boutons courants, vous pouvez également opter pour quelque chose d’un peu différent, comme des boutons de lecture par exemple.
De plus, vous pouvez ajouter un ombre effet à votre bouton.
Une fois que vous avez défini le style de bouton de base, vous pouvez aller et modifier ses paramètres avancés pour mieux s’adapter à l’apparence de votre site Web.
La personnalisation du bouton est identique à la personnalisation de tout autre calque à partir des options de calque. Tout ce dont vous avez besoin est là-bas, de la modification de l’apparence initiale du bouton à changer la façon dont il s’affichera au survol, et ajouter des animations et l’assouplir.
Et c’est tout. Une fois que vous avez terminé de configurer votre couche de boutons, vous pouvez travailler sur des options plus avancées telles que sa réactivité et son animation entrante. Voici un exemple d’animation entrante du thème Evently :
Assurez-vous de consulter toute notre série d’articles Slider Revolution pour en savoir plus sur l’animation de vos diapositives et la responsabilisation de vos calques.
En conclusion
Que vous créiez votre bouton en tant que shortcode ou via une couche Slider Revolution, vous pouvez facilement personnaliser ses styles et essayer différents textes pour voir ce qui fonctionne le mieux pour les visiteurs de votre site Web. Mais maintenant que vous avez appris ces deux façons extrêmement simples d’ajouter des boutons à Slider Revolution, vous pouvez vous assurer que chacune de vos diapositives a un appel à l’action ou un lien qui permettra à vos visiteurs de savoir ce que vous aimeriez qu’ils fassent ou quelle page de votre site vous souhaitez qu’ils visitent ensuite.
Soutenez notre effort ❤️
Si vous avez apprécié cet article, pensez à laisser un pourboire pour nous aider à continuer à publier du contenu de qualité.
