# Con ilustración y botones

## Descripción general

El [Avonni Banner](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-banner) el componente está diseñado para captar la atención del usuario con visuales atractivos y botones interactivos. 

Aquí se explica cómo configurar un banner con una ilustración alineada a la izquierda o a la derecha, un botón que abre un diálogo para ver un video y otro botón que redirige al usuario a otra página.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FuyhENfprFjwyDH79nUPq%2F2023-11-07_15-33-26%20(1).gif?alt=media&#x26;token=c082d68a-34b2-4cf0-b72f-37c881bdcef9" alt=""><figcaption><p>Resultado en vivo</p></figcaption></figure>

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

{% @arcade/embed flowId="Q5libBUKTVUpYqPkUrGJ" url="<https://app.arcade.software/share/Q5libBUKTVUpYqPkUrGJ>" %}

### Agregar el Banner

1. **Colocar el Componente Banner:**
   * En el Experience Builder, arrastra el componente Avonni Banner a tu página donde quieras que aparezca el banner.
2. **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)

### Configuración de los botones

3. **Agregar un Botón para Abrir un Modal de Video:**
   * Arrastre el Avonni Layout para crear un diseño de 2 columnas y agregar botones dentro de cada columna.
   * Arrastre el componente Avonni Button Dialog.
   * Ajuste la configuración del Botón (Etiqueta, Variante, Alineación)
   * Etiquete el botón de forma apropiada, por ejemplo "Ver Video".
   * Haga clic en el Botón para abrir el Modal.
   * Dentro del modal, arrastre el reproductor de video usando el [componente Avonni Video](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-video) (en la zona dialogContent)
   * Configure el componente Avonni Video.
4. **Agregar un Botón para Redirigir a una Página:**
   * Incluya un botón adicional en la otra columna del banner Avonni Layout creado previamente.
   * Etiquete este botón con un llamado a la acción, como "Más información".
   * Configure la [interacción Navegar del botón](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/panel-de-propiedades/interacciones/navegar#overview) en la sección 'Enlace a' especificando la página de destino para la redirección del usuario.

## Implementación de ejemplo

Supongamos que está creando un banner promocional para el lanzamiento de un nuevo producto:

1. **Ilustración:**
   * Agregue una ilustración llamativa del nuevo producto en el lado izquierdo del banner para atraer la atención.
2. **Botón de Modal de Video:**
   * El primer botón dice "Ver demostración". Está configurado para abrir un diálogo modal donde se inserta un video de demostración del producto. Puede usar el [Avonni Button Dialog](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-cuadro-de-dialogo-de-boton) para eso.
3. **Botón de redirección:**
   * El segundo botón, "Detalles del producto", al hacer clic, [navega a una página](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/panel-de-propiedades/interacciones/navegar#named-page) con más información sobre el producto.
4. **Estilo y pruebas:**
   * Estilice el banner y los botones para que coincidan con la identidad de su empresa.
   * Pruebe ambos botones para asegurarse de que uno abra el video correctamente y el otro redirija como se espera.
5. **Publicar:**
   * Después de confirmar que todo funciona correctamente, publique sus cambios.

### Consejos para la efectividad

* Asegúrese de que la ilustración sea relevante y mejore el mensaje del banner.
* El video debe ser corto, atractivo e informativo.
* El botón "Más información" debe dirigir a los usuarios a una página que continúe la narrativa del banner.