Cómo agregar, configurar y personalizar el módulo Deslizador de Video de Divi.

Módulo Deslizador de Videos Divi

El módulo Deslizador de Videos Divi es una forma sencilla de mostrar una colección de videos en tu sitio web.

Puede mostrar un portafolio de videos, videos de capacitación, tutoriales y más.

Los videos pueden subirse directamente a tu sitio web WordPress o insertarse mediante URL para videos alojados en YouTube y/o Vimeo.

Ver una demostración en vivo de este módulo

Cómo añadir el módulo Deslizador de Videos Divi a tu página

• Añade una página nueva o edita una página existente.

• Por defecto, el editor estándar Gutenberg se carga cada vez que añades una nueva publicación o página en WordPress.

• Haz clic en el botón morado debajo del título de la página. Usa el Constructor Divi.

Añade una página y carga el Constructor Visual

• Una vez que hagas clic, la página se recargará con el Constructor Visual Divi.

Al recargar la página, notarás tres opciones:

• Crear desde cero

• Elegir un diseño predefinido

• Crear con IA

Crear desde cero

Elegir un diseño predefinido

Crear con IA

Añadir el módulo Deslizador de Videos Divi

• Haz clic en el ícono verde + para insertar una fila.

• Haz clic en el ícono gris + dentro de la fila para abrir la biblioteca de módulos Divi, que contiene todos los módulos incluidos en el tema Divi.

• Encuentra el módulo Deslizador de Videos y haz clic en él para cargarlo.
  La biblioteca de módulos también es buscable. Escribe el nombre del módulo que quieres en la barra de búsqueda en la parte superior.

Todas las opciones del módulo Deslizador de Videos Divi explicadas

Pestaña Contenido

Cómo añadir un video al módulo Deslizador de Videos

• Subiéndolos directamente a tu sitio web

• Insertando un video desde una URL

Nota: Si subes tu video, recomendamos subir ambos formatos WebM y MP4. Los archivos WebM tienen tamaños más pequeños (ahorrando espacio en tu servidor) y mejor compresión.

Sin embargo, algunos navegadores y dispositivos no soportan WebM, así que subir un archivo MP4 asegura que tu video se reproduzca en todos los navegadores y dispositivos.

Opción 1: Subir un video a tu sitio web

• Cuando se carga el módulo Deslizador de Videos, automáticamente se añade un video de demostración. Haz clic en el ícono de engranaje junto al interruptor Nuevo Video para reemplazar el video de demostración.

• Haz clic en el ícono de la papelera en el video de demostración dentro de las configuraciones del módulo para eliminarlo.

• Haz clic en Añadir Video. Esto abrirá la biblioteca de medios de WordPress, donde puedes buscar videos ya subidos o subir uno nuevo.

• Una vez seleccionado el video, haz clic en el botón Subir Video en la esquina inferior derecha de la ventana de la biblioteca de medios.

• Cuando se carga el módulo Deslizador de Videos, automáticamente se añade un video de demostración. Haz clic en el ícono de engranaje junto al interruptor Nuevo Video para reemplazarlo.

• Haz clic en el ícono de la papelera para eliminar el video de demostración.

• Haz clic en Añadir Video. Esto abrirá la biblioteca de medios de WordPress. En la barra lateral izquierda, haz clic en Insertar desde URL. Pega la URL de tu video en el cuadro de texto.

• Haz clic en el botón Insertar en la publicación en la esquina inferior derecha.

Elementos

• Mostrar flechas - Activa o desactiva esta opción para mostrar u ocultar las flechas de navegación.

• Controles del deslizador - Hay dos opciones para los controles del deslizador:

  • Barra de miniaturas (donde los videos se muestran como miniaturas debajo del video principal)

  • Navegación por puntos (muestra una serie de puntos en la parte inferior del video principal para indicar el progreso de la paginación)

Superposición

Fondo

• Color de fondo

• Degradado de fondo

• Imagen de fondo

• Video de fondo

• Patrón de fondo

• Máscara de fondo

Cómo añadir un color de fondo

• Haz clic en la primera pestaña, el ícono del balde de pintura.

• Haz clic en Añadir color de fondo y elige un color de la paleta de tu sitio, o usa el ícono cuentagotas para seleccionar un color nuevo.

Cómo añadir un degradado de fondo

• Haz clic en la segunda pestaña, el ícono de degradado.

• Haz clic en Añadir degradado de fondo.

• Para cambiar los colores del degradado, haz clic en los puntos del degradado y selecciona un color de la paleta o usa el cuentagotas. Puedes añadir más colores haciendo clic en la barra de degradado.

Opciones de degradado:

• Tipo de degradado - Cambia el tipo de degradado usando el menú desplegable.

• Dirección del degradado - Cambia la dirección arrastrando el control deslizante o escribiendo un valor numérico.

• Repetir degradado - Activa para que el degradado se repita.

• Unidad del degradado - Cambia cómo se calculan los puntos de parada del degradado.

• Colocar degradado sobre imagen de fondo - Si hay una imagen de fondo, puedes poner el degradado encima activando esta opción.

Cómo añadir una imagen de fondo

• Haz clic en la tercera pestaña, el ícono de imagen.

• Haz clic en el ícono gris + para abrir la biblioteca de medios, donde puedes elegir una foto ya subida o subir una nueva.

Opciones de imagen de fondo:

• Usar efecto paralaje - Activa para aplicar un efecto donde la imagen se desplaza más rápido que el contenido de primer plano, creando una ilusión 3D. Por defecto está desactivado.

• Tamaño de la imagen de fondo - Elige el tamaño desde el menú desplegable.

• Posición de la imagen de fondo - Elige la posición desde el menú desplegable.

• Repetir imagen de fondo - Elige si y cómo se repite la imagen.

• Mezcla de imagen de fondo - Elige cómo se mezcla la imagen con otras capas del módulo.

Cómo añadir un video de fondo

• Haz clic en la cuarta pestaña, el ícono de video.

• Haz clic en el ícono gris + para abrir la biblioteca de medios, donde puedes seleccionar un video ya subido o subir uno nuevo.

Opciones de video de fondo:

• Mp4 vs WebM - Recomendamos subir ambos formatos mp4 y webm porque no todos los navegadores soportan WebM. Subir ambos asegura que el video se reproduzca en todos los dispositivos y navegadores.

• Ancho del video de fondo - Define el ancho del video escribiendo un valor numérico.

• Alto del video de fondo - Define el alto del video escribiendo un valor numérico.

• Pausar video cuando otro video se reproduzca - Si quieres que el video de fondo se pause cuando otro video esté en reproducción, activa esta opción. Por defecto, el video se pausa cuando no está en vista. Si quieres que continúe, desactívala.

Cómo Agregar un Patrón de Fondo

Haz clic en la quinta pestaña, el ícono de Patrón

Haz clic en Agregar Patrón de Fondo

Elige el tipo de patrón que deseas desde el menú desplegable

Opciones de Patrón de Fondo

• Color del Patrón: selecciona el color del patrón desde la paleta de colores de tu sitio o usa el ícono del cuentagotas para encontrar un color nuevo.

• Transformar Patrón: transforma el patrón horizontal o verticalmente, gíralo o inviértelo.

• Tamaño del Patrón: aquí puedes seleccionar el tamaño del patrón: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges tamaño personalizado, aparecerán las siguientes opciones: ancho y alto del patrón. Arrastra el deslizador o escribe un valor numérico para definir estas opciones.

• Origen de Repetición del Patrón: selecciona el origen desde donde se repetirá el patrón.

• Desplazamiento Horizontal y Vertical del Patrón: ajusta los desplazamientos horizontal y vertical del patrón.

• Repetición del Patrón: elige cómo se repite el patrón: horizontalmente, verticalmente, y más.

• Modo de Mezcla del Patrón: define cómo la capa del patrón interactúa con las capas debajo de ella. Selecciona uno de los 16 modos de mezcla disponibles en el menú desplegable.

---

Cómo Agregar una Máscara de Fondo

Haz clic en la sexta pestaña, el ícono de Máscara

Haz clic en Agregar Máscara de Fondo

Selecciona el tipo de máscara que deseas en el menú desplegable

Opciones de Máscara de Fondo

• Color de la Máscara: elige el color de la máscara desde la paleta de colores de tu sitio o usa el ícono del cuentagotas para elegir un color nuevo.

• Transformar Máscara: transforma la máscara horizontal o verticalmente, gírala o inviértela.

• Relación de Aspecto de la Máscara: ajusta la proporción entre ancho y alto de la máscara.

• Tamaño de la Máscara: selecciona el tamaño de la máscara: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges tamaño personalizado, aparecerán opciones para ancho y alto de la máscara. Arrastra el deslizador o escribe un valor numérico para definirlas.

• Modo de Mezcla de la Máscara: define cómo la capa de la máscara interactúa con las capas debajo de ella. Selecciona uno de los 16 modos de mezcla disponibles en el menú desplegable.

---

Etiqueta de Administración

La etiqueta de administración es donde puedes darle un nombre al módulo que solo tú verás, para ayudarte a mantener todo organizado y fácil de entender en el backend. Por defecto, la etiqueta de administración será el nombre del módulo. Puedes cambiar el texto de la etiqueta para que refleje lo que quieras.

---

Pestaña de Diseño

Aquí encontrarás todos los estilos y opciones de diseño para el Módulo Deslizador de Video Divi.

---

Controles

• Colores del Ícono de Reproducción: determina el color del ícono de reproducción.

• Usar Tamaño de Fuente Personalizado para el Ícono de Reproducción: si quieres un tamaño de fuente personalizado para el ícono de reproducción, aquí puedes configurarlo.

• Color de Superposición de Miniaturas: define el color de la superposición en las miniaturas de video debajo del video principal.

• Color de Controles del Deslizador: define el color de los controles del deslizador, es decir, las flechas de navegación o los puntos de navegación.
  

---

Dimensiones

• Ancho: define el ancho del módulo. Para más información, consulta la documentación oficial.

• Ancho Máximo: define el ancho máximo del módulo. Para más información, consulta la documentación oficial.

• Alineación del Módulo: si se define un ancho o ancho máximo, la alineación del módulo puede ajustarse con tres opciones:

  • Alineado a la Izquierda

  • Alineado al Centro

  • Alineado a la Derecha

• Altura Mínima: define el valor mínimo para la altura del módulo. Para más información, consulta la documentación oficial.

• Altura: define la altura del módulo. Para más información, consulta la documentación oficial.

• Altura Máxima: define el valor máximo para la altura del módulo. Para más información, consulta la documentación oficial.
  

---

Espaciado

Puedes agregar márgenes o rellenos al módulo ingresando valores numéricos.

• El margen agrega espacio fuera del módulo, y el relleno agrega espacio dentro del módulo. Para mantener proporciones y valores iguales, haz clic en el ícono de cadena entre los valores que quieras que siempre sean idénticos (por ejemplo, arriba y abajo).

• Los valores predeterminados de margen son 0.

• Los valores predeterminados de relleno son 0.
  

---

Borde

grega un borde al módulo. Puedes agregar un borde completo o solo en un lado del módulo. Ajusta el ancho con el deslizador y selecciona un color. Elige un estilo de borde en el menú desplegable.

• Esquinas Redondeadas: escribe un valor numérico para redondear las esquinas del borde. Mientras mayor sea el número, más redondeadas serán las esquinas. Los valores de las esquinas están vinculados automáticamente (lo indica la cadena azul resaltada); si quieres valores diferentes para cada esquina, haz clic en la cadena para desvincularlos. Si están vinculados, se actualizarán automáticamente al cambiar uno.

• Estilos de Borde: agrega un borde a todos los lados del módulo o a lados individuales (arriba, derecha, abajo, izquierda).

• Ancho del Borde: establece el grosor del borde. Para un borde más grueso, aumenta el número. El ancho debe ser al menos de 1 px para que se muestre.

• Color del Borde: elige el color del borde desde la paleta de colores de tu sitio o usa el cuentagotas para seleccionar un nuevo color.

• Estilo de Borde: selecciona el estilo que deseas: sólido, punteado, discontinuo, doble, surco, relieve, incrustado, sobresaliente o ninguno.

Sombra de Caja

Agrega una sombra al módulo completo. Una vez seleccionado un estilo de sombra, puedes personalizar las siguientes opciones:

• Posición Horizontal de la Sombra: define la posición horizontal de la sombra.

• Posición Vertical de la Sombra: define la posición vertical de la sombra.

• Fuerza de Desenfoque de la Sombra: define qué tan difusa será la sombra. Mientras mayor el valor, mayor será el desenfoque y la sombra se verá más amplia y suave.

• Fuerza de Extensión de la Sombra: define qué tan densa es la sombra. Aumentar esta fuerza incrementa la intensidad de la sombra.

• Color de la Sombra: define el color de la sombra.

• Posición de la Sombra: define si la sombra estará dentro o fuera del módulo.

---

Filtros

Ajusta los filtros del módulo:

• Matiz: define el ángulo del matiz de un color.

• Saturación: define la intensidad de la saturación del color.

• Brillo: define qué tan brillantes deben ser los colores.

• Contraste: define qué tan marcadas son las áreas claras y oscuras.

• Invertir: invierte matiz, saturación y brillo según el valor especificado.

• Sepia: da un tono más cálido, amarillento/marrón.

• Opacidad: define qué tan transparente u opaco es el fondo (color, degradado, imagen, etc.).

• Desenfoque: define la cantidad de desenfoque gaussiano aplicado al módulo.

El Modo de Mezcla se refiere a cómo el módulo se mezcla con las capas debajo. Por defecto está seleccionado “normal”.

---

Transformar

• Escalar

• Trasladar

• Rotar

• Sesgar

• Puntos de origen

Navega por estas opciones usando la tecla Tab. Configura cada opción ingresando valores numéricos o arrastrando y expandiendo el cuadro o círculo.

Puedes bloquear estos valores para que siempre sean idénticos haciendo clic en el ícono de cadena en la parte inferior derecha.

Animación

Aquí puedes aplicar animación al módulo. Una vez que eliges un estilo, puedes ajustar las siguientes opciones:

• Duración de la animación – Define el tiempo que tarda una animación en completar un ciclo.

• Retraso de la animación – Define el tiempo que debe esperar desde que se aplica la animación a un elemento antes de comenzar a ejecutarla. La animación puede comenzar después, inmediatamente o en medio de la animación.

• Opacidad inicial de la animación – Define el valor de opacidad con el que empieza la animación.

• Curva de velocidad de la animación – Define el método de aceleración de tu animación. Acelerar y desacelerar suavemente crea un efecto más fluido que una velocidad lineal.

• Repetición de la animación – Por defecto, las animaciones solo se reproducen una vez. Si quieres que la animación se repita continuamente, selecciona la opción de repetir.

---

Pestaña Avanzada

Dentro de la pestaña Avanzada, encontrarás opciones que pueden ser útiles para diseñadores web con más experiencia, como CSS personalizado.

Aquí puedes aplicar CSS personalizado a tu módulo. También puedes asignar clases y IDs personalizadas al módulo, que permiten personalizar los estilos con propiedades CSS más avanzadas o aplicar código CSS usando la clase del módulo.

ID y Clases CSS

Asigna un ID o una clase CSS específica a este módulo. Esto es útil para aplicar CSS personalizado usando la hoja de estilos de tu tema hijo.

Configuraciones de ID y clases CSS

---

CSS Personalizado

• CSS libre – Escribe CSS libre usando el selector "selector" para apuntar a este módulo. Ejemplo: selector h1 {color: rojo;}

• Elementos del módulo – Puedes aplicar CSS personalizado a partes específicas del módulo pegándolo en esta pestaña. Al hacer clic, verás secciones individuales para agregar propiedades CSS personalizadas.

---

Condiciones

Las condiciones de visualización te permiten elegir cuándo mostrar este módulo según un conjunto de condiciones, como si el usuario ya ha comprado en tu sitio, qué navegador usa, sistema operativo, y más.

Puedes añadir una o varias condiciones.

Visibilidad

• Desactivar en – Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo) cuando la pantalla sea de teléfono, tableta o escritorio, marcando las casillas correspondientes.

• Desbordamiento horizontal – Define qué ocurre cuando el contenido excede los bordes izquierdo y derecho de un elemento de bloque:

  • Visible: el contenido se muestra si sobrepasa la altura.

  • Desplazamiento: si el contenido sobrepasa la altura, aparece una barra de desplazamiento vertical.

  • Oculto: el contenido que sobresale queda oculto.

  • Automático: el navegador decide si mostrar barra de desplazamiento.

• Desbordamiento vertical – Igual que horizontal, pero para los bordes superior e inferior.

---

Transiciones

Controla la duración, retraso y curva de velocidad de la animación hover.

• Duración de transición – Duración en milisegundos de la transición del hover.

• Retraso de transición – Retraso en milisegundos de la transición del hover.

• Curva de velocidad de transición – Define la curva de velocidad de la animación hover.

Posición

Define la posición del módulo:

• Relativa (valor predeterminado) – El módulo se posiciona según el flujo normal del documento, y los valores de desplazamiento vertical y horizontal se aplican relativos a sí mismo. No afecta la posición de otros elementos.

• Absoluta – El módulo se quita del flujo normal y no crea espacio en el diseño. Se posiciona relativo a su ancestro posicionado más cercano o al contenedor inicial.

• Fija – El módulo se quita del flujo normal y no crea espacio. Se posiciona respecto a la ventana del navegador, útil para módulos adhesivos (sticky).

• Desplazamiento vertical – Define la posición vertical del módulo.

• Desplazamiento horizontal – Define la posición horizontal del módulo.

• Índice Z – Define el orden del módulo en la capa del diseño. Los valores más altos superponen a los más bajos.

Efectos de desplazamiento

Define el comportamiento del módulo al desplazarse por la página. Puedes hacer que el módulo sea fijo en la parte superior, inferior o ambos y decidir si se transforma mientras el usuario desplaza.

También puedes habilitar movimiento vertical que permite ajustar la velocidad del desplazamiento del elemento sin afectar a los elementos alrededor.

El efecto disparador de movimiento permite elegir cuándo se activa el efecto de desplazamiento: cuando la parte superior, media o inferior del elemento está en vista.

---

Cómo estilizar videos individualmente en el módulo deslizador de videos

Además de los estilos y configuraciones generales, puedes personalizar videos de forma individual.

• Abre la configuración del módulo deslizador de videos.

• Haz clic en el ícono de engranaje junto al video que quieres personalizar.

• Aquí verás opciones de contenido, diseño y avanzado similares a las generales. Los cambios solo afectarán el video seleccionado.

• Haz clic en la flecha en la esquina superior izquierda para volver a la configuración principal del módulo.

• Guarda tu diseño haciendo clic en la flecha verde en la esquina inferior derecha.

---

Guardar tu diseño

Cuando termines de configurar y diseñar el módulo, haz clic en la flecha verde en la esquina inferior derecha para guardar. Si cierras sin guardar, perderás los cambios.

---

Guardar el diseño de la página

Para guardar el diseño de la página puedes usar CMD + S en Mac o CTRL + S en PC. También puedes usar la barra inferior de Divi haciendo clic en el ícono morado con tres puntos para expandir la barra y luego el botón verde de guardar.

---

Salir del constructor visual

Una vez guardados los cambios, haz clic en “Salir del constructor visual” en la barra de administración superior para salir.

---

Continuar aprendiendo

• Cómo crear una página de lista de reproducción con el módulo deslizador de videos de Divi

• Cómo añadir superposiciones de imagen a tu módulo deslizador de videos Divi

• Uso de la pista de miniaturas vs. navegación por puntos en el módulo deslizador de videos Divi

• Cómo mostrar/ocultar un deslizador de videos según el estado de inicio de sesión con Divi

• 6 tutoriales prácticos del módulo deslizador de videos para Divi