Personalizar diseño

Una de las características más poderosas de gettickr.app es la capacidad de personalizar completamente el aspecto de tu temporizador. Ajusta colores, fuentes, tamaños y disposiciones para crear una cuenta regresiva que coincida perfectamente con tu marca o estética.

Free Feature

La personalización completa del diseño está disponible tanto en cuentas gratuitas como Premium. Crea temporizadores de aspecto profesional sin ninguna restricción.

Acceder a las opciones de diseño

Navega a la pestaña Styles en el editor para personalizar la apariencia de tu temporizador. La vista previa en vivo se actualiza en tiempo real a medida que realizas cambios, para que puedas ver exactamente cómo se verá tu temporizador antes de incrustarlo.

Tip

La pestaña Styles está organizada por elementos del temporizador. Cada elemento (fondo, título, números de cuenta regresiva) puede estilizarse de forma independiente para diseños sofisticados.

Comprender los elementos del temporizador

Tu temporizador consta de varios elementos que pueden personalizarse:

Elemento	Propósito	Propiedades personalizables
Background	Apariencia general y color	Solo color
Title	Texto encima de la cuenta regresiva	Visibilidad, Tamaño de fuente, Color, Familia de fuente, Peso, Estilo
Timer Numbers	La visualización real de la cuenta regresiva	Tamaño de fuente, Color, Familia de fuente, Peso, Estilo

Mostrar u ocultar el título

En la pestaña General encontrarás el interruptor „Mostrar título", con el que puedes mostrar u ocultar el título de tu temporizador. Si ocultas el título, solo se mostrará la cuenta regresiva, sin texto encima.

Esto es especialmente útil cuando:

Quieres usar el temporizador como overlay solo de números en tu stream
El título ya se muestra en otro lugar de tu escena de OBS o en tu sitio web
Prefieres un diseño minimalista sin texto adicional

Tip

El interruptor „Mostrar título" se encuentra en la pestaña General, debajo del campo de entrada del título. Los cambios se reflejan inmediatamente en la vista previa en vivo.

Personalización de colores

Colores de fondo:

Los fondos oscuros funcionan bien para overlays de stream
Los fondos claros se adaptan a banners promocionales de sitios web
Los fondos negros aparecen transparentes en OBS y otros programas

Colores de números del temporizador:

Usa alto contraste para legibilidad (claro sobre oscuro, oscuro sobre claro)
Combina con los colores de tu marca para coherencia
Considera la psicología del color (rojo = urgencia, azul = calma, verde = positivo)

Colores de título y etiquetas:

Crea jerarquía visual con diferentes colores
Usa colores primarios de marca para títulos
Usa colores complementarios para números de cuenta regresiva

Tip

Asegúrate siempre de tener suficiente contraste entre texto y fondo para legibilidad. Prueba en pantallas de escritorio y móviles.

Selección de fuentes

Elige fuentes que coincidan con la personalidad de tu marca:

Estilos de fuente:

Sans-serif (moderna, limpia): Mejor para cuentas regresivas profesionales
Fuentes decorativas (decorativas): Geniales para temporizadores creativos o promocionales
Monospace (técnica): Perfecta para diseños de gaming o enfocados en tecnología

Tamaño de fuente:

Números grandes y en negrita para máxima visibilidad
Texto de título proporcional para composición equilibrada
Considera la distancia de visualización (overlay de stream vs. banner de sitio web)

Warning

Las fuentes personalizadas pueden tardar un momento en cargarse en conexiones lentas. Las fuentes del sistema se cargan instantáneamente pero ofrecen menos flexibilidad de diseño.

Disposición

Disposición de elementos:

Puedes cambiar el orden de los elementos de título y cuenta regresiva (título arriba o cuenta regresiva arriba).

Tamaño y dimensiones

Tamaños comunes de temporizador:

Caso de uso	Tamaño recomendado	Notas
OBS pantalla completa	1920x1080 px	Coincide con resolución de stream
OBS overlay esquina	300-500 px ancho	Compacto, no intrusivo
Banner hero sitio web	Ancho completo	Diseño responsive
Barra lateral sitio web	250-350 px ancho	Se ajusta a barras laterales estándar

Tip

Usa anchos basados en porcentajes para diseños responsive en sitios web. Los tamaños fijos en píxeles funcionan mejor para overlays de OBS.

Mejores prácticas de diseño

Legibilidad primero:

Alto contraste entre texto y fondo
Tamaños de fuente lo suficientemente grandes para lectura rápida
Diseños simples y ordenados

Coherencia de marca:

Coincide con los colores de tu marca existente
Usa fuentes de las directrices de tu marca
Mantén un estilo visual coherente en todos los temporizadores

Diseño orientado al propósito:

Cuenta regresiva urgente (venta flash) = Rojo, negrita, grande
Cuenta regresiva tranquila (inicio de evento) = Azul, elegante, moderado
Cuenta regresiva juguetona (pausa de stream) = Colores brillantes, fuentes divertidas

Tip

Crea múltiples diseños de temporizador guardados para diferentes propósitos: pausas, eventos, ventas, etc. Las cuentas premium pueden guardar configuraciones ilimitadas de temporizador.

Próximos pasos

Vista previa vs. Renderer - Comprender los diferentes modos de visualización
Guardar y gestionar temporizadores - Guarda tu diseño para reutilizarlo
Integración con OBS - Añade tu temporizador a streams