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

Actualizado el 20/03/2020 | Publicado el 17/01/2020 | 16 comentarios

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:

Ouvrir les réglages section Divi
Abra la configuración de la sección Divi

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

Ajouter image de fond section Divi
Añadir imagen de fondo en la sección Divi
  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.
ajouter un dégradé sur un image Divi
Añadir un gradiente en una imagen de fondo Divi
  1. Siempre en la pestaña Contenido > Fondo.
  2. Esta vez, seleccione el icono del gradiente.
  3. Elige los dos colores que formarán tu degradado. Para mi ejemplo, he elegido un malva transparente y un amarillo sólido.
  4. 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.
  5. 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).
gradient + parallaxe Divi
Código CSS para habilitar la superposición de gradientes con el efecto parallax de Divi

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:

  1. Todavía en la configuración de la sección, vaya a la pestaña Avanzado
  2. 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;
  1. 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:

¿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.

superposition de dégradé sur une image parallaxe Divi
dégradé sur une image parallaxe Divi
Gradient overlay on parallax background

1.081 palabras

4

A ti también te debería gustar:

Appliquer des masques et des formes sur vos images avec Divi

Aplica máscaras y formas a tus imágenes con Divi

Las máscaras hacen que tus imágenes parezcan más gráficas y dan a tu diseño un aspecto original. ¿Sabías que puedes crearlos fácilmente con el Constructor Visual de Divi? Te muestro cómo en este tutorial y en este vídeo.

16 Commentaires

  1. Jean-Marc

    Hello Lycia,

    Super tips !

    * « si je dois continuer, tout simplement » -> ah oui carrément ;))

    Merci à toi ! @+ Jean-Marc

    PS : suis déjà abonné !

  2. Lycia Diaz

    Merci Jean Marc 🙂

  3. Jean-Luc Robert

    Salut Lycia
    Pour commencer j’aimerais te dire un grand merci pour ce tuto, j’en avais besoin.
    Ensuite te féliciter pour la vidéo, car je sais que ce n’est pas facile de s’enregistrer en face d’une caméra, c’est même un challenge, j’ai essayé juste comme ça pour m’amuser, et j’ai vite abandonné.
    Pourtant j’ai l’habitude de parler en face d’un public.
    Alors si tu continue, nous en profiterons et toi je pense que ça sera de plus en plus facile où en tout les cas tu prendra plus d’assurance et de plaisir.
    Voilà pour ce que j’en pense et surtout encore félicitation et merci.

  4. Lycia Diaz

    Merci Jean Luc 😉

  5. Donetti

    Bonjour Lycia,

    Merci pour ce post. Très simple. Très bien expliqué.

    Grâce à tes tutos, ma culture DIVI s’agrandit et donne des idées créatives intéressantes. Donc on continue ! ;oD

    Bonne journée
    JC

  6. Lycia Diaz

    Merci JC ! 😉

  7. LC

    Magnifique astuce ! Merci beaucoup, je suis tombé dessus par hasard en cherchant justement comment faire 🙂 Et toujours très bien expliqué, super !

  8. PAGNIER

    Bonjour Lycia,

    Merci pour ce tutoriel très intéressant mais j’ai un problème.

    Ça fonctionne parfaitement sur Mac, Pc windows et smartphones android mais sur l’iphone que j’utilise pas du tout.

    Je sais qu’on peut désactiver le parallaxe sur téléphone mais bon c’est dommage si tu as une solution je suis preneur.

    Merci beaucoup.

  9. Lycia Diaz

    Tu es sûr que ça marche pas sur iPhone ?
    Je crois que j’ai une soluce pour toi : https://astucesdivi.com/parallaxe-mobile-divi/
    Je suppose que tu dois coupler les deux tutos pour que ça fonctionne.

  10. Mathieu PAGNIER

    Re bonjour Lycia, non malheureusement ça ne fonctionne pas sur Apple mais parfaitement sur mon Android.

    J’ai testé aussi sur ton site et le problème est identique.

    Après je pense que c’est peut être la version de l’iphone c’est un 6s, peut être que ça marche mieux sur les modèles récents.

    J’ai essayé de cumuler avec le tutoriel sur la parallaxe mobile et le JS mais rien n’y fait.

    Si tu veux aller jeter un coup d’œil en cette période de confinement : https://mathieupagnier.com

  11. Mathieu PAGNIER

    Encore moi, du coup non le problème ne vient pas de la version de l’iphone, je viens de tester sur le 11 et ça ne fonctionne toujours pas malheureusement….

  12. Aumont David

    Bonjour Lycia,

    Un grand merci pour cet article tutoriel car il est vrai que c’était vraiment un problème.

    Et votre site est une mine d’information pour les utilisateurs DIVI

    Encore merci.

    Amicalement

  13. Lycia Diaz

    Merci David

  14. 7hil

    Bonsoir Lycia, comme d’habitude un tuto au top !
    MERCI

  15. Lycia Diaz

    Merci

  16. Chris Tierney

    Merci Lycia!

    Bonne astuce – J’aime normalement placer mon CSS dans la feuille de style mais cela fonctionne très bien!

    Merci Merci Merci!

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto