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 del cuadro de fila pueden mejorar la apariencia general de su sitio web.
Para ilustrar la profundidad que las sombras del cuadro pueden aportar 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 Row Box con Divi
Suscríbete a nuestro canal de Youtube
Formato de encabezado
Lo primero que tendrás 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 .
Vuelva a Encabezado y navegación > Barra de menú principal > Y realice los siguientes ajustes:
- Ocultar imagen del logotipo: Habilitar
- 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 del 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 en el 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 de degradado de sección
Esta sección necesitará el siguiente fondo degradado:
- Primer color: #ea2e7d
- Segundo color: #edd900
- Tipo de gradiente: lineal
- Dirección del gradiente: 110 grados
- Posición de inicio: 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 gradiente: 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 columna: 180 grados
- Posición de inicio de columna: 0
- Posición final de la columna: 100
Dimensionamiento
Vaya a la pestaña Diseño y aplique los siguientes cambios 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 del texto: Arvo
- Tamaño de fuente de texto: 98px
- Color del texto: #FFFFFF
- Espaciado entre letras de texto: 32 px
- Altura de la línea de texto: 1,4 em
- 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 de 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 gradiente: lineal
- Dirección del gradiente: 180 grados
- Posición inicial: 80%
- Posición final: 80%
Espaciado
Luego, 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.
Fondo degradado de la columna 1
La primera columna necesitará el siguiente fondo degradado:
- Primer color: #6ac922
- Segundo color: #b6c1b2
- Columna 1 Tipo de gradiente: Lineal
- Dirección del gradiente de la columna 1: 136 grados
- Columna 1 Posición inicial: 23%
- Columna 1 Posición final: 100%
Color de fondo de la columna 2
Desplácese hacia abajo y use ‘#dddddd’ como Color de fondo de la Columna 2.
Dimensionamiento
Pase 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 del canalón: 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 cuadro: 77px
- Fuerza de propagación de la sombra del cuadro: 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 del 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 del 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
Pase 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 del canalón: 1
Espaciado
A continuación, utilice 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 cuadro: 77px
- Fuerza de propagación de la sombra del cuadro: 23px
- Color de sombra: rgba(0,0,0,0.3)
- Posición de la sombra del cuadro: 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, aplique los siguientes ajustes a la subcategoría Espaciado:
- Mostrar espacio debajo de la imagen: Sí
- Margen superior: -500 px (escritorio), 0 px (tableta y teléfono)
- Margen derecho: -50 px (escritorio), 0 px (tableta y teléfono)
- Margen izquierdo: 200 px (escritorio), 0 px (tableta y teléfono)
Abra la subcategoría Box Shadow y use 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 cuadro: 0px
- Fuerza de propagación de la sombra del cuadro: 30px
- Color de sombra: rgba (255,255,255,0.68)
- Posición de la sombra del cuadro: 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: -50 px (escritorio), 0 px (tableta y teléfono)
- Margen derecho: 100 px (escritorio), 0 px (tableta y teléfono)
- Margen inferior: 30px
- 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 cuadro: 0px
- Fuerza de propagación de la sombra del cuadro: 30px
- Color de sombra: rgba (255,255,255,0.68)
- Posición de la sombra del cuadro: Sombra exterior
Clonar módulos de texto y colocar 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 dentro 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 sombras de cuadro 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úrate 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 de Dmitry Guzhanin / shutterstock.com