Como agregar cuenta regresiva en Wix
¿Quieres crear urgencia en tu tienda online, anunciar una oferta limitada o destacar un evento próximo en tu sitio web? En este tutorial paso a paso te enseñaré cómo agregar un temporizador de cuenta regresiva en Wix utilizando la app Profy Countdown Temporizador.
Aprenderás desde cómo instalar la aplicación, crear tu temporizador personalizado, configurar estilos, textos, colores, fechas clave, hasta cómo integrarlo y publicarlo correctamente en tu página.
No importa si usas la versión gratuita o Premium: al finalizar este tutorial, podrás mostrar un contador atractivo y funcional en tu web sin complicaciones.
1. Ingresar al App Market de Wix
Primero, dentro del editor de Wix, nos dirigimos al menú lateral izquierdo y hacemos clic en la opción “Explorar”, que nos lleva directamente al App Market, donde se encuentran todas las aplicaciones disponibles para integrar funciones adicionales en tu sitio.
2. Buscar la app de cuenta regresiva
En la barra de búsqueda del App Market escribimos:
“Profy Countdown Temporizador”
Este temporizador es una herramienta muy útil que te permite personalizar y agregar una cuenta regresiva en Wix con diseños modernos y diferentes estilos de visualización. Cuando la aplicación aparezca en los resultados, simplemente hacemos clic sobre ella para abrir su página de descripción.
3. Agregar la aplicación al sitio
Una vez abierta la página de la aplicación, pulsamos el botón “Agregar al sitio”. Aparecerá una ventana emergente con los Términos de uso.
- Marcamos la casilla para aceptar los términos y
- Hacemos clic en “Aceptar y Agregar”.
La aplicación comenzará a instalarse. Esperamos unos segundos hasta que se haya integrado correctamente a nuestro sitio Wix.
4. Insertar el temporizador en una página
Ya con la aplicación instalada, ahora vamos a insertarla en la página donde deseamos que aparezca.
- Nos dirigimos nuevamente al menú lateral y hacemos clic en “Agregar elementos”
- Dentro del panel que se despliega, buscamos la sección “Profy Countdown Temporizador”
- Hacemos clic y arrastramos el temporizador hacia la sección deseada de nuestra página.
¡Y listo! Ya tienes un temporizador de cuenta regresiva funcionando en tu web.
5. Insertar y configurar el temporizador en tu página
Una vez que el Profy Countdown Temporizador ya está visible en tu página web, hacemos lo siguiente:
- Seleccionamos el temporizador directamente en la página
- Hacemos clic derecho sobre él y elegimos la opción “Add Countdown Timer”
Aparecerá una pequeña ventana emergente que nos indica que debemos seleccionar un banner en el listado. Sin embargo, en este momento no aparece ninguno disponible.
Esto es completamente normal, ya que todavía no hemos creado ni configurado nuestro temporizador.
Así que, por ahora, cerramos esa ventana emergente para continuar con la configuración desde el panel principal.
6. Acceder al panel de control de la aplicación
Volvemos a seleccionar el mensaje de “Add Countdown Timer” que aparece en nuestra página, y esta vez seguimos estos pasos:
- Hacemos clic en la pestaña lateral llamada “Mi negocio”
- Dentro de las aplicaciones instaladas, seleccionamos “Profy Countdown Temporizador”
- Pulsamos en el botón “Ir al Panel de Control”
Esto nos llevará a la sección donde podemos elegir un plan y comenzar a personalizar nuestro temporizador.
7. Elegir el plan gratuito o premium para agregar cuenta regresiva en Wix
En esta pantalla, la app nos ofrece dos opciones de planes:
Plan Gratuito:
- Permite agregar 1 temporizador de cuenta regresiva
- Ideal si solo necesitas un temporizador básico
Plan Premium ($3.99/mes):
- Temporizadores ilimitados
- Barra adhesiva superior/inferior
- Ventanas emergentes
- Soporte prioritario
Para este tutorial, seleccionamos el plan gratuito, suficiente para probar y utilizar un temporizador funcional en nuestra web.
8. Crear el banner del temporizador
Una vez elegido el plan, hacemos clic en el botón “Crear banner”.
Aquí comienza la configuración visual y funcional del temporizador.
9. Elegir el tipo de banner y su ubicación
La aplicación nos ofrece cuatro tipos de ubicaciones para mostrar el temporizador:
- Barra superior/inferior: Un banner fijo en la parte superior o inferior de la página (incluido solo en el plan premium).
- App Widget Banner: Inserta el temporizador como un widget en cualquier parte del diseño del sitio.
Esta es la opción disponible en el plan gratuito. - Ventana emergente: Un pop-up que cubre gran parte de la pantalla para captar mayor atención.
- Banner de anuncio: Un banner animado con texto en movimiento, ideal para promociones, cupones, o mensajes rotativos.
En este tutorial, seleccionamos “App Widget Banner”, ya que es la opción habilitada para el plan gratuito y es perfectamente útil para colocar el temporizador en cualquier sección visible del sitio.
10. Elegir el tipo de temporizador para agregar cuenta regresiva en Wix
Una vez que seleccionamos el tipo de banner como “App Widget Banner”, se nos presentan varias opciones de modos de cuenta regresiva, según el objetivo que tengamos:
Hasta la fecha de finalización:
Ideal para promociones o eventos con fecha y hora límite. El temporizador se desactiva automáticamente una vez llegue a cero. (Esta será la opción que usaremos en este tutorial)
Cuenta regresiva recurrente:
Un contador que se reinicia cada cierto período de tiempo. Útil para ciclos o promociones repetitivas.
Venta por tiempo:
Muestra el temporizador todos los días dentro de una franja horaria específica. Perfecto para ventas diarias o promociones por horas.
Banner de anuncio:
Permite mostrar texto en desplazamiento, códigos de descuento, o banners giratorios.
En este tutorial, seleccionamos la opción “Hasta la fecha de finalización”.
11. Configurar los detalles básicos del banner
Aquí comenzamos a personalizar el contenido y comportamiento del temporizador.
Nombre del banner:
Asignamos un nombre identificativo (solo visible en el panel).
Vista previa en tiempo real:
Mientras editamos, podemos ver cómo se verá el temporizador en nuestra web.
Activar banner:
Habilitamos el banner deslizando el botón hacia la derecha.
Contenido del banner:
Editamos el texto que aparecerá junto al temporizador. Por defecto, muestra:
“¡Date prisa, la venta termina en…”
Texto del botón:
Ingresamos el texto que queremos mostrar en el botón de llamada a la acción (CTA), como “Ver Oferta” o “Comprar Ahora”.
Tipo de botón para agregar cuenta regresiva en Wix:
Podemos elegir entre varias opciones:
- Ninguno
- Botón predeterminado
- Enlace de texto
- Botón cuadrado
- Botón redondo
Después de finalizar la cuenta regresiva:
Elegimos qué ocurre cuando termina el tiempo:
- Ocultar el temporizador
- Mostrar un mensaje final personalizado
URL de destino:
Ingresamos la dirección web a la que los usuarios serán redirigidos al hacer clic en el banner.
12. Ajustes de configuración del banner
Entramos ahora a la sección de «Banner Configuración», donde definimos la estructura y comportamiento del temporizador:
Dirección del contenido:
Elegimos si los elementos del banner se disponen de forma vertical u horizontal.
Espaciado entre contenido:
Ajustamos el espacio entre líneas del mensaje o entre los elementos visuales del banner.
Tipo de cuenta regresiva:
Confirmamos que sea Hasta la fecha de finalización.
Ubicación del contador:
Podemos alinear el contador a la derecha o a la izquierda del contenido.
Fecha y hora de finalización:
Seleccionamos exactamente cuándo queremos que el temporizador termine.
Espaciado de etiquetas:
Controlamos la separación entre elementos como días, horas, minutos. Las opciones van desde “ninguno” hasta “extra grande”.
Etiquetas del temporizador:
Podemos personalizar los nombres de las unidades de tiempo (por ejemplo: “Días”, “Horas”, “Min”).
Diseño del temporizador:
Escogemos el estilo visual del temporizador:
- Simple
- Con borde
- En negrita
- Clásico
Colores del temporizador:
Podemos cambiar:
- Color de los dígitos
- Color de las etiquetas
- Color de fondo del temporizador
Vista previa adaptativa:
Alternamos la vista del banner en distintos dispositivos:
- Computadora
- Móvil
- Tableta
13. Personalizar el estilo visual para agregar cuenta regresiva en Wix
Pasamos a “Configuración de estilo”, donde damos vida visual al banner:
Colores:
- Fondo general del banner
- Color del texto
- Color del texto del botón
- Fondo del botón
Estilo del banner:
- Altura del cartel
- Tamaño de la fuente
Tipo de fuente:
Seleccionamos entre varias fuentes tipográficas según el estilo del sitio.
Imagen de fondo:
- Elegimos entre imágenes predeterminadas
- O subimos una imagen personalizada desde nuestro equipo
Opacidad del fondo:
Ajustamos la transparencia del fondo para que el contenido se integre con el diseño del sitio.
Estilo del ícono de agregar cuenta regresiva en Wix:
Variantes como:
- Negro
- Blanco
- En negrita
- En forma de círculo o cuadrado
Plantillas prediseñadas:
Disponemos de diseños ya hechos que podemos aplicar con un solo clic.
Zoom del fondo:
Podemos acercar o alejar la imagen de fondo.
Tamaño del botón:
Escogemos el tamaño del botón CTA para que sea más visible o más discreto según nuestra preferencia.
14. Ajustar la visibilidad del banner
Finalmente, configuramos cuándo y cómo se muestra el temporizador al usuario:
Mostrar botón de cerrar:
Activamos un botón de cierre (X) que permite al visitante cerrar el temporizador si lo desea.
Duración de visibilidad:
Definimos las fechas y horarios específicos en los que queremos que el banner esté activo y visible.
Ocultar después de cerrar:
Si se activa, el banner no volverá a mostrarse al usuario si este lo cierra, incluso al navegar a otras páginas del sitio.
15. Código personalizado (opcional) para agregar cuenta regresiva en Wix
Si tienes conocimientos en programación, esta sección te permite hacer personalizaciones avanzadas del banner:
Código JavaScript personalizado:
Puedes añadir código JS para ejecutar funciones específicas o conectar el temporizador con otros sistemas (por ejemplo, seguimiento de eventos, control de comportamiento dinámico, etc.).
Código CSS personalizado:
Aquí puedes modificar visualmente el temporizador más allá de las opciones predeterminadas. Puedes cambiar estilos, animaciones o adaptar el diseño a tu sitio web con clases personalizadas.
Esta sección es opcional y está pensada para usuarios intermedios o avanzados.
16. Guardar configuración
Una vez que hayas finalizado todas las configuraciones y ajustes:
En la parte superior derecha del panel de control del temporizador, haz clic en el botón “Guardar” (o “Ahorrar” si el idioma del sistema está en español).
Esto asegurará que todos los cambios que hiciste queden almacenados correctamente.
17. Regresar al editor de Wix
En la parte superior izquierda, pulsa el botón “Ir al editor” para volver al entorno visual donde estás construyendo tu sitio web.
18. Insertar el temporizador en la página
Ya de vuelta en tu página dentro del editor de Wix, verás el componente del temporizador con el mensaje “Add Countdown Timer”.
- Haz clic en esa sección.
- Se abrirá una ventana emergente (pop-up) mostrando los temporizadores disponibles.
- Ahora sí debe aparecer el nombre del banner que acabamos de configurar.
- Haz clic sobre él y automáticamente se insertará en tu página.
20. Publicar los cambios para agregar cuenta regresiva en Wix
Una vez insertado y ajustado en tu página:
- Dirígete a la parte superior derecha del editor.
- Haz clic en el botón “Publicar” para que todos los cambios se apliquen en tu sitio web en línea.
¡Y listo! Tu temporizador de cuenta regresiva ya está visible para los visitantes de tu sitio. Es perfecto para destacar promociones, lanzamientos, eventos especiales o urgencias de compra.
Conclusión de Como agregar cuenta regresiva en Wix
¡Y eso es todo! Ya sabes cómo agregar una cuenta regresiva profesional en Wix con todas las opciones de personalización que ofrece Profy Countdown Temporizador.
Este tipo de herramienta es ideal para aumentar la conversión, llamar la atención de tus visitantes y generar un sentido de urgencia en campañas de venta, inscripciones, lanzamientos y mucho más.
Recuerda siempre guardar tus cambios y publicar tu sitio para ver los resultados en vivo.
¿Te ha sido útil este tutorial? No olvides compartirlo o dejar tu comentario si tienes dudas.
