Cómo agregar un widget de cuenta regresiva en WordPress (3 formas fáciles)

Agregar un temporizador de cuenta regresiva a tu sitio de WordPress puede hacerlo más atractivo. Ya sea que estés destacando el lanzamiento de un producto, marcando una fecha importante o generando expectativa para un evento, un temporizador de cuenta regresiva cumple su función de manera efectiva.

Por ejemplo, hemos utilizado cuentas regresivas en nuestros sitios web para destacar ventas de productos, ofertas del Black Friday y más.

Con solo unos pocos pasos, puedes configurar este llamativo widget en tu sitio web. No solo capta la atención, sino que también mantiene informada a tu audiencia.

En este artículo, aprenderás tres formas sencillas de agregar un temporizador de cuenta regresiva a tu sitio de WordPress. Incluso si no eres experto en tecnología, te tenemos cubierto.

¿Cuándo y por qué usar un widget de temporizador de cuenta regresiva?

Los temporizadores de cuenta regresiva son versátiles y se pueden usar en varios escenarios. Agregan emoción y urgencia, animando a los visitantes a tomar acción.

¿Lanzando un nuevo sitio web? Un temporizador de cuenta regresiva puede generar expectativa y crear expectación. Muestra el temporizador en una página de "Próximamente" hermosa para animar a los visitantes a consultar las últimas actualizaciones.

Otro buen momento para usar un temporizador de cuenta regresiva es para próximas ventas o promociones en tu tienda en línea. Al mostrar un temporizador, informas a tus clientes sobre ofertas por tiempo limitado, lo que impulsa las ventas y la participación.

Los temporizadores de cuenta regresiva también pueden beneficiar a los organizadores de eventos. Ya sea un seminario web, una conferencia o una reunión social, establecer un temporizador ayuda a los asistentes a saber exactamente cuándo ocurrirá el evento.

Durante el mantenimiento del sitio web, los temporizadores de cuenta regresiva también son útiles. Permiten a los visitantes saber cuándo el sitio web estará disponible nuevamente, para que puedas mantenerlos informados y reducir la frustración.

Para usos a menor escala, como marcar un hito personal o un aniversario, los temporizadores de cuenta regresiva añaden un toque especial a tu sitio de WordPress.

Ahora, puedes mostrar un temporizador de cuenta regresiva en tus publicaciones, páginas y área de widgets de la barra lateral.

Los temporizadores de cuenta regresiva también se pueden agregar a ventanas emergentes (popups) tipo lightbox, barras flotantes, cuadros de desplazamiento y otros elementos de diseño para atraer a los visitantes del sitio y hacer que regresen a tu sitio web.

Dado que hay tantos casos de uso para un temporizador de cuenta regresiva, hemos enumerado 3 métodos diferentes para agregar un widget de temporizador de cuenta regresiva en WordPress:

• Método 1: Agregar un widget de temporizador de cuenta regresiva usando el plugin Countdown Timer Ultimate (Gratis)
• Método 2: Agregar un widget de temporizador de cuenta regresiva usando OptinMonster (Recomendado)
• Método 3: Agregar un widget de temporizador de cuenta regresiva usando SeedProd

Tutorial en video

Suscríbete a WPBeginner

Si prefieres instrucciones escritas, sigue leyendo.

Método 1: Agregar un widget de temporizador de cuenta regresiva usando el plugin Countdown Timer Ultimate (Gratis)

Countdown Timer Ultimate es un plugin sencillo que te permite agregar un temporizador de cuenta regresiva básico a tu sitio web.

En este tutorial, usaremos el plugin gratuito, ya que tiene todas las herramientas necesarias para crear un temporizador de cuenta regresiva.

Para empezar, lo primero que necesitas hacer es instalar y activar el plugin Countdown Timer Ultimate. Si necesitas ayuda, puedes consultar nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, deberás dirigirte a Countdown Timer » Add Timer desde tu área de administración de WordPress.

En esta siguiente pantalla, puedes darle un título a tu temporizador. Simplemente escribe el título que desees en el campo 'Add New Timer'.

Después de eso, puedes desplazarte hacia abajo hasta el área 'Countdown Timer – Settings' para establecer la fecha y hora de expiración de tu temporizador de cuenta regresiva.

Una vez que hayas localizado el campo 'Fecha y hora de expiración', selecciona la fecha del selector de fechas. Luego, puedes arrastrar los controles deslizantes de 'Hora', 'Minuto' y 'Segundo' para ajustar la hora de expiración.

Simplemente haz clic en 'Listo' para continuar al siguiente paso.

El siguiente paso es definir la etiqueta del temporizador.

Para mostrar los indicadores de días, horas, minutos y segundos en tu temporizador de cuenta regresiva, marca todas las casquillas en el campo 'Etiqueta del temporizador'.

Ahora, desplacémonos hacia abajo en la página y cambiemos a la pestaña 'Diseño' para estilizar el temporizador de cuenta regresiva.

En la primera sección, 'Configuración de diseño', puedes elegir un diseño y establecer el tamaño del temporizador.

Desafortunadamente, los usuarios gratuitos solo pueden elegir el diseño de temporizador 'Estilo de círculo 1'. Sin embargo, en 'Ancho del temporizador', podemos definir qué tan ancho será nuestro temporizador. Aquí, lo establecemos en 850 px.

Debajo de 'Ancho del temporizador', encontrarás la sección 'Configuración del estilo del círculo'.

Lo primero que querrás hacer es elegir una animación. Tienes dos opciones: 'Suave' y 'Puntos'.

Una vez que hayas decidido la animación del temporizador, puedes establecer el ancho del primer plano y del fondo del círculo arrastrando los controles deslizantes.

Después de eso, puedes pasar a personalizar los colores del temporizador de cuenta regresiva.

En la sección 'Configuración de colores de fondo del reloj', puedes ajustar el color de fondo y cambiar individualmente el color de los días, horas, minutos y segundos.

Una vez que estés satisfecho con la configuración, haz clic en el botón 'Publicar'.

Mostrar tu widget de temporizador de cuenta regresiva en WordPress

Ahora que has configurado tu widget de temporizador de cuenta regresiva, es hora de agregarlo a tu sitio web.

Primero, haz clic en el elemento del menú 'Temporizador de cuenta regresiva' de tu sitio web de WordPress. El temporizador que acabas de crear aparecerá en la tabla 'Temporizador de cuenta regresiva'.

Junto a tu temporizador de cuenta regresiva, verás un shortcode que necesitas copiar.

Después de copiar el shortcode, querrás abrir tu publicación o página donde deseas mostrar el temporizador de cuenta regresiva.

Desde aquí, puedes hacer clic en el botón ‘+’ para agregar el bloque de Shortcode. Luego, simplemente pega este shortcode en el área de contenido de tu publicación o página de WordPress.

Luego, querrás asegurarte de hacer clic en el botón ‘Actualizar’ o ‘Publicar’ para guardar tus cambios.

Ahora puedes visitar tu sitio web para ver el widget del temporizador de cuenta regresiva en acción.

Si usas un tema clásico, también podrías agregar este temporizador de cuenta regresiva a la barra lateral de tu sitio.

Simplemente ve a la página Apariencia » Widgets. Luego, puedes hacer clic en el botón ‘+’ en la sección ‘Barra lateral principal’ y buscar el bloque de Shortcode.

Simplemente haz clic en él cuando aparezca y pega el shortcode del temporizador de cuenta regresiva.

Una vez que hayas terminado, no olvides hacer clic en el botón ‘Actualizar’ para mantener la configuración de tu widget.

Ahora puedes visitar tu sitio para ver el temporizador de cuenta regresiva en la barra lateral o en el área lista para widgets.

Método 2: Agregar un widget de temporizador de cuenta regresiva usando OptinMonster (Recomendado)

OptinMonster es el mejor plugin de popup de WordPress del mercado, pero hace mucho más que solo popups. Te ayuda a convertir a los visitantes que abandonan el sitio en suscriptores y clientes.

Usando la función de temporizador de cuenta regresiva de OptinMonster, puedes integrar el temporizador de cuenta regresiva en una ventana emergente tipo lightbox, un widget de barra lateral, una barra flotante o cualquier otro tipo de campaña de OptinMonster.

La herramienta ofrece una forma inteligente de mostrar un temporizador de cuenta regresiva con un diseño atractivo. Incluso te permite crear temporizadores de cuenta regresiva perennes en WordPress.

Un temporizador de cuenta regresiva perpetuo inicia una cuenta regresiva para cada visitante individual. Luego, el temporizador comienza cuando la persona llega a tu sitio. También se le conoce como un temporizador de cuenta regresiva dinámico.

Primero, visitemos el sitio web de OptinMonster y registrémonos para obtener un plan que se ajuste a tus necesidades.

Una vez hecho esto, puedes instalar el plugin OptinMonster en tu sitio de WordPress. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Este plugin conectará tu sitio de WordPress a la aplicación OptinMonster. Al activarlo, puedes hacer clic en el botón ‘Conectar una cuenta existente’ y seguir las indicaciones para iniciar el proceso de integración.

Después de eso, verás aparecer una ventana emergente. Simplemente selecciona la dirección de correo electrónico que usaste para registrarte en una cuenta de OptinMonster y haz clic en el botón ‘Conectar a WordPress’.

El plugin ahora conectará tu sitio de WordPress a tu cuenta de OptinMonster.

Una vez conectado, puedes empezar a crear una nueva campaña desde tu panel de OptinMonster. Simplemente ve a OptinMonster » Campañas y haz clic en el botón ‘Crear tu primera campaña’.

El plugin ofrece una variedad de tipos de campaña y plantillas para elegir.

Puedes usar cualquier tipo de campaña y agregarle el temporizador de cuenta regresiva. Para este tutorial, usaremos el tipo de campaña ‘Popup’. Luego, usaremos la plantilla ‘Obtener un código de descuento’.

Aparecerá una ventana emergente donde tendrás que nombrar la plantilla. El nombre es solo para tu referencia, así que puedes usar lo que quieras.

Por ejemplo, nombramos nuestra campaña ‘Temporizador de cuenta regresiva’.

Una vez que hayas hecho eso, haz clic en ‘Iniciar construcción’. OptinMonster te redirigirá a la interfaz del constructor.

Desde aquí, exploremos la sección ‘Bloque’ en el panel izquierdo. Luego, simplemente arrastra el bloque ‘Cuenta regresiva’ y suéltalo en la vista previa en el panel derecho cuando lo veas.

A continuación, puedes seleccionar el ‘Tipo de cuenta regresiva’ en el campo desplegable del panel lateral. Hay dos opciones, ‘Estático’ y ‘Dinámico’.

Ahora, la elección entre los dos tipos depende completamente de tu objetivo. Un temporizador estático, como su nombre indica, permanece fijo en una sola fecha y hora de finalización, lo que lo hace ideal para eventos únicos como el lanzamiento de un producto o un seminario web.

¿Pero qué pasa si quieres crear un sentido de urgencia recurrente? Ahí es donde el temporizador dinámico resulta útil.

Digamos que tu tienda en línea tiene una venta flash cada semana. Un temporizador dinámico se reiniciará automáticamente después de cada período de venta, lo que puede ser de gran ayuda.

Para esta guía, crearemos un temporizador de cuenta regresiva dinámico para promocionar ventas flash semanales.

Así que, elijamos ‘Dinámico’ del menú desplegable y establezcamos la fecha y hora de vencimiento. Luego, también podrías querer activar la opción ‘¿Seguimiento de conversiones?’ para recopilar información de la campaña.

Si quieres, puedes personalizar cómo se ve el temporizador de cuenta regresiva.

Simplemente cambia a la pestaña ‘Avanzado’ y encontrarás opciones de personalización para cambiar el color de fondo del temporizador, las fuentes, las sombras y más.

Una vez que todo esté configurado, dirígete a la pestaña ‘Reglas de visualización’.

Aquí es donde controlas exactamente cuándo y en qué páginas aparecerá tu popup. La configuración predeterminada es después de 5 segundos en cada página, pero puedes personalizarla fácilmente para que se adapte a tus necesidades.

Alternativamente, puedes aprovechar MonsterLink de OptinMonster.

Esta función te permite activar la aparición del popup cuando los usuarios hacen clic en un enlace o botón en tu sitio. Así, los visitantes tienen control directo sobre cuándo quieren ver tu oferta o mensaje.

Para usar MonsterLink, primero deberás hacer clic en el menú desplegable 'tiempo en página'. Luego, simplemente selecciona 'Cuándo (Activadores)' y después 'MonsterLink (Al hacer clic)'.

Una vez agregado, puedes hacer clic en 'Copiar código de MonsterLink'. Lo necesitarás en el proceso de incrustación.

Luego, puedes eliminar la otra regla de visualización haciendo clic en el ícono de la papelera.

Ahora, es hora de publicar la campaña con el temporizador de cuenta regresiva. Para hacer esto, pasemos a la pestaña 'Publicar'.

Desde aquí, puedes cambiar el estado de 'Borrador' a 'Publicar'. Después de eso, simplemente haz clic en el botón 'Guardar' y sal del editor.

Serás redirigido a una página de OptinMonster, donde tendrás que verificar el estado de tu campaña.

En la sección ‘Visibilidad y estado’, cambia el estado de ‘Pendiente’ a ‘Publicado’.

No olvides hacer clic en el botón verde ‘Guardar cambios’ para asegurarte de que tus modificaciones se guarden.

Lo único que queda por hacer ahora es agregar el código MonsterLink a tu sitio web de WordPress.

Primero, querrás abrir la publicación o página donde deseas mostrar la campaña con el temporizador de cuenta regresiva.

Por ejemplo, agregaremos la nuestra a la página ‘Galería’ en nuestro sitio de fotografía de demostración. Así que, naveguemos a Páginas » Todas las páginas y hagamos clic en ‘Editar’ en la página ‘Galería’.

En el editor de páginas, puedes hacer clic en el botón ‘+’ y buscar el bloque de HTML personalizado. Simplemente haz clic para agregarlo a la página.

En el bloque de ‘HTML personalizado’, simplemente pega el código MonsterLink que copiaste anteriormente.

Así es como podría verse en el editor de bloques de la página:

Ahora, la llamada a la acción ‘¡Suscríbete ahora!’ podría no ser adecuada para el propósito de la campaña.

Así que, cambiémosla a ‘Obtén nuestro código de promoción limitado’, ‘Desbloquea descuentos exclusivos’ o algo más que se ajuste mejor al contexto. Una vez hecho, puedes proceder a ‘Actualizar’ o ‘Publicar’ la página.

Ahora, si visitas la página, verás MonsterLink en acción.

Simplemente intenta hacer clic en él y verás que la campaña aparece con el temporizador de cuenta regresiva.

Así es como se ve en nuestra página de demostración 'Galería':

Método 3: Agregar un widget de temporizador de cuenta regresiva usando SeedProd

SeedProd es el mejor tema y constructor de páginas de destino para WordPress.

Su constructor de arrastrar y soltar te permite crear increíbles páginas de destino y agregar un temporizador de cuenta regresiva para captar la atención de tus visitantes.

Para usar la función de temporizador de cuenta regresiva, necesitarás SeedProd Pro. Con el plan Pro, también puedes obtener acceso a diferentes plantillas, bloques de página para personalizar, integraciones de marketing por correo electrónico y más.

Lo primero que debes hacer es instalar y activar el plugin SeedProd Pro en tu sitio web de WordPress. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de la activación, puedes ir a SeedProd » Configuración desde tu panel de WordPress para agregar y verificar tu clave de licencia. Puedes obtener esta clave en tu cuenta de SeedProd.

Después de ingresar la clave de licencia, puedes hacer clic en el botón ‘Verificar clave’.

También puedes instalar SeedProd Pro manualmente. Antes de hacerlo, asegúrate de haber descargado el archivo .zip de SeedProd Pro desde tu cuenta de SeedProd.

Luego, puedes ir a Plugins » Agregar Nuevo Plugin y presionar el botón ‘Subir Plugin’ para que aparezca la opción ‘Elegir archivo’. Sube el archivo .zip de SeedProd Pro.

Después de eso, simplemente haz clic en el botón ‘Instalar ahora’.

Ahora, estás listo para crear una nueva página de destino. Para empezar, querrás navegar a SeedProd » Páginas de destino.

SeedProd te permite configurar diferentes tipos de páginas, incluyendo páginas de próxima apertura, páginas personalizadas de carrito de WooCommerce, páginas de inicio de sesión y páginas 404. También puedes crear otras páginas de destino haciendo clic en el botón ‘Agregar Nueva Página de Destino’, como una página de agradecimiento o una página para registrarse a un seminario web.

Para este tutorial, usaremos la página ‘Próximamente’. Es un excelente lugar para agregar un temporizador de cuenta regresiva y recordar a tu audiencia sobre un producto o evento próximo.

Hagamos clic en el botón ‘Configurar una página de próxima apertura’.

A continuación, seleccionarás una plantilla para tu página de destino.

Si bien existe la opción de crear una página desde cero utilizando una plantilla en blanco, recomendamos usar una plantilla, ya que ahorra tiempo y te permite editar el diseño como desees.

Una vez que hayas encontrado la plantilla perfecta, puedes pasar el cursor sobre ella y hacer clic en el botón de ‘marca’ para usarla.

En la siguiente pantalla, serás llevado al constructor de páginas de arrastrar y soltar de SeedProd bajo la pestaña ‘Diseño’.

Aquí, puedes personalizar la página de destino agregando o eliminando secciones y bloques. También puedes formatear el diseño de la página.

Para agregar el temporizador de cuenta regresiva, simplemente desplázate hacia abajo en el panel izquierdo hasta la sección de bloques 'Avanzados'. Luego, arrastra y suelta el bloque 'Cuenta regresiva' en cualquier lugar de tu página de destino.

Una vez que agregues el bloque de cuenta regresiva, personalicémoslo. Simplemente haz clic en él y verás las opciones de personalización en el panel izquierdo.

Hay 3 pestañas que puedes revisar: 'Contenido', 'Plantillas' y 'Avanzado'. Revisémoslas una por una.

En la pestaña 'Contenido', puedes elegir un tipo de cuenta regresiva, establecer la fecha y hora de finalización, seleccionar una zona horaria, ajustar la alineación del temporizador y más.

Ahora, pasemos a 'Plantillas'.

Aquí, SeedProd te permite elegir entre 5 estilos de temporizador de cuenta regresiva disponibles.

Finalmente, la pestaña 'Avanzado' tiene varias secciones.

La sección 'Estilos' te permite cambiar la configuración de tipografía, colores y bordes del temporizador.

Luego, es posible que desees desplazarte hacia abajo en la pestaña 'Avanzado' hasta la sección 'Efectos de animación'.

Aquí, puedes aplicar animaciones para resaltar el temporizador de cuenta regresiva cuando los visitantes lo vean. Simplemente haz clic en el menú desplegable y elige entre los efectos disponibles, como 'Flash', 'Pulse', 'Swing', 'Wobble' y más.

Si deseas ajustar otros elementos de la página de destino, como los textos o los botones de redes sociales, puedes hacer clic en ellos. Luego, SeedProd abrirá las opciones de personalización.

Cuando todo esté configurado, haz clic en la pestaña 'Configuración de página' para publicar tu página de destino con un temporizador de cuenta regresiva.

Lo primero que querrás hacer es darle un título a la página de destino. Por ejemplo, nombramos nuestra página de destino 'Próximamente'.

A continuación, puedes cambiar el 'Estado de la página' de 'Borrador' a 'Publicar'. También tienes la opción de mostrar u ocultar el enlace 'Impulsado por SeedProd'.

A continuación, revisemos 'Control de acceso' en la pestaña 'Configuración de página' y administremos quién puede ver tu página de destino.

Esta función es realmente útil si quieres que ciertas personas puedan omitir la página de 'Próximamente' y trabajar en el desarrollo de tu sitio web. SeedProd también te permite incluir y excluir URLs en las que se mostrará la página de 'Próximamente'.

Por defecto, la página será visible en todo el sitio web. Sin embargo, puedes cambiarla para que se muestre solo en la página de inicio o en URLs específicas.

Después de eso, puedes optimizar tu página para los motores de búsqueda yendo a la configuración de SEO.

SeedProd te permite agregar un título SEO, descripción, favicon y miniatura para redes sociales.

Si deseas agregar fragmentos de código a tu página de destino, dirígete a la sección 'Scripts' en la Configuración de la página. Aquí, puedes agregar scripts al encabezado, cuerpo y pie de página de tu página.

Por ejemplo, puedes agregar el código de seguimiento de Google Analytics en el campo 'Scripts del encabezado' para ver cómo las personas usan tu página de destino.

Una vez que hayas terminado, asegúrate de hacer clic en el botón 'Guardar'. También puedes previsualizar tu página de destino para asegurarte de que todo esté configurado correctamente.

Después de eso, simplemente haz clic en el botón 'X' para cerrar el editor de SeedProd.

Ahora, vamos a SeedProd » Landing Pages y cambiamos el estado de tu página de 'Próximamente' a 'Activa'.

Eso es todo. Tu página de destino con un temporizador de cuenta regresiva estará en vivo.

Ahora puedes visitar tu sitio web para ver el temporizador de cuenta regresiva de 'Próximamente' en acción.

Esperamos que este artículo te haya ayudado a aprender cómo agregar un widget de temporizador de cuenta regresiva en WordPress. A continuación, también te recomendamos que consultes más trucos geniales de diseño web sobre cómo agregar un ticker de noticias desplazable y cómo agregar testimonios rotativos en WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.