Las plantillas de cuenta regresiva ponen un temporizador en vivo delante de sus visitantes para crear urgencia en torno a un plazo — una oferta que termina, un precio que sube o un evento que empieza. Hay tres. Comparten el mismo motor de temporizador y casi todos los ajustes, así que en cuanto conoce una conoce las tres; elija la forma que encaje con el lugar donde quiere que aparezca.
Las tres plantillas
- Countdown Timer Card — una tarjeta con el titular, el temporizador y el botón. Úsela integrada en una página, combínela con el fondo modal de la acción para convertirla en un popup, o cámbiela a ocupación de pantalla completa. Puede ir apilada (todo centrado) o lado a lado (el texto a un lado y el temporizador al otro).
- Countdown Timer Bar — una franja a todo el ancho fijada en la parte superior o inferior de la pantalla, como una barra de anuncios con un temporizador en vivo. También puede ir integrada en la página.
- Event Countdown Bar — la misma franja, preparada para webinars, lanzamientos y eventos en directo. Añade un icono de evento, iconos en los botones y un segundo enlace para “Add to calendar”.
Todo lo que sigue se aplica a las tres, salvo que se indique lo contrario.
Definir la cuenta regresiva
Abra la sección Timer y use Countdown logic. Tiene dos formas de hacer la cuenta regresiva:
- Una fecha y una hora fijas — todos ven el mismo plazo. Úselo para un evento real o para una oferta que termina de verdad en un momento concreto.
- Una cuenta regresiva por visitante — cada visitante tiene su propio plazo (por ejemplo, una hora desde su primera vista), guardado en su navegador. Úselo para ofertas permanentes. También puede dejar que se reinicie después del periodo que elija.
De serie, las plantillas vienen con una cuenta regresiva por visitante de una hora, para que el temporizador funcione en cuanto coloque la plantilla. Cámbiela por su plazo real antes de publicar.
Elegir qué unidades mostrar
El temporizador muestra días, horas, minutos y segundos. Para ocultar una unidad, borre su etiqueta en la sección Timer — vaciar “Days Label” elimina toda la caja de los días, no solo el rótulo. Así se muestran, por ejemplo, solo las horas y los minutos.
También puede cambiar las etiquetas por sus propios textos y definir el Separator Between Boxes (el carácter : ) o borrarlo para no tener separador.
Dar estilo al temporizador
Cada parte del temporizador tiene su propio ajuste de estilo: la caja detrás de cada número, el propio número, el rótulo de debajo, el separador y el contenedor que lo rodea todo. Los valores predeterminados dan cajas blancas con números oscuros y un separador de color.
Algo que conviene saber: el estilo de las cajas se aplica también a los separadores, así que si da un fondo a las cajas, aparecerá también detrás del separador salvo que el estilo del separador lo sobrescriba. Los valores predeterminados ya lo tienen en cuenta.
Texto alrededor del temporizador
Además del antetítulo, el título y el subtexto, puede activar una línea corta encima y otra debajo del temporizador — por ejemplo, “La oferta termina en” encima y “Plazas limitadas” debajo. Las dos están desactivadas de forma predeterminada; actívelas en la sección Timer y defina su propio texto. Acompañan al temporizador dondequiera que lo coloque.
Cuando el temporizador llega a cero
En la sección Timer puede definir un mensaje que se muestra cuando termina la cuenta regresiva. When Timer Ends controla qué pasa con el resto del contenido:
- Yes (predeterminado) — el mensaje lo sustituye todo, así que el visitante ve una única frase clara como “Esta oferta ha terminado”.
- No — solo se sustituye el propio temporizador, y el titular y los botones se mantienen.
Dónde aparece
Tarjeta: inline la coloca en la página donde está ubicada la acción — combínela con el ajuste de fondo modal de la acción si quiere un popup clásico. fullscreen convierte toda la pantalla en el fondo, en un color sólido o con su propia imagen, con el contenido centrado.
Barras: top o bottom fija la franja en ese borde de la pantalla para que siga visible mientras el visitante se desplaza; inline la deja en el flujo de la página.
Aspecto
- Preset — colores dark, light o brand.
- Size — compact, default o spacious.
- Corner Radius y Shadow — desde esquinas rectas y sin sombra hasta redondeadas y con sombra marcada. En una barra fijada, las esquinas se mantienen rectas para que quede pegada al borde.
- Background Image — desactivada de forma predeterminada. Actívela, elija una imagen y use Background Overlay para oscurecerla y que el texto siga siendo legible.
- Decorative Shapes — círculos, esquinas o anillos sutiles opcionales en el fondo. Toman automáticamente el color del ajuste predefinido.
- Logo — desactivado de forma predeterminada; actívelo y elija su imagen.
- Button Animation — un pulso suave, un brillo suave o nada.
- Timer Urgency Pulse — un pulso sutil y recurrente en el propio temporizador.
Botones
Las tres tienen una llamada a la acción principal con su propio texto y enlace, más un botón opcional “No thanks” que simplemente la cierra.
La Event Countdown Bar añade un segundo enlace junto al botón principal, preparado de forma predeterminada como “Add to calendar”. Apúntelo a su enlace de Google Calendar, a su enlace de Outlook o a un archivo .ics . También le permite poner un icono dentro de cada botón y un icono de evento junto al texto — un calendario, una videocámara, un micrófono, una entrada, etc.
Cerrarla, y una nota importante para las pruebas
La sección Close controla el botón X: si se muestra, qué aspecto tiene y si está siempre visible o solo al pasar el ratón. El botón de cerrar también impide que la acción se vuelva a mostrar durante un tiempo.
Lea esto antes de hacer pruebas: una vez que se ha cerrado la acción, dejará 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.
- Si ya ha dejado de aparecer y necesita volver a verla, borre las cookies y los datos del sitio de su sitio, o ábralo en una ventana de incógnito / privada.
- Cuántas sesiones permanece oculta se define en la propia acción, en Placement / Trigger, no en la plantilla.
Una nota sobre la vista previa del editor
Hay dos cosas que solo ocurren en su sitio real, no dentro del panel del editor:
- El temporizador solo cuenta en la vista previa en vivo y en su sitio. Dentro del editor se muestra como un conjunto estático de cajas.
- Las barras fijadas y la pantalla completa no flotan en el editor. Se muestran a propósito como un bloque normal para que no tapen la barra de herramientas de edición. Use la vista previa en vivo para verlas bien.
Es el comportamiento esperado, no un fallo.
Notas técnicas
- Quién ve la cuenta regresiva, dónde y con qué frecuencia se define en la acción, no en la plantilla. La plantilla solo controla su aspecto y su comportamiento.
- Las tres plantillas usan el motor de cuenta regresiva integrado de Personyze, así que las zonas horarias y la lógica de la cookie por visitante ya están resueltas.
- El temporizador se mantiene en una sola línea en todos los tamaños, también en los móviles, donde las cajas se reducen en lugar de pasar a otra línea.
- En pantallas estrechas, las barras apilan su contenido en una columna automáticamente.
Más información
- Plantillas de popups para sitios web — las 16 plantillas y cómo elegir el formato adecuado.
- Marketing de gamificación — la mecánica de las plantillas interactivas y dónde encajan.