Le bloc Bouton vous permet d'ajouter des boutons d'appel à l'action cliquables à vos pages SeedProd. Ce bloc vous aide à guider les visiteurs vers des actions spécifiques, qu'il s'agisse d'effectuer un achat, de s'inscrire à une newsletter, de télécharger une ressource ou de naviguer vers une autre page.
Les boutons sont des éléments essentiels pour les conversions et l'engagement des utilisateurs. Grâce à des textes, des liens, des styles, des icônes et des effets visuels personnalisables, vous pouvez créer des boutons qui se démarquent et encouragent les visiteurs à passer à l'action. Le bloc Bouton prend en charge à la fois les liens internes (vers d'autres pages de votre site) et les liens externes (vers d'autres sites web), ainsi que les liens d'ancrage pour un défilement fluide vers des sections spécifiques de la même page.
Ajouter le bloc Bouton à vos pages
Suivez ces étapes pour ajouter un bloc Bouton à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, glissez-déposez le bloc Bouton dans la section souhaitée de votre page.
Le bloc Bouton apparaît dans le panneau Blocs et peut être déplacé dans n'importe quelle section ou colonne de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Bouton pour ouvrir ses paramètres. Dans l'onglet Contenu, vous pouvez personnaliser le texte du bouton, la destination du lien et son apparence.
Bouton :
- Texte du bouton : saisissez le texte principal qui apparaîtra sur votre bouton (par exemple, « Commencer », « Acheter maintenant », « En savoir plus »). Veillez à ce qu'il soit concis et incite à l'action.
- Sous-texte du bouton : ajoutez un texte plus petit facultatif qui apparaîtra sous le texte principal du bouton. Cela est utile pour ajouter des informations supplémentaires telles que les prix, les offres à durée limitée ou des informations contextuelles supplémentaires.
- Lien : entrez l'URL vers laquelle le bouton doit rediriger les visiteurs lorsqu'ils cliquent dessus. Il peut s'agir d'une URL complète (https://example.com), d'un chemin relatif (/about) ou d'un lien d'ancrage (#section-name) pour la navigation sur la même page.
- Aligner : définit l'alignement horizontal du bouton dans son conteneur (à gauche, au centre ou à droite).
- Taille : choisissez la taille du bouton parmi les options suivantes : petit, moyen, grand, très grand ou très très grand. Les boutons plus grands sont plus visibles et conviennent mieux aux appels à l'action principaux.
Icônes :
- Avant le texte de l'icône : ajoutez une icône qui apparaîtra à gauche du texte de votre bouton. Cliquez sur « Choisir une icône » pour parcourir et sélectionner parmi des centaines d'icônes disponibles.
- Icône après le texte : ajoutez une icône qui apparaîtra à droite du texte de votre bouton. Elle est généralement utilisée pour les indications directionnelles telles que les flèches ou les indicateurs de liens externes.
L'onglet Contenu vous permet de personnaliser le texte des boutons, les liens, l'alignement, la taille et d'ajouter des icônes décoratives.
Étape 2a : Choisissez un style de modèle
Dans l'onglet Modèles, vous pouvez choisir parmi des styles de boutons prédéfinis pour modifier rapidement l'apparence générale de votre bouton.
- Bouton pilule, bouton plat, bouton bleu, bouton vert clair, bouton vert, bouton orange, bouton rouge, bouton jaune, bouton blanc, bouton gris, bouton noir : choisissez parmi onze modèles différents, chacun avec des couleurs et un style uniques. Prévisualisez chaque style pour trouver celui qui correspond le mieux au design de votre page et aux couleurs de votre marque.
L'onglet Modèles propose onze styles prédéfinis pour personnaliser rapidement l'apparence de votre bouton.
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle de votre bloc Bouton :
Styles :
- Typographie : contrôlez les propriétés de police du texte de vos boutons, notamment la famille, la taille, le poids et le style de police.
- Style du bouton : choisissez l'apparence de votre bouton. Les options disponibles sont les suivantes : Plat (design plat moderne), 2D (profondeur subtile), Vintage (aspect classique), Fantôme (transparent avec bordure), Lien (lien texte simple) ou Personnalisé (contrôle manuel complet).
- Couleur d'arrière-plan : définissez la couleur d'arrière-plan de votre bouton pour qu'elle corresponde à votre marque ou créez un contraste.
- Remplissage vertical : contrôle l'espacement supérieur et inférieur à l'intérieur du bouton, ce qui affecte sa hauteur.
- Remplissage horizontal : contrôle l'espacement gauche et droit à l'intérieur du bouton, ce qui affecte sa largeur.
- Rayon de la bordure : ajustez l'arrondi des coins des boutons. Des valeurs plus élevées créent des boutons plus arrondis, tandis que zéro crée des coins nets.
- Largeur du contour du bouton : définit l'épaisseur du contour du bouton.
- Couleur de la bordure du bouton : choisissez la couleur de la bordure du bouton.
- Ombre du texte : ajoutez des effets d'ombre au texte des boutons pour plus de profondeur et de lisibilité. Choisissez parmi Aucun, Très fin, Petit, Moyen, Grand, Très grand, 2 fois plus grand ou Personnalisé.
- Ombre : appliquez des effets d'ombre à l'ensemble du bouton pour lui donner de la profondeur. Choisissez parmi Aucun, Trait fin, Petit, Moyen, Grand, Très grand, 2 fois plus grand ou Personnalisé.
Espacement :
- Marge : contrôlez l'espacement extérieur autour de votre bloc de boutons (haut, droite, bas, gauche). Cela détermine l'espace qui apparaît entre le bouton et les éléments environnants.
- Remplissage : ajustez l'espacement intérieur dans le conteneur de votre bloc de boutons (haut, droite, bas, gauche). Cela crée un espace autour du bouton lui-même.
Attributs :
- ID CSS : affiche l'identifiant unique généré automatiquement pour votre bloc de boutons. Cet identifiant est créé automatiquement par SeedProd pour la personnalisation du style ou le ciblage JavaScript.
- Classe personnalisée : ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques à partir de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : ajoutez tous les attributs HTML à l'élément conteneur du bouton. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-de-l'attribut|valeur (par exemple, data-action|signup)
Visibilité des appareils :
- Masquer sur le bureau : masquer le bloc de boutons sur les écrans de bureau.
- Masquer sur tablette : masquer le bloc de boutons sur les tablettes.
- Masquer sur mobile : masquer le bloc de boutons sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : choisissez parmi divers effets d'animation qui s'affichent lorsque le bouton apparaît à l'écran. Les options disponibles incluent Rebond, Fondu entrant, Zoom avant, Rotation et bien d'autres encore. Cela attire immédiatement l'attention sur votre appel à l'action.
L'onglet Avancé offre de nombreuses options de style, notamment la typographie, les couleurs, le remplissage, les bordures, les ombres et les effets d'animation.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Bouton et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Bouton à votre page ! Ce bloc essentiel vous aide à créer des appels à l'action clairs qui guident les visiteurs vers vos objectifs de conversion. Testez différents styles, couleurs, tailles et animations de boutons pour créer des boutons qui se démarquent et incitent les visiteurs à effectuer les actions que vous souhaitez.