Cerrar video

Cómo cerrar u ocultar cualquier elemento (sección, fila, módulo) de divi desde un icono «X» o un botón de cerrar sin plugins

por | Nov 29, 2022 | Tutorial gratuito | 0 Comentarios

En este tutorial gratuito aprenderás cerrar u ocultar cualquier elemento (sección, fila, módulo) de divi desde un icono «X» o mediante un botón de cerrar. Esta funcionalidad la lograremos sin plugins 🤩

En el tutorial gratuito anterior te enseñé a mostrar un elemento flotante al llegar a una sección. El tutorial de hoy podría decirse que es una continuación del anterior ya que retomaré el ejercicio que hicimos anteriormente para agregar el icono de cerrar o el botón de la «X» y así poder ocultar el módulo flotante que agregamos en el tutorial anterior.

Cómo cerrar u ocultar cualquier elemento (sección, fila, módulo) de divi desde un icono "X" o un botón de cerrar sin plugins

Realmente será muy fácil y sencilla esta integración. Solamente vamos a agregar un módulo icono, seleccionaremos un icono de «cerrar» y posteriormente a través de un pequeño fragmento de código agregaremos la funcionalidad de cierre.

Cabe mencionar que esta funcionalidad puede ser implementada en cualquier módulo de divi, incluso en alguna sección o fila, la lógica y los pasos serán prácticamente los mismos, así qué, no es necesario o forzosamente aplicable solamente al ejercicio del tutorial anterior.

Para implementar la funcionalidad de cierre vamos a requerir el siguiente fragmento de código jQuery:

<script>
(function($) {
  // Cerrar elemento al hacer click en la "X"
  $(document).ready(function(){
    $('.ov-icono-x').click(function(){
      $( ".ov-elemento-fijo" ).addClass('cerrar-ov-elemento-fijo'); 
    });    
  });
})( jQuery ); 
</script>

Y este pequeño fragmento de código CSS:

.cerrar-ov-elemento-fijo {
  display: none !important;
}

Si quieres saber dónde colocar estos códigos en divi, solo dale play al video 😀

¿Te ha gustado este tutorial? 🚀

¡Los Tutoriales Premium te van a encantar! Desde solo $10 USD al mes accede a más de 200 (¡y contando!) tutoriales únicos y exclusivos sobre Divi y WordPress. ¡Únete ahora y aumenta al 200% tus habilidades de diseño web con Divi!

Tutoriales Relacionados

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$10 USD / mes

Pin It on Pinterest