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

Bienvenido a la publicación 4 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.

Espero que estés disfrutando de los diseños de cuadrícula hasta ahora. El diseño de hoy es el número 4 de la serie y es uno de mis favoritos (y el más rápido de implementar). No solo es fácil (y divertido) construir con Divi, sino que también es personalizable para adaptarse a la combinación de colores de su sitio. Las opciones de degradado de fondo son la característica principal de este diseño que se ha utilizado para crear los dos colores de tono separados por una línea diagonal. El espaciado también tiene el propósito de hacer que los videos se perciban fácilmente. Podría decirse que este diseño puede quedar fuera del alcance de lo que normalmente llamaríamos una "cuadrícula", pero creo que verá el potencial.

Así que, aquí vamos. Les mostraré lo fácil que es construir este diseño de cuadrícula usando el módulo de video y algunos elementos de fondo personalizados.

Así es como se verá el resultado final

El concepto y la inspiración

Estaba buscando un diseño agradable y limpio que organizara pequeños lotes de videos para usarlos en cosas como tutoriales o cursos. Esto, combinado con mi impulso impulsivo por jugar con degradados de fondo, salí con esto. Espero que te guste.

Empecemos.

Implementando el diseño con Divi

Suscríbete a nuestro canal de Youtube

Primero, agregue una sección regular con una estructura de ancho completo (1 columna).

A continuación, agregue un módulo de texto a la columna. Esto servirá como título o titular para la sección de la página.

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

Opciones de contenido
Contenido: [ingrese texto para el título]

Opciones de diseño

Color del texto: claro
Fuente de texto: Arimo
Tamaño de fuente de texto: 56px
Espaciado de letras de texto: 1px
Altura de la línea de texto: 1em

Guardar ajustes

Todavía no podrá ver nada porque tiene texto blanco sobre un fondo blanco, pero está bien. Sigamos adelante y agreguemos nuestro degradado de fondo de sección. Vaya a Configuración de la sección y, en la Sección de contenido, actualice las siguientes opciones:

Colores de degradado de fondo: # 121212, #ffffff
Tipo de degradado: lineal
Dirección del gradiente: 198 grados
Posición inicial: 45%
Posición final: 45%

A continuación, actualice la Configuración de fila para la fila que acaba de agregar de la siguiente manera:

Opciones de diseño

Hacer esta fila de ancho completo: SÍ
Usar ancho de canalón personalizado: SÍ
Ancho de la canaleta: 4
Ecualizar alturas de columna: SÍ
Relleno personalizado: 1% arriba, 5% derecha, 5% abajo, 5% izquierda

Guardar ajustes

Ahora agregue otra fila con una estructura ⅔ ⅓ (2 columnas) directamente debajo de la fila que acaba de crear.

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 de su video]
URL de superposición de imagen: [ingrese la URL de imagen superpuesta]

Guardar ajustes

A continuación, duplique (o copie) el módulo de video que acaba de crear dos veces y arrastre (o pegue) los dos videos duplicados para que se apilen en la columna de la derecha.

Actualice el contenido de los videos para incluir las URL correctas y las imágenes de portada.

Continúe y agregue un módulo Blurb debajo de los dos módulos de video en la columna de la derecha. Esto puede servir como una descripción de los videos dentro de esta cuadrícula.

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

Opciones de contenido

Título: [ingrese el título]
Contenido: [ingrese el contenido o la descripción]

Opciones de diseño

Color del texto: claro

Guardar ajustes

Ahora edite la Configuración de fila para la fila que contiene los videos que acaba de crear de la siguiente manera:

Opciones de contenido

Colores de degradado de fondo: # 4999c1, # 121212
Tipo de degradado: lineal
Dirección del gradiente: 198 grados
Posición inicial: 45%
Posición final: 45%

Opciones de diseño

Hacer esta fila de ancho completo: SÍ
Usar ancho de canalón personalizado: SÍ
Ancho de la canaleta: 4
Ecualizar alturas de columna: SÍ
Relleno personalizado: 5% arriba, 5% derecha, 5% abajo, 5% izquierda

¡Excelente! Terminaste la primera sección. Casi terminamos. Mira el progreso hasta ahora.

Para crear la siguiente sección, duplique la sección completa que acaba de crear haciendo clic en el botón de sección duplicada.

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

Opciones de contenido

Colores de degradado de fondo: #ffffff, # 121212 (estos colores están en el orden opuesto al de la primera sección)

A continuación, actualice la configuración del módulo de texto en la sección duplicada con lo siguiente:

Opciones de diseño

Texto Color del texto: # 333333

Guardar ajustes

Para completar esta sección, actualice la Configuración de fila que contiene sus videos con lo siguiente:

Opciones de contenido

Colores de degradado de fondo: # 121212, # 4999c1 (básicamente, está cambiando el orden de los colores para que estén en el orden opuesto al de la primera sección)

Guardar ajustes

Ahora veamos el resultado después de agregar la segunda sección ...

Si aún no lo ha notado, puede continuar agregando más secciones fácilmente ya que ya tenemos estas dos secciones creadas. Creemos una sección más solo por si acaso. Dado que el color de fondo de nuestra sección es negro en la parte inferior, queremos comenzar la siguiente sección con un color de fondo negro en la parte superior. Eso significa que debemos duplicar la primera sección en la parte superior y arrastrarla a la parte inferior de la página debajo de la segunda sección. Esto mantiene la continuidad del diseño en toda la página.

Así es como se ve después de agregar la tercera sección:

¡Eso es todo! Todo terminado.

¿Sensible?

Este diseño en realidad se ve aún mejor en dispositivos móviles sin modificaciones. ¡Echale un vistazo!

Mayor personalización

Después de construir este diseño de cuadrícula con múltiples secciones, probablemente ya pueda notar lo fácil que sería cambiar los colores para que coincidan con el tema de su próximo proyecto. Todo lo que se necesita es cambiar los colores de degradado de fondo para las secciones y filas.

Si desea modificar aún más el diseño, sugiero agregar semitransparencia a los colores degradados para exponer el fondo detrás de ellos. O intente deshacerse de uno de los colores degradados por completo y vea cómo se ve. Aquí hay un par de ejemplos de lo que puede hacer cambiar un solo color de degradado ...

También puede agregar un módulo deslizante de video a la cuadrícula en la columna de la izquierda.

Subiendo…

A continuación, se encuentra nuestro último diseño de cuadrícula de video de la serie. Este te da la opción de mantener las cosas agradables y limpias con elementos de encuadre sutiles o usar colores de una manera única para hacer que cada video se destaque.

Hasta entonces, espero tener noticias tuyas en los comentarios.

¡Disfrutar!