# Con contenido centrado

## Descripción general

En el componente Avonni Banner, puedes crear una experiencia visualmente atractiva e interactiva incorporando un diseño de dos columnas dentro de la sección de contenido. Este diseño albergará dos botones distintos — un [Avonni Button Dialog](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-cuadro-de-dialogo-de-boton) en la primera columna para interacciones modales y un [Avonni Button](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-boton) en la segunda columna para acciones externas. Ambos botones estarán centrados horizontalmente dentro de sus respectivas columnas para una apariencia limpia y simétrica.

<figure><img src="https://567120047-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>

## Guía interactiva de configuración paso a paso

### Arrastra el componente Avonni Banner,

* En el Experience Builder, arrastra el componente Avonni Banner a tu página donde quieras que aparezca el banner.
* **Configura el medio:**
  * Encuentra la opción para agregar una imagen o ilustración dentro de la configuración del banner (CMS Media O Media URL)
  * Sube o selecciona la ilustración que quieras usar y colócala en el lado izquierdo o derecho del banner (usando el atributo Media Position)
  *

### Preparando el diseño de contenido

1. **Inserta el componente Avonni Layout:**
   * En la sección de contenido del Avonni Banner, coloca un componente Avonni Layout configurado en dos columnas.

### Configuración de los botones

2. **Agrega Avonni Button Dialog a la primera columna:**
   * Arrastra un componente Avonni Button Dialog a la primera columna del diseño.
   * Ajusta la configuración del botón para centrarlo horizontalmente dentro de la columna.
3. **Inserta Avonni Button en la segunda columna:**
   * Coloca un componente Avonni Button en la segunda columna.
   * Como el primer botón, establece la alineación horizontal en centro, asegurando que coincida con el diseño del Button Dialog en la columna opuesta.

## Consejos para la efectividad

* Asegúrate de que ambos botones estén claramente etiquetados con llamadas a la acción que sean directas y atractivas.
* El centrado horizontal de los botones proporciona un aspecto ordenado y profesional que es visualmente atractivo y fácil de navegar.
* El diseño de dos columnas con botones centrados permite un diseño equilibrado, fomentando la interacción del usuario con ambas opciones.

## Conclusión

Al utilizar un Avonni Layout con dos columnas y botones alineados al centro dentro del componente Avonni Banner, puedes crear una sección enfocada e interactiva que incite a los usuarios a interactuar con tu contenido. Esta disposición no solo mejora el atractivo visual, sino que también cumple funciones prácticas, dirigiendo a los usuarios hacia las acciones deseadas en la plataforma Salesforce Experience Cloud.

<br>