# Con contenuto centrato

## Panoramica

Nel componente Avonni Banner, puoi creare un'esperienza visivamente coinvolgente e interattiva incorporando un layout a due colonne nella sezione del contenuto. Questo layout conterrà due pulsanti distinti — un [Avonni Button Dialog](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-finestra-di-dialogo-pulsante) nella prima colonna per le interazioni modali e un [Avonni Button](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-pulsante) nella seconda colonna per azioni esterne. Entrambi i pulsanti saranno centrati orizzontalmente all'interno delle rispettive colonne per un aspetto pulito e simmetrico.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FNNT2f9ojabEJG6NZ6Qe1%2F2023-11-07_20-51-24.png?alt=media&#x26;token=22dacc86-7e50-4920-94ca-afdc045dcd0b" alt=""><figcaption></figcaption></figure>

## Guida interattiva alla configurazione passo dopo passo

### Trascina il componente Avonni Banner,

* Nell'Experience Builder, trascina il componente Avonni Banner sulla tua pagina nel punto in cui desideri che appaia il banner.
* **Imposta il media:**
  * Trova l'opzione per aggiungere un'immagine o un'illustrazione all'interno delle impostazioni del banner (Media CMS O URL del media)
  * Carica o seleziona l'illustrazione che desideri utilizzare e posizionala sul lato sinistro o destro del banner (usando l'attributo Posizione Media)
  *

### Preparazione del layout del contenuto

1. **Inserisci il componente Avonni Layout:**
   * Nella sezione contenuto dell'Avonni Banner, posiziona un componente Avonni Layout configurato su due colonne.

### Configurazione dei pulsanti

2. **Aggiungi Avonni Button Dialog alla prima colonna:**
   * Trascina un componente Avonni Button Dialog nella prima colonna del layout.
   * Regola le impostazioni del pulsante per centrarlo orizzontalmente all'interno della colonna.
3. **Inserisci Avonni Button nella seconda colonna:**
   * Posiziona un componente Avonni Button nella seconda colonna.
   * Come il primo pulsante, imposta l'allineamento orizzontale su centro, assicurando che corrisponda al layout del Button Dialog nella colonna opposta.

## Suggerimenti per l'efficacia

* Assicurati che entrambi i pulsanti siano chiaramente etichettati con call to action semplici e convincenti.
* La centratura orizzontale dei pulsanti offre un aspetto ordinato e professionale, visivamente gradevole e facile da navigare.
* Il layout a due colonne con pulsanti centrati consente un design bilanciato, incoraggiando l'interazione dell'utente con entrambe le opzioni.

## Conclusione

Utilizzando un Avonni Layout con due colonne e pulsanti centrati all'interno del componente Avonni Banner, puoi creare una sezione focalizzata e interattiva che invita gli utenti a interagire con i tuoi contenuti. Questa disposizione non solo migliora l'appeal visivo ma serve anche scopi funzionali, indirizzando gli utenti verso le azioni desiderate sulla piattaforma Salesforce Experience Cloud.

<br>