Plugin de vídeo para WordPress
Cómo crear impresionantes diseños de cuadrícula con Divi’s Video Module

Sneak Peek en el resultado final

El concepto y la inspiración
Cuando se trata de añadir videos a un sitio web, muchos de ellos parecen conformarse con un embed simple con poco o ningún diseño. Quiero decir, lo entiendo. Menos es más y todo eso. Pero, a veces la forma en que organizar los videos en una página o la forma en que los enmarca realmente puede cambiar dramáticamente la forma en que una persona se involucra con el contenido. Es por eso que quería hacer una serie sobre la creación de grandes diseños de videos. Esto es ideal para videógrafos, podcasters y cursos en línea. Mi esperanza es que aproveche estos conceptos para su propio proyecto o los use como un trampolín para diseños aún mayores.Implementación del diseño con Divi
Primero, agregue una sección regular con una estructura de columna ⅓ ⅓..
Opciones de contenido
Columna 1 Color de fondo: rgba (0,0,0,0,45) Columna 2 Color de fondo: rgba (0,0,0,0,45) Columna 3 Color de fondo: rgba (0,0,0,0,45)
Opciones de Diseño
Columna 1 acolchado personalizado: 15px superior, 15px derecha, 15px inferior, 15px izquierda Columna 2 acolchado personalizado: 15px superior, 15px derecha, 15px inferior, 15px izquierda Columna 3 acolchado personalizado: 15px superior, 15px derecha, 15px inferior, 15px izquierda

Opciones de contenido:
Video MP4 / URL: [ingrese la URL del video] URL de superposición de imagen: [cargue una imagen personalizada para su vídeo o genere una automáticamente desde el vídeo]
Opciones de diseño:
Icono del juego Color: rgba (255,255,255,0,87)
Guardar ajustes
A continuación, agregue un Módulo Blurb en la primera columna directamente debajo del módulo de video que acaba de crear.


Guardar ajustes
Ahora que ha terminado con el contenido de la primera columna, está listo para duplicar su contenido. Haga doble clic en el icono duplicado en el módulo de vídeo dos veces y arrastre cada uno de los módulos duplicados a la segunda y tercera filas. Repita este proceso de duplicación para el módulo Blurb hasta que las tres columnas sean idénticas.




Creación de la versión ligera del diseño de la cuadrícula de video
Para cambiar el diseño anterior de la cuadrícula de vídeo oscuro en una versión ligera, todo lo que necesita hacer es actualizar algunas de las opciones de diseño.Actualizar la configuración de sección como sigue:
Opciones de contenido: Imagen de fondo: [ingrese una imagen de fondo clara] Actualizar la configuración de fila de la siguiente manera: Opciones de contenido Columna 1 Color de fondo: rgba (255, 255, 255, 0, 45) Columna 2 Color de fondo: rgba (255,255,255,0,45) Columna 3 Color de fondo: rgba (255, 255, 255, 0, 45) Actualizar configuración de Blurb como sigue: Opciones de contenido Color de fondo: rgba (255,255,255,0,68) Opciones de Diseño Color del texto: Dark Encabezado Color del texto: # 444444 Fuente del cuerpo: Roboto Cuerpo Color del texto: # 666666 Color del borde: #ffffff Aquí es cómo se ve la versión light…
¿Sensible?
Este diseño funciona muy bien en todos los dispositivos y tamaños de pantalla. Aquí le damos una mirada rápida a la apariencia de este diseño en tablets y dispositivos de teléfonos inteligentes.
Subiendo
Para el siguiente post de esta serie, voy a mostrarte cómo crear un diseño de rejilla de 2 columnas de gran tamaño para tus vídeos. Aquí hay una vista previa de lo que está por venir.
"Trackback" Enlace desde tu web.