> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/tutorial/components/banner/with-content-centered.md).

# Con contenuto centrato

## Panoramica

Nel componente Avonni Banner, puoi creare un'esperienza visivamente coinvolgente e interattiva incorporando un layout a due colonne all'interno della sezione contenuti. Questo layout ospiterà due pulsanti distinti — un [Avonni Button Dialog](/experience-cloud/experience-cloud-it/experience-components/ax-button-dialog.md) nella prima colonna per interazioni modali e un pulsante standard [Avonni Button](/experience-cloud/experience-cloud-it/experience-components/ax-button.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,

* In 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 nelle impostazioni del banner (CMS Media O Media URL)
  * Carica o seleziona l'illustrazione che vuoi usare e posizionala sul lato sinistro o destro del banner (usando l'attributo Media Position)
  *

### Preparazione del layout dei contenuti

1. **Inserisci il componente Avonni Layout:**
   * Nella sezione contenuti di Avonni Banner, inserisci 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 per il primo pulsante, imposta l'allineamento orizzontale al centro, assicurandoti che corrisponda al layout di Button Dialog nella colonna opposta.

## Suggerimenti per l'efficacia

* Assicurati che entrambi i pulsanti siano chiaramente etichettati con inviti all'azione semplici e convincenti.
* Il centramento 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 equilibrato, incoraggiando l'interazione degli utenti con entrambe le opzioni.

## Conclusione

Utilizzando un Avonni Layout a due colonne e pulsanti allineati al centro all'interno del componente Avonni Banner, puoi creare una sezione mirata e interattiva che invita gli utenti a interagire con i tuoi contenuti. Questa disposizione non solo migliora l'attrattiva visiva, ma svolge anche funzioni pratiche, indirizzando gli utenti verso le azioni desiderate sulla piattaforma Salesforce Experience Cloud.

<br>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/tutorial/components/banner/with-content-centered.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.