Configuración de banda

Superposición

Puede diferir ligeramente de la interfaz real.

Puntos:
define una capa de color sobre la banda.

Qué cambia este ajuste:
mejora legibilidad sobre imagen o vídeo.

Consejo de ajuste:
fija primero densidad con color sólido; usa gradiente solo cuando aporte valor.

Elementos de configuración

• Color / Gradient.
• Opacidad.
• Modo de mezcla.
• Responsivo.

Patrón

Puede diferir ligeramente de la interfaz real.

Puntos:
define tipo e intensidad de patrón para añadir textura.

Qué cambia este ajuste:
evita apariencia plana y añade carácter visual.

Consejo de ajuste:
mantén contraste moderado para no competir con el texto.

Elementos de configuración

• Tipo de patrón.
• Color del patrón.
• Tamaño del patrón.
• Opacidad del patrón.
• Modo de mezcla.
• Responsivo.

Imagen

Puede diferir ligeramente de la interfaz real.

Puntos:
configura visualización de imagen/vídeo en la banda.

Qué cambia este ajuste:
fit/posición/opacidad alteran mucho el resultado visual.

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

Elementos de configuración

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

Función PRO (video):
los ajustes de vídeo de banda están disponibles en ZenBlocks PRO.

Color

Puede diferir ligeramente de la interfaz real.

Puntos:
define el color base de la banda.

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

Consejo de ajuste:
prioriza combinaciones legibles.

Elementos de configuración

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

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

Tamaño

Puede diferir ligeramente de la interfaz real.

Puntos:
define ancho/alto de la banda para ajustar presencia visual por dispositivo.

Qué cambia este ajuste:
afecta visibilidad y equilibrio del conjunto.

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

Elementos de configuración

• Ancho.
• Alto.
• Responsivo.

Borde

Puede diferir ligeramente de la interfaz real.

Puntos:
define color, grosor y estilo de borde.

Qué cambia este ajuste:
refuerza contorno y jerarquía visual.

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

Elementos de configuración

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

Radio de borde

Puede diferir ligeramente de la interfaz real.

Puntos:
define redondeo de esquinas.

Qué cambia este ajuste:
cambia tono visual (más duro o más suave).

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

Elementos de configuración

• Radio de borde.
• Responsivo.

Posición

Puede diferir ligeramente de la interfaz real.

Puntos:
define ubicación de la banda en el layout.

Qué cambia este ajuste:
una mala posición puede provocar solapes no deseados.

Consejo de ajuste:
usa posición relativa como base y limita absoluta a casos concretos.

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 global y mezcla de la banda.

Qué cambia este ajuste:
modifica profundidad visual y presencia sobre el fondo.

Consejo de ajuste:
si empeora lectura, corrige primero contraste de texto/fondo.

Elementos de configuración

• Opacidad.
• Modo de mezcla.
• Responsivo.

Transformaciónación

Puede diferir ligeramente de la interfaz real.

Puntos:
define deformación (skew) para crear acento visual.

Qué cambia este ajuste:
pequeñas variaciones cambian mucho la impresión.

Consejo de ajuste:
empieza cerca de 0deg y evita valores fuertes en producción.

Elementos de configuración

• Skew X.
• Skew Y.
• Responsivo.

se emite como transform: skew(). También puede ajustarse en Hover. Si el ángulo es grande, revisa recorte por overflow: hidden.

Transición

Puede diferir ligeramente de la interfaz real.

Puntos:
define velocidad de cambio de normal a Hover.

Qué cambia este ajuste:
afecta respuesta percibida y calidad del movimiento.

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, patrón, imagen, color, transparencia y transformación de la banda. Es independiente de la transición del botón principal.

Diferencia con Fondo y Miniatura:
Banda es la capa decorativa con más ajustes. Skew existe solo en Banda. Patrón está en Fondo y Banda, pero no en Miniatura. Si necesitas control de forma/posición detallado en una capa decorativa, usa Banda o Miniatura.