La Event Progress Countdown muestra lo cerca que está un evento con una barra que se llena a medida que se acerca la fecha, en lugar de depender solo de los números. Está pensada para webinars, lanzamientos y sesiones en directo, e incluye un botón de registro y un enlace para añadir al calendario. Hay dos versiones con ajustes idénticos — elija la forma que encaje con el lugar donde la quiere.
Las dos versiones
- Event Progress Countdown — una sola columna centrada: el texto arriba, después la barra y el temporizador, y después los botones. Buena como panel dentro de una página o como ocupación de pantalla completa.
- Event Progress Countdown (Side-by-Side) — dos columnas: el texto y los botones a un lado, el temporizador y la barra al otro. Buena para secciones hero anchas.
Todo lo que sigue se aplica a las dos, salvo que se indique lo contrario.
Definir la hora del evento
La propia cuenta regresiva se define en la sección Timer, en Countdown logic, exactamente igual que en las otras plantillas de cuenta regresiva. Para un evento real, use una fecha y una hora fijas para que todos vean el mismo plazo. La barra de progreso lee esa misma cuenta regresiva, así que la fecha solo se define una vez.
Cómo sabe la barra de progreso dónde empezar
Una cuenta regresiva solo necesita una fecha de fin, pero una barra necesita también un principio — si no, no hay forma de saber qué significa “a medio camino”. Para eso sirve Progress Window (days).
Responde a: ¿con cuánta antelación debe empezar a llenarse la barra? Con el valor predeterminado de 14, la barra está vacía dos semanas antes del evento, a la mitad una semana antes y llega al final justo cuando empieza el evento. Ajústelo a la duración de su campaña — 30 para una campaña de un mes, 7 para la última semana.
Antes de que se abra ese periodo, la barra simplemente se ve vacía; no se rompe nada si pone el evento más lejos.
Llenarse o vaciarse
Bar Direction controla en qué sentido se mueve. fill crece hacia el evento y se lee como “ya casi está aquí”. drain se vacía a medida que se acaba el tiempo y se lee como “se acaba el tiempo”. Las dos usan la misma cuenta regresiva; solo cambia la historia que quiere contar.
Mensajes que cambian a medida que se acerca el evento
Esta es la parte que hace que la barra valga la pena. En Progress Messages puede definir hasta cuatro pasos, cada uno con su propio texto y su propio color de barra. Con el paso del tiempo el mensaje se sustituye, así que el visitante siempre ve el más urgente de los que se aplican:
- Step 1 — 336 horas (14 días) — “Save the date”
- Step 2 — 168 horas (7 días) — “One week to go”
- Step 3 — 24 horas — “Last chance to register”
- Step 4 — 1 hora — “Starting soon”
Cada paso es un número de horas antes del evento. Se muestra el paso con el número más pequeño por debajo del cual ya ha caído el tiempo restante, así que puede introducirlos en cualquier orden. Cada paso define también el color de la barra, por eso los valores predeterminados van de verde a azul, ámbar y coral.
Solo hay un mensaje visible a la vez — a diferencia de una barra de valor del carrito, en la que se muestran todos los niveles a la vez. Es intencionado: el visitante no puede hacer nada para que avance una cuenta regresiva, así que el valor está en que cambie el mensaje, no en ver toda la escalera.
Desactívelo todo con Use Changing Messages si prefiere una barra simple.
Mostrar la barra sin los números
Ponga Show Numeric Timer en No y las cajas de la cuenta regresiva desaparecen, dejando solo la barra y su mensaje. La cuenta regresiva sigue funcionando por detrás y sigue moviendo la barra. Es una buena opción cuando un recuento preciso segundo a segundo resulta demasiado agresivo para el público.
Dar estilo a la barra
- Bar Style — extremos redondeados o rectos, y una barra más fina o más gruesa.
- Bar Animation — stripes para rayas diagonales en movimiento, shimmer para un reflejo que la recorre, pulse para un brillo suave, o nada.
- Bar Position (solo en la versión de una columna) — encima del temporizador, debajo del temporizador, encima del título o debajo de los botones.
En la versión lado a lado, la barra va siempre con el temporizador en su propia columna, centrada verticalmente respecto al texto, así que no hay ajuste de posición.
Icono, texto y botones
- Event Icon — un calendario, una videocámara, un micrófono, una entrada, etc., que se muestra junto al texto. Desactívelo si lo prefiere.
- Eyebrow, Title, Subtext — el texto del titular, más líneas cortas opcionales encima y debajo del temporizador.
- Botón principal — su enlace de registro o de alta, con un icono opcional dentro.
- Segundo botón — preparado como “Add to calendar”. Apúntelo a su enlace de Google Calendar, a su enlace de Outlook o a un archivo
.ics. - Botón ‘No thanks’ — un enlace opcional para cerrar, que se muestra en su propia línea debajo de los dos botones.
Cuando empieza el evento
Defina el mensaje que se muestra al llegar a cero en la sección Timer. Con When Timer Ends en Yes, sustituye todo el contenido, así que el visitante ve una única línea clara como “Esta sesión ha comenzado”. Póngalo en No y solo se sustituye el temporizador.
Aspecto
El ajuste predefinido (dark, light o brand), el tamaño, el radio de las esquinas, la sombra, una imagen de fondo opcional con una capa que la oscurece, las formas decorativas opcionales y la animación de los botones funcionan exactamente igual que en las otras plantillas de cuenta regresiva.
Cerrarla, y una nota importante para las pruebas
La sección Close controla el botón X y si se muestra siempre o solo al pasar el ratón. Al cerrarla también se impide que la acción vuelva a aparecer durante un tiempo.
Lea esto antes de hacer pruebas: una vez cerrada, deja de aparecer también para usted durante el número de sesiones definido en la acción. Eso puede parecer fácilmente que la plantilla no funciona cuando está funcionando exactamente como está configurada. Así que:
- Termine sus pruebas y el QA primero, y active después el comportamiento de ocultar.
- Para volver a verla, borre las cookies y los datos del sitio de su sitio, o use una ventana de incógnito / privada.
- El número de sesiones se define en la acción, en Placement / Trigger, no en la plantilla.
Una nota sobre la vista previa del editor
La cuenta regresiva no se ejecuta dentro del panel del editor, así que allí la barra se queda en su posición inicial. El modo de pantalla completa también se muestra como un bloque normal en el editor para que no tape la barra de herramientas de edición. Use la vista previa en vivo para ver bien las dos cosas. Es lo esperado.
Notas técnicas
- La barra la mueve la misma cuenta regresiva que define en la sección Timer, así que las zonas horarias y la lógica de fechas ya están resueltas. No hay una segunda fecha que mantener sincronizada.
- La barra se actualiza cada segundo junto con la cuenta regresiva.
- Si oculta una unidad borrando su etiqueta, la barra sigue funcionando — lee el tiempo restante de las unidades que se muestren.
- Quién ve la cuenta regresiva, dónde y con qué frecuencia se define en la acción, no en la plantilla.
Más información
- Plantillas de popups para sitios web — las 16 plantillas y cómo elegir el formato adecuado.