✓ Dans cet article, nous allons voir comment utiliser l’item Bouton en démarrant une création depuis zéro et comment le modifier si vous l’importez depuis une de nos créations pré-configurées.
ℹ️ Vous pouvez lire l’article ou découvrir toutes les possibilités de l’item bouton et apprendre à l'exploiter pleinement dans cette vidéo.
Ajouter un bouton à votre création
Étape 1 : Ajouter l'item bouton
Pour commencer, accédez au volet de gauche de votre éditeur Kehio et sélectionnez ou ajoutez un Contenu. Une fois sélectionné, ajoutez un bouton en cliquant sur "Ajouter un Item" et sélectionnez l'option bouton.
Étape 2 : Champs textuel et lien
Après avoir ajouté l'item bouton, vous trouverez deux champs distincts :
Le premier champ vous permet de saisir le texte qui apparaîtra sur votre bouton.
Le second champ est destiné à l'ajout d'un lien. Vous avez la possibilité d'ajouter un lien interne à votre boutique ou un lien externe.
Vous avez également la possibilité d'utiliser une fonction spéciale que nous avons intégrée qui redirige le bouton de votre page de vente vers le bloc produit de celle-ci, facilitant l'ajout de produits au panier par les clients. Pour activer cette fonctionnalité, entrez #product dans le champ du lien.
Ces étapes vous permettent de configurer un bouton fonctionnel et adapté à vos besoins spécifiques, améliorant l'interaction des utilisateurs avec votre site.
Modifier le design du Bouton
Depuis la section Paramètre, sélectionnez l’onglet bouton.
Ensuite, une fois le volet ouvert, vous retrouverez plusieurs options de personnalisation :
Étape 1 : Personnalisation
Dans un premier temps, vous pouvez choisir de customiser entièrement votre bouton avec Kehio Editor ou simplement garder celui par défaut de votre boutique.
**Par défaut, l'option de personnalisation est activée si vous souhaitez garder le design de celui de votre thème décoché simplement la case et n'apporter aucune modification dans les paramètres.**
Étape 2: Ouverture du lien
Vous pouvez choisir d’ouvrir le lien dans la même fenêtre de navigateur ou dans une nouvelle fenêtre.
Étape 3: Marge supérieur
Paramétrez les marges supérieures de votre bouton si vous le souhaitez, cette option est utile selon les cas spécifiques mais en général, nous conseillons de gérer les espace depuis les gaps de l’ensemble du contenu de votre bloc.
Étape 4 : Le contenu textuel
1- Couleur :
Vous avez la possibilité de choisir la couleur de la police de votre texte et la couleur au survol de celui-ci.
2- Style de la police :
Cliquez sur le menu déroulant pour choisir l'option souhaitée parmi les suivantes : Clair, Normal, Moyen, Semi gras, Gras, Extra gras. Cette option vous permet de définir le poids de la police pour accentuer ou atténuer l'importance de certains textes.
3- Taille de la police :
Modifiez la taille de la police en cliquant sur les flèches de l'encart de taille pour augmenter ou diminuer celle-ci. Les valeurs sont calculées en "rem", ce qui assure une mise à l'échelle proportionnelle basée sur la taille de police de base du document.
Note: Vous pouvez ajuster la taille du texte différemment pour les ordinateurs et les mobiles, et aussi pour toutes les résolutions d'écran grâce à la gestion des medias queries.
Étape 5 : Couleur du bouton
Ici, vous avez la possibilité de personnaliser la couleur d'arrière-plan de votre bouton. Vous pouvez également configurer la couleur qui apparaîtra lors du passage de la souris sur le bouton (effet de survol).
Étape 6 : Taille du bouton
Hauteur du bouton : Choisissez la hauteur de votre bouton, vous pouvez l’adapter différemment sur mobile et sur ordinateur, par défaut, il sera utilisé celle de l’ordinateur sur mobile.
Largeur du bouton: Choisissez la largeur de votre bouton, vous pouvez l’adapter différemment sur mobile et sur ordinateur, par défaut, il sera utilisé celle de l’ordinateur sur mobile.
Étape 7 : Alignement du bouton
Cliquez sur le bouton d'alignement, puis choisissez parmi les options suivantes : Aligner à gauche, Centrer, ou à droite.
L'alignement peut également être ajusté séparément pour les appareils mobiles et les ordinateurs et aussi pour toutes les résolutions d'écran grâce à la gestion des medias queries.
Vous avez aussi la possibilité d’aligner le bouton sur toute la largueur d’écran sur mobile.
Étape 8 : Bordure
Vous pouvez ajouter une bordure à votre bouton et ajouter une couleur de bordure et une couleur de bordure lors du passage de la souris.
Ajustez l’épaisseur de votre bordure en cliquant sur les flèches des encarts “épaisseur”, la valeur est en “rem” pour ajouter une précision d’ajustement.
Ajustez les angles , vous pouvez définir un arrondi des angles pour adapter votre bouton au style de votre thème.
Étape 9 : Les ombres
L'ajout d'une ombre derrière un bouton peut grandement améliorer son impact visuel en le faisant ressortir.
Choix de la couleur de l'ombre : Sélectionnez la couleur qui convient le mieux au design de votre page et qui complémente l'image.
Gestion des effets de diffusion de l'ombre : Vous disposez de plusieurs options pour affiner l'apparence de l'ombre :
Flou : Ajustez l'intensité du flou pour adoucir ou accentuer l'ombre.
Étendue : Contrôlez la taille de l'ombre pour qu'elle soit plus large ou plus étroite par rapport à l'image, augmentant ainsi l'effet dramatique ou subtil de l'ombre.
Décalage vertical : Déplacez l'ombre vers le haut ou vers le bas par rapport à l'image pour créer un effet de profondeur ou d'élévation.
Décalage horizontal : Déplacez l'ombre vers la gauche ou la droite pour ajouter une dimension latérale à l'effet d'ombre.
Étape 10 : Ombre au passage de la souris
Ajoutez une ombre au passage de la souris pour créer encore plus de dynamisme à votre bouton et augmenter vos taux de clic sur celui-ci.
L’ombre au passage de la souris dispose des même options que l’ombre.
Choix de la couleur de l'ombre
Gestion des effets de diffusion de l'ombre
Si vous avez besoin d’aide pour comprendre ou modifier l’item Bouton, n'hésitez pas à contacter notre équipe d'assistance à tout moment par e-mail ou par chat en direct .