> 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-es/tutoriales/components/banner/with-illustration-and-buttons.md).

# Con ilustración y botones

## Resumen

La [Banner de Avonni](/experience-cloud/experience-cloud-es/experience-components/ax-banner.md) el componente está diseñado para captar la atención del usuario con elementos 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 activa un diálogo para ver un video y otro botón que redirige al usuario a otra página.

<figure><img src="/files/0905d3fcac3e7723cecebe762a56afe4a9abc954" alt=""><figcaption><p>Resultado en vivo</p></figcaption></figure>

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

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

### Agregar el banner

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

### Configuración de los botones

3. **Agregar un botón para abrir un modal de video:**
   * Arrastra Avonni Layout para crear un diseño de 2 columnas y agregar botones dentro de cada columna.
   * Arrastra el componente Avonni Button Dialog.
   * Ajusta la configuración del botón (Etiqueta, variante, alineación)
   * Etiqueta el botón de forma apropiada, como "Ver video".
   * Haz clic en el botón para abrir el modal.
   * Dentro del modal, arrastra el reproductor de video usando el [componente Avonni Video](/experience-cloud/experience-cloud-es/experience-components/ax-video.md) (en la zona dialogContent)
   * Configura el componente Avonni Video.
4. **Agregar un botón para redirigir a una página:**
   * Incluye un botón adicional en la otra columna del banner de Avonni Layout creado previamente.
   * Etiqueta este botón con un llamado a la acción, como "Más información".
   * Configura la [interacción de navegación](/experience-cloud/experience-cloud-es/panel-de-propiedades/interactions/navigate.md#overview) en la sección 'Link To' especificando la página de destino para la redirección del usuario.

## Ejemplo de implementación

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

1. **Ilustración:**
   * Añades una ilustración llamativa del nuevo producto en el lado izquierdo del banner para llamar la atención.
2. **Botón del modal de video:**
   * El primer botón dice "Ver demostración". Está configurado para abrir un cuadro de diálogo modal en el que se incrusta un video de demostración del producto. Puedes usar el [Avonni Button Dialog](/experience-cloud/experience-cloud-es/experience-components/ax-button-dialog.md) para eso.
3. **Botón de redirección:**
   * El segundo botón, "Detalles del producto", cuando se hace clic, [navega a una página](/experience-cloud/experience-cloud-es/panel-de-propiedades/interactions/navigate.md#named-page) con más información sobre el producto.
4. **Estilo y pruebas:**
   * Da estilo al banner y a los botones para que coincidan con la marca de tu empresa.
   * Prueba ambos botones para asegurarte de que uno abre el video correctamente y el otro redirige como se espera.
5. **Publicar:**
   * Después de confirmar que todo funciona correctamente, publica tus cambios.

### Consejos para ser eficaz

* Asegúrate de que la ilustración sea relevante y refuerce el mensaje del banner.
* El video debe ser breve, 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.


---

# 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-es/tutoriales/components/banner/with-illustration-and-buttons.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.