Cómo crear diseños de cuadrícula impresionantes con el módulo de video de Divi (Parte 2)

Bienvenido a la publicación 2 de 5 en nuestra miniserie Cómo crear diseños de cuadrícula impresionantes con el módulo de video de Divi . En esta serie, le mostraremos cómo crear diseños de cuadrícula increíbles desde cero utilizando Divi Visual Builder. Y si te preocupa que esto sea demasiado complicado, ¡piénsalo de nuevo! Todos estos diseños se pueden crear y diseñar con Visual Builder sin código adicional.

¡Llegamos a la parte 2 de la serie! Y debo decir que disfruto mucho construyendo estos diseños. Hoy, le mostraré cómo crear un diseño de cuadrícula para sus videos que se asemeja a una sección de características de una página de producto o una página de destino. Este diseño se compone de una secuencia de 1/2 1/2 filas de columnas y cada fila contiene un video y su descripción correspondiente en cada una de las dos columnas. Luego, la siguiente sección alterna el orden del video y la descripción de izquierda a derecha y luego de derecha a izquierda. Dado que cada una de las filas se extiende por todo el ancho de la página y cada una de las columnas mantiene la misma altura vertical, el diseño se ve impresionante en todos los tamaños de pantalla.

Voy a usar el módulo de video para agregar los videos y el módulo de propaganda para que sirva como una sección de título y descripción adyacente al video. Como todos los diseños de esta serie, este también es sorprendentemente fácil de implementar con Divi.

Así es como se verá el resultado final

El concepto y la inspiración

Este concepto no es nuevo de ninguna manera. De hecho, me inspiré para crear este diseño debido a su familiaridad con los usuarios. Muchos sitios web utilizan un diseño similar para mostrar las funciones de sus productos o servicios. Permite áreas de contenido más grandes que creo que crean un gran espacio negativo para el texto e imágenes llamativas para el video.

Esto sería perfecto para una empresa que usa videos para promocionar características de productos, pero que también tiene muchos otros usos. Espero que aproveches este diseño para tu próximo proyecto.

Empecemos.

Implementando el diseño con Divi

Suscríbete a nuestro canal de Youtube

Primero, agregue una sección regular con una estructura de 1/2 1/2 (2 columnas).

A continuación, agregue un módulo de video a la columna de la izquierda.

Actualice la configuración de video de la siguiente manera:

Opciones de contenido

Video MP4 / URL: [ingrese la URL del video]
URL de superposición de imágenes: [cargue una imagen personalizada para su video o genere una automáticamente a partir del video]

Opciones de diseño

Color del icono de reproducción: rgba (255,255,255,0.87)

Guardar ajustes

A continuación, agregue un módulo Blurb en la columna de la derecha directamente adyacente al módulo de video que acaba de crear.

Actualice la configuración de Blurb de la siguiente manera:

Opciones de contenido:

Título: [ingrese el título del video]
Contenido: [ingrese la descripción del video]
Enlace: [puede introducir la URL del enlace a otra página si lo desea]
Usar icono: SÍ
Icono: [seleccionar icono]

Opciones de diseño:

Color del icono: # 666666
Color del texto: claro
Orientación del texto: centro
Fuente de encabezado: Roboto
Tamaño de fuente del encabezado: 52px
Espaciado entre letras del encabezado: 1 px
Fuente del cuerpo: Open Sans
Tamaño de fuente del cuerpo: 20px
Color del texto del cuerpo: #dddddd
Relleno personalizado en el escritorio: 5% superior (es posible que deba ajustar esto según la cantidad de texto que tenga en su descripción)
Relleno personalizado en tabletas y teléfonos inteligentes: 20 píxeles en la parte superior, 20 píxeles en la parte inferior

Opciones avanzadas

Animación de imagen / icono: de derecha a izquierda (esta animación combinada con el icono de flecha llamará más la atención sobre el video de la izquierda.

Guardar ajustes

Antes de continuar, continúe y agregue su imagen de fondo a su sección. Vaya a la configuración de la sección (área azul) y actualice lo siguiente:

Opciones de contenido:

Imagen de fondo: [ingrese una imagen de fondo (la mía es 2000 x 2200)]

Usar efecto de paralaje: SÍ
Método Parallax: True Parallax

Opciones de diseño:

Relleno personalizado: 0px superior, 0px inferior

Guardar ajustes
A continuación, edite la configuración de la fila con las siguientes actualizaciones:

Opciones de contenido

Color de fondo de la columna 2: rgba (0,0,0,0.69)

Opciones de diseño

Hacer esta fila de ancho completo: SÍ
Usar ancho de canalón personalizado: SÍ
Ancho de la canaleta: 1
Ecualizar alturas de columna: SÍ
Relleno personalizado: 0px superior, 0px inferior
Marcado personalizado: 0px arriba, 0px abajo
Relleno personalizado de la columna 1: 0px superior, 0px inferior
Relleno personalizado de la columna 2: 0px superior, 0px inferior

Las cosas están empezando a encajar ahora. Tienes tu imagen de fondo y has creado tu primera fila. Ahora está listo para duplicar esa fila. Haga clic en el icono de duplicado en la barra de menú de la fila dentro del constructor visual.

En la nueva fila que acaba de duplicar, arrastre el módulo de video a la columna de la derecha y arrastre el módulo de propaganda a la columna de la izquierda.

Ahora solo tiene que actualizar el contenido del módulo de video para incluir la nueva URL del video y la nueva imagen de portada. Para el módulo Blurb, deberá actualizar el encabezado y el contenido que corresponde a su video. Y también deberá ajustar el ícono de propaganda a una flecha que apunte hacia la derecha (si usó el mismo ícono que yo hice) y cambiar la animación de imagen / ícono a “De izquierda a derecha”.

A continuación, debemos actualizar la configuración de la fila duplicada para establecer el fondo de la primera columna. Vaya a la configuración de la fila y actualice lo siguiente en la pestaña Contenido :

Color de fondo de la columna 1: rgba (0,0,0,0.69)
Color de fondo de la columna 2: ninguno

Estamos haciendo algunos avances. Ahora veamos cómo se ven nuestras dos primeras filas ...

Para las siguientes dos filas, repita el proceso de duplicación y actualice el contenido. Solo recuerde que cuantas más filas tenga, más larga tendrá que estirar la imagen de fondo de la sección para adaptarse a la longitud del contenido.

Para este ejemplo, agregué dos filas más, lo que hace un total de cuatro filas. Mira el resultado final.

Creando la versión ligera

Para cambiar el diseño anterior de la cuadrícula de video oscura a una versión clara, todo lo que necesita hacer es actualizar algunas de las opciones de diseño.

Para estas ediciones, puede ser un poco más fácil usar la vista de estructura alámbrica.

Actualice la configuración de la sección de la siguiente manera:

Opciones de contenido

Imagen de fondo: [ingrese una imagen de fondo clara]

Actualice la configuración de la primera fila de la siguiente manera:

Opciones de contenido

Color de fondo de la columna 2: rgba (255,255,255,0.68)

Actualice la configuración del módulo Blurb de la primera fila de la siguiente manera:

Opciones de diseño

Color del icono: # 333333
Color del texto: oscuro
Color del texto del encabezado: # 444444
Fuente del cuerpo: Roboto
Color del texto del cuerpo: # 666666

Actualice la configuración de la segunda fila de la siguiente manera:

Opciones de contenido

Color de fondo de la columna 1: rgba (255,255,255,0.45)

Utilice las opciones de clic derecho para copiar el diseño del módulo de propaganda en la primera fila y pegarlo en el módulo de propaganda en la segunda fila.

¡Eso es todo! Mira el resultado final.

¿Sensible?

Este es un poco complicado cuando se trata de cómo se comporta en tamaños de pantalla más pequeños. Debido a que el orden de apilamiento predeterminado coloca la columna de la izquierda sobre la columna de la derecha, el resultado de este diseño es un poco confuso. Puede aprender cómo solucionar este problema en mi publicación anterior sobre cómo cambiar el orden de apilamiento de columnas de Divi.

Subiendo…

La próxima cuadrícula te sorprenderá. Los colores de fondo semitransparentes y los degradados hacen que el diseño sea muy fácil de combinar con su propio sitio. Mira la vista previa ...

Espero que estés disfrutando de la serie hasta ahora. Espero tener noticias tuyas en los comentarios.

¡Salud!