Superposición de degradado sobre un fondo de paralaje en una sección de Divi: ¡es posible!

Si usas Divi con regularidad, te habrás dado cuenta de que añadir una superposición de degradado Y añadir un efecto parallax no son compatibles en las imágenes de fondo de tus secciones Divi. En otras palabras: ¡una superposición de degradado en una imagen de paralaje es imposible con Divi!

Soy consciente de que todas estas palabras pueden asustar porque es una jerga muy particular que mezcla términos ingleses y jerga web.

Pero no te preocupes, vamos a cubrir todo esto en detalle, y como extra, vamos a ver cómo hacer esto posible con una simple línea de código CSS (ideal para principiantes)!

Aquí tienes un vídeo que explica lo que puedes hacer con el contenido de este artículo:

Anuncio: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - ¿Qué es una superposición o una superposición de gradiente?

En WebDesign, el término " overlay " se refiere a una "superposición".

El término "superposición" se utiliza a menudo cuando se habla de una imagen. De hecho, se trata de una superposición de color que se coloca encima de una imagen. Este color se aplica a menudo con una opacidad para preservar la visual de la imagen de fondo.

Una superposición de degradado es, por tanto, una superposición de color en degradado sobre una imagen.

El superposiciones se proponen a menudo para mejorar el diseño de una imagen clicable.

Por ejemplo, es bastante común ver imágenes destacadas de un artículo del blog con una superposición al pasar el ratón e incluso un icono que aparece.

A nivel de UX (experiencia de usuario), esto permite que el usuario entienda que la imagen es clicable.

2 - ¿Qué es el "efecto de paralaje"?

No es la primera vez que término de paralaje en este blog!

El efecto parallax es una práctica habitual en el diseño web. La representación visual suele ser muy acertada y da profundidad a su Diseños de Divi.

Gracias al parallax, podrás fijar tus imágenes de fondo durante el scroll (parallax CSS), o podrás desincronizar el scroll del fondo con el scroll del plano superior (parallax real)... Todo esto lo veremos en un vídeo explicativo un poco más abajo

Sin embargo, en un artículo anterior, vimos que el efecto parallax era caprichoso en la versión móvil... Lo mismo ocurre con este artículo: nos causará algunos problemas... ¡que resolveremos en poco tiempo!

¿Sabías que puedes probar Divi gratis? Ir a esta página y haz clic en "PRUEBA GRATUITA

3 - Opciones de Divi: ¡imposible combinar las dos!

Sí, si añadir un gradiente en una imagen de paralaje fuera posible de forma nativa dentro de Divi, este artículo no existiría.

Pero no es el caso.

A veces, nos damos cuenta de errores o inconsistencias en nuestras herramientas favoritas de WordPress. Creemos que se arreglarán rápidamente... ¡Pero no!

No me digas que Elegant Themes no sabe de este problema de gradiente en una imagen de paralaje!

En definitiva, como no se hace nada... ¡propongo una solución sencilla, rápida y eficaz!

Este vídeo explica el procedimiento para permitir un gradiente en una imagen de paralaje:

4 - Permitir un gradiente en una imagen de paralaje: ¡explicaciones!

Como has visto en el vídeo anterior, añadir un degradado a una imagen de paralaje no es realmente complicado. Sobre todo porque Divi nos proporciona todas las herramientas para hacerlo de forma rápida y sencilla.

Repasemos estos pasos en detalle:

En primer lugar, debe editar la configuración de la sección (o módulo) que contiene su imagen de fondo:

Basta con hacer clic en el icono del engranaje... Se abrirá una ventana emergente:

1. En la pestaña Contenido > Fondo
2. Selecciona el icono de la imagen de fondo e importa tu imagen desde la biblioteca de medios o desde tu disco local.
3. No marque la opción "usar el efecto de paralaje" bajo ninguna circunstancia.

4. Siempre en la pestaña Contenido > Fondo.
5. Esta vez, seleccione el icono del gradiente.
6. Elige los dos colores que formarán tu degradado. Para mi ejemplo, he elegido un malva transparente y un amarillo sólido.
7. Defina las opciones de su gradiente: lineal o radial. A continuación, defina la posición inicial y final. Esto tendrá un impacto en el diseño del gradiente.
8. No olvides marcar la opción "imagen de fondo del título". Esto colocará el gradiente por encima de la imagen de fondo (como se explica en el vídeo).

Por último, tendrás que añadir algo de CSS para conseguir un efecto de paralaje en tu imagen con una superposición de degradado:

9. Todavía en la configuración de la sección, vaya a la pestaña Avanzado
10. En el "elemento principal", introduzca esta línea de código CSS:

background-attachment: fixed;

Esta línea de código es suficiente para obtener el efecto deseado, pero podría añadir otros parámetros si el resultado no es adecuado, por ejemplo :

background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
background-size: cover;

11. No olvides guardar los cambios.

Si quieres saber más sobre la propiedad CSS "background", te aconsejo que leer este artículo que explica en detalle esta propiedad y sus valores. Esto le ayudará a entender qué llamadas CSS puede hacer para gestionar sus imágenes de fondo.

5 - Un degradado en una imagen de paralaje: ¡cuestión de gustos... o de WebDesign!

Si lees habitualmente este blog, habrás entendido que soy un "fan incondicional" del scroll y del parallax ¡hola!

Recuerda:

• Pie de página que se revela al desplazarse
• Desplazamiento en una maqueta
• Imagen que se desplaza al pasar el ratón por encima
• Menú que se fija al desplazamiento
• Menú en el pie de página
• Y así sucesivamente.

¿Es una cuestión de gustos? ¿Tal vez una historia de diseño web o una historia de tendencia?

Aun así, un sitio web que no utiliza ni parallax ni dinámica de desplazamiento es tan... ¿aburrido?

Sí y no...

Todo depende del tipo de sitio en el que estemos. Por ejemplo, la página web de Hacienda o la de la CNIL no utilizan este tipo de diseño... ¿Por qué? Se trata de sitios institucionales que no pueden permitírselo... Pero para todos los demás temas de sitios, ¿por qué no?

Los degradados y los fondos de paralaje aportan dinamismo, identidad, emoción...

¿Y tú? ¿Qué te parece?

Descubra muchos otros consejos y recursos directamente en Blog de Elegantthemes.