Cómo agregar un widget de temporizador de cuenta regresiva en WordPress (3 métodos)

¬ŅDesea agregar una cuenta regresiva de hitos en WordPress? Un temporizador de cuenta regresiva lo ayuda a mostrar logros importantes, aniversarios, pr√≥ximos eventos y m√°s. En este art√≠culo, le mostraremos c√≥mo agregar f√°cilmente un temporizador de cuenta regresiva en WordPress (incluso los temporizadores de hoja perenne).

Agregar un widget de cuenta regresiva de hitos en WordPress

¬ŅCu√°ndo y por qu√© necesita un widget de cuenta regresiva de hitos?

Los widgets de cuenta regresiva de hitos son una herramienta √ļtil para recordarle a su audiencia acerca de un hito importante en su negocio, un pr√≥ximo evento, lanzamiento de producto o un evento de ventas. Esto ayuda a generar anticipaci√≥n entre sus clientes y mejora la participaci√≥n del usuario.

Los siguientes son algunos escenarios comunes en los que puede usar de manera efectiva un widget de cuenta regresiva de hitos:

  • Antes de lanzar su sitio web en una pr√≥xima p√°gina.
  • Durante el mantenimiento del sitio web para que los visitantes sepan cu√°ndo volver√° a estar disponible.
  • Antes de presentar un nuevo producto o servicio.
  • Al organizar un evento o conferencia.
  • En los cumplea√Īos de su negocio en l√≠nea.
  • En d√≠as festivos y eventos de venta como el Black Friday para ofrecer grandes descuentos en sus productos o servicios.

Puede mostrar el temporizador de cuenta regresiva de hitos en sus publicaciones, p√°ginas y √°rea de widget de barra lateral. Tambi√©n puede agregar temporizadores de cuenta regresiva en ventanas emergentes de lightbox, barras flotantes, cuadros de desplazamiento y otros elementos agn√≥sticos de dise√Īo para atraer a los visitantes que abandonan el sitio y llevarlos de regreso a su sitio web.

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

  1. Crear un widget de cuenta regresiva Milestone con Countdown Timer Ultimate
  2. Cree temporizadores de cuenta regresiva din√°mica altamente atractivos con OptinMonster
  3. Crear próximamente y temporizador de cuenta regresiva del modo de mantenimiento con SeedProd

Echemos un vistazo a cómo agregar fácilmente un widget de cuenta regresiva de hitos en WordPress.

Video Tutorial

Suscríbase a WPBeginner

Si no le gusta el video o necesita m√°s instrucciones, contin√ļe leyendo.

Método 1: Agregar un widget de cuenta regresiva Milestone usando el complemento Ultimate del temporizador de cuenta regresiva

Demo del temporizador de cuenta regresiva

Lo primero que debe hacer es instalar y activar el plugin Countdown Timer Ultimate. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activaci√≥n, debe visitar el Temporizador de cuenta regresiva ¬ĽAgregar temporizador p√°gina en su √°rea de administraci√≥n de WordPress.

En esta página, debe comenzar agregando el nombre de su hito como título para el nuevo temporizador de cuenta regresiva.

Nota: El temporizador usa la zona horaria establecida en la configuraci√≥n de su sitio de WordPress. Si desea cambiar la zona horaria de este temporizador de cuenta regresiva, deber√° ir a Configuraciones ¬ĽGeneral y actualice la configuraci√≥n de la zona horaria de su sitio de WordPress.

Agregar título de temporizador

Después de eso, puede desplazarse hacia abajo para establecer una fecha de vencimiento, un día y una hora para su temporizador de cuenta regresiva de hitos.

Establecer fecha de vencimiento

A continuaci√≥n, debe seleccionar un estilo de animaci√≥n del men√ļ desplegable. Tambi√©n puede ajustar f√°cilmente el c√≠rculo y el ancho del fondo.

Elige animacion

En el campo Ancho de cuenta regresiva, puede definir un ancho para la visualizaci√≥n completa de su widget de cuenta regresiva. Si deja este campo en blanco, mostrar√° el temporizador con el tama√Īo predeterminado.

Después de eso, puede agregar el color de fondo y primer plano para el temporizador de cuenta regresiva. Puede cambiar individualmente el color por días, horas, minutos y segundos. También puede cambiar las etiquetas de elementos como días, horas, etc.

Color de primer plano de fondo

Una vez que est√© satisfecho con la configuraci√≥n, contin√ļe y haga clic en el bot√≥n “Publicar”.

Mostrar su widget de cuenta regresiva Milestone en WordPress

Ahora que ha creado su widget de cuenta regresiva de hitos, vamos a agregarlo a su sitio web.

Primero, debe hacer clic en el men√ļ Temporizador de cuenta regresiva. En la p√°gina WP Countdown Timer, ver√° el temporizador que acaba de crear en la lista.

Copiar shortcode

Junto a su temporizador de cuenta regresiva, verá un código corto que debe copiar.

Debe copiar y pegar este shortcode en el √°rea de contenido de su publicaci√≥n o p√°gina. Aseg√ļrese de hacer clic en el bot√≥n actualizar o publicar para guardar sus cambios.

Ahora puede visitar su sitio web para ver el widget de cuenta regresiva de hitos en acción.

Demo del temporizador de cuenta regresiva

Tambi√©n puede agregar este temporizador de cuenta regresiva en la barra lateral de su sitio de WordPress. Simplemente ve a Apariencia ¬ĽWidgets p√°gina y agregue un widget de “Texto” a su barra lateral. En la configuraci√≥n del widget, debe pegar el c√≥digo corto para su temporizador de cuenta regresiva.

Configuración del widget de cuenta regresiva

Una vez que haya terminado, no olvide hacer clic en el botón Guardar para almacenar la configuración de su widget.

Ahora puede visitar su sitio web para ver su widget de barra lateral de cuenta regresiva de hitos en acción.

Vista previa de hitos de cuenta regresiva

Método 2: Agregar un widget de cuenta regresiva MileStone usando OptinMonster

OptinMonster es el mejor complemento emergente de WordPress en el mercado. Le ayuda a convertir a los visitantes que abandonan el sitio en suscriptores y clientes.

Con la funci√≥n de temporizador de cuenta regresiva de OptinMonster, puede integrar el temporizador de cuenta regresiva de hitos en una ventana emergente de caja de luz, widget de pantalla completa, barra flotante o cualquier otro tipo de campa√Īa de OptinMonster.

A continuaci√≥n se muestra un ejemplo de una de las campa√Īas de temporizador de cuenta regresiva prefabricadas que tienen, pero puede usar el generador de arrastrar y soltar para crear un temporizador de cuenta regresiva completamente personalizado.

Ventana emergente del temporizador de cuenta regresiva OptinMonster para vacaciones

OptinMonster es una forma inteligente de mostrar el temporizador de cuenta regresiva en elementos de dise√Īo que llaman mucho la atenci√≥n. Incluso te permiten crear temporizadores de cuenta regresiva de hoja perenne en WordPress.

Primero debe visitar el sitio web de OptinMonster e inscribirse en un plan que satisfaga sus necesidades.

Después de eso, debe instalar el complemento OptinMonster en su sitio de WordPress. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Este complemento funcionará como un conector entre su sitio de WordPress y la aplicación OptinMonster.

Tras la activaci√≥n, haga clic en el enlace OptinMonster en su men√ļ de administraci√≥n de WordPress. A continuaci√≥n, se le pedir√° que ingrese sus credenciales de API OptinMonster.

Conéctese a OptinMonster

Puede encontrar esta informaci√≥n en su cuenta en el sitio web de OptinMonster. Simplemente inicie sesi√≥n en su cuenta y luego haga clic en el enlace “API” del men√ļ.

Clave de API OptinMonster

Debe copiar su clave API y pegarla en la configuraci√≥n de OptinMonster en su sitio de WordPress. Despu√©s de eso, haga clic en el bot√≥n “Conectar a OptinMonster” para continuar.

El complemento ahora conectar√° su sitio de WordPress a su cuenta de OptinMonster.

Una vez conectado, puede comenzar a crear una nueva campa√Īa desde su panel de control de OptinMonster. Puede usar cualquier tipo de campa√Īa e integrar el temporizador de cuenta regresiva en ella.

Crea una nueva campa√Īa

Para obtener m√°s detalles, consulte este tutorial paso a paso sobre c√≥mo crear una campa√Īa de temporizador de cuenta regresiva en OptinMonster.

Ventana emergente del temporizador de cuenta regresiva OptinMonster para vacaciones

Método 3: Agregar un widget de cuenta regresiva de hitos con SeedProd

SeedProd es el mejor complemento de página de WordPress que estará disponible próximamente. La versión Pro de SeedProd viene con una función de temporizador de cuenta regresiva. Puede agregar este temporizador de cuenta regresiva a su sitio web de WordPress e informar a sus visitantes sobre un lanzamiento o un próximo sitio web.

Vista previa de SeedProd

Lo primero que debe hacer es instalar y activar el complemento SeedProd Pro en su sitio web de WordPress. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activaci√≥n, ser√°s redirigido a Configuraciones ¬ĽGeneral p√°gina en su √°rea de administraci√≥n de WordPress. Le pedir√° una clave de licencia que puede obtener de su cuenta de SeedProd.

Clave de licencia

A continuaci√≥n, debes visitar Configuraci√≥n ¬ĽPr√≥ximamente Pro p√°gina y habilite el modo pr√≥ximamente. Lanzar√° autom√°ticamente el temporizador de cuenta regresiva con la pr√≥xima p√°gina.

Habilitar próximamente la página

Puede hacer clic en la opci√≥n de edici√≥n para elegir una plantilla y personalizar su pr√≥xima p√°gina. Una vez que est√© satisfecho, aseg√ļrese de hacer clic en el bot√≥n Guardar cambios.

Cuenta atr√°s de SeedProd

Ahora puede visitar su sitio web para ver el próximo contador en acción.

Eso es todo. Esperamos que este artículo te haya ayudado a aprender cómo agregar un widget de cuenta regresiva de hitos en WordPress. También puede consultar nuestros consejos prácticos para obtener más tráfico para su sitio web.

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