Cómo hacer que la imagen de fondo de la sección se muestre selectivamente con Div

Básicamente, puede aplicar una imagen de fondo a cualquier cosa en Divi Builder. Ya sea que se trate de una sección, fila, columna o modo, las posibilidades son ilimitadas. Y con los modos de mezcla, incluso puede hacer que las imágenes de fondo se muestren selectivamente. Esto le permite crear módulos para conectarse entre sí a otro nivel. Donde se detiene un módulo, el otro módulo se hace cargo. Ya no se comporta como elementos separados, sino que le ayuda a obtener una imagen en el diseño general. En este tutorial, le mostraremos, paso a paso, cómo puede conectar módulos entre sí, haciendo una pantalla de fondo de sección a través de la sombra de su cuadro de módulo.
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido a lo que recrearemos en este tutorial en diferentes tamaños de pantalla.

Acercarse
Este enfoque funciona solo cuando se usa un color de fondo blanco para su turno y módulos de texto.
Usamos modos de mezcla para hacer que las partes de la sección de la sección aparezcan
Los dos modos de mezcla que permiten esto (en combinación con un fondo blanco en una fila) son una pantalla fuerte y luz
Para cubrir todo el fondo de la sección, recurrimos a ocupar todo el ancho de la pantalla cambiando las opciones de tamaño
Para deshacerse de la imagen de fondo de la sección superior e inferior, también eliminaremos todos los rellenos superior e inferior de nuestra sección
Ambos modos de mezcla dan un efecto diferente (depende de usted elegir cuál prefiere)
Utilizamos sombras de caja coloridas que permitirán que las partes de la imagen de fondo de la sección se muestren aplique este método a cualquier modo que desee (si le da un fondo blanco + sombra de cuadro colorido)
Agregue una nueva imagen de fondo para comenzar agregando una nueva sección a una página nueva o existente. Lo primero que debe hacer en la configuración de su sección es cargar una imagen de fondo.
Extienda luego, pase a la pestaña de diseño y aplique “0px” tanto en la parte superior como en la parte inferior de su sección dentro de la configuración del espacio. Esto eliminará el espacio entre su sección y la fila para agregar a la siguiente parte.

Agregue una nueva estructura de columna de fila Continuar agregando una fila con la siguiente estructura de columna en su sección:

El color de fondo como se menciona al abordar esta publicación de blog, seguramente tendrá que darle a su turno un fondo blanco si desea trabajar.

Dimensión también elimine la imagen de fondo de la sección que aparece en el lado izquierdo y derecho de su fila utilizando las siguientes opciones de tamaño:

Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Espacio hemos eliminado todo el revestimiento superior e inferior de nuestra sección. Sin embargo, necesitamos espacio antes y después de nuestros módulos, por lo que agregaremos “150px” al llenado superior e inferior de la fila.

Los modos de mezcla de “pantalla” y “luz dura” harán que este diseño funcione. Comenzaremos con el modo de mezcla de “pantalla”, que puede activar en las opciones de filtro de la configuración. Comenzamos a agregar los módulos que necesitamos. Necesitaremos tres módulos de texto en total, uno para cada columna. Comenzaremos con el primer módulo de texto en la columna 1 y lo cambiaremos. Más tarde, podemos clonarlo, colocarlo en las columnas restantes y hacer pequeños cambios. Agregue el módulo de texto y use un color de fondo blanco para él. No puede usar ningún otro color porque hará que aparezca la imagen de fondo de la sección.

Configuración de texto y luego aplique la siguiente configuración de texto en su módulo de texto:

El peso de la fuente de texto: Ultra Bold

Text -Text estilo: mayúscula
Color de texto: negro (esto hará que la sección del fondo de la sección se muestre por texto)
Texto de la carta de espacio: 2 PX
Orientación de texto: centro
Dimensión Hemos eliminado el ancho de canaleta predeterminado de nuestra fila, que elimina todo el espacio entre los módulos. Queremos crear un espacio entre ellos sin molestarnos con la longitud de la fila. Por lo tanto, cambiaremos la configuración de tamaño de nuestro módulo de texto:
Ancho: 80%



Alineación del módulo: izquierda
Espacio y para que el diseño sea más atractivo, también agregaremos algunos rellenos a nuestro módulo de texto:
Revestimiento superior e inferior: 130 px

Revestimiento izquierdo y derecho: 32 PX
Box Shadow Lo último que tendremos que ver con este módulo de texto es agregar un cuadro de sombra. Aquí está la magia. Box Shadow permitirá que su fondo de sección se muestre si usa algún color excepto blanco. Utilizamos la siguiente configuración: el poder de la incertidumbre de la sombra de la caja: 0 px
Poder de extender la sombra de la caja: 100 px

Color Shadow Box: # 5d00ff
Clone El módulo de texto coloque dos veces en la columna 2 Cambie la alineación del módulo Ahora vaya más allá y clone el módulo de texto dos veces y colóquelo en las columnas restantes. Comenzaremos haciendo algunos cambios en el módulo de texto que está en la columna 2. Cambie la alineación del módulo desde la configuración de dimensionamiento.
Cambie el espacio también, crearemos algunas diferencias de altura para nuestro módulo agregando el siguiente margen superior:
Margen superior: 100 PX (escritorio), 200 PX (tableta y teléfono)

Cambie el color de las sombras al final, cambiaremos la sombra de la caja de color a “# 00D3B3”.

Coloque en la columna 3, cambie el módulo del módulo de texto en la columna 3 necesitará una alineación correcta del módulo.
Cambie el espacio, agregaremos “200px” al margen superior (para todo el tamaño de la pantalla).

Cambie el color de las sombras y el color de la sombra de la caja para este último módulo de texto es “# AF0020”.

La sección de clonación cambia la imagen de fondo de la sección como se menciona al abordar esta publicación de blog, puede usar otro modo de mezcla, también llamado “luz dura”. Clone la sección que creó en la parte anterior de esta publicación y cambie la imagen de fondo.

Cambie el modo de mezcla y luego, abra la configuración de la fila y cambie el modo de mezcla a la “luz dura”. Cambie el color de la sombra del cuadro # 1 Puede usar los colores deseados para las sombras de cassette de sus módulos de texto, siempre que sean. No blanco. Usé “RGBA (224,43,32.0.26)” para el primer módulo de texto.

Cambie el color de la sombra del cuadro # 2 Abra el módulo de texto en la siguiente segunda columna y cambie el color del cuadro a “RGBA (131,03,0,26)”.

Cambie el color de la sombra del cuadro # 3 El último módulo de texto usa “RGBA (12.113.195.0.26)”.

Vista previa ahora, que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.

Pensamientos finales En este tutorial, le he mostrado cómo hacer las imágenes de fondo de la sección que se muestran selectivamente, dependiendo de la posición de sus módulos. Este enfoque crea más conexiones entre los módulos. Cuando uno de ellos se detiene, el otro toma el control. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.