Cómo combinar el fondo de la imagen y las opciones de sombra de cuadro con Divi

En esta publicación de Divi, le mostraremos cómo puede combinar las opciones de fondo y sombra de un módulo de imagen. Esta publicación está destinada a estimular su imaginación y mostrarle cómo las nuevas funciones de Divi pueden funcionar con las existentes, lo que lleva a resultados creativos. Para ayudarte con el proceso creativo, hemos creado 4 combinaciones que te mostraremos cómo recrear paso a paso. Echemos un vistazo a los ejemplos.

Primer ejemplo

Escritorio

Móvil

Segundo ejemplo

Escritorio

Móvil

Tercer ejemplo

Escritorio

Móvil

Cuarto ejemplo

Escritorio

Móvil

Cómo combinar el fondo de la imagen y las opciones de sombra de cuadro con Divi

Suscríbete a nuestro canal de Youtube

Primer ejemplo

Ahora que le hemos mostrado lo que puede esperar de esta publicación, echemos un vistazo a cómo puede recrear el siguiente ejemplo con solo unos pocos pasos dentro de Divi y sin código CSS adicional:

Agregar fila de dos columnas

Color de fondo de la columna 1

Agregue una fila de dos columnas a una sección estándar y elija 'rgba (12,113,195,0.11)' como Color de fondo de la columna 1.

Espaciado

Luego, pase a la pestaña Diseño. Agregue '200px' al margen superior y '150px' al relleno inferior de la primera columna.

Agregar módulo de imagen a la primera columna (escritorio y tableta)

Dimensionamiento

Luego, agregue un módulo de imagen a la primera columna de la fila que ha creado. Este módulo de imagen se aplicará solo a computadoras de escritorio y tabletas. Lo primero que deberá hacer es cambiar el Ancho a '94% '.

Espaciado

Luego, abra la subcategoría Espaciado, habilite la opción 'Mostrar espacio debajo de la imagen', agregue '-150px' al margen superior y '-110px' al margen izquierdo de la imagen.

Sombra de la caja

Desplácese hacia abajo en la pestaña y aplique la siguiente sombra de cuadro a la imagen:

• Posición horizontal de la sombra del cuadro: 80px
• Posición vertical de la sombra del cuadro: 80px
• Fuerza de desenfoque de sombra de caja: 0px
• Fuerza de propagación de la sombra de caja: 6px
• Color de sombra: rgba (173,173,173,0.79)
• Posición de la caja de sombra: Sombra exterior

Visibilidad

Por último, vaya a la pestaña Avanzado y desactive el Módulo de imagen en el móvil.

Módulo de imagen de clonación (teléfono)

La mayoría de las configuraciones que hemos usado para la versión de escritorio y tableta del Módulo de imagen son las mismas para la versión móvil también. Es por eso que vamos a clonar el Módulo de imagen y realizar algunos cambios adicionales que coincidirán con la pantalla del móvil.

Cambiar la sombra de la caja

Lo primero que tendremos que cambiar es la sombra del cuadro. En lugar de utilizar la configuración del escritorio, utilice la siguiente configuración:

• Posición horizontal de la sombra del cuadro: 33px
• Posición vertical de la sombra del cuadro: 78px
• Fuerza de desenfoque de sombra de caja: 0px
• Fuerza de propagación de la sombra de caja: 6px
• Color de sombra: rgba (173,173,173,0.79)
• Posición de la caja de sombra: Sombra exterior
  

Visibilidad

Lo siguiente y último que tendremos que hacer es cambiar la visibilidad de este segundo módulo de imagen. En lugar de deshabilitarlo en el teléfono, continúe y deshabilítelo tanto en la tableta como en el escritorio.

Segundo ejemplo

A continuación, tenemos el segundo ejemplo que se ve así en el escritorio:

Agregar fila de dos columnas

Fondo degradado de fila

Agregue una nueva fila de dos columnas a la sección en la que está trabajando y use el siguiente fondo degradado para ello:

• Primer color: rgba (237,240,0,0.55)
• Segundo color: rgba (255,255,255,0)
• Tipo de degradado: radial
• Dirección radial: centro
• Posición inicial: 50,8%
• Posición final: 50,8%

Dimensionamiento

Vaya a la pestaña Diseño y habilite la opción 'Hacer esta fila de ancho completo'.

Espaciado

Por último, agregue un relleno superior de '200px' a la segunda columna.

Agregar módulo de imagen a la primera columna

Espaciado

Una vez que haya terminado con la configuración de la fila, continúe y agregue un módulo de imagen a la primera columna. Abra la subcategoría Espaciado dentro de la pestaña Diseño y agregue '30px' al relleno superior, derecho, inferior e izquierdo.

Sombra de la caja

Desplácese hacia abajo en la misma pestaña y use la siguiente configuración para la subcategoría Box Shadow:

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

Clonar el módulo de imagen y colocarlo en la segunda columna

La configuración del módulo de imagen dentro de la segunda columna es la misma. Adelante, clone el Módulo de imagen y colóquelo en la segunda columna.

Tercer ejemplo

Continuando, le mostraremos cómo lograr el siguiente resultado:

Agregar fila de una columna

Color de fondo de la columna 1

Agregue una fila de una columna y elija 'rgba (193,145,163,0.6)' como el color de fondo de la primera columna.

Agregar módulo de imagen

Imagen de fondo degradado

Luego, agregue un Módulo de imagen a la columna y use el siguiente fondo degradado para él:

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

Frontera

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

• Usar borde: sí
• Color del borde: # 000000
• Ancho del borde: 3px
• Estilo de borde: sólido

Dimensionamiento

A continuación, agregue el siguiente ancho al módulo de imagen:

• Escritorio: 85%
• Tableta y teléfono: 100%

Espaciado

Luego, abra la subcategoría Espaciado y haga que el siguiente relleno y marque se apliquen al Módulo de imagen:

• Margen izquierdo: 80 px (escritorio), 0 px (tableta y teléfono)
• Relleno superior, derecho, inferior e izquierdo: 30 px

Sombra de la caja

Por último, agregue una sombra de cuadro con la siguiente configuración:

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

Cuarto ejemplo

Y finalmente; el último ejemplo que le mostraremos cómo recrear se ve así:

Agregar fila de dos columnas

Comience agregando una fila de dos columnas. Esta fila, a diferencia de los ejemplos anteriores que hemos manejado en esta publicación, no necesitará ninguna configuración adicional.

Agregar módulo de imagen a la primera columna

Fondo degradado

Agregue un módulo de imagen a la primera columna de la fila que acaba de crear y use el siguiente fondo degradado para ello:

• Primer color: rgba (255,255,255,0)
• Segundo color: rgba (92,0,158,0.46)
• Tipo de degradado: lineal
• Dirección del gradiente: 138 grados
• Posición inicial: 55%
• Posición final: 55%

Espaciado

Luego, pase a la pestaña Diseño y use la siguiente configuración para la subcategoría Espaciado:

• Mostrar espacio debajo de la imagen: Sí
• Relleno derecho: 30px
• Acolchado inferior: 30px

Agregar segundo módulo de imagen a la primera columna

Color de fondo

Continúe agregando otro módulo de imagen justo debajo del anterior y use 'rgba (96,96,96,0.42)' como color de fondo.

Espaciado

Luego, vaya a la pestaña Diseño y use la siguiente configuración para la subcategoría Espaciado:

• Mostrar espacio debajo de la imagen: Sí
• Margen superior: -250px (escritorio), -150 (tableta), -100 (teléfono)
• Margen derecho: -150px (escritorio), 0px (tableta y teléfono)
• Margen izquierdo: 150px
• Acolchado superior: 30px
• Relleno izquierdo: 30px

Sombra de la caja

Por último, abra la subcategoría Box Shadow y use la siguiente configuración:

• Posición horizontal de la sombra del cuadro: 0px
• 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 caja: 24px
• Color de sombra: # e2e2e2
• Posición de la caja de sombra: Sombra exterior

Pensamientos finales

Los ejemplos que hemos compartido en esta publicación son solo una fracción de lo lejos que puede llegar con las opciones de fondo y sombra de caja de Divi. Puede crear diseños únicos utilizando el Módulo de imagen que mejorará la apariencia general de su sitio web. 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 Creative Stall / shutterstock.com