Avec contenu centré

Aperçu

Dans le composant Avonni Banner, vous pouvez créer une expérience visuellement attrayante et interactive en intégrant une disposition à deux colonnes dans la section de contenu. Cette disposition accueillera deux boutons distincts — un Boîte de dialogue du bouton Avonni dans la première colonne pour les interactions modales et un bouton standard Bouton Avonni dans la deuxième colonne pour les actions externes. Les deux boutons seront centrés horizontalement dans leurs colonnes respectives pour un rendu net et symétrique.

Guide de configuration interactif étape par étape

Faites glisser le composant Avonni Banner,

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

  • Trouvez l'option permettant d'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 (à l'aide de l'attribut Media Position)

Préparation de la mise en page du contenu

1. Insérer le composant Avonni Layout :

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

Configuration des boutons

1. Ajoutez le composant 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, définissez l'alignement horizontal sur centré, en veillant à ce qu'il corresponde à la mise en page du Button Dialog dans la colonne opposée.

Conseils pour une utilisation efficace

• Veillez à ce que les deux boutons soient clairement libellés avec des appels à l'action simples et convaincants.
• Le centrage horizontal des boutons offre un aspect soigné et professionnel, visuellement attrayant et facile à parcourir.
• La mise en page à deux colonnes avec des boutons centrés permet une conception équilibrée, encourageant l'interaction des utilisateurs avec les deux options.

Conclusion

En utilisant un Avonni Layout à deux colonnes et des boutons alignés au centre dans le composant Avonni Banner, vous pouvez créer une section ciblée et interactive qui incite les utilisateurs à interagir avec votre contenu. Cette disposition améliore non seulement l'attrait visuel, mais sert également des objectifs fonctionnels, en orientant les utilisateurs vers les actions souhaitées sur la plateforme Salesforce Experience Cloud.