Básicamente, puede aplicar una imagen de fondo a cualquier cosa dentro de Divi Builder . Ya sea una sección, una fila, una columna o un módulo, las posibilidades son infinitas. Y con los modos de fusión, incluso puede hacer que las imágenes de fondo se muestren de forma selectiva. Esto le permite hacer módulos para conectarse entre sí en otro nivel. Cuando un módulo se detiene, el otro módulo toma el relevo. Ya no se comportan como elementos separados sino que, en cambio, lo ayudan a obtener una vista del diseño general.
En este tutorial, le mostraremos, paso a paso, cómo puede conectar módulos entre sí haciendo que el fondo de una sección se muestre a través de la sombra del cuadro de sus módulos.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido a lo que recrearemos dentro de este tutorial en diferentes tamaños de pantalla.
Acercarse
- Este enfoque solo funciona cuando se usa un color de fondo blanco para sus módulos de fila y texto
- Estamos usando modos de fusión para que aparezcan partes de la imagen de fondo de la sección.
- Los dos modos de fusión que permiten esto (en combinación con un color de fondo de fila blanca) son Pantalla y Luz dura
- Para cubrir todo el fondo de la sección, estamos haciendo que la fila ocupe todo el ancho de la pantalla cambiando las opciones de Tamaño
- Para deshacernos de la imagen de fondo de la sección en la parte superior e inferior, también eliminaremos todo el relleno superior e inferior de nuestra sección.
- Ambos modos de fusión dan un efecto diferente (depende de usted elegir cuál prefiere)
- Estamos usando sombras de cuadros de colores que permitirán que se vean partes de la imagen de fondo de la sección
- Puede aplicar este método a cualquier módulo que desee (si le da un fondo blanco + sombra de cuadro de color)
Agregar una nueva sección
Imagen de fondo
Comencemos agregando una nueva sección a una página nueva o existente. Lo primero que deberá hacer dentro de la configuración de su sección es cargar una imagen de fondo.
Espaciado
Luego, pase a la pestaña Diseño y aplique ‘0px’ al relleno superior e inferior de su sección dentro de la configuración de Espaciado. Esto eliminará el espacio entre su sección y la fila que está a punto de agregar en la siguiente parte.
Agregar una nueva fila
Estructura de la columna
Continúe agregando una fila con la siguiente estructura de columnas a su sección:
Color de fondo
Como se mencionó en el enfoque de esta publicación de blog, definitivamente deberá darle a su fila un fondo blanco si desea que funcione.
Dimensionamiento
También nos estamos deshaciendo de la imagen de fondo de la sección que aparece en el lado izquierdo y derecho de su fila usando las siguientes opciones de tamaño:
- Hacer esta fila de ancho completo: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
Espaciado
Hemos eliminado todo el relleno superior e inferior de nuestra sección. Sin embargo, necesitamos algo de espacio antes y después de que aparezcan nuestros módulos, es por eso que agregaremos ‘150px’ al relleno superior e inferior de la fila.
Modo de mezcla
Tanto los modos de fusión ‘Pantalla’ como ‘Luz fuerte’ harán que este diseño funcione. Comenzaremos con el modo de fusión ‘Pantalla’ que puede habilitar en las opciones de filtro de la configuración de su fila.
Agregar módulo de texto a la columna 1
Color de fondo
Ahora que hemos modificado nuestra configuración de sección y fila, es hora de comenzar a agregar los módulos que necesitamos. Vamos a necesitar 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 modificaremos. Luego, podemos clonarlo, colocarlo en las columnas restantes y hacerle pequeños ajustes. Agregue su módulo de texto y use un color de fondo blanco para él. No puede usar ningún otro color porque hará que se muestre la imagen de fondo de su sección.
Configuración de texto
Luego, aplique la siguiente configuración de Texto a su Módulo de Texto:
- Peso de fuente de texto: ultra negrita
- Estilo de fuente de texto: Mayúsculas
- Color del texto: negro (esto hará que la imagen de fondo de la sección se muestre a través de su texto)
- Espaciado entre letras de texto: 2px
- Orientación del texto: Centro
Dimensionamiento
Hemos eliminado el ancho de canalón predeterminado de nuestra fila, lo que elimina todo el espacio entre nuestros módulos. Queremos crear algo de espacio entre ellos sin alterar la longitud de la fila. Es por eso que modificaremos la configuración de Tamaño de nuestro Módulo de texto en su lugar:
- Ancho: 80%
- Alineación del módulo: Izquierda
Espaciado
Y para que el diseño sea más atractivo, también agregaremos algo de relleno a nuestro módulo de texto:
- Relleno superior e inferior: 130 px
- Relleno izquierdo y derecho: 32px
Sombra de la caja
Lo último que tendremos que hacer con este módulo de texto es agregar una sombra de cuadro. Aquí es donde ocurre la magia. Box Shadow permitirá que el fondo de su sección se vea si está usando cualquier color que no sea blanco. Estamos usando la siguiente configuración:
- Fuerza de desenfoque de sombra de cuadro: 0px
- Fuerza de propagación de la sombra del cuadro: 100px
- Color de la sombra del cuadro: #5d00ff
Clonar módulo de texto dos veces
Colocar en la Columna 2
Cambiar la alineación del módulo
Ahora adelante, clone su módulo de texto dos veces y colóquelo en las columnas restantes. Comenzaremos haciendo algunas modificaciones al Módulo de texto que se encuentra en la columna 2. Cambie la Alineación del módulo en la configuración de Tamaño al centro.
Cambiar espaciado
También crearemos alguna diferencia en la altura de nuestro módulo al agregarle el siguiente margen superior:
- Margen superior: 100 px (escritorio), 200 px (tableta y teléfono)
Cambiar el color de la sombra del cuadro
Por último, cambiaremos nuestro Color de sombra de caja a ‘#00d3b3’.
Colocar en la Columna 3
Cambiar la alineación del módulo
El módulo de texto en la columna 3 necesitará una alineación de módulo correcta en su lugar.
Cambiar espaciado
También agregaremos ‘200px’ al margen superior (para todos los tamaños de pantalla).
Cambiar el color de la sombra del cuadro
Y el color de la sombra del cuadro para este último módulo de texto es ‘#af0020’.
Sección de clonación
Cambiar la imagen de fondo de la sección
Como se mencionó en el enfoque de esta publicación de blog, también puede usar otro modo de fusión llamado ‘Luz dura’. Clona la sección que creaste en la parte anterior de esta publicación y cambia su imagen de fondo.
Cambiar el modo de fusión de filas
Luego, abra la configuración de su fila y cambie el Modo de fusión a ‘Luz fuerte’.
Cambiar el color de la sombra de la caja #1
Puede usar los colores que desee para las sombras de los cuadros de sus Módulos de texto, siempre que no sean blancos. Hemos usado ‘rgba(224,43,32,0.26)’ para el primer módulo de texto.
Cambiar el color de la sombra de la caja #2
Abra el Módulo de texto en la segunda columna a continuación y cambie el Color de la sombra del cuadro a ‘rgba(131,0,233,0.26)’.
Cambiar el color de la sombra de la caja #3
El último módulo de texto usa ‘rgba(12,113,195,0.26)’.
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Pensamientos finales
En este tutorial, le mostramos cómo hacer que las imágenes de fondo de la sección se muestren de forma selectiva, según la posición de sus módulos. Este enfoque crea más conexión entre los módulos. Cuando uno de ellos se detiene, el otro toma el relevo. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!