El bloque de Cuenta Atrás te permite añadir temporizadores animados de cuenta atrás a tus páginas sin necesidad de código personalizado ni plugins. Ya sea que estés generando expectación para el lanzamiento de un producto, una oferta flash o un evento en vivo, el bloque de Cuenta Atrás crea una sensación de urgencia convincente que motiva a los visitantes a actuar.
Puedes elegir entre una cuenta atrás de fecha fija que finaliza en un momento específico, o un temporizador perpetuo que se reinicia para cada visitante, ofreciendo una experiencia de urgencia personalizada y siempre activa sin importar cuándo alguien aterrice en tu página.
Añadir el Bloque de Cuenta Atrás a tus Páginas
Sigue estos pasos para añadir un bloque de Cuenta Atrás a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Cuenta Atrás en la sección deseada de tu página.
Arrastra el bloque de Cuenta Atrás desde el panel de Bloques y suéltalo en la sección de página deseada.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque de Cuenta Atrás para abrir su configuración. En la pestaña Contenido, elige tu tipo de temporizador y configura su comportamiento y etiquetas.
Tipo de Temporizador:
- Cuenta Atrás de Fecha y Hora: Cuenta atrás hasta una fecha y hora fijas. Ideal para lanzamientos de productos, ofertas flash o eventos con una fecha de finalización específica; todos los visitantes ven el mismo temporizador independientemente de cuándo lleguen.
- Temporizador de Visitante (Perpetuo): Cuenta atrás desde una duración establecida que se reinicia para cada nuevo visitante. Utiliza cookies para mantener la coherencia en los refrescos de página, haciendo que cada visitante sienta que la oferta es personalmente limitada en el tiempo.
La Cuenta Atrás de Fecha y Hora te permite establecer una fecha y hora de finalización específicas para tu temporizador.
El Temporizador de Visitante (Perpetuo) reinicia la duración de la cuenta atrás para cada nuevo visitante utilizando cookies.
Configuración del Temporizador:
- Fecha y Hora de Finalización: (Solo Fecha y Hora) Establece la fecha y hora exactas en que expira la cuenta atrás.
- Zona Horaria: (Solo Fecha y Hora) Elige la zona horaria para la hora de finalización para garantizar la precisión para tu público objetivo.
- Horas / Minutos / Segundos: (Solo Perpetuo) Establece la duración de la cuenta atrás que cada visitante verá al llegar por primera vez.
- Tamaño: Establece el tamaño general del temporizador de cuenta atrás: Muy Pequeño, Pequeño, Mediano o Grande.
Acción al Expirar:
- Mostrar Mensaje: Muestra un mensaje personalizado una vez que el temporizador llega a cero, como un aviso de "oferta caducada" o de agradecimiento.
- Redirigir: Envía automáticamente a los visitantes a una página diferente cuando finaliza la cuenta atrás, como una página de pago o una página de destino post-venta.
- Reiniciar: (Solo Perpetuo) Reinicia el temporizador desde el principio una vez que llega a cero.
Elige qué sucede cuando el temporizador llega a cero: muestra un mensaje personalizado, redirige a los visitantes a otra URL o reinicia el temporizador.
Personalizar Etiquetas:
- Etiqueta de Días: Personaliza el texto que se muestra debajo de la unidad de días (por defecto: "Días")
- Etiqueta de horas: Personaliza el texto que se muestra debajo de la unidad de horas (predeterminado: “Horas”)
- Etiqueta de minutos: Personaliza el texto que se muestra debajo de la unidad de minutos (predeterminado: “Minutos”)
- Etiqueta de segundos: Personaliza el texto que se muestra debajo de la unidad de segundos (predeterminado: “Segundos”)
Paso 3: Elige un estilo de plantilla
En la pestaña Plantillas, puedes seleccionar entre estilos de cuenta atrás prediseñados para cambiar rápidamente el aspecto general de tu temporizador sin ajustar la configuración individual.
- Plantillas predefinidas: Elige entre una variedad de diseños listos para usar, cada uno con esquemas de color, estilos de caja y diseños únicos. Haz clic en cualquier plantilla para aplicarla instantáneamente a tu bloque de cuenta atrás.
Explora y aplica estilos de cuenta atrás prediseñados desde la pestaña Plantillas.
Paso 4: Personaliza el diseño
En la pestaña Avanzado, puedes personalizar completamente la apariencia visual y el diseño de tu bloque de cuenta atrás.
Estilos:
- Tipografía: Haz clic en Editar para abrir el panel completo de tipografía. Controla la familia de fuentes, el tamaño (escritorio, tableta y móvil), el grosor de la fuente, cursiva, subrayado, mayúsculas/minúsculas, altura de línea y espaciado entre letras del texto de la cuenta atrás.
- Color de resaltado: Establece el color de fondo de las cajas individuales de unidades de tiempo.
- Color de etiqueta: Establece el color de las etiquetas de Días, Horas, Minutos y Segundos debajo de cada número.
- Espacio entre: Controla el espacio entre cada caja de unidad de tiempo usando un deslizador.
- Radio del borde: Redondea las esquinas de las cajas de unidades de tiempo usando un deslizador.
- Sombra: Añade una sombra a las cajas de cuenta atrás. Elige entre tamaños preestablecidos: Ninguno, Cabello, Pequeño, Mediano, Grande, Muy Grande, Extra Grande o Personalizado.
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de cuenta atrás (Superior, Derecho, Inferior, Izquierdo). Esto determina cuánto espacio aparece entre el temporizador y los elementos circundantes.
- Relleno: Ajusta el espaciado interior dentro de tu bloque de cuenta atrás (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio entre el temporizador y los bordes del bloque.
Atributos:
- ID de CSS: Muestra el identificador único generado automáticamente para tu bloque de cuenta atrás. Esta ID es creada automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript.
- Clase personalizada: Agrega clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: Añade cualquier atributo HTML al elemento contenedor de la cuenta atrás. Introduce cada atributo en una nueva línea usando el formato: nombre-atributo|valor (por ejemplo, data-timer|true).
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculta el bloque de cuenta atrás en pantallas de escritorio.
- Ocultar en tableta: Oculta el bloque de cuenta atrás en dispositivos tableta.
- Ocultar en móvil: Oculta el bloque de cuenta atrás en dispositivos móviles.
Efectos de Animación:
- Animación de entrada: Elige entre varios efectos de animación que se reproducen cuando el bloque de cuenta atrás entra en la vista. Las opciones incluyen Rebote, Fundido de entrada, Zoom de entrada, Rotación de entrada y muchas más. Una animación de entrada atrae la atención inmediata a tu temporizador en el momento en que los visitantes lo encuentran.
Utiliza la pestaña Avanzado para controlar estilos, espaciado, atributos, visibilidad del dispositivo y animaciones de entrada para tu bloque de cuenta atrás.
Paso 5: Guardar tus cambios
Una vez que hayas terminado de configurar el bloque de cuenta atrás y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de cuenta atrás a tu página! Los temporizadores de cuenta atrás son una de las herramientas más eficaces para impulsar conversiones, ya sea que estés promocionando una oferta por tiempo limitado, el lanzamiento de un producto o un evento próximo. Experimenta con tipos de temporizador, plantillas y acciones de caducidad para crear una experiencia que mantenga a los visitantes comprometidos y motivados para actuar.