Web part de Banner a ancho completo

Presenta mensajes claros y visuales en secciones Full-width. Controla la anchura de la imagen con un deslizador y la curva de fusión entre panel e imagen. Configura colores del panel y del texto y usa tokens dinámicos como {{nombre}} y {{apellido}}.

Vista del banner

Banner de bienvenida en SharePoint con texto a la izquierda e imagen corporativa a la derecha.
Banner a ancho completo con imagen a la derecha y texto a la izquierda.

Qué incluye

Proporción panel/imagen

Deslizador para definir el ancho de la imagen (p. ej. 20–60%). La altura del banner es fija para mantener consistencia visual.

Estilos de fusión

Tres modos: Círculo hacia dentro, Flecha hacia dentro y Bulto hacia fuera.

Imagen por URL

Define la imagen mediante URL (biblioteca de SharePoint, CDN o internet). Superposición oscura opcional para mejorar el contraste.

Colores del panel y del texto

Configura el color del panel de fondo y el color del texto. Compatible con temas del sitio.

Enfoque de la imagen

Ajusta el punto focal (X/Y) para que el recorte con cover mantenga lo importante.

Tokens dinámicos

Personaliza el saludo con {{nombre}} y {{apellido}} (también {{displayname}}).

Vistas del web part

Banner de SharePoint con texto de formación disponible a la izquierda e imagen tecnológica a la derecha
Banner a ancho completo para anunciar formación disponible, con estilos de fusión entre panel e imagen tecnológica.
Banner de SharePoint con mensaje de mantenimiento programado, texto blanco sobre fondo rojo e imagen de engranajes a la derecha
Banner a ancho completo para anunciar mantenimiento programado, con control de colores de panel y texto, y proporción ajustable.
Banner de SharePoint con mensaje de evento interno, fondo naranja brillante y texto blanco, acompañado de una imagen abstracta con luces rojas a la derecha.
Ejemplo de banner a ancho completo para eventos internos, con colores llamativos y curva de fusión hacia la imagen.

Beneficios para tu intranet

  • Impacto visual: destaca información clave con una imagen relevante.
  • Coherencia de marca: colores y fuentes del sitio, sin dependencias externas.
  • Configuración rápida: ajustes desde el panel del web part.
  • Accesibilidad: alto contraste y textos configurables.
  • Rendimiento: sin llamadas externas ni librerías pesadas.

Cómo funciona

  1. Agrega el web part “Banner Simple” en una sección Full-width (sitio de Comunicación, sin “vertical section”).
  2. Establece la imagen pegando la URL (el selector de SharePoint llegará próximamente).
  3. Ajusta la fusión (círculo, flecha o bulto) y la proporción panel/imagen.
  4. Define colores del panel y del texto.
  5. Foco de imagen: mueve el punto focal (X/Y) para evitar recortes indeseados.
  6. Personaliza el texto con tokens como {{nombre}} / {{apellido}}.

Configuración del web part

Demostración en vídeo de cómo configurar el banner desde el panel de propiedades: cambiar colores, elegir estilo de fusión, ajustar la proporción panel/imagen y aplicar tokens dinámicos.

Preguntas frecuentes

¿Dónde puedo usar el banner a ancho completo?

En páginas de tipo Communication con secciones Full-width.

¿Puedo cambiar el color del panel y del texto?

Sí. Ambos son configurables desde el panel y se aplican mediante variables CSS que respetan el tema del sitio.

¿Qué modos de imagen hay?

Se usa cover por defecto (sin estirar). Además, puedes ajustar el punto focal X/Y.

¿Se puede controlar la altura?

En esta versión la altura es fija. Está planificado exponer un deslizador para personalizarla.

¿El texto admite tokens?

Sí: {{nombre}}, {{apellido}} y {{displayname}}.

¿Quieres una demo del web part?

Te mostramos cómo crear banners impactantes a ancho completo en minutos y sin código.

Contactar