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

Bienvenido a la publicación 1 de 5 en nuestra miniserie Cómo crear impresionantes diseños de cuadrícula con el módulo de video de Divi . En esta serie, lo guiaremos a través de cómo crear increíbles diseños de cuadrícula 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 utilizando Visual Builder sin ningún código adicional.


Para comenzar esta serie, le mostraré cómo crear un diseño de cuadrícula para sus videos muy parecido al diseño de cuadrícula de un blog utilizando una combinación de módulo de video apilado sobre un módulo de publicidad.

Este tutorial incluirá tanto una versión oscura como una clara del diseño de cuadrícula. Lo mejor de este diseño de diseño es que es muy fácil de implementar y he tratado de brindarle muchas imágenes para ayudarlo en el camino.

Empecemos.

Un vistazo al resultado final

El concepto y la inspiración

Cuando se trata de agregar videos a un sitio web, muchos de ellos parecen conformarse con una simple inserción 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 organiza los videos en una página o la forma en que los enmarca realmente puede cambiar drásticamente la forma en que una persona interactúa con el contenido. Es por eso que quería hacer una serie sobre cómo crear excelentes diseños para 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 trampolín para diseños aún mejores.

Implementando el diseño con Divi

Suscríbete a nuestro canal de Youtube

Primero, agregue una sección regular con una estructura de columna de ⅓ ⅓ ⅓.

A continuación, agregaremos un fondo translúcido oscuro a cada una de las columnas que servirá como marco alrededor de cada uno de nuestros videos.

Edite la configuración de la fila y actualice lo siguiente:

Opciones de contenido

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

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


Color de fondo de la columna 3: rgba(0,0,0,0.45)

Opciones de diseño

Columna 1 Relleno personalizado: 15 px arriba, 15 px derecha, 15 px abajo, 15 px izquierda

Columna 2 Relleno personalizado: 15 px arriba, 15 px derecha,


15 px abajo, 15 px izquierda

A continuación, agregue el primer módulo de video a la primera columna.

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

Opciones de contenido:

Video MP4/URL: [ingrese la URL para el video]

URL de superposición de imagen: [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 de Blurb en la primera columna directamente debajo del 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]


Color de fondo: rgba(34,34,34,0.68)

Opciones de diseño:

Color del texto: Claro

Orientación del texto: Centro


Fuente del encabezado: Roboto


Tamaño de la fuente del encabezado: 30 px


Espaciado entre letras del encabezado: 1 px


Fuente del cuerpo: Open Sans


Tamaño de la fuente del cuerpo: 14 px


Color del cuerpo del texto: #cccccc


Usar borde: SÍ


Color del borde: #333333


Ancho del borde: Margen personalizado
de 1 px


: -10 px arriba


Relleno personalizado: 15 px arriba, 15 px a la derecha, 15 px abajo, 15 px a la izquierda

Guardar ajustes

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

Ahora necesitamos agregar otra fila con una estructura de ½ ½ columna directamente debajo de nuestra fila actual. Dado que vamos a querer trasladar nuestros videos y notas publicitarias a la nueva fila, la forma más fácil de hacerlo es continuar y duplicar la fila actual de 3 columnas. Después de duplicar la fila, cambie la columna a la estructura de ½ ½ columna.

Elimine la tarjeta de video adicional.

Ahora agreguemos un fondo a nuestra sección. En la configuración de la sección, actualice las siguientes opciones en la pestaña Contenido:

Imagen de fondo: [subir imagen]

Usar efecto Parallax: SÍ


Método Parallax: True Parallax

Eso es todo para la versión oscura del primer diseño de cuadrícula de video. Consulta tus resultados.

La siguiente es la versión ligera.

Creación de la versión ligera del diseño de cuadrícula de video

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

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 fila de la siguiente manera:

Opciones de contenido

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

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


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

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

Opciones de contenido

Color de fondo: rgba(255,255,255,0.68)

Opciones de diseño

Color del texto: Oscuro

Color del texto del encabezado: #444444


Fuente del cuerpo: Roboto


Color del texto del cuerpo: #666666


Color del borde: #ffffff

Así es como se ve la versión ligera…

¡Eso es todo!

¿Sensible?

Este diseño funciona muy bien en todos los dispositivos y tamaños de pantalla. Aquí hay un vistazo rápido a cómo se ve este diseño en tabletas y teléfonos inteligentes.

Subiendo

Para la próxima publicación de esta serie, le mostraré cómo crear un diseño único de cuadrícula de 2 columnas de ancho completo para sus videos. Aquí hay un adelanto de lo que está por venir.