> 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/experience-components/ax-banner.md).

# AX - Banner

## Resumen

**AX - Banner** es un componente de Experience Cloud que muestra mensajes destacados con titulares, imágenes y contenido de texto en las páginas de Experience Sites.

Úsalo para anunciar nuevas funciones, compartir actualizaciones importantes, destacar promociones o dar la bienvenida a los usuarios del portal con mensajes de marca. Combina texto, imágenes, iconos y botones de llamada a la acción para crear anuncios llamativos en la parte superior de las páginas.

Perfecto para las páginas de inicio del portal, las secciones de anuncios, los destacados de funciones o cualquier lugar donde necesites comunicar información importante a los clientes o socios que visitan tu sitio.

{% hint style="danger" %}
Este componente [aprovecha slots](/experience-cloud/experience-cloud-es/primeros-pasos/learning-the-basics.md#understanding-slots) para una personalización avanzada, lo que lo hace ideal para sitios LWR. Los sitios Aura no admiten este nivel de personalización.
{% endhint %}

<figure><img src="/files/6b9364464f30362c0be656f166c491db5ed6a4ee" alt=""><figcaption></figcaption></figure>

***

## Configuración del Banner de Avonni

### Añadir título y contenido

Configurar el título y el contenido es un proceso sencillo que influye significativamente en la eficacia de tu banner.

**Añadir título y contenido**

**1. Uso del editor de propiedades personalizadas:**

* **Escribir contenido**: Puedes escribir rápidamente el título y el contenido directamente en el editor de propiedades personalizadas proporcionado dentro del componente Avonni Banner. Este enfoque es fácil de usar y eficiente, y permite actualizaciones y ediciones rápidas.

**2. Opciones de estilo de texto:**

* **Heredar del tema del sitio**: El componente Avonni Banner permite que el título y el contenido hereden los estilos de texto de la configuración del tema del sitio de Experience Cloud. Esto garantiza la coherencia en todo tu sitio, manteniendo una apariencia y sensación cohesivas.
* **Estilo personalizado**: Puedes usar la personalización de estilo dedicada de Avonni en la parte inferior del editor de propiedades personalizadas para necesidades más específicas. Esta opción te permite definir manualmente el estilo del título y del contenido, independientemente del tema general del sitio.
* **Ventajas del estilo personalizado**: El estilo personalizado es especialmente útil para hacer que el banner destaque, resaltar mensajes clave o cuando el banner necesita tener un estilo distinto al resto del sitio

### Definir la alineación horizontal del contenido

* **Centrado:** Coloca tu texto en el centro del banner para lograr una apariencia equilibrada.
* **Izquierda:** Alinea tu texto a la izquierda para un diseño tradicional.
* **Derecha:** Alinea tu texto a la derecha para un diseño único

### Definir elemento multimedia

El componente Avonni Banner no se limita al texto y a las imágenes estáticas. Incorpora video en el diseño de tu banner para dar más dinamismo a tu mensaje y aumentar la interacción de los usuarios.

* **Mejora tu banner con video**
  * Añade un elemento de video para que tu banner sea más dinámico y atractivo.
  * Coloca tu video para obtener el mejor impacto visual. Elige entre estas opciones: derecha, arriba a la izquierda, arriba al centro, arriba a la derecha, izquierda, abajo a la izquierda, abajo al centro, abajo a la derecha.
  * Opcionalmente, haz que tu video sea clicable para que los usuarios puedan interactuar con él haciendo clic.
* **Configuración adicional de video**
  * Elige si tu video se reproduce automáticamente cuando se carga el banner.
  * Haz que el video se reproduzca repetidamente en bucle.
  * Decide si mostrar u ocultar los controles del reproductor de video.
  * Controla la velocidad a la que se reproduce el video.
  * Define el nivel de volumen inicial del video.

<figure><img src="/files/fd1ba9148c9340df1f4751d90de513a9db83bb8d" alt=""><figcaption></figcaption></figure>

### Añadir una imagen de fondo

Esta función es útil para crear una primera impresión visualmente impactante y puede usarse para alinear la apariencia del banner con la identidad visual o el tema general del sitio.

Las imágenes de fondo se pueden añadir de tres maneras diferentes:

**1. Carga manual:**

* Los usuarios pueden cargar un archivo de imagen directamente desde su dispositivo.
* Esta opción es ideal para gráficos personalizados, logotipos de empresa o materiales de marketing específicos que ya están preparados y almacenados localmente.

**2. Generada mediante una expresión del sitio de Experience Cloud:**

* La imagen de fondo se puede generar dinámicamente según las expresiones del sitio.
* Este método permite personalizar el banner en tiempo real según las interacciones del usuario, los datos del sitio o criterios específicos definidos dentro del sitio de Experience Cloud.

**3. Desde medios del CMS:**

* Los usuarios pueden seleccionar una imagen del sistema de gestión de contenido (CMS) integrado.
* Esta opción proporciona acceso a una biblioteca de imágenes, ofreciendo una forma cómoda de elegir gráficos relevantes y de alta calidad que ya forman parte del repositorio de contenido del sitio.

### Capacidades de interacción

**Banner clicable**

Una de las principales funciones interactivas del componente Avonni Banner es la posibilidad de ser clicable. Esto transforma a los espectadores pasivos en participantes activos, animándolos a interactuar más profundamente con el contenido.

<figure><img src="/files/94a89863befeb00b6349a87149417827f93c5a3c" alt=""><figcaption></figcaption></figure>

**Implementación de interacciones**

Para hacer que tu banner sea clicable, primero activa el interruptor de clicable. Luego, usa la sección "Link To" para elegir qué sucede cuando alguien hace clic en el banner. Esto te permite añadir funciones interesantes a tu banner.

<figure><img src="/files/daf4e0867bcc94d4a38986dcb4f3fe0ee2e3b299" alt="" width="365"><figcaption></figcaption></figure>

**Definir interacciones**

Cuando un usuario hace clic en el banner, el componente puede activar una interacción predefinida. Este nivel de personalización garantiza que la experiencia del usuario sea interactiva y esté adaptada a las necesidades y objetivos específicos del sitio.

<table><thead><tr><th width="184.5">Tipo de interacción</th><th>Descripción</th></tr></thead><tbody><tr><td><a href="/pages/3aa4b8de72109155f181ae057f41ba38145d8e0e">Mostrar notificación emergente</a></td><td>Muestra un breve mensaje informativo después del clic. Ideal para confirmar acciones o proporcionar contexto.</td></tr><tr><td><a href="/pages/14dfb20806bd9f225611801d8d8a0aac6a4505a3">Navegar</a></td><td>Redirige a los usuarios a otra página o recurso al hacer clic. Adecuado para dirigir a contenido o recursos relacionados.</td></tr><tr><td><a href="/pages/ffb81a48259e937072a9d5bee4ed0bfae391dd39">Abrir modal de alerta</a></td><td>Presenta información o advertencias en un modal de alerta tras hacer clic. Útil para anuncios importantes.</td></tr><tr><td><a href="/pages/444f448a4d41840937e6909f614a9717d4080ff4">Abrir diálogo de flujo</a></td><td>Inicia un flujo de Salesforce en un diálogo, permitiendo interacciones complejas. Ayuda a guiar procesos paso a paso.</td></tr><tr><td><a href="/pages/fe0eb326d1bd11b2d0348c05aff807896642fdba">Abrir confirmación</a></td><td>Activa un diálogo de confirmación tras la interacción. Esencial para acciones que requieren la confirmación o aceptación del usuario.</td></tr></tbody></table>

***

## Especificaciones

{% tabs %}
{% tab title="🎛️ Propiedades" %}

<table><thead><tr><th width="264">Configuración</th><th>Descripción</th></tr></thead><tbody><tr><td><strong>Título</strong></td><td>Define el titular principal del banner, llamando de inmediato la atención sobre tu mensaje principal.</td></tr><tr><td><strong>Estilo del texto del título</strong></td><td><p>Personaliza la apariencia de tu título con varios estilos de texto:</p><ul><li><strong>Encabezados</strong>: Elige entre los niveles de encabezado del 1 al 4 para distintos grados de énfasis.</li><li><strong>Párrafos</strong>: Selecciona los estilos de párrafo 1 o 2 para el tono y la relevancia adecuados.</li></ul></td></tr><tr><td><strong>Subtítulo</strong></td><td>Acompaña tu título con un subtítulo breve o descriptivo, ofreciendo contexto adicional o un adelanto del contenido siguiente.</td></tr><tr><td><strong>Estilo del texto del subtítulo</strong></td><td><p>Personaliza el aspecto de tu subtítulo con estilos de texto predefinidos:</p><ul><li><strong>Encabezados</strong>: Selecciona entre los niveles de encabezado del 1 al 4 según la importancia.</li><li><strong>Párrafos</strong>: Elige Párrafos 1 o 2 para complementar tu título</li></ul></td></tr><tr><td><strong>Contenido</strong></td><td>Enriquece tu banner con texto detallado, proporcionando una visión completa, una explicación o una llamada a la acción. Aquí es donde puedes profundizar en los detalles específicos de tu mensaje.</td></tr><tr><td><strong>Alineación horizontal del contenido</strong></td><td>Ajusta la posición horizontal de tu texto de contenido. Tanto si prefieres un diseño alineado a la izquierda, centrado o alineado a la derecha, esta propiedad garantiza que tu contenido se alinee con tu enfoque general de diseño.</td></tr><tr><td><strong>Fondo del CMS</strong></td><td>Utiliza contenido de tu Sistema de gestión de contenido como fondo para tu banner, garantizando coherencia y facilidad de actualización.</td></tr><tr><td><strong>URL de fondo</strong></td><td>Define un enlace web específico para obtener la imagen de fondo de tu banner, proporcionando un contexto visual o un realce para tu contenido.</td></tr><tr><td><strong>URL del medio</strong></td><td>Enlace a un elemento multimedia que desees destacar junto a tu banner o como parte de él. Puede ser un video, audio u otro medio interactivo.</td></tr><tr><td><strong>Mostrar el medio como fondo</strong></td><td>Elige establecer tu medio como fondo del banner, permitiendo una experiencia multimedia inmersiva mientras mantienes el contenido de texto en primer plano.</td></tr><tr><td><strong>Posición del medio</strong></td><td>Designa la disposición espacial de tu medio en el banner, ya sea centrada, a la izquierda, a la derecha o cualquier otra posición personalizada que complemente tu diseño.</td></tr><tr><td><strong>Color de superposición</strong></td><td>Añade una superposición de color a tu banner, lo que puede ser útil para mejorar la legibilidad, crear ambiente o alinearse con los colores de la marca.</td></tr><tr><td><strong>Clicable</strong></td><td>Convierte tu banner en un elemento interactivo. Una vez habilitado, todo el banner puede actuar como un elemento clicable, redirigiendo a los usuarios a un enlace específico o activando una acción definida.</td></tr></tbody></table>
{% endtab %}

{% tab title="🏞️ Atributos del medio" %}

| Configuración                 | Descripción                                                                                                                                                                                      |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Reproducción automática**   | Permite que tu medio comience a reproducirse automáticamente cuando se carga la página, ofreciendo una experiencia multimedia inmediata.                                                         |
| **Bucle**                     | Permite que tu medio se reproduzca en un bucle continuo, asegurando que se reinicie al llegar al final.                                                                                          |
| **Ocultar controles**         | Opta por mantener ocultos los controles del reproductor multimedia para una apariencia más limpia, permitiendo que el medio se reproduzca sin interrupciones del usuario.                        |
| **Velocidad de reproducción** | Ajusta la velocidad a la que se reproduce tu medio. Esto puede ser útil para adaptar el ritmo del contenido según la preferencia del usuario o la intención del diseño.                          |
| **Volumen**                   | Controla el nivel de audio de tu medio para asegurarte de que se ajuste a la experiencia de usuario que deseas ofrecer, ya sean melodías de fondo sutiles o una narración de audio predominante. |
| {% endtab %}                  |                                                                                                                                                                                                  |

{% tab title="🎨 Apariencia" %}

{% endtab %}
{% endtabs %}

### **Nota**

**Ajuste del objeto**:

* **`fill`**: Estira la imagen para ajustarla al contenedor, pudiendo distorsionarla.
* **`contain`**: Mantiene la proporción de la imagen y la ajusta dentro del contenedor sin recortarla.
* **`cover`**: Mantiene la proporción de la imagen, pero podría recortar algunas partes para asegurar que el contenedor quede completamente cubierto.
* **`none`**: La imagen tendrá su tamaño original, independientemente del tamaño del contenedor.
* **`scale-down`**: Compara la diferencia entre `none` y `contain`, y proporciona un tamaño de objeto concreto menor.

**Estilos de borde:**

* **`none`**: No se mostrará ningún borde.
* **`solid`**: Una línea continua y sin interrupciones crea el borde. Es el estilo más común y sencillo.
* **`dashed`**: El borde aparece como una serie de segmentos de línea cortos o guiones.
* **`dotted`**: El borde está formado por una serie de puntos redondos.
* **`double`**: Se utilizan dos líneas sólidas paralelas para el borde. El espacio entre ambas líneas es transparente o coincide con el fondo.
* **`groove`**: El borde parece tallado en la página, lo que le da una apariencia tridimensional. El efecto depende del valor del color del borde.
* **`ridge`**: Lo contrario de groove, parece que sobresale de la página, lo que da otro efecto tridimensional. El resultado visual está afectado por el color del borde.
* **`inset`**: Los bordes superior e izquierdo están sombreados para parecer que el elemento está incrustado en la página, mientras que los bordes derecho e inferior están resaltados.
* **`outset`**: Lo contrario de inset, los bordes derecho e inferior están sombreados, mientras que los bordes superior e izquierdo están resaltados, dando la ilusión de que el elemento sobresale de la página.

**Estilo de fuente**:

* **`normal`**: Muestra el texto con un estilo de fuente estándar, no cursiva.
* **`italic`**: Muestra el texto en cursiva, inclinando los caracteres hacia la derecha.

**Alineación horizontal**:

* **`left`**: Alinea el contenido al lado izquierdo del contenedor.
* **`center`**: Centra el contenido horizontalmente dentro del contenedor.
* **`right`**: Alinea el contenido al lado derecho del contenedor.


---

# 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/experience-components/ax-banner.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.