Configuración de miniatura

Superposición

Puede diferir ligeramente de la interfaz real.

Puntos:
configura una capa de color sobre la miniatura para mejorar legibilidad.

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

Consejo de ajuste:
define primero densidad en color sólido; usa gradiente solo si aporta valor.

Elementos de configuración

• Color / Gradient: define color sólido o degradado.
• Opacidad: ajusta opacidad.
• Modo de mezcla: define modo de mezcla.
• Responsivo: habilita ajustes por dispositivo.

la superposición de miniatura se aplica solo sobre la miniatura, no sobre el fondo del botón.

Imagen

Puede diferir ligeramente de la interfaz real.

Puntos:
configura cómo se muestra imagen/vídeo en miniatura.

Qué cambia este ajuste:
con el mismo recurso, fit/posición/opacidad cambian mucho la fuerza visual.

Consejo de ajuste:
decide primero Fit, luego posición y al final opacidad/superposición.

Elementos de configuración

• Tipo de medio (imagen / vídeo).
• Imagen: selección, Repetir, Método de ajuste, Rotación (grados), Opacidad.
• Responsivo: habilita ajustes por dispositivo.

Función PRO (video):
los ajustes de video en miniatura están disponibles en ZenBlocks PRO.

Color

Puede diferir ligeramente de la interfaz real.

Puntos:
configura color base de la miniatura.

Qué cambia este ajuste:
combinado con superposición y texto define la impresión final.

Consejo de ajuste:
prioriza combinaciones legibles antes que color llamativo aislado.

Elementos de configuración

• Color base.
• Opacidad.
• Modo de mezcla.
• Responsivo.

Límite de transición de color en Hover:
si alternas entre color sólido y degradado (background-color vs background-image), la transición puede no animarse y cambiar de golpe por limitación del navegador. Para transición fluida, usa sólido->sólido o degradado->degradado.

Tamaño

Puede diferir ligeramente de la interfaz real.

Puntos:
define ancho/alto de la miniatura para optimizar visibilidad por dispositivo.

Qué cambia este ajuste:
cambia presencia visual y equilibrio de información.

Consejo de ajuste:
revisa siempre SP por separado tras ajustar en PC.

Elementos de configuración

• Ancho.
• Alto.
• Responsivo.

Borde

Puede diferir ligeramente de la interfaz real.

Puntos:
define color, grosor y estilo del borde para reforzar contorno.

Qué cambia este ajuste:
mejora separación visual en fondos claros.

Consejo de ajuste:
empieza cerca de 1px para evitar exceso de peso visual.

Elementos de configuración

• Borde (ON/APAGADO).
• Color.
• Ancho.
• Style.
• Responsivo.

Radio de borde

Puede diferir ligeramente de la interfaz real.

Puntos:
ajusta redondeo y tono visual (duro/suave).

Qué cambia este ajuste:
la percepción cambia según proporción con el tamaño.

Consejo de ajuste:
como base, usa 20% a 35% de la altura.

Elementos de configuración

• Radio de borde.
• Responsivo.

Posición

Puede diferir ligeramente de la interfaz real.

Puntos:
ajusta ubicación de la miniatura respecto a otros elementos.

Qué cambia este ajuste:
una mala posición puede romper layout con facilidad.

Consejo de ajuste:
usa posición relativa por defecto y limita absoluta a casos necesarios.

Elementos de configuración

• Alineación horizontal (Left / Center / Right).
• Alineación vertical (Top / Center / Bottom).
• Responsivo.

Transparencia

Puede diferir ligeramente de la interfaz real.

Puntos:
define opacidad y mezcla global de la miniatura.

Qué cambia este ajuste:
cambia la profundidad visual sobre el fondo.

Consejo de ajuste:
si baja la lectura, corrige primero contraste del texto.

Elementos de configuración

• Opacidad.
• Modo de mezcla.
• Responsivo.

Transición

Puede diferir ligeramente de la interfaz real.

Puntos:
define velocidad del cambio a Hover en miniatura.

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

Consejo de ajuste:
usa Duration 200-350ms como base.

Elementos de configuración

• Duración (ms).
• Retardo (ms).
• Suavizado.
• Valor personalizado (cubic-bezier).
• Restablecer.

se aplica a superposición, imagen, color, borde, radio de borde y transparencia. La transición del botón principal e iconos funciona por separado.

Diferencia con Fondo y Banda:
Miniatura no incluye ajustes de Patrón ni Transformaciónación (Skew). Si necesitas patrón decorativo, usa Banda. En cambio, Miniatura sí ofrece tamaño, borde, radio, posición y transparencia.