El Módulo de Video Divi es una forma sencilla de mostrar videos en cualquier lugar de tu sitio web. Los videos pueden subirse directamente a tu sitio a través de la biblioteca de medios de WordPress o importarse mediante una URL si tu video está alojado en un sitio web de terceros como YouTube o Vimeo. El Módulo de Video es útil en cualquier lugar donde necesites un video en tu sitio.

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

Cómo agregar el Módulo de Video Divi a tu página

• Agrega una nueva página o edita una página existente.

• Por defecto, el editor estándar Gutenberg se carga cada vez que se agrega un nuevo post o página en WordPress.

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

• Agrega una página y carga el Constructor Visual.

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

• Construir desde cero

• Elegir un diseño prehecho

• Construir con IA

Construir desde cero
Esta opción carga el Constructor Divi con un diseño de página en blanco. Elige esta opción si quieres comenzar el diseño de tu página desde cero.

Elegir un diseño prehecho
Esta opción te permite elegir entre nuestra amplia biblioteca de diseños Divi pre-diseñados. Puedes elegir diseños prehechos de Divi, los que hayas diseñado y guardado en tu Biblioteca Divi, o páginas existentes en tu sitio web que puedes clonar.

Construir con IA
Esta opción te permite crear un diseño completo de página usando Divi IA. Usando tu texto y la información sobre tu sitio, puedes crear el esquema perfecto para la página, luego construirlo y llenarlo con contenido e imágenes, dándole vida en poco tiempo.

Agregar el Módulo de Video 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 con el tema Divi.

• Busca el módulo de Video y haz clic en él para cargar el módulo.
  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.

Explicación de todas las opciones del Módulo de Video Divi

Pestaña de Contenido

Video

• Archivo Mp4 del video o URL de YouTube - Permite establecer un video autoalojado (subido a la biblioteca de medios de WordPress), una URL de video de YouTube o una URL de video de Vimeo.

• Archivo WebM del video - En el caso de un video autoalojado, también debe subirse la versión webm para asegurar que el video se muestre correctamente en todos los navegadores.

Cómo agregar un video al Módulo de Video Divi
Hay dos formas de agregar videos a este módulo:

• Subiéndolos directamente a tu sitio o insertando un video desde una URL.

• Insertando una URL de video de YouTube o Vimeo.

Nota: Si subes un video a tu sitio, recomendamos subir tanto los formatos WebM como 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, por lo que subir un archivo MP4 asegura que tu video se reproduzca en todos los navegadores y dispositivos.

Un video de demostración se añade automáticamente al deslizador de video cuando el módulo se carga por primera vez. Para reemplazar el video de demostración, pasa el cursor sobre el video y haz clic en el ícono de la papelera. Esto eliminará el video.

Una vez eliminado el video de demostración, sigue los siguientes pasos para agregar tu video:

• Haz clic en Agregar Video. Esto abrirá la biblioteca de medios de WordPress, donde puedes buscar entre videos ya subidos, subir uno nuevo o insertar desde una URL.

• Selecciona el video que deseas.

• Haz clic en el botón Subir Video en la esquina inferior derecha de la ventana de la biblioteca de medios.

• Para usar un video alojado en otro sitio web (como YouTube o Vimeo), copia la URL de ese video y ve a 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. Luego haz clic en el botón Insertar en la publicación en la esquina inferior derecha de la ventana de la biblioteca de medios.

Superposición

• Imagen de superposición - Selecciona una superposición para tu video. Puedes elegir una imagen de tu biblioteca de medios, subir una imagen nueva o hacer clic en Generar desde Video, que usará automáticamente la miniatura del video como superposición.

Nota: La opción Generar desde Video solo funciona para videos de YouTube o Vimeo. Se puede usar una imagen de la biblioteca de medios para videos autoalojados.

Fondo

Etiqueta de administrador

Pestaña de Diseño

Ícono de reproducción

• Color del ícono de reproducción - Elige un color para el ícono de reproducción. Selecciona un color de la paleta de colores predeterminada de tu sitio o haz clic en el ícono cuentagotas para encontrar un nuevo color.

• Usar tamaño personalizado para el ícono - Si quieres un tamaño de fuente personalizado para el ícono de reproducción, puedes configurarlo aquí. Activa esta opción y selecciona el tamaño que quieras usando el deslizador o escribiendo un valor numérico.

Superposición

• Color de fondo de la superposición - Elige un color para el fondo del ícono de reproducción que quieres mostrar al pasar el cursor. Selecciona un color de la paleta predeterminada o usa el cuentagotas para elegir otro color.

Tamaño

• 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 establece un ancho o un ancho máximo, la alineación del módulo puede configurarse con estas tres opciones:

  • Alineado a la izquierda

  • Centrado

  • 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 la altura máxima que puede tener el módulo. Para más información, consulta la documentación oficial.

Espaciado

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

Los valores de margen predeterminados para el módulo son 0.

Los valores de relleno predeterminados para el módulo son 0.

Borde

Agrega un borde al módulo. Puedes agregar un borde completo o solo a 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 más alto el número, más redondeadas serán las esquinas. Los valores de las esquinas están vinculados automáticamente (como indica la cadena azul resaltada); sin embargo, si quieres valores distintos para cada esquina, haz clic en la cadena azul para desvincularlos. Si están vinculados, siempre tendrán el mismo valor y se actualizarán automáticamente si cambias uno.

• Estilos de borde – Agrega un borde a todos los lados del módulo o a lados individuales (arriba, derecha, abajo y izquierda).

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

• Color del borde – Elige el color del borde. Puedes seleccionar un color de la paleta predeterminada de tu sitio o usar el cuentagotas para elegir otro color.

• Estilo del borde – Selecciona el estilo del borde que prefieras: sólido, discontinuo, punteado, doble, canaleta, relieve, incrustado, sobresaliente o ninguno.

Sombra de caja

• 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 la fuerza del desenfoque. Mientras más alto el valor, mayor el desenfoque y más amplia y clara será la sombra.

• Fuerza de expansión de la sombra - Define la fuerza de expansión del desenfoque. Aumentar esta fuerza incrementa la densidad de la sombra. Más densidad resulta en una sombra más intensa.

• 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

• Matiz - Define el ángulo del matiz de un color.

• Saturación - Define qué tan intensa debe ser la saturación del color.

• Brillo - Define qué tan brillantes deben ser los colores.

• Contraste - Define qué tan marcadas deben ser las áreas claras y oscuras.

• Invertir - Invierte el matiz, la saturación y el brillo según el valor especificado.

• Sepia - Define una apariencia más cálida, con tonos amarillos/marrones.

• Opacidad - Define qué tan transparente u opaco debe ser 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 de él. Por defecto, se selecciona normal.

Transformar

1. Escalar
   
2. Trasladar
3. Rotar
4. Sesgar
5. Puntos de origen

Navega con la tecla Tab para acceder a cada opción. Configura cada opción ingresando valores numéricos o arrastrando y expandiendo el cuadro o círculo.

Puedes fijar estos valores para que siempre sean idénticos haciendo clic en el icono de cadena en la esquina 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 la animación en completar un ciclo.

• Retraso de la Animación - Define cuánto tiempo esperar desde que se aplica la animación a un elemento hasta que comienza a realizarse. La animación puede comenzar más tarde, inmediatamente desde su inicio, o inmediatamente y 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. Hacer que la animación acelere y desacelere creará un efecto más suave que una velocidad lineal.

• Repetición de la Animación - Por defecto, las animaciones solo se reproducen una vez. Si quieres que se repita continuamente, elige la opción de Bucle.

---

Pestaña Avanzada

En 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 e IDs CSS personalizadas al módulo, que pueden usarse para personalizar los estilos del módulo con propiedades CSS más avanzadas o para aplicar código CSS personalizado usando la clase CSS del módulo.

---

ID y Clases CSS

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

CSS Personalizado

• CSS Libre - Escribe CSS libre usando el selector de palabra clave para dirigir este módulo. Ejemplo: selector h1 {color: rojo;}

• Elementos del Módulo - También puedes aplicar CSS personalizado pegándolo en esta pestaña. Cuando haces clic en la pestaña de Elementos del Módulo, verás secciones individuales donde puedes añadir propiedades CSS personalizadas.

---

Condiciones
Las Condiciones de Visualización te permiten elegir cuándo mostrar este módulo basado en un conjunto de condiciones, como cuando un usuario visita la página, si ya ha comprado antes en tu empresa, qué navegador está usando, qué sistema operativo usa, y más.

Puedes añadir una o varias condiciones.

---

Visibilidad

• Deshabilitar en - Define la visibilidad del módulo. Puedes deshabilitarlo (ocultarlo) cuando la ventana de visualización sea un Teléfono, Tableta o Computadora, marcando la casilla correspondiente.

• Desbordamiento Horizontal - Define qué se muestra cuando el contenido desborda los bordes izquierdo y derecho de un elemento de nivel bloque. Puede ser:

  • Visible - El contenido se mostrará si desborda la altura del módulo.

  • Desplazar - Si el contenido desborda la altura, se usará una barra de desplazamiento vertical para ver el contenido.

  • Oculto - Si el contenido desborda la altura, la parte que sobrepasa estará oculta.

  • Automático - El navegador decidirá si se muestra barra de desplazamiento.

• Desbordamiento Vertical - Define qué se muestra cuando el contenido desborda los bordes superior e inferior. Las opciones son las mismas que para el desbordamiento horizontal: Visible, Desplazar, Oculto o Automático.

---

Transiciones
Esto controla la duración, el retraso y la curva de velocidad de la animación al pasar el cursor (hover).

• Duración de la Transición - Define la duración (en milisegundos) de la transición de la animación hover.

• Retraso de la Transición - Define el retraso de la transición de la animación hover (en milisegundos).

• Curva de Velocidad de la Transición - Define la curva de velocidad de la transición de la animación hover.

---

Posición
Define la posición del módulo:

• Relativa (valor por defecto) - El módulo se posiciona según el flujo normal del documento, y luego los valores de desplazamiento son relativos a sí mismo basados en los valores de Desplazamiento Vertical y Horizontal. El desplazamiento no afecta la posición de otros elementos; por lo tanto, el espacio dado para el módulo en el diseño de la página es igual que si la posición fuera la predeterminada (estática).

• Absoluta - El módulo se elimina del flujo normal del documento y no se crea espacio para el elemento en el diseño de la página. El módulo se posiciona relativo a su ancestro posicionado más cercano (si hay alguno) o al bloque contenedor inicial. Las opciones de ubicación determinan su posición final.

• Fija - El elemento se elimina del flujo normal del documento y no se crea espacio para él en el diseño de la página. El módulo se posiciona basado en las opciones de ubicación en relación con la ventana del navegador. Esto se puede usar para crear un módulo pegajoso (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 el diseño de la página. Los módulos con un índice z más alto se superponen a los módulos con un índice z más bajo.

Efectos de Desplazamiento
Esta sección define el comportamiento del módulo cuando el usuario desplaza la página. Puedes hacer que el módulo sea pegajoso en la parte superior, inferior o ambos, y decidir si el módulo debe transformarse mientras el usuario se desplaza.

Además, puedes habilitar el movimiento vertical en este módulo, lo que permite ajustar la velocidad de desplazamiento del elemento sin afectar a los elementos circundantes.

La función de Activador de Efecto de Movimiento te permite elegir cuándo se activa el efecto de desplazamiento aplicado. Puedes activar el efecto cuando la parte superior, media o inferior del elemento esté en vista.

---

Guardar tu Diseño

Una vez que termines de dar estilo y configurar el módulo contador numérico, haz clic en la flecha verde en la esquina inferior derecha del módulo para guardar tu diseño. Si cierras el módulo sin guardar, perderás tu trabajo.

---

Luego, guarda 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 de herramientas inferior de Divi para guardar tu diseño haciendo clic en el ícono circular morado con tres puntos (…) para expandir la barra y luego hacer clic en el botón verde Guardar en la esquina inferior derecha.

---

Salir del Constructor Visual

Ahora que todos tus cambios están guardados, haz clic en Salir del Constructor Visual en la barra de administración superior para salir del Constructor Visual.

---

---

Continuar aprendiendo

• Cómo Crear Impresionantes Diseños en Cuadrícula con el Módulo de Video de Divi (Parte 1)

• Cómo Crear Impresionantes Diseños en Cuadrícula con el Módulo de Video de Divi (Parte 2)

• Cómo Crear Impresionantes Diseños en Cuadrícula con el Módulo de Video de Divi (Parte 3)

• Cómo Crear Impresionantes Diseños en Cuadrícula con el Módulo de Video de Divi (Parte 4)