Cómo ocultar contenido al finalizar una cuenta atrás de Elementor

Si te preguntas cómo hacer que cierto contenido se oculte cuando el widget de Cuenta Atrás de Elementor llega a cero, has llegado al lugar correcto. En este artículo, te proporcionaremos una detallada guía para lograrlo sin necesidad de utilizar ningún plugin adicional, sino a través del uso de JavaScript. ¡Comencemos!

Introducción

Antes de adentrarnos en el tutorial, queremos agradecerte por tu interés

Lo primero que necesitas hacer es crear una sección en la que pondrás el contenido que se ocultará cuando el contador llegue a cero. En nuestro caso, usaremos una simple imagen como ejemplo. Veamos cómo hacerlo:

-Añade una Sección: Abre Elementor y crea una nueva sección en tu página.

-Agrega tu Contenido: Inserta el contenido que deseas ocultar en esta sección. En nuestro ejemplo, hemos utilizado una imagen.

-Asigna una Clase o ID: Para facilitar la manipulación a través de JavaScript, asigna una clase o ID al contenedor que contiene el contenido que deseas ocultar. En este tutorial, usaremos la clase «ocultar-contenido».

Insertando el Widget de Cuenta Atrás

A continuación, necesitamos insertar el widget de Cuenta Atrás en nuestra página. Sigue estos pasos:

-Agrega el Widget: Busca el widget de Cuenta Atrás en Elementor y añádelo a tu página.

-Configura el Contador: Define la fecha y hora en la que deseas que el contenido se oculte. Esto se logra configurando la fecha de finalización en el widget de Cuenta Atrás. Asegúrate de que coincida con tus preferencias.

Utilizando JavaScript para Ocultar el Contenido

Para que el contenido se oculte automáticamente cuando el contador llegue a cero, necesitamos utilizar JavaScript. A continuación, te mostramos cómo hacerlo:

-Agrega un Widget de HTML: Inserta un widget de HTML en tu página donde deseas que se ejecute el código JavaScript.

-Inserta el Código JavaScript: Copia y pega el código JavaScript necesario en el widget de HTML. Puedes adquirir el código al final de este artículo.

-Guarda y Actualiza: Asegúrate de guardar los cambios y actualizar tu página para que el código surta efecto.

Verificando el Resultado

Ahora que has configurado todo, es el momento de verificar si el contenido se oculta correctamente cuando el contador llega a cero. Simplemente observa el contador y comprueba si el contenido desaparece cuando se alcanza la hora y fecha establecidas.

Conclusión

Esperamos que este tutorial te haya ayudado a comprender cómo ocultar contenido utilizando el widget de Cuenta Atrás de Elementor y JavaScript. Si encuentras útil esta guía, no dudes en darle like y suscribirte a nuestro canal para más tutoriales. Si tienes alguna pregunta o comentario, no dudes en dejarlo en la sección de comentarios. ¡Nos vemos en futuros vídeos! Hasta luego.

Comparte en tus redes sociales

Deja un comentario