# 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](/experience-cloud/experience-cloud-it/experience-components/ax-dialogo-pulsante.md) nella prima colonna per le interazioni modali e un [Avonni Button](/experience-cloud/experience-cloud-it/experience-components/ax-pulsante.md) 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="/files/1d5b589b3c08536f5db00b5657645892a2149051" 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/tutorial/componenti/banner/con-contenuto-centrato.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.