Divi es uno de los mejores maquetadores web para WordPress con cientos de miles de usuarios y una gran comunidad.
El constructor de Divi ofrece montones de módulos que ayudan a crear webs sin conocimientos de programación. En concreto, el módulo de vídeo que viene con el constructor Divi te permite incrustar vídeos en tu sitio, pero ¿qué pasa si quieres mostrar esos vídeos en una ventana emergente?
Afortunadamente, hay una manera fácil de hacerlo.
Divi ya tiene una magnífica ventana emergente incorporada que se utiliza en el módulo de galería para abrir imágenes en una caja de luz emergente, y yo publiqué un plugin gratuito para que funcione también en imágenes normales enlazadas, pero hoy la cosa no va de esto.
En este tutorial, te mostraré cómo utilizar este mismo recurso para abrir ventanas emergentes de vídeo después de hacer clic en un botón.
Tendremos que añadir un poco de código JavaScript con una clase CSS personalizada que se utilizará para el módulo del botón, pero poquito más, son solo un par de pasos, hay más por mi tendencia a enrollarme y sobreexplicarme 😉
Crea tu diseño con un botón
Crea un bonito diseño con un botón. También puedes tener más botones que muestren diferentes vídeos si lo deseas.
El poquito de CSS
Elige el nombre de la clase CSS a tu gusto, por ejemplo, «video-emergente-divi», o «boton-video-fernandot», lo que quieras. Eso sí, tendrás que usar el nombre elegido para todos los botones a los que quieras añadir el vídeo emergente.
Copiar y pegar el enlace del vídeo
Simplemente copia un enlace a un vídeo de YouTube o de Vimeo…
Y pégalo en el campo de URL de enlace del botón en los ajustes del módulo.
Asegúrate de que el destino del enlace del botón sea en la misma ventana (importante)
El poquito de JS ¡Divi ya lo tenía, oiga!
Divi incorpora la biblioteca Magnific Popup JS, sin embargo, no se carga si no se utilizan módulos específicos con esta funcionalidad en una página.
Si queremos utilizar esta funcionalidad en nuestra página web hecha con Divi, tenemos que añadir un código para activar esta biblioteca JS, para que se cargue en todas las páginas.
Para este paso puedes usar un tema hijo, añadiendo el código código al archivo functions.php del tema hijo (si aún no tienes uno, puedes consultar este artículo sobre cómo crear un tema hijo) o añadir el código en la pestaña de integración de las opciones de Divi, en la administración de WordPress, en concreto en Divi → Opciones del tema → Integración → Agregar código al <body>., asegurándote de haber activado el selector de Activar código del cuerpo (ooooodio las traducciones de Divi)
En esta guía usaré la pantalla de opciones de Divi, que entiendo que es más fácil para todos.
Para activar la librería Magnific Popup JS, necesitamos añadir el siguiente código, indicando nuestra clase CSS, antes elegida, en mi caso «boton-video-fernandot»:
<script>
jQuery(document).ready(function() {
jQuery('.boton-video-fernandot').magnificPopup({
disableOn: 0,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
fixedContentPos: true
});
});
</script>
Por supuesto, guarda los cambios.
¡¡Y ya está!!
Ya puedes probar el botón…
¿De verdad funciona?
Poorrrr favooooorrrrr…
Pues claro, anímate, o sino fíate de esta captura de vídeo, ¡dale al play!:
¡Pues a mi no me funciona!
¡Vaya por Dios!
No te preocupes, es culpa de Divi 😀
Desde que Divi introdujo opciones de mejora de rendimiento, activas por defecto, lo descrito en este tutorial podría no funcionar a menos que desactives lo siguiente:
- Divi → Opciones del tema → General → Actuación (¿he dicho ya que odio la traducción de Divi?, ni a propósito sería peor)
- CSS dinámico
- Bibliotecas dinámicas de JavaScript
Guarda los cambios y ya debería funcionar.
Ejem, esteee, perdón, yo no tengo Divi…
Pero alma de cántaro, ¿aún no sabes que Divi es la herramienta de creación de webs más sencilla, potente e intuitiva que hay para WordPress?
Además, están preparando una versión que va a mejorar en TODO, no solo Divi, también el concepto de creación de páginas web, y podrás usar módulos de Divi, bloques del editor, lo que quieras, y todo a un rendimiento de locura.
Anda, por favor, reserva ya una licencia (y encima con descuento), que cuesta muuucho menos de lo que vale…
PUEDE QUE TAMBIÉN TE INTERESE…
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
