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.
27 Comentarios