Cómo usar creativamente las sombras de las cajas de filas con Divi

Una de las actualizaciones más recientes de Divi fue muy esperada; la integración de sombras de caja en secciones, filas y módulos. En esta publicación, nos centraremos en cómo las sombras de los cuadros de fila pueden mejorar la apariencia general de su sitio web.

Para ilustrar la profundidad del cuadro que las sombras pueden traer a su sitio web, hemos creado un ejemplo que le mostraremos cómo recrear paso a paso.

Resultado

Escritorio

El diseño que le mostraremos cómo recrear se ve así en el escritorio:

Móvil

Y así en el móvil:

Cómo usar creativamente las sombras de las cajas de filas con Divi

Suscríbete a nuestro canal de Youtube

Formato de encabezado

Lo primero que tendrá que hacer es elegir el formato de encabezado correcto. Vaya a su Panel de WordPress> Personalizar> Encabezado y navegación> Formato de encabezado> Y elija 'Centrado' como Estilo de encabezado .

Barra de menú principal

Vuelva a Encabezado y navegación> Barra de menú principal> Y realice los siguientes ajustes:

• Ocultar imagen de logotipo: Activar
• Altura del menú: 211
• Altura máxima del logotipo: 30
• Tamaño del texto: 16
• Espaciado entre letras: 2
• Fuente: Lato Light
• Estilo de fuente: mayúsculas
• Color del texto: #FFFFFF
• Color de enlace activo: #FFFFFF
• Color de fondo: rgba (255,255,255,0)
• Color de fondo del menú desplegable: rgba (255,255,255,0)

Primera sección

Una vez que haya realizado los cambios dentro del Personalizador de temas, es hora de comenzar con el diseño. Cree una nueva página, habilite Divi Builder y cambie a Visual Builder. Luego, agregue una primera sección estándar a la página.

Fondo degradado de sección

Esta sección necesitará el siguiente fondo degradado:

• Primer color: # ea2e7d
• Segundo color: # edd900
• Tipo de degradado: lineal
• Dirección del gradiente: 110 grados
• Posición inicial: 0%
• Posición final: 100%

Espaciado

Pase a la pestaña Diseño. Dentro de la subcategoría Espaciado, use '100px' para el relleno superior y '200px' para el relleno inferior.

Fila de una columna

Fondo degradado de fila

Continúe agregando una fila de una columna a la sección y utilice el siguiente fondo degradado:

• Primer color: rgba (255,255,255,0)
• Segundo color: # ea2e7d
• Tipo de degradado: radial
• Dirección radial: centro
• Posición inicial: 56%
• Posición final: 100%

Fondo degradado de columna

Desplácese hacia abajo y use el siguiente fondo degradado para la columna de esa fila:

• Primer color: rgba (237,217,0,0.77)
• Segundo color: rgba (255,255,255,0)
• Tipo de gradiente de columna: lineal
• Dirección del gradiente de la columna: 180 grados
• Posición inicial de la columna: 0
• Posición final de la columna: 100

Dimensionamiento

Vaya a la pestaña Diseño y haga que los siguientes cambios se apliquen a la subcategoría Tamaño:

• Usar ancho personalizado: Sí
• Ancho personalizado: 27%

Espaciado

Luego, use '20px' para el relleno personalizado superior, derecho, inferior e izquierdo de la fila.

Módulo de texto

Una vez que haya terminado con la configuración de la fila, agregue un módulo de texto y use la siguiente configuración para la subcategoría de texto:

• Fuente de texto: Arvo
• Tamaño de fuente de texto: 98px
• Color del texto: #FFFFFF
• Espaciado de letras de texto: 32px
• Altura de la línea de texto: 1.4em
• Orientación del texto: centro

Segunda sección

Agregue otra sección justo debajo de la primera sección. Esta sección contendrá todas las demás filas que están presentes en el diseño.

Fondo degradado de sección

En primer lugar, utilice el siguiente fondo degradado para esta sección:

• Primer color: rgba (255,255,255,0)
• Segundo color: # 592851
• Tipo de degradado: lineal
• Dirección del gradiente: 180 grados
• Posición inicial: 80%
• Posición final: 80%

Espaciado

A continuación, vaya a la pestaña Diseño y agregue '100px' al relleno inferior.

Primera fila de dos columnas

Color de fondo de la fila

Agregue la primera fila de dos columnas a esta nueva sección y use '#dddddd' como color de fondo.

Columna 1 Fondo degradado

La primera columna necesitará el siguiente fondo degradado:

• Primer color: # 6ac922
• Segundo color: # b6c1b2
• Columna 1 Tipo de degradado: lineal
• Columna 1 Dirección de gradiente: 136 grados
• Posición inicial de la columna 1: 23%
• Posición final de la columna 1: 100%

Color de fondo de la columna 2

Desplácese hacia abajo y use '#dddddd' como color de fondo de la columna 2.

Dimensionamiento

Vaya a la pestaña Diseño y use la siguiente configuración para la subcategoría Tamaño:

• Usar ancho personalizado: habilitar
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

La subcategoría Espaciado necesitará el siguiente relleno y margen:

• Relleno superior, derecho, inferior e izquierdo: 0px
• Margen superior: -150px
• Relleno superior de la columna 1: 235 px (escritorio), 0 px (tableta y teléfono)
• Relleno inferior de la columna 1: 235 px (escritorio), 0 px (tableta y teléfono)
• Relleno superior de la columna 2: 150 px
• Relleno inferior de la columna 2: 150 px

Sombra de la caja

Abra la subcategoría Box Shadow y use la siguiente configuración:

• Posición horizontal de la sombra del cuadro: -3px
• Posición vertical de la sombra del cuadro: -18px
• Fuerza de desenfoque de sombra de caja: 77px
• Fuerza de propagación de la sombra de caja: 23px
• Color de sombra: rgba (0,0,0,0.3)

Primer módulo de texto

Luego, agregue el primer módulo de texto a la segunda columna y use la siguiente configuración para la subcategoría de texto:

• Fuente de texto: Arvo
• Tamaño de fuente de texto: 34px
• Color del texto: # 7a7a7a
• Orientación del texto: centro

Segundo módulo de texto

Agregue otro módulo de texto, pero use la siguiente configuración en su lugar:

• Fuente de texto: Lato Light
• Orientación del texto: centro

Abra la subcategoría Tamaño, use un Ancho de '75% 'y seleccione la Alineación del módulo central.

Por último, agregue un margen superior de '50px'.

Segunda fila de dos columnas

Color de fondo de la fila

Agregue otra fila de dos columnas a la sección y elija '# b99bc1' como color de fondo.

Color de fondo de la columna 1

Desplácese hacia abajo y elija '#dddddd' para el color de fondo de la columna 1.

Dimensionamiento

Vaya a la pestaña Diseño y haga que las siguientes configuraciones se apliquen a la subcategoría Tamaño:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

A continuación, use el siguiente relleno:

• Relleno superior, derecho, inferior e izquierdo: 0px
• Relleno superior de la columna 1: 150 px (escritorio), 0 px (tableta y teléfono)
• Relleno inferior de la columna 1: 50 px (escritorio), 0 px (tableta y teléfono)
• Relleno superior de la columna 2: 150 px
• Relleno inferior de la columna 2: 150 px

Sombra de la caja

Abra la subcategoría Box Shadow y use la siguiente configuración:

• Posición horizontal de la sombra del cuadro: -4px
• Posición vertical de la sombra del cuadro: 24px
• Fuerza de desenfoque de sombra de caja: 77px
• Fuerza de propagación de la sombra de caja: 23px
• Color de sombra: rgba (0,0,0,0.3)
• Posición de la caja de sombra: Sombra exterior

Primer módulo de imagen en la primera columna

Continúe agregando un módulo de imagen a la primera columna. Después de cargar la imagen, haga que los siguientes ajustes se apliquen a la subcategoría Espaciado:

• Mostrar espacio debajo de la imagen: Sí
• Margen superior: -500px (escritorio), 0px (tableta y teléfono)
• Margen derecho: -50px (escritorio), 0px (tableta y teléfono)
• Margen izquierdo: 200px (escritorio), 0px (tableta y teléfono)

Abra la subcategoría Box Shadow y use la siguiente caja de sombra:

• Posición horizontal de la sombra del cuadro: 2px
• Posición vertical de la sombra del cuadro: 2px
• Fuerza de desenfoque de sombra de caja: 0px
• Fuerza de propagación de la sombra de la caja: 30px
• Color de sombra: rgba (255,255,255,0.68)
• Posición de la caja de sombra: Sombra exterior

Segunda columna de imagen en la primera columna

Agregue otro módulo de imagen a la misma columna y use el siguiente margen:

• Margen superior: -50px (escritorio), 0px (tableta y teléfono)
• Margen derecho: 100 px (escritorio), 0 px (tableta y teléfono)
• Margen inferior: 30 px
• Margen izquierdo: 100 px (escritorio), 0 px (tableta y teléfono)

Luego, desplácese hacia abajo y utilice la siguiente sombra de cuadro:

• Posición horizontal de la sombra del cuadro: 2px
• Posición vertical de la sombra del cuadro: 2px
• Fuerza de desenfoque de sombra de caja: 0px
• Fuerza de propagación de la sombra de la caja: 30px
• Color de sombra: rgba (255,255,255,0.68)
• Posición de la caja de sombra: Sombra exterior

Clonar módulos de texto y colocarlos en la segunda columna

Por último, clone los dos módulos de texto de la fila anterior y colóquelos en la segunda columna de esta fila. Solo hay una cosa que tendrás que cambiar; el color del texto. Abra la configuración de cada módulo de texto y cambie el color del texto a '#FFFFFF'.

Resultado

Escritorio

Todos los pasos de esta publicación conducirán al siguiente resultado en el escritorio:

Móvil

Y el siguiente resultado en el móvil:

Pensamientos finales

En esta publicación, le mostramos cómo puede usar creativamente las sombras de los cuadros en las filas. Hemos creado un ejemplo colorido en el que puede notar claramente las sombras del cuadro de profundidad que le dan a un 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 Dmitry Guzhanin / shutterstock.com