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 😀
0 comentarios