Avec contenu centré

Aperçu

Dans le composant Avonni Banner, vous pouvez créer une expérience visuelle attrayante et interactive en incorporant une mise en page à deux colonnes dans la section de contenu. Cette mise en page accueillera deux boutons distincts — un Avonni Button Dialog dans la première colonne pour les interactions modales et un Avonni Button dans la deuxième colonne pour des actions externes. Les deux boutons seront centrés horizontalement dans leurs colonnes respectives pour une apparence propre et symétrique.

Guide de configuration interactif étape par étape

Faites glisser le composant Avonni Banner,

• Dans l'Experience Builder, faites glisser le composant Avonni Banner sur votre page à l'endroit où vous souhaitez que la bannière apparaisse.

• Définir le média :

  • Trouvez l'option pour ajouter une image ou une illustration dans les paramètres de la bannière (CMS Media OU URL du média)

  • Téléversez ou sélectionnez l'illustration que vous souhaitez utiliser et positionnez-la à gauche ou à droite de la bannière (en utilisant l'attribut Position du média)

Préparer la mise en page du contenu

1. Insérer le composant Avonni Layout :

   • Dans la section contenu de l'Avonni Banner, placez un composant Avonni Layout configuré en deux colonnes.

Configuration des boutons

1. Ajouter Avonni Button Dialog à la première colonne :

   • Faites glisser un composant Avonni Button Dialog dans la première colonne de la mise en page.

   • Ajustez les paramètres du bouton pour le centrer horizontalement dans la colonne.

2. Insérer Avonni Button dans la deuxième colonne :

   • Placez un composant Avonni Button dans la deuxième colonne.

   • Comme pour le premier bouton, réglez l'alignement horizontal sur centré, en veillant à ce qu'il corresponde à la disposition du Button Dialog dans la colonne opposée.

Conseils pour l'efficacité

• Assurez-vous que les deux boutons sont clairement étiquetés avec des appels à l'action simples et convaincants.

• Le centrage horizontal des boutons offre un aspect soigné et professionnel, visuellement attrayant et facile à naviguer.

• La mise en page à deux colonnes avec des boutons centrés permet un design équilibré, encourageant l'interaction des utilisateurs avec les deux options.

Conclusion

En utilisant un Avonni Layout à deux colonnes et des boutons centrés dans le composant Avonni Banner, vous pouvez créer une section ciblée et interactive incitant les utilisateurs à s'engager avec votre contenu. Cette disposition améliore non seulement l'attrait visuel mais remplit également des fonctions pratiques, orientant les utilisateurs vers les actions souhaitées sur la plateforme Salesforce Experience Cloud.