Bienvenido a la publicación 4 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 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) crear con Divi, sino que también se puede personalizar 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 han utilizado para crear los dos tonos de colores separados por una línea diagonal. El espaciado también tiene un propósito para 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. Le mostraré lo fácil que es construir este diseño de cuadrícula utilizando el módulo de video y algunos elementos de fondo personalizados.
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 afán impulsivo de jugar con los gradientes de fondo, resultó en 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 título para la sección de la página.
Actualice la configuración de texto de la siguiente manera:
Opciones de contenido
Contenido: [ingresar texto para el título]
Opciones de diseño
Color del texto: Fuente de texto clara
:
Tamaño de fuente de texto Arimo: 56 px
Espaciado entre letras de texto: 1 px
Altura de línea de texto: 1 em
Guardar ajustes
No podrá ver nada todavía porque tiene texto blanco sobre un fondo blanco, pero está bien. Avancemos y agreguemos nuestro degradado de fondo de sección. Vaya a la sección Configuración y, en la sección Contenido, actualice las siguientes opciones:
Colores de degradado de fondo: #121212, #ffffff
Tipo de degradado: Lineal
Dirección del degradado: 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 medianil personalizado: SÍ Ancho
de medianil: 4
Igualar alturas de columna: SÍ
Relleno personalizado: 1 % superior, 5 % derecha, 5 % inferior, 5 % izquierda
Guardar ajustes
Ahora agregue otra fila con una estructura de ⅔ ⅓ (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 superpuesta de la imagen: [ingrese la URL de la imagen superpuesta]
Guardar ajustes
Luego, 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 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 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: [ingresar título]
Contenido: [ingresar contenido o 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 degradado: 198 grados
Posición inicial: 45 %
Posición final: 45 %
Opciones de diseño
Hacer esta fila de ancho completo: SÍ
Usar ancho de medianil personalizado: SÍ Ancho
de medianil: 4
Igualar alturas de columna: SÍ
Relleno personalizado: 5 % superior, 5 % derecha, 5 % inferior, 5 % izquierda
¡Excelente! Terminaste la primera sección. Casi terminamos. Mira el progreso hasta ahora.
Para crear la siguiente sección, duplique toda la sección que acaba de crear haciendo clic en el botón de sección duplicada.
Actualice la configuración de la nueva sección de la siguiente manera:
Opciones de contenido
Colores de degradado de fondo: #ffffff, #121212 (estos colores están en el orden opuesto 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 la fila que contiene sus videos con lo siguiente:
Opciones de contenido
Colores de degradado de fondo: #121212, #4999c1 (básicamente, cambia el orden de los colores para que estén en el orden opuesto de la primera sección)
Guardar ajustes
Ahora veamos el resultado después de agregar la segunda sección…
Si aún no te has dado cuenta, puedes seguir añadiendo más secciones fácilmente ya que estas dos secciones ya las tenemos creadas. Vamos a crear 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 necesitamos 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 a lo largo de 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 ninguna modificación. ¡Échale un vistazo!
Personalización adicional
Después de crear este diseño de cuadrícula con varias 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 del 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 por completo de uno de los colores degradados y vea cómo se ve. Aquí hay un par de ejemplos de lo que puede hacer cambiar solo un color degradado…
También puede agregar un Módulo deslizante de video a la cuadrícula en la columna izquierda.
Subiendo…
Lo siguiente es 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 que cada video se destaque.
Hasta entonces, espero saber de usted en los comentarios.
¡Disfrutar!