Le Bloc Bouton vous permet d'ajouter des boutons cliquables d'appel à l'action à vos pages SeedProd. Ce bloc vous aide à guider les visiteurs pour qu'ils effectuent des actions spécifiques, qu'il s'agisse d'un achat, d'une inscription à une newsletter, du téléchargement d'une ressource ou de la navigation vers une autre page.
Les boutons sont des éléments essentiels pour les conversions et l'engagement des utilisateurs. Avec un texte, 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 à agir. Le Bloc Bouton prend en charge 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, faites glisser le bloc Bouton dans la section souhaitée de votre page.
Le Bloc Bouton apparaît dans le panneau Blocs et peut être glissé 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, la destination du lien et l'apparence du bouton.
Bouton :
- Texte du Bouton : Entrez le texte principal qui apparaît sur votre bouton (par exemple, « Commencer », « Acheter maintenant », « En savoir plus »). Gardez-le orienté vers l'action et concis.
- Sous-texte du Bouton : Ajoutez un texte secondaire facultatif qui apparaît sous le texte principal du bouton. Ceci est utile pour ajouter des informations supplémentaires telles que les prix, les offres à durée limitée ou un contexte supplémentaire.
- Lien : Entrez l'URL vers laquelle le bouton doit diriger les visiteurs lorsqu'il est cliqué. 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.
- Alignement : Définissez l'alignement horizontal du bouton dans son conteneur (gauche, centre ou droite)
- Taille : Choisissez la taille du bouton parmi Petit, Moyen, Grand, Très Grand ou Extrêmement Grand. Les boutons plus grands sont plus visibles et conviennent bien aux appels à l'action principaux.
Icônes :
- Icône avant le texte : Ajoutez une icône qui apparaît à 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ît à droite du texte de votre bouton. Ceci est couramment utilisé pour des indications directionnelles comme des flèches ou des indicateurs de lien externe.
L'onglet Contenu vous permet de personnaliser le texte du bouton, les liens, l'alignement, la taille et d'ajouter des icônes décoratives.
Étape 2a : Choisir 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 à la conception de votre page et aux couleurs de votre marque.
L’onglet Modèles fournit onze styles prédéfinis pour personnaliser rapidement l’apparence de votre bouton.
Étape 3 : Personnaliser 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 la police de votre texte de bouton, y compris la famille de polices, la taille, l’épaisseur et le style.
- Style du bouton : Choisissez le traitement visuel de votre bouton. Les options incluent Plat (design plat moderne), 2D (profondeur subtile), Vintage (look 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 correspondre à votre marque ou créer un contraste.
- Rembourrage vertical : Contrôlez l’espacement supérieur et inférieur à l’intérieur du bouton, affectant sa hauteur.
- Rembourrage horizontal : Contrôlez l’espacement gauche et droit à l’intérieur du bouton, affectant sa largeur.
- Rayon de la bordure : Ajustez l’arrondi des coins du bouton. Des valeurs plus élevées créent des boutons plus arrondis, tandis que zéro crée des coins nets.
- Épaisseur de la bordure du bouton : Définissez l'épaisseur du contour de la bordure 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 du bouton pour plus de profondeur et de lisibilité. Choisissez parmi Aucune, Cheveu, Petite, Moyenne, Grande, Très grande, 2x Très grande ou Personnalisée.
- Ombre : Appliquez des effets d’ombre à l’ensemble du bouton pour plus de profondeur. Choisissez parmi Aucune, Cheveu, Petite, Moyenne, Grande, Très grande, 2x Très grande ou Personnalisée.
Espacement :
- Marge : Contrôlez l’espacement extérieur autour de votre bloc de bouton (Haut, Droite, Bas, Gauche). Cela détermine l’espace qui apparaît entre le bouton et les éléments environnants.
- Remarque : Ajustez l’espacement intérieur du conteneur de votre bloc de bouton (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 bouton. Cet ID est créé automatiquement par SeedProd pour un style personnalisé ou un ciblage JavaScript.
- Classe personnalisée : Ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques de votre thème ou de votre CSS personnalisé
- Attributs personnalisés : Ajoutez des attributs HTML à l'élément wrapper du bouton. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur (par exemple, data-action|signup).
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc de bouton sur les écrans d’ordinateur.
- Masquer sur tablette : Masquez le bloc de bouton sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc de bouton sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : Choisissez parmi divers effets d'animation qui se jouent lorsque le bouton apparaît à l'écran. Les options incluent Rebond, Fondu, Zoom avant, Rotation avant, et bien d'autres. Cela attire immédiatement l'attention sur votre appel à l'action.
L'onglet Avancé offre des options de style étendues, 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, assurez-vous de sauvegarder 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. Expérimentez avec différents styles, couleurs, tailles et animations de boutons pour créer des boutons qui se démarquent et génèrent les actions que vous souhaitez que les visiteurs entreprennent.