Cómo combinar creativamente fondos de filas y columnas con las nuevas opciones de Divi

En este tutorial de Divi, le mostraremos cómo puede combinar las opciones de fondo de fila y columna para crear resultados sorprendentes. Al elegir las combinaciones y configuraciones adecuadas, puede lograr diseños que mejoren la apariencia general de su sitio web. Para demostrar de lo que estamos hablando, hemos creado un ejemplo que le ayudaremos a construir paso a paso. Hemos creado este resultado utilizando solo las opciones integradas de Divi, por lo que no necesitará agregar ningún CSS adicional.

Resultado

Si sigue este tutorial paso a paso, podrá lograr el siguiente resultado:

Aunque hemos utilizado tres filas diferentes para lograr este resultado, parece que todas forman parte de una imagen más amplia. ¡Empecemos!

Cambiar a Visual Builder

Cree una nueva página, habilite Divi Builder y cambie a Visual Builder.

Crear sección

Lo primero que tendremos que hacer es crear una nueva sección estándar. Todas las filas que crearemos y combinaremos entre sí serán parte de esta sección. Para crear un efecto de sombra de cuadro en las filas, agregaremos el siguiente fondo degradado de sección:

• Primer color: rgba (61,65,86,0.59)
• Segundo color: # f7f7f7
• Tipo de degradado: radial
• Dirección radial: Inferior
• Posición inicial: 31%
• Posición final: 76%

Agregar fila de una columna

Lo siguiente que tendremos que hacer es agregar una fila de una columna a la sección. Esta fila representará la siguiente parte de nuestro resultado final:

Configuración de filas y columnas

Hacer fila de ancho completo

Continúe y haga que la fila sea de ancho completo dentro de la pestaña Diseño.

Configuración de fondo de fila

Luego, puede volver a la pestaña Contenido y agregar el siguiente fondo degradado:

• Primer color: # 3d4156
• Segundo color: rgba (114,81,114,0.91)
• Tipo de degradado: lineal
• Dirección del gradiente: 180 grados
• Posición inicial: 0%
• Posición final: 65%

Cargue una imagen de fondo (en este caso un patrón) y elija 'Multiplicar' como su Mezcla de imagen de fondo.

Configuración de fondo de columna

A continuación, desplácese hacia abajo y asigne la siguiente configuración de fondo degradado a la columna de su fila:

• Primer color: rgba (255,255,255,0.15)
• Segundo color: rgba (214,44,104,0)
• Tipo de gradiente de columna: lineal
• Dirección del gradiente de la columna: 161 grados
• Posición inicial de la columna: 43%
• Posición final de la columna: 43%

Espaciado

Continúe agregando el siguiente relleno a su fila:

• Superior: 20px
• Derecha: 30px
• Izquierda: 30px

Y el relleno de tu columna también:

• Superior: 200px
• Abajo: 200px

Agregar módulo de texto

Lo siguiente que haremos es agregar un módulo de texto a la fila y realizar los siguientes cambios en la subcategoría de texto de ese módulo de texto:

• Fuente de texto: Playfair Display
• Tamaño de fuente de texto: 77px (escritorio), 64 (tableta), 51 (teléfono)
• Color del texto: # f7f7f7
• Altura de la línea de texto: 1.7 (escritorio), 1em (tableta y teléfono)

Agregar módulo divisor

Continúe agregando un módulo divisor debajo del módulo de texto que acaba de crear y habilite la opción 'Mostrar divisor' dentro de la subcategoría de visibilidad.

Desplácese hacia abajo en la misma pestaña y use 'rgba (114,57,114,0.91)' como color de fondo.

Vaya a la pestaña Diseño y seleccione '# 3d4156' como su color divisor.

Abra la subcategoría Estilos y use 'Sólido' como su Estilo de divisor y 'Superior' como su Posición de divisor.

A continuación, asigne la siguiente configuración a la subcategoría Tamaño:

• Peso del divisor: 11px
• Alto: 23px
• Ancho: 0%
• Alineación del módulo: izquierda

Por último, pero no menos importante, agregue un relleno izquierdo de '48% 'a la opción Relleno personalizado.

Agregar fila de tres columnas

La siguiente fila que agregaremos a la sección parece una extensión de la fila anterior, aunque están hechas por separado.

Configuración de filas y columnas

Hacer fila de ancho completo

Comience, nuevamente, haciendo que la nueva fila sea de ancho completo.

Configuración de fondo de fila

Luego, use la siguiente configuración de fondo:

• Primer color: rgba (114,81,114,0.91)
• Segundo color: # f7f7f7
• Tipo de degradado: lineal
• Dirección del gradiente: 180 grados
• Posición inicial: 9%
• Posición final: 100%

Agregue un patrón de fondo y use 'Multiplicar' como Mezcla de imagen de fondo.

Configuración de fondo de columna

Desplácese hacia abajo en la pestaña y use '# f7f7f7' como color de fondo para cada columna.

Espaciado

Dentro de la subcategoría Espaciado, comience asignando '30px' al relleno superior, inferior, derecho e izquierdo de cada columna. Luego, agregue el siguiente relleno a la versión de escritorio de su fila:

• Superior: 19px
• Derecha: 200px
• Izquierda: 200px

El acolchado de las tabletas es ligeramente diferente:

• Arriba: 0px
• Derecha: 70px
• Abajo: 0px
• Izquierda: 70px

Y el acolchado en los móviles es el siguiente:

• Arriba: 0px
• Derecha: 50px
• Inferior: 30px
• Izquierda: 50px

Agregar primer módulo de texto

Continúe agregando un módulo de texto a la primera columna de la fila. Luego, use la siguiente configuración para la subcategoría Texto de la pestaña Diseño:

• Fuente de texto: Raleway
• Estilo de fuente: negrita y mayúscula
• Tamaño de fuente de texto: 23px
• Color del texto: # 3d4156
• Altura de la línea de texto: 1.7em
• Orientación del texto: centro

Agregar segundo módulo de texto

Agregue otro módulo de texto justo debajo del anterior y use la siguiente configuración en su lugar:

• Fuente de texto: Raleway
• Tamaño de fuente de texto: 12px
• Color del texto: # 3d4156
• Altura de la línea de texto: 1.7em
• Orientación del texto: izquierda

Clonar módulos de texto y colocarlos en otras columnas

Una vez que haya creado los dos módulos de texto, clónelos y colóquelos también en las dos columnas restantes.

Agregar fila de una columna

La última columna que vamos a agregar es una que vamos a superponer con la anterior. La razón por la que estamos haciendo esto es que de esta manera podemos combinar diferentes fondos degradados. Aunque las tres filas que estamos creando están separadas, se sentirán como si fueran una. Mientras tanto, también podemos disfrutar de varios fondos degradados en lugar de uno solo.

Configuración de filas y columnas

Hacer fila de ancho completo

Para la última fila, también necesitaremos habilitar 'Hacer esta fila de ancho completo'.

Configuración de fondo de fila

Luego, agregue un fondo degradado a la fila:

• Primer color: rgba (61,65,86,0)
• Segundo color: rgba (114,81,114,0.34)
• Tipo de degradado: lineal
• Dirección del gradiente: 180 grados
• Posición inicial: 45%
• Posición final: 91%

Configuración de fondo de columna

Desplácese hacia abajo en la misma pestaña y use el siguiente fondo degradado para la columna:

• Primer color: rgba (239,239,239,0.15)
• Segundo color: rgba (214,44,104,0)
• Tipo de gradiente de columna: lineal
• Dirección del gradiente de la columna: 340 grados
• Posición inicial de la columna: 45%
• Posición final de la columna: 45%
  

Espaciado

Lo último que tendremos que hacer es agregar algo de relleno y margen. Comience agregando '-100%' al margen superior y continúe usando el siguiente relleno personalizado:

• Superior: 14px
• Derecha: 30px
• Izquierda: 30px

La columna también necesitará algo de relleno; '200px' para la parte superior y '155px' para la parte inferior.

Resultado

Si ha seguido los diferentes pasos que le proporcionamos en esta publicación, debería haber podido lograr el siguiente resultado:

Pensamientos finales

Con las nuevas opciones de Divi, son posibles muchas cosas nuevas. Una de esas cosas es combinar fondos de filas y columnas para lograr un gran diseño. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!

Imagen destacada de medejaja / shutterstock.com