Si usas Divi regularmente, debes haberte dado cuenta que Añadiendo una superposición gradiente Y Añadiendo un efecto paralaje no son compatibles imágenes de fondo de sus secciones Divi. En otras palabras: un gradiente en una imagen de eje paralelo es imposible con Divi !
Estoy bien consciente de que todas estas palabras pueden asustar porque es una jerga muy particular que mezcla términos de inglés con la jerga de la web.
Pero no te preocupes, vamos a discutir esto en detalle, y, como bono, veremos cómo hacer esto posible. con una línea de código CSS simple (comienzo ideal)
Aquí hay un video que explica lo que podrás hacer con el contenido de este artículo:
1 – ¿Qué es una superposición o un gradiente superpuesto?
En WebDesign, el término "overlay" significa un "overlay".
El término se utiliza a menudo "overlay" Cuando hablas de un imagen. En realidad es un capa de color que se coloca sobre una imagen. Este color a menudo se mezcla con opacidad para preservar el visual Imagen de fondo.
Uno gradiente-overlay por lo tanto, overlay color en gradiente sobre una imagen.
El superpuestas a menudo se propone mejorar el diseño de una imagen clicable.
Por ejemplo, es bastante común ver el imágenes avanzadas de artículo del blog con una superposición cuando el ratón pasa e incluso un icono que aparece.
En el nivel UX (experiencia del usuario) esto permite al usuario entender que la imagen es clicable.
2 - ¿Qué es un "efecto paralaje"?
Esta no es la primera vez que nos hemos acercado a parallax term en este blog!
Efecto paralaje es una práctica bastante común en webdesign. La renderización visual es a menudo muy exitosa y da profundidad a su Divi layouts.
Gracias al paralaje, puede fijar sus imágenes de fondo durante el pergamino (CSS parallax), o puede desincronizar el pergamino de fondo con el pergamino del plano superior (paralax real)... Veremos todo esto en un video explicativo.
Sin embargo, en un artículo anterior vimos que El efecto paralaje fue caprichoso en la versión móvil... Lo mismo para este artículo: va a plantear algunos problemas... que resolveremos en 2 veces 3 movimientos!
¿Sabes que puedes probar Divi gratis? Nos vemos en esta página y haga clic en "Pruébalo GRATIS"
3 – Opciones Divi: ¡No puede asociar ambos!
Sí, sí. añadir un gradiente a una imagen paralaje Este artículo no tendría que existir.
¡Pero no lo es!
A veces notamos errores o inconsistencias dentro de nuestra favorito Palabra Herramientas de prensa. Creemos que se arreglarán rápidamente... ¡No!
No me digas que Elegant Themes no es consciente de esta preocupación por el gradiente en una imagen paralela!
Como sea, ya que no se hace nada... Propongo una solución simple, rápida y eficiente!
Este vídeo explica todo el procedimiento para permite un gradiente en una imagen de eje paralelo :
4 - Permitir un gradiente en una imagen de eje paralelo: explicaciones!
Como podía ver en el video anterior, añadir un gradiente a una imagen paralaje no es complicado. Especialmente ya que Divi pone todas las herramientas disponibles para llegar fácilmente y rápidamente!
Volvamos a estos pasos:
En primer lugar, debe editar los parámetros de la sección (o módulo) que contiene su imagen de fondo:
Simplemente haga clic en el icono de rueda dentada... Un popup abrirá:
- En la pestaña Contenido > Antecedentes
- Seleccione el icono de imagen de fondo e importar su imagen desde la biblioteca de medios o desde su unidad local.
- Bajo ninguna circunstancia comprobar la opción "Efecto paralaje de uso".
- Siempre en la pestaña Contenido > Antecedentes.
- Seleccione el icono gradiente esta vez.
- Elige los dos colores que componen tu gradiente. Por mi ejemplo, elegí una púrpura transparente y un amarillo completo.
- Define tus opciones de gradiente: lineal o radial. Luego establece la posición inicial y final. Esto tendrá un impacto en el diseño del gradiente.
- No olvides revisar la opción « imagen de fondo del título ». Esto permite colocar el gradiente sobre la imagen de fondo (como se explica en el vídeo).
Por último, necesitará añadir algunos CSS para obtener un efecto paralaje en su imagen con un gradiente superpuesto :
- Siempre en la configuración de la sección, vaya a pestaña avanzada
- In "Elemento principal", introduzca esta línea de código CSS:
background-attachment: fixed;Esto line of code is sufficient to achieve the expected effect 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;- Recuerda salvar tus cambios.
Si quieres saber más sobre la propiedad CSS "background", te aconsejo que leer este artículo que explica detalladamente esta propiedad y sus valores. Esto le permitirá entender qué llamadas CSS puede hacer para gestionar sus imágenes de fondo.
5 - Un gradiente en una imagen paralaje: una historia de gusto... o WebDesign!
Si usted regularmente lee este blog, usted debe haber entendido que soy un "aficionado incondicional" de desplazamiento y paraleloxe hola hola hola hola!
Recuerda:
- Footer Unveiling en Scroll
- Scroll in a mockup
- Imagen que se desplaza hacia el ratón
- Menu que se une al pergamino
- Menú de pie
- Etc.
¿Es una historia de gusto? ¿Tal vez una historia de rediseño o una historia de tendencia?
¿Todavía es que un sitio web que no usa dinámicas de paralaje ni desplazamiento es tan... aburrido?
Sí y no...
Todo depende de qué tipo de sitio estamos. Por ejemplo, el sitio web fiscal o el sitio web de CNIL no utiliza este tipo de diseño... ¿Por qué? Son sitios institucionales que no pueden permitirse... Pero para todos los otros temas del sitio, ¿por qué no?
El gradientes y el fondo en eje paralelo traer dinamismo, identidad, emoción...
¿Y tú? ¿Qué piensas?
Descubre muchos otros consejos y recursos directamente en el blog de Elegantthemes.
Hello Lycia,
Super tips !
* « si je dois continuer, tout simplement » -> ah oui carrément ;))
Merci à toi ! @+ Jean-Marc
PS : suis déjà abonné !
Merci Jean Marc 🙂
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.
Merci Jean Luc 😉
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
Merci JC ! 😉
Magnifique astuce ! Merci beaucoup, je suis tombé dessus par hasard en cherchant justement comment faire 🙂 Et toujours très bien expliqué, super !
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.
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.
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
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….
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
Merci David
Bonsoir Lycia, comme d’habitude un tuto au top !
MERCI
Merci
Merci Lycia!
Bonne astuce – J’aime normalement placer mon CSS dans la feuille de style mais cela fonctionne très bien!
Merci Merci Merci!
Bonjour,
Merci pour ce tuto.
Je rencontre également un souci sur affichage iPad, iPhone. J’ai mis un dégradé noir au dessus d’une image de fond et utilisé background-attachment : fixed pour avoir un effet parallaxe. Malheureusement sur iPhone et iPad, le fond de cette section est noir.
J’ai inséré le script présent sur le second tutoriel et ça n’a pas eu d’impact.
Depuis la rédaction de cet article, quelqu’un a-t’il trouvé une solution pour ce souci?
Merci encore et bonne journée,
Céline
Salut Celine. Ça doit fonctionner, il faut vérifier si le code que tu as inséré est bon, quelque fois ça peut mal s’écrire en faisant un copié-collé
Bonjour,
Magnifique tuto comme d’habitude, mais pour moi, cela ne fonctionne pas. J’ai vérifié et je n’ai fait aucune erreur.
Est ce qu’entre temps, Divi a modifié quelque chose qui rend la manip’ inopérante ?
Je ne sais pas mais en tout cas l’overlay dégradé n’apparait pas…
Fileri, ça doit marcher, j’en ai fait un il n’y a pas longtemps. Divi n’a rien changé
Bonjour Lycia et merci pour ta réactivité.
J’ai de nouveau vérifié. Je ne comprend pas. Regardes par toi-même : https://combidream.fr
Il s’agit de la section entre le mur d’images et la section Instagram.
Quand je regardes via la console, je vois pourtant bien la prise en compte du CSS :
https://zupimages.net/viewer.php?id=21/42/3x7c.jpg
Là, je sèche…
Bon… Je reviens un peu honteux…
Honteux de ne pas avoir lu SCUPULEUSEMENT ce tuto et de t’avoir fait perdre un temps précieux. J’étais persuadé qu’il fallait activer le parallaxe vu qu’on veut un dégradé en parallaxe.
Mais je n’ai pas bien lu. Il ne faut SURTOUT PAS l’activer, même s’il est encadré dans ce tuto (voir le point 3 ci-dessus). Et le résultat qu’on obtient en back office, quand on suit pas à pas le tuto (déformation de l’image de fond), m’a tellement dérouté que je n’ai pas vérifié le rendu en front office qui, lui, est parfait.
Moralité : un tuto se lit avec concentration et vérifiez bien le rendu en front office avant de conclure que la manip ne fonctionne pas.
Merci Lycia;)
Merci Jean Marc
Bonjour Lycia,
Belle année à toi !;)
Me revoilà de nouveau. .. Je m’aperçois que la manip ne fonctionne ni sur tablette, ni sur smartphone Apple. Est ce que tu rencontres le même problème ?
J’ai mis en place ce qui est indiqué içi : https://astucesdivi.com/parallaxe-mobile-divi/
Mais rien n’y fait. La manip fonctionne sur un Mac, un Pc, peu importe les navigateurs. Mais dès qu’on est sur une tablette Apple ou iPhone, ça ne fonctionne plus, et ce, avec n’importe quels navigateurs.
Voici le site le question : https://combidream.fr
A très vite;)
JM
Hello Jean Marc ! As-tu suivi le tutoriel à la lettre ? Car ça marche et c’est justement le but de ce tuto 😉 peut-être un souci de cache ou de classe CSS ?
Bonjour Lycia,
Me revoilà de nouveau avec toujours le même problème non résolu.
Je précise que je ne fais pas d’erreur de code puisque l’effet fonctionne parfaitement sur mon Realme 7pro qui tourne sous Android. Le problème ne se pose QUE sur iPad et iPhone. Aucun problème sur iMac, macbook, pc, tablettes et smartphone sous Android.
Je suis allée sur le site du créateur du code qui est dans ce tuto : https://astucesdivi.com/parallaxe-mobile-divi/
Il a mis un exemple en bas de sa page : https://divihype.com/how-to-add-mobile-parallax-to-your-divi-website/
Là, ça fonctionne. Mal parce que ca saccade quand on scroll, mais l’effet parallaxe est bien là.
Pourtant, je vois bien dans les commentaires que beaucoup d’autres personnes rencontrent le même problème que moi.
Mais malgré des heures de recherche, je ne vois pas d’où vient le problème…
Ah tu m’en vois désolée. Il faudrait investiguer plus profondément. Car dans mon tuto, ça marchait bien. Mais je n’ai pas réessayé.