Hola, hoy quiero enseñarte como hacer un carrusel de vídeos en Divi con popup, para que no te pase como me pasó a mí.
Después de realizar miles de búsquedas, probar distintos plugin de carruseles, incluso, contactar con distintos programadores en Linkedin, puede conseguir añadir esta funcionalidad en la página web de uno de mis clientes.
Si tu también tienes este problema, no te preocupes más, hoy te doy la solución, una solución rápida, sencilla y barata de 15$.
¿Qué es un carrusel de vídeos?
Antes de continuar, por si a caso, no tienes muy claro que es un carrusel. Un carrusel es una sucesión de imágenes, testimonios o vídeos que muestran uno detrás de otro.
Este tipo de funcionalidad dentro de una web, se puede configurar, o bien, para que se desplace a un lado o a otro, y también tienes la opción de desplazarlo con el mouse de tu PC.
Plugin para crear un carrusel de vídeo en Divi
Divi video carousel, es el plugin de Elegant themes con el que vas a aprender a introducir un carrusel de vídeos dentro de tu página web. ¡Vamos a ello!
¿Dónde comprar el plugin?
Accede desde este enlace (si, me llevo una mínima comisión) a la página de Elegant themes y entra en el marketplace.
A continuación, busca el plugin en el buscador haz clic, realiza el pago y ya podrás descargarlo.
Instalación del plugin
Escritorio de WordPress – plugins – añadir nuevo
Requisitos para su instalación
En primer lugar, necesitas tener instalado el tema Divi, y tener en cuenta lo siguiente:
- Versión de WordPress : 5.6 o superior
- Versión PHP : 7.2 o superior
Como configurar el plugin de carrusel de vídeos de Divi
Esta extensión es tan maravillosa, que no necesita configurarse, una vez instalado, automáticamente se añadirá en el apartado de módulos de Divi.
Sácale el mayor partido a este módulo
Una vez dentro del módulo, debes añadir un “nuevo elemento”
A continuación, apareceran las pestañas de “content” y settings”, las demás son las habituales que aparecen en todos los módulos de Divi.
Pestaña content
Dentro de la pestaña content aparecerán varias opciones:
- Vídeo title: Es el título que quieres poner al vídeo.
- Overlay image: Sirve para añadir una imagen superpuesta.
- Image Alt text: El texto alternativo de la imagen.
- Trigger element: Tienes la opción de añadir un icono, un texto o ambos a la vez, para indicar al usuario dónde hacer click para ver el vídeo.
- Select play option: Aquí tienes la opción de elegir el icono que más te guste, si elijes poner un texto, puedes poner el texto que quieras o elegir ambos.
- Video type: Aquí eliges el tipo de vídeo que quieres mostrar (YouTube, Vimeo, o cargar un vídeo directamente.
Pestaña settings
Al contrario que en la pestaña “contents” en este apartado tienes muy pocas opciones de configuración
- Use animated icon: Puedes elegirlo o no. La diferencia esta en que si lo eliges, el icono tendra un efecto muy chulo, como si fueran destellos, además puedes elegir el color que mas te gusta.
- Space between icon and text : Si has decidido poner icono más texto, esta opción te permite separar o juntar más estos dos elementos.
Y esto es todo, nada que no se pueda solucionar. A continuación te dejo el tutorial en vídeo, si te gusta comparte este artículo y así podremos llegar a mas personas que lo necesiten, gracias por llegar hasta aquí.
Pestaña carousel settings
Por útltimo, encontrarás la configuración del carrusel en general, una vez dentro, encontrarás, configuraciones generales y avanzadas.
CONFIGURACIONES GENERALES:
- Animation speed: La velocidad de la animación que hasce destacar el icono.
- Autoplay: Si lo activas, el carrusel se desplazará de derecha a izquierda automaticamente, y si lo desactivas, solo podrás desplazarlo con el mouse.
- Autoplay speed: Sirve para configurar la velocidad de desplazamiento del carrusel.
- Use navegation: Activalo si quieres utilizar iconos que indiquen que el carrusel puede despalzarse, o desactivalo.
- Use pagination: Activalos si quires que aparezcan (puntitos) de bajo del carrusel o desactivalo.
- Use fixed width slide: Activaló para darle un ancho completo al carrusel.
- Slide width: Elije la anchura de los vídeos.
- Slide spacing: Elige el espacio entre los vídeos.
- Infinite looping: Sirve para que el slider no tenga fin.
CONFIGURACIONES AVANZADAS:
- Sliding CSS transition: Elige la manera de transicción del carrusel.
- Items scroll: La forma en que los elementos se mueven, puedes aumentar o disminuir su velocidad.
- Vertical mode: Sirve para hacer el carrusel vertical.
- Center mode: Es una funcionalidad muy chula si eliges highlighted, destacarás el vídeo en el centro.
- Wait for animate: Quiere decir, esperar la animación, aunque yo en este caso, no he notado cambios.
- Wrapper spacing top: Para dar espacio en la parte superior.
- Wrapper spacing bottom: Lo mismo, pero para la parte inferior.
- RTL support: Para cambiar la dirección de desplazamiento del carrusel.
Y esto es todo, nada que no se pueda solucionar. A continuación te dejo el tutorial en vídeo, si te gusta comparte este artículo y así podremos llegar a mas personas que lo necesiten, gracias por llegar hasta aquí.
Tutorial para crear un carrusel de vídeos con popu en Divi, paso a paso y en español
Espero que disfrutes del tutorial y sobre todo que te sirva de ayuda, te animo a que te suscribas a mi canal y seguiré compartiendo todo lo que se contigo.