AX - Banner

Descripción general

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

Úsalo para anunciar nuevas funciones, compartir actualizaciones importantes, resaltar promociones o dar la bienvenida a los usuarios del portal con mensajes con la 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 páginas de inicio de portales, secciones de anuncios, destacados de funciones o cualquier lugar donde necesites comunicar información importante a clientes o socios que visitan tu sitio.

Este componente aprovecha los slots para una personalización avanzada, lo que lo hace ideal para sitios LWR. Los sitios Aura no admiten este nivel de personalización.

---

Configuración del Avonni Banner

Agregar Título y Contenido

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

Agregar Título y Contenido

1. Usando el Editor de Propiedades Personalizadas:

• Escribir en Contenido: Puedes escribir rápidamente el título y el contenido directamente en el editor de propiedades personalizadas que se proporciona dentro del componente Avonni Banner. Este enfoque es fácil de usar y eficiente, lo que 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 coherencia en todo tu sitio, manteniendo una apariencia y sensación cohesionadas.

• 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 establecer manualmente el estilo del título y el contenido, independientemente del tema general del sitio.

• Ventajas del Estilo Personalizado: El estilo personalizado es particularmente útil para hacer que el banner destaque, resaltar mensajes clave o cuando el banner necesita tener un estilo distintivo que difiera del resto del sitio

Definir la Alineación Horizontal del Contenido

• Centro: Coloca tu texto en el centro del banner para 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 a texto e imágenes estáticas. Incorpora video en el diseño de tu banner para darle más vida a tu mensaje y aumentar la interacción del usuario.

• Mejora tu Banner con Video

  • Agrega un elemento de video para que tu banner sea más dinámico y atractivo.

  • Posiciona tu video para lograr el mejor impacto visual. Elige entre estas opciones: derecha, arriba a la izquierda, arriba centro, arriba a la derecha, izquierda, abajo a la izquierda, abajo centro, abajo a la derecha.

  • Opcionalmente, haz que tu video sea clicable para que los usuarios puedan interactuar con él al hacer clic.

• Configuraciones Adicionales 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.

  • Establece el nivel de volumen inicial para el video.

Agregar una imagen de fondo

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

Las imágenes de fondo se pueden agregar 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 la empresa o materiales de marketing específicos ya preparados y almacenados localmente.

2. Generado Usando una Expresión del Sitio de Experience Cloud:

• La imagen de fondo se puede generar dinámicamente en función de expresiones del sitio.

• Este método permite la personalización en tiempo real del banner según las interacciones del usuario, los datos del sitio o criterios específicos definidos dentro del sitio de Experience Cloud.

3. Desde CMS Media:

• Los usuarios pueden seleccionar una imagen del Sistema de Gestión de Contenidos (CMS) integrado.

• Esta opción proporciona acceso a una biblioteca de imágenes, ofreciendo una forma conveniente 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 características interactivas clave del componente Avonni Banner es la capacidad de ser clicable. Esto transforma a los espectadores pasivos en participantes activos, animándolos a interactuar más profundamente con el contenido.

Implementación de Interacciones

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

Definiendo 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.

Tipo de Interacción	Descripción
Mostrar notificación	Muestra un mensaje breve e informativo después del clic. Ideal para confirmar acciones o proporcionar contexto.
Navegar	Redirige a los usuarios a otra página o recurso al hacer clic. Adecuado para guiar hacia contenido o recursos relacionados.
Abrir Modal de Alerta	Presenta información o advertencias en un modal de alerta tras un clic. Útil para anuncios importantes.
Abrir diálogo de flujo	Inicia un flujo de Salesforce en un diálogo, permitiendo interacciones complejas. Ayuda a guiar procesos paso a paso.
Abrir Confirmación	Activa un cuadro de diálogo de confirmación tras la interacción. Esencial para acciones que requieren la confirmación o el reconocimiento del usuario.

---

Especificaciones

🎛️ Propiedades

Configuración	Descripción
Título	Define el titular principal del banner, captando la atención inmediata hacia tu mensaje principal.
Estilo de Texto del Título	Personaliza la apariencia de tu título con varios estilos de texto: Encabezados: Elige entre niveles de encabezado 1 a 4 para distintos grados de énfasis. Párrafos: Selecciona estilos de párrafo 1 o 2 para el tono y la prominencia adecuados.
Subtítulo	Acompaña tu título con un subtítulo conciso o descriptor, ofreciendo contexto adicional o un adelanto del contenido siguiente.
Estilo de Texto del Subtítulo	Personaliza la apariencia de tu subtítulo con estilos de texto predefinidos: Encabezados: Selecciona entre Encabezados 1 a 4 según la importancia. Párrafos: Elige Párrafos 1 o 2 para complementar tu título
Contenido	Enriquece tu banner con texto detallado, proporcionando una visión completa, explicación o llamada a la acción. Aquí puedes profundizar en los detalles de tu mensaje.
Alineación Horizontal del Contenido	Ajusta la posición horizontal del texto de tu contenido. Ya sea que prefieras un diseño alineado a la izquierda, centrado o alineado a la derecha, esta propiedad asegura que tu contenido se alinee con la estética general de tu diseño.
Fondo CMS	Utiliza contenido de tu Sistema de Gestión de Contenidos como fondo para tu banner, garantizando coherencia y facilidad de actualizaciones.
URL de Fondo	Define un enlace web específico para obtener la imagen de fondo de tu banner, proporcionando un contexto visual o mejora para tu contenido.
URL de Medios	Enlaza a un elemento multimedia que desees presentar junto o como parte de tu banner. Esto puede ser un video, audio u otro medio interactivo.
Mostrar Medios como Fondo	Elige establecer tu medio como fondo del banner, permitiendo una experiencia multimedia inmersiva mientras mantienes el contenido de texto en primer plano.
Posición del Medio	Designa la disposición espacial de tu medio en el banner, ya sea centrado, a la izquierda, a la derecha o cualquier otra posición personalizada que complemente tu diseño.
Color de Superposición	Agrega una superposición de color a tu banner, lo cual puede ser útil para mejorar la legibilidad, establecer el ambiente o alinearse con los colores de la marca.
Clicable	Convierte tu banner en un elemento interactivo. Una vez habilitado, todo el banner puede actuar como una entidad clicable, redirigiendo a los usuarios a un enlace especificado o activando una acción definida.

🏞️ Atributos de Medios

🎨 Apariencia

Nota

Ajuste del Objeto:

• fill: Estira la imagen para ajustarla al contenedor, potencialmente distorsionándola.

• contain: Mantiene la relación de aspecto de la imagen y la ajusta dentro del contenedor sin recortarla.

• cover: Mantiene la relación de aspecto de la imagen pero podría recortar algunas partes para asegurar que el contenedor quede totalmente cubierto.

• none: La imagen mantendrá 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 más pequeño.

Estilos de Borde:

• none: No se mostrará ningún borde.

• solid: Una línea continua e ininterrumpida crea el borde. Es el estilo más común y directo.

• dashed: El borde aparece como una serie de segmentos cortos de línea o guiones.

• dotted: El borde está compuesto por una serie de puntos redondos.

• double: Se utilizan dos líneas sólidas paralelas para el borde. El espacio entre las dos líneas es transparente o coincide con el fondo.

• groove: El borde parece tallado en la página, dando una apariencia 3D. El efecto depende del valor del color del borde.

• ridge: Opuesto a groove, parece salir de la página, dando otro efecto 3D. El resultado visual se ve 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: Opuesto a 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 en un estilo de fuente estándar, no cursiva.

• italic: Muestra el texto en un estilo cursivo, 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.