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 las opciones de fondo de imagen y sombra de cuadro con Divi
Suscríbete a nuestro canal de Youtube
primer ejemplo
Ahora que le mostramos 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 cuadro: 0px
- Fuerza de propagación de la sombra del cuadro: 6px
- Color de sombra: rgba (173,173,173,0.79)
- Posición de la sombra del cuadro: Sombra exterior
Visibilidad
Por último, vaya a la pestaña Avanzado y deshabilite el Módulo de imagen en el dispositivo móvil.
Módulo de imagen clonada (teléfono)
La mayoría de las configuraciones que hemos usado para la versión de escritorio y tableta del módulo de imagen también son las mismas para la versión móvil. 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 sombra de caja
Lo primero que necesitaremos cambiar es la sombra del cuadro. En lugar de usar la configuración del escritorio, use 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 cuadro: 0px
- Fuerza de propagación de la sombra del cuadro: 6px
- Color de sombra: rgba (173,173,173,0.79)
- Posición de la sombra del cuadro: 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 desactívelo 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 gradiente: Radial
- Dirección radial: Centro
- Posición inicial: 50,8%
- Posición final: 50,8%
Dimensionamiento
Pase 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 cuadro: 56px
- Fuerza de propagación de sombra de cuadro: 12px
- Color de sombra: rgba(0,0,0,0.3)
- Posición de la sombra del cuadro: Sombra exterior
Módulo de imagen clonada y lugar en la segunda columna
Los ajustes para el módulo de imagen dentro de la segunda columna son los mismos. Continúe, 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 ello:
- Primer color: #e2e2e2
- Segundo Color: rgba(255,255,255,0)
- Tipo de gradiente: lineal
- Dirección del gradiente: 180 grados
- Posición inicial: 50%
- Posición final: 50%
Borde
Pase a la pestaña Diseño y aplique los siguientes ajustes 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 aplique el siguiente relleno y margen al Módulo de imagen:
- Margen izquierdo: 80 px (escritorio), 0 px (tableta y teléfono)
- Relleno superior, derecho, inferior e izquierdo: 30px
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 cuadro: 0px
- Fuerza de propagación de sombra de cuadro: 39px
- Color de sombra: rgba (0,0,0,0.22)
- Posición de la sombra del cuadro: 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 gradiente: lineal
- Dirección del gradiente: 138 grados
- Posición inicial: 55%
- Posición final: 55%
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í
- Relleno derecho: 30px
- Relleno 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: -250 px (escritorio), -150 (tableta), -100 (teléfono)
- Margen derecho: -150 px (escritorio), 0 px (tableta y teléfono)
- Margen izquierdo: 150px
- Relleno 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 cuadro: 0px
- Fuerza de propagación de sombra de cuadro: 24px
- Color de sombra: #e2e2e2
- Posición de la sombra del cuadro: 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 cuadro 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ú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 Creative Stall / shutterstock.com