Avec contenu centré

Aperçu

Dans le composant Avonni Banner, vous pouvez créer une expérience visuelle attrayante et interactive en incorporant une disposition à deux colonnes dans la section contenu. Cette disposition 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 nette et symétrique.

Guide interactif de configuration pas à pas

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 Media URL)

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

Préparation de 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 au sein de 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, définissez l'alignement horizontal sur centre, en vous assurant qu'il correspond à la mise en page 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 disposition à 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 avec des boutons alignés au centre dans le composant Avonni Banner, vous pouvez créer une section focalisée et interactive qui incite les utilisateurs à interagir avec votre contenu. Cette disposition améliore non seulement l'attrait visuel mais remplit également des fonctions pratiques, en orientant les utilisateurs vers les actions désirées sur la plateforme Salesforce Experience Cloud.