Gracias a la sección Countdown Timer (temporizador de cuenta atrás), puedes añadir fácilmente elementos con tiempo limitado a tu página, como una cuenta atrás para el final de una promoción o el inicio de un evento. Un temporizador ayuda a crear sensación de urgencia y anima a los usuarios a actuar.
Características principales
- Cuenta atrás en tiempo real con animaciones suaves
- Opción para personalizar etiquetas, colores y posición
- Posición fija con un botón Close opcional
- Integración de botones CTA principal y secundario
- Diseño totalmente responsive que se adapta a cualquier dispositivo
- Ocultación automática de los ceros en la variante de texto
Cómo añadir un temporizador
Para crear un temporizador en Easypage, sigue estos pasos:
- Ve a tu proyecto en Easypage, en Websites → Landing Page (sitios web → landing page).
- Haz clic en + New Section.
- En la lista de secciones, selecciona Countdown Timers (temporizadores de cuenta atrás).
- Elige una de las plantillas disponibles y arrástrala hasta el lienzo.
El temporizador aparecerá en tu página y podrás empezar a personalizarlo de inmediato.
Variantes de temporizador disponibles
Banners horizontales
- Digital Flip - tarjetas animadas con un efecto dinámico de “volteo”. Cada cambio en segundos, minutos u horas se anima suavemente, captando la atención del visitante. Este estilo moderno y enérgico funciona muy bien para campañas promocionales cortas y con tiempo limitado.
- Circular Progress - indicadores circulares de progreso que muestran el paso del tiempo. Cada círculo representa una unidad distinta (días, horas, minutos, segundos) y se va llenando de color gradualmente. Perfecto para páginas elegantes y minimalistas, como lanzamientos de producto o cuentas atrás de eventos.
- Simple Display - una cuenta atrás en texto, clara y fácil de leer, con números clásicos. Sin animaciones, solo una visualización nítida que no distrae del contenido principal. Una gran opción para páginas con mucho texto o formularios.
- Text Inline - un temporizador de texto minimalista que oculta automáticamente los ceros. Puedes colocarlo directamente dentro de una frase (por ejemplo, “La oferta termina en 03:25:10”). Se integra perfectamente con tu contenido y mantiene el diseño ordenado.
Secciones verticales
- Simple Centered - un diseño centrado con un temporizador circular. Toda la sección (título, temporizador, descripción y botones) está alineada al centro, convirtiendo la cuenta atrás en un elemento visual clave. Perfecto para páginas de “Próximamente”, lanzamientos de producto u ofertas con tiempo limitado.
- Split with Media - un diseño dividido que combina texto (etiqueta, título, descripción, temporizador, botones) con contenido multimedia (imagen, vídeo o iframe). Un lado contiene el temporizador y el texto, mientras que el otro muestra un elemento visual. Ideal para campañas promocionales o de ventas donde las imágenes refuerzan tu mensaje.
- Split with Media Left - una variante con el contenido multimedia a la izquierda y el texto a la derecha. Esta estructura hace que los usuarios vean primero la imagen o el vídeo y después lean el texto y el CTA que lo acompañan. Excelente para landing pages dinámicas y secciones de marketing.
Ajustes principales del temporizador
Pestaña Content
- Countdown end time (fecha límite de la cuenta atrás) - elige la fecha y hora exactas en que termina tu promoción o evento. Cuando pase ese momento, el temporizador se detiene automáticamente y los visitantes verán la acción que hayas elegido (por ejemplo, volver a cero o mostrar un mensaje personalizado).
- When timer expires (cuando expira el temporizador) - decide qué ocurre cuando termina la cuenta atrás. Puedes dejar el temporizador en cero o mostrar un mensaje personalizado como “Promoción finalizada” o “Únete a la próxima edición”.
- Title (título) - un título corto y opcional que aparece encima o al lado del temporizador. Úsalo para añadir un mensaje claro y orientado a la acción, como “La oferta termina en” o “Tiempo restante para el lanzamiento”.
- Unit labels (etiquetas de unidades) - introduce tu propio texto para cada unidad de tiempo (días, horas, minutos, segundos) para que encaje con el idioma y el tono de tu sitio.
Botones
- Primary CTA button (botón CTA principal) - añade un botón principal que anime a los usuarios a actuar, como “Comprar ahora”, “Regístrate” o “Ver oferta”. Puedes personalizar su texto, color y enlace.
- Secondary button (botón secundario) - un botón adicional y opcional para acciones de apoyo, como “Saber más”.
- Entire banner as link (todo el banner como enlace) - activa esta opción para que todo el banner sea clicable. Al activarla, los usuarios pueden hacer clic en cualquier parte del temporizador para ir a la página que elijas (con efectos al pasar el cursor).
- Close button (botón de cierre) - añade un pequeño botón X que permite a los usuarios cerrar el temporizador. Es especialmente útil cuando el temporizador está fijado en la parte superior o inferior de la pantalla.
Pestaña Style
- Colors (colores) - personaliza el aspecto de la sección para que encaje con tu marca. Puedes cambiar los colores de fondo, texto, botón, tarjeta y borde.
- Layout and positioning (diseño y posición) - elige dónde y cómo debe aparecer el temporizador en tu página:
- Fixed position (posición fija): Off / Top / Bottom - fija el temporizador en la parte superior o inferior de la pantalla.
- Width mode (modo de ancho): Full width / Rounded container - decide si el temporizador debe ocupar toda la pantalla o mostrarse en un bloque redondeado.
Consejo: combina los temporizadores con botones CTA para dirigir eficazmente la atención de los usuarios, por ejemplo: “¡La oferta termina en 2 horas, haz tu pedido ahora!”