Configuración de fondo

Superposición

Puntos:
configura una capa de color sobre el fondo. Es útil para mejorar legibilidad sobre foto o vídeo.

Qué cambia este ajuste:
suaviza diferencias de luminosidad del fondo y facilita lectura del texto.

Consejo de ajuste:
empieza con color sólido y, solo si hace falta, pasa a gradiente.

Elementos de configuración

• Color / Gradient: define color sólido o degradado.
• Opacidad: ajusta opacidad.
• Modo de mezcla: define modo de fusión con el fondo.
• Restablecer: restablece esta sección.
• Responsivo: habilita ajustes por dispositivo.

la superposición se dibuja como capa superior del fondo del botón. También puede configurarse por separado en Hover.

Patrón

Puntos:
configura tipo e intensidad del patrón. Añade textura sin volver monótono el fondo.

Qué cambia este ajuste:
aumenta riqueza visual frente a un fondo plano.

Consejo de ajuste:
mantén contraste moderado para que el texto siga siendo protagonista.

Elementos de configuración

• Tipo de patrón: define el tipo de patrón.
• Color del patrón: define color del patrón.
• Tamaño del patrón: define tamaño/densidad del patrón.
• Opacidad del patrón: define opacidad del patrón.
• Modo de mezcla: define modo de fusión.
• Responsivo: habilita ajustes por dispositivo.

el patrón se renderiza con SVG, por lo que mantiene nitidez en pantallas de alta resolución. El patrón en Hover también puede ajustarse.

Imagen

Puntos:
configura visualización de imagen o vídeo de fondo (encaje, posición, repetición, etc.).

Qué cambia este ajuste:
la percepción del mismo recurso cambia mucho según fit/posición/opacidad.

Consejo de ajuste:
decide primero Fit, luego posición, y por último afina legibilidad con opacidad y superposición.

Elementos de configuración

• Tipo de medio (imagen / vídeo): selecciona qué usar en el fondo.
• Imagen: selección de imagen, Repetir, Método de ajuste, Rotación (grados), Opacidad.
• Vídeo: Video URL (MP4 / YouTube / Vimeo) y Aplicar.
• Visualización de vídeo: Video Fit, Video Posición X, Video Posición Y.
• Póster: Poster URL, Remove Poster, Poster Fit, Poster Posición X/Y.
• Responsivo: habilita ajustes por dispositivo.

UI de selección de imagen (Imagen)

• Al elegir Tipo de medio = Imagen, se muestran pestañas de fuente de imagen.
• Fuentes disponibles: Biblioteca de medios / Search / Selección de imagen / URL de imagen.
• Cualquier fuente termina aplicándose a la misma capa de fondo.

Imagen: Search

• Puedes filtrar por proveedor (Openverse / Unsplash / Pexels / Pixabay) y por palabras clave.
• Openverse no requiere API key. Unsplash / Pexels / Pixabay requieren configuración de API.
• También puedes usar chips de búsqueda rápida (por ejemplo: negocio / personas / naturaleza).
• Revisa términos de uso y licencias antes de usar una imagen.

Imagen: Biblioteca de medios

• Usa categorías para filtrar la lista (por ejemplo: todo / naturaleza / lifestyle / comida).
• La imagen seleccionada se refleja en la capa de fondo.
• Para producción, se recomienda optimizar tamaño/peso antes de publicar.

Imagen: URL de imagen

• Introduce URL en formato https://... y aplica.
• Si hay error 404 o CORS, la imagen no se mostrará.
• Como las URLs directas se rompen con migraciones/CDN, conviene revisar periódicamente.

UI de video (Video)

• Al elegir Tipo de medio = Video, se habilitan URL/búsqueda de vídeo y ajustes de póster.
• La búsqueda por proveedores también requiere API key configurada.
• Ajusta recorte/posición con Video Fit y Video Posición X/Y.
• El póster funciona como imagen de respaldo antes de la reproducción.

Función PRO (video):
los ajustes de vídeo de fondo (Video URL, visualización de vídeo y póster) están disponibles en ZenBlocks PRO.

estructura de capas de fondo (de abajo arriba): Color -> Imagen -> Patrón -> Superposición. Se controlan con z-index (Color: 0, Imagen: 1, Patrón: 2, Superposición: 3) y no bloquean clics (pointer-events: none).

Límite en móviles:
en iOS/Android, la reproducción automática de vídeo solo se permite en silencio. Este bloque añade muted, playsinline, loop, autoplay, pero la reproducción puede bloquearse según navegador/dispositivo. Se recomienda configurar póster.

Control exclusivo imagen/video:
al seleccionar Vídeo, la capa de imagen queda oculta (display: none). No se muestran ambos a la vez.

Color

Puntos:
define el color base del fondo (capa más inferior).

Qué cambia este ajuste:
determina la impresión final junto con texto y capas superiores.

Consejo de ajuste:
prioriza combinaciones legibles antes que colores vistosos por separado.

Elementos de configuración

• Color / Gradient: define color sólido o degradado.
• Alpha: ajusta transparencia.
• Cambio de modo sólido/degradado.
• Restablecer: restablece esta sección.
• Responsivo: habilita ajustes por dispositivo.

también puedes configurar color en Hover. Al estar en la capa inferior, ajusta junto con superposición, patrón e imagen para mantener balance.

Transición de color en Hover:
internamente se implementa con crossfade entre capas de estado normal y Hover, por lo que la transición entre sólido y degradado también puede verse fluida.

Transición

Puntos:
define la velocidad de cambio de normal a Hover en el fondo.

Qué cambia este ajuste:
afecta sensación de respuesta y calidad de interacción.

Consejo de ajuste:
usa Duration 200-350ms como base y añade Delay/easing personalizado solo cuando sea necesario.

Elementos de configuración

• Duración (ms): tiempo del cambio.
• Retardo (ms): espera antes de iniciar.
• Suavizado: curva de aceleración.
• Valor personalizado: curva personalizada (cubic-bezier).
• Restablecer: restablece esta sección.

esta transición de fondo se aplica a superposición, patrón, imagen y color. Es independiente de la transición del panel de estilo.

Diferencia frente a Miniatura y Banda:
Configuración de fondo es la capa inferior que cubre todo el botón, por lo que aquí no hay ajustes de tamaño, borde, radio, posición, skew o transparencia por panel individual. Esos ajustes están en Miniatura/Banda. En cambio, Fondo sí incluye Patrón, y el ajuste de póster de vídeo es el más completo aquí.