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

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.

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 😀