Cómo utilizar la opacidad, el relleno y los márgenes negativos para superponer módulos Divi

Vista previa del resultado final

Estos son algunos ejemplos de lo que podrá lograr después de este tutorial. Los ejemplos se presentan en secciones para mostrar cómo interactúan con otros elementos y fondos, pero no como un sitio funcional.

Crear la primera sección

Comience creando una nueva página en su tablero de WordPress y seleccionando la plantilla de página en blanco. Deberá abrir la Configuración de la sección presionando el engranaje azul.

Luego haga clic en la pestaña Fondo y elija la tercera pestaña para agregar una imagen de fondo. Cargue su elección y asegúrese de tener el tamaño de imagen de fondo para cubrir.

Después de eso, cambiará el Relleno personalizado en la sección Espaciado de la pestaña Diseño a

• Superior: 55px
• Abajo: 255px

Ahora puede comenzar a agregar los elementos para los módulos que estará apilando. Primero, agregue una nueva fila de doble columna y vaya a la configuración. Desde allí, configure la Alineación a la derecha y el Margen personalizado al 10% en la pestaña Diseño.

Dentro de la fila de una sola columna, agregue un módulo Imagen en la parte superior (A en la imagen de arriba) y un módulo Llamado a la acción (B) debajo. Vaya primero a la configuración del módulo Imagen y cambie estos valores en la pestaña Diseño:

• Sombra de caja: Opción 2
• Dimensionamiento, Ancho: 60%
• Filtros, modo de fusión: superposición

El filtro de modo de fusión es increíblemente importante porque así es como te asegurarás de que cualquier elemento debajo de la imagen (el módulo CTA en este caso) se superpondrá y permanecerá encima de la imagen. Así es como estás evitando el CSS flotante y del eje z. El filtro ayuda a la visibilidad y el color, mientras que los márgenes negativos y el relleno afectan el posicionamiento.

Configuración del módulo de texto

En la configuración del módulo de texto, ajustará muchas cosas.

1. Pestaña de contenido: complete el título que desee para un título, el texto del botón para convertir su tráfico y el área de contenido será cualquier copia que desee superponer sobre la imagen.
2. Fondo: rgba(57.37,145,0.43). La parte importante es el 0.43 o el control deslizante más a la derecha. Ese es el porcentaje de opacidad, o cuánto puedes ver a través del fondo mismo.
3. En la pestaña Diseño, el color del texto debe ser Claro
4. Espaciado: para mover el cuadro de CTA debajo de la imagen, hará un margen superior de -30% y un margen derecho de 30%. Ahora deberían estar superpuestos.
5. Dimensionamiento, Ancho: 60%
6. Sombra de caja: segunda opción
7. Botón: use un estilo personalizado, luego configure el texto en blanco (#ffffff) y el color del borde del botón en #8BD9D5, que será del mismo color que el fondo de nuestra segunda sección. Entonces, si estás cambiando eso, cambia esto también.
8. La alineación de los botones debe estar a la izquierda.

Y finalmente, volverá a la configuración de su Sección y establecerá un divisor inferior. Elegirá la opción superior del menú desplegable (una inclinación), volteará el divisor y establecerá el color en #8BD9D5 para que coincida con la próxima sección. Asegúrese de que la Disposición de divisores esté configurada en «Debajo del contenido de la sección» para que el contenido de la siguiente sección también aparezca encima, a medida que ajusta sus márgenes. Una vez que esté en su lugar, habrá terminado con su primera superposición transparente de varios niveles sin CSS. ¡Felicitaciones! Debería parecer que los ha alineado usando diferentes valores del eje z y otro código de posicionamiento.

Creando la Sección Dos

En primer lugar, crear la sección central es exactamente igual que la primera. Sin embargo, cuando estás en la configuración, estamos jugando un poco con el fondo.

• Establezca el color de fondo debajo de la primera pestaña en #8BD9D5.
• Agregue su imagen de fondo en la tercera pestaña. Use una imagen simple de un solo sujeto con un fondo transparente y use Portada como su tamaño.
• Seleccione Luminosidad como Mezcla de imagen de fondo para hacer coincidir los colores (si elige usar parallax, la mezcla de colores no funcionará).
• En la pestaña de diseño, proporcione la sección 60px Relleno superior en Espaciado.

Fila 1

Ahora, deberá agregar una fila de doble columna con un módulo de imagen a la izquierda y un control deslizante a la derecha. Cuando se agreguen, vaya a Configuración de fila.

Solo tiene dos cambios aquí: haga que el fondo sea negro con una opacidad del 38% y agregue la misma sombra de cuadro que antes.

Imagen de esquina

Ahora es el momento de configurar la imagen que está flotando sobre la esquina. Dentro de la configuración del módulo Imagen, cargue su imagen. Nuevamente, este funciona mejor con un PNG transparente, solo por efecto. Vamos a superponer la imagen en la esquina, por lo que una forma que no sea un ángulo de 90 grados se verá mucho mejor. Una vez hecho esto, la pestaña Diseño espera.

1. Alineación de imagen: Izquierda
2. Centrar siempre la imagen en el móvil: sí (simplemente se ve mucho mejor y conserva la superposición superior)
3. Margen superior: -25 %, Margen inferior: 15 %, Margen izquierdo: -25 %

Esos márgenes negativos le permiten obtener esa imagen donde la necesite en la página, y debido a que configuró el divisor para que esté debajo del contenido, también flotará sobre eso.

Módulo deslizante

Para el Módulo deslizante, es un poco más complicado porque tiene que agregar diapositivas individuales con sus propias imágenes y demás. Sin embargo, no es tan malo. Lo principal a lo que querrá prestar atención es si está en la  configuración del control deslizante  o en la  configuración de una diapositiva individual.

El elemento principal que le preocupa en la configuración general del  Control deslizante es el Margen personalizado en la pestaña Diseño. Ajústelo a -30%. Las imágenes de las diapositivas siempre aparecerán ligeramente por encima del fondo de la fila de esta manera, atrayendo más atención de lo que normalmente reciben los controles deslizantes.

1. Agrega una diapositiva. En la pestaña Contenido, el encabezado y el texto del botón son los más importantes. Si desea una copia descriptiva, hágalo con el cuadro de contenido.
2. También debe agregar una imagen de diapositiva en la pestaña de contenido. También es bueno ser un PNG transparente de un solo elemento de enfoque aquí. Las imágenes redondas también funcionan bien aquí. Los de bordes cuadrados se ven fuera de lugar.
3. En la configuración de la diapositiva, puede cambiar el fondo de cada diapositiva individual. No. Lo que quiere hacer es ajustar el control deslizante de opacidad al 0%. Cualquier otra cosa chocará con el fondo de la fila.
4. Configure el texto del título para que tenga versalitas.
5. Configure el botón en versalitas también.

Fila 2

La siguiente fila es genial, si me preguntas. Usaremos un módulo Testimonial aquí, así como texto e imágenes para lograr un par de efectos de superposición diferentes. Agregaremos relleno para extender un módulo más allá de sus límites, mientras tomamos otra imagen y la apoyamos sobre el nuevo relleno, para que parezca que la figura está sentada en el borde.

La única configuración que realmente necesita cambiar para esta fila está en la pestaña Diseño. Asegúrese de que la opción «Hacer esta fila de ancho completo» esté activada. La diferencia que esta única opción puede hacer para el espaciado es asombrosa.

Dos imágenes, configuraciones similares

Las dos imágenes de esta fila tienen configuraciones muy similares. También son bastante simples para que sus superposiciones funcionen.

1. Ancho: 85 % para la imagen de la izquierda, 100 % para la imagen de la derecha
2. Espaciado -160 px Inferior y -210 px Márgenes izquierdos para la imagen de la izquierda, y déjelo como predeterminado para la derecha
3. Ambas imágenes deben estar alineadas a la izquierda y siempre centradas en el móvil.
4. Para la imagen de la izquierda, deberá ajustar el espaciado del punto de interrupción. Para este, será un margen inferior del -13%. No será necesario realizar cambios en el correcto.

Módulo Testimonial

El módulo Testimonial tiene muchas partes móviles, pero ninguna de ellas es realmente complicada. Solo tienes que jugar con él para alinear todo. Si lo desea, también puede hacer la mayor parte de esto con el módulo de texto, pero personalmente me gusta el estilo del testimonio.

1. Complete el nombre y la información del autor del testimonio. El testimonio en sí irá en el cuadro de contenido.
2. Debajo del área de texto, puede activar o desactivar el ícono de cotización, según sus decisiones. Se alinea al centro con el texto.
3. En la pestaña Diseño, está agregando un 60 %  de relleno a la izquierda del módulo. No Margen . Ese 60% de relleno es donde está sentado Silent McCroft en la imagen de arriba.
4. Debajo del Texto del cuerpo, vuelva a usar Small Caps, y puede agregar un Box Shadow si lo desea. Lo hago, así lo hice.
5. Con el filtro de modo de fusión, esta vez usará «Aclarar». La transparencia del fondo del testimonio llama la atención sobre el hecho de que en realidad no estamos ajustando el eje z de los elementos. Usamos el filtro Aclarar para evitar que los colores se mezclen, dando la ilusión de que la imagen se representa en la parte superior, en lugar de volver a colorear.
6. Para el fondo en sí, estamos usando solo la pestaña de degradado (la segunda) en lugar de un color de fondo. Si es necesario, configura el fondo al 0% de opacidad como antes. De lo contrario, solo use un degradado lineal con una dirección de degradado de 155 grados, una posición inicial del 8 % y una posición final del 100 %.
7. El primer color debe ser Negro (#000000) con 50% de opacidad, y el segundo debe ser Púrpura (#392591) con 100% de opacidad.

Módulo de texto

Finalmente, tenemos el módulo de texto a la derecha. En lugar de un testimonio para su negocio, tal vez, quería usar esto como una sección de eventos destacados o incluso como una biografía de un miembro del equipo. El estilo es muy similar al testimonial. Utiliza los mismos colores de fondo degradados, por lo que puede simplemente copiarlos y pegarlos en la configuración del módulo. ¡Estas casi listo!

1. Rellene el área de texto como desee. He usado etiquetas H2 y H3 para dar diferentes encabezados y subtítulos, como nombre y posición. Luego escribí una descripción rápida en el área de contenido.
2. Para el diseño del texto lo hice todo en color Claro y, una vez más, en Pequeñas Letras.
3. La misma sombra de caja rodea el módulo.
4. El área de espaciado es donde las cosas se ponen divertidas. Queremos un margen negativo por encima de -200 px, lo que empuja el módulo en línea con la imagen con la que está apilado. Eso hará que el texto sea ilegible. Por lo tanto, también debemos agregar un  Relleno de 200 px, para volver a colocar las palabras en su posición original, mientras mantenemos el fondo degradado detrás de la imagen del Capitán Runnerpants y su Mindfulness Stick. También debe agregar un relleno de 45 px a la izquierda y a la derecha, así como un relleno de 15-25 px en la parte inferior. Eso lo mantendrá agradable y estable en múltiples tamaños de pantalla.

Finalmente, agregará un divisor inferior a la sección misma. Esta vez, opté por una inclinación negra sólida y un fondo de sección negro sólido como contraste con la sensación más suave de las dos secciones superiores.

La sección final

La tercera y última sección que quería superponer utilizando transparencias integradas. Siempre me han gustado los fondos que se fusionan con los elementos apilados con ellos, así que tomé una imagen con un fondo transparente de una mujer y quise superponer el formulario de contacto Divi sobre ella.

Literalmente, el único cambio que hacemos en la configuración de la sección es darle un fondo negro. Así que haz eso primero. Entonces necesita una fila de una sola columna y ni siquiera tiene que tocar la configuración. De nada. Todo lo que tiene que hacer ahora es agregar un módulo de imagen y un módulo de formulario de contacto. Cuando haya terminado, abra la configuración de la imagen. Solo cambiará una sola opción aquí: el margen inferior.

• Escritorio: -350px
• Tableta: -100px
• Teléfono inteligente: -50px

Eso es todo. Ni siquiera se necesitan muchos ajustes para que se alineen. La Dama del formulario de contacto es fácil de configurar. ¿Y en cuanto a la configuración del formulario de contacto? No tienes  que hacer nada. Este ejemplo utiliza únicamente el estilo predeterminado. Dado que es transparente cuando se agrega al diseño, el fondo PNG se integra perfectamente.

Sin embargo, si desea un cambio visual muy sutil en el formulario de contacto, vaya a la pestaña Diseño y cambie el Filtro de modo de fusión a «Pantalla». Si lo hace, los campos de la firma se volverán  ligeramente translúcidos, por lo que verá un débil fantasma de la imagen detrás de él. Estos son los tipos de efectos que hacen sonreír a los visitantes del sitio. No es exactamente una microinteracción, pero tiene el mismo tipo de efecto.

Un poco genial, ¿eh?

¡Eso es todo y eso es todo!

Con suerte, pensaron que fue tan divertido como yo. Ser capaz de hacer cosas geniales como superposiciones y diseños de varias capas sin CSS es genial. Entonces, si alguna vez está buscando una manera de darle vida a sus diseños, piense en hacer que las cosas sean transparentes. Mueva las imágenes y los elementos con márgenes negativos, y estará bien encaminado para llevar sus diseños a un nivel completamente nuevo.

¿Cuáles son algunos trucos de diseño que has usado para hacer que los elementos interactúen de formas nuevas e interesantes?