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 correctas, puede lograr diseños que mejoren la apariencia general de su sitio web. Para demostrar de lo que estamos hablando, hemos hecho un ejemplo que te 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 sigues este tutorial paso a paso, podrás lograr el siguiente resultado:
Aunque hemos usado tres filas diferentes para lograr este resultado, parece que todas son parte de una imagen más grande. ¡Empecemos!
Cambiar a Visual Builder
Cree una nueva página y habilite Divi Builder y cambie a Visual Builder.
Crear sección
Lo primero que debemos 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 gradiente: Radial
- Dirección radial: inferior
- Posición inicial: 31%
- Posición final: 76%
Agregar fila de una columna
Lo siguiente que debemos 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 la fila 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 gradiente: lineal
- Dirección del gradiente: 180 grados
- Posición de inicio: 0%
- Posición final: 65%
Cargue una imagen de fondo (en este caso, un patrón) y elija ‘Multiplicar’ como 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 columna: 161 grados
- Posición de inicio de columna: 43%
- Posición final de columna: 43%
Espaciado
Continúe agregando el siguiente relleno a su fila:
- Superior: 20px
- Derecha: 30px
- Izquierda: 30px
Y el relleno de su 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: Pantalla Playfair
- Tamaño de fuente de texto: 77 px (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 Visibilidad.
Desplácese hacia abajo en esa misma pestaña y use ‘rgba(114,57,114,0.91)’ como color de fondo.
Pase a la pestaña Diseño y seleccione ‘#3d4156’ como color de su divisor.
Abra la subcategoría Estilos y use ‘Sólido’ como Estilo de divisor y ‘Superior’ como Posición de divisor.
A continuación, asigne la siguiente configuración a la subcategoría Tamaño:
- Peso del divisor: 11px
- Altura: 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 se hacen por separado.
Configuración de filas y columnas
Hacer fila de ancho completo
Comience, nuevamente, haciendo la nueva fila 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 gradiente: 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 relleno en las tabletas es ligeramente diferente:
- Superior: 0px
- Derecha: 70px
- Abajo: 0px
- Izquierda: 70px
Y el relleno en móviles es el siguiente:
- Superior: 0px
- Derecha: 50px
- Abajo: 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 del texto: Raleway
- Estilo de fuente: negrita y mayúsculas
- Tamaño de fuente de texto: 23px
- Color del texto: #3d4156
- Altura de línea de texto: 1,7 em
- 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 del texto: Raleway
- Tamaño de fuente de texto: 12px
- Color del texto: #3d4156
- Altura de línea de texto: 1,7 em
- Orientación del texto: Izquierda
Clonar módulos de texto y colocar 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 sola. Mientras tanto, también podemos disfrutar de múltiples 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 gradiente: 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 de gradiente de columna: 340 grados
- Posición de inicio de columna: 45%
- Posición final de 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 proporcionamos en esta publicación, debería haber podido lograr el siguiente resultado:
Pensamientos finales
Con las nuevas opciones de Divi, muchas cosas nuevas son posibles. 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úrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!
Imagen destacada por medejaja / shutterstock.com