Bloques de lienzo «Hero»

Referencia para los bloques Editor de páginas → Hero. Cada uno se presenta como una sección a ancho completo con una estructura de filas y columnas, optimizada para causar impacto en la primera pantalla.

Arquitectura básica y campos

Bloque	Fuente multimedia	Características principales
Imagen Hero	Imagen multimedia de fondo	Diseño (estándar, pantalla completa, dividida izquierda/derecha), superposición, tamaño de la ventana de visualización, ajuste al objeto
Portafolio Hero	Colección de portafolio	Misma estructura que Imagen Hero; el contenido multimedia sigue las reglas de la colección Hero
Vídeo destacado	Vídeo multimedia	Ajustes predefinidos de relación de aspecto de la ventana de visualización, imagen de portada, modos de diseño, superposición
Hero Glassmorphism	Imagen o vídeo de fondo	Panel de cristal esmerilado, desenfoque del fondo, titular/CTA en capa de cristal
Control deslizante Hero	Contenido multimedia por diapositiva	Control deslizante a pantalla completa; preajuste Hero; llamadas a la acción en las diapositivas; reproducción automática y navegación

Imagen Hero

Encabezado a ancho completo centrado en una imagen fija de gran impacto.

Los atributos incluyen:

• Imagen de fondo procedente de Contenido multimedia.
• Diseño: banda estándar 16:9, pantalla completa (100 vh), imagen dividida a izquierda y derecha.
• Opción de superposición y aplicación del estilo en las plantillas compatibles.
• Ajuste del objeto y controles de altura y anchura máximas mediante características compartidas de dimensionamiento de la imagen principal.

Portafolio principal

Misma estructura que la Imagen principal, pero el contenido visual se basa en una colección seleccionada del Portafolio (comportamiento de portada/imagen principal a partir de los metadatos del portafolio).

Los atributos incluyen:

• Selector de Portafolio.
• Opciones de diseño y superposición alineadas con Imagen principal.

Ideal para: páginas de lanzamiento de colecciones en las que la galería de la marca ocupa el primer plano.

Vídeo principal

Vídeo principal de gran impacto con un diseño optimizado para streaming.

Los atributos incluyen:

• Vídeo y cartel procedentes de Multimedia.
• Ajustes predefinidos de relación de aspecto de la ventana de visualización para la banda de la imagen principal.
• Modos de diseño similares a los de la Imagen principal (incluida la pantalla completa).

Imagen principal con «glassmorphism»

Recurso de fondo (imagen o vídeo) con un panel de contenido glassmorphism (desenfoque del fondo, superficie translúcida).

Los atributos incluyen:

• Selección de Medios de fondo.
• Texto en el panel de cristal y zona de llamada a la acción dentro de la estructura del bloque.

Ideal para: sitios web de marcas premium con texto legible sobre imágenes con mucho detalle.

Hero Slider

Carrusel hero a página completa que utiliza el modelo de deslizamiento basado en swiper con contexto hero únicamente en este bloque (a diferencia del bloque Slider dentro de la columna).

Los atributos incluyen:

• Varias diapositivas con imágenes o vídeos multimedia por diapositiva.
• Preajuste: hero — opciones de ancho completo y altura de la ventana de visualización (p. ej., 100vh).
• Titulares, subtítulos y enlaces de llamada a la acción (CTA) por diapositiva, siempre que estén habilitados en las propiedades del carrete.
• Reproducción automática, navegación y ajuste a objeto según la configuración del carrete.

Ideal para: páginas de inicio con varias campañas o proyectos destacados rotativos.

Restricciones y límites del sistema

• Utiliza el Hero Slider para los elementos destacados de la ventana de visualización; utiliza el Slider (categoría «Sliders») dentro de las columnas de contenido; no son intercambiables.
• Los elementos destacados a pantalla completa afectan a las áreas seguras en dispositivos móviles; previsualiza siempre la vista Móvil en el editor.
• El vídeo de la sección principal debe ser breve y estar comprimido; proporciona una imagen de portada para una carga inicial rápida.

Comprobación de la configuración

• La sección principal muestra el Medios o el Portafolio previstos tanto en el borrador como en la vista previa en vivo.
• El «glassmorphism» y los diseños divididos siguen siendo legibles en dispositivos móviles.
• El «Hero Slider» avanza correctamente por las diapositivas y los enlaces se resuelven correctamente.