Cómo crear un fondo de imagen de paralaje con una superposición de degradado combinado en Divi
Publicado: 2022-08-03En versiones anteriores de Divi, agregar una superposición de degradado a una imagen de fondo de paralaje no era una opción integrada. Pero, con las nuevas opciones de fondo de Divi (y Gradient Builder), puedes crear fácilmente hermosos fondos de paralaje con innumerables diseños de superposición de degradados.
En este tutorial, le mostraremos cómo usar las opciones de fondo de Divi para agregar una superposición de degradado de colores que se combina con una imagen de fondo utilizando los métodos True y CSS Parallax.
Vistazo
Aquí hay un vistazo rápido a los diseños de fondo que construiremos en este tutorial.
Este primero tiene una superposición de degradado con el modo de combinación de colores utilizado en la imagen de fondo utilizando el método True Parallax.
Y aquí está el mismo diseño usando el Método CSS Parallax. Observe que el degradado permanece fijo/adjunto a la imagen de fondo para que parezca ser parte de la imagen real y no solo una capa.
Y aquí hay un ejemplo de una superposición de degradado que usa paradas de color semitransparentes sin un modo de fusión.
El concepto
La idea básica de este diseño implica dos pasos:
1. Cree un degradado de fondo para una sección con el generador de degradados y asegúrese de colocar el degradado sobre la imagen de fondo.
2. Agregue una imagen de fondo a la misma sección que use uno de los métodos de paralaje y el modo de mezcla de colores.
Esto permitirá que el degradado de colores se superponga a la imagen de paralaje mientras se mueve al desplazarse hacia abajo en la página. El modo de mezcla de colores fusiona la superposición de degradado con la imagen para obtener una hermosa imagen que se ve muy bien con paralaje.
Descarga el diseño GRATIS
Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Ganar
Para acceder a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily utilizando el formulario a continuación. como nuevo
suscriptor, ¡recibirás aún más bondades de Divi y un paquete Divi Layout gratis todos los lunes! Si ya estás en el
lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será "resuscrito" ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Compruebe su dirección de correo electrónico para confirmar su suscripción y obtener acceso a los paquetes de diseño Divi semanales gratuitos!
Para importar el diseño de la sección a su Biblioteca Divi, haga lo siguiente:
- Navega a la Biblioteca Divi.
- Haga clic en el botón Importar en la parte superior de la página.
- En la ventana emergente de portabilidad, seleccione la pestaña de importación
- Elija el archivo de descarga desde su computadora (asegúrese de descomprimir el archivo primero y use el archivo JSON).
- Luego haga clic en el botón importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi.
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción "Construir desde cero".
- ¡Ahora ten un lienzo en blanco para empezar a diseñar en Divi!
Cómo crear un fondo de imagen de paralaje con una superposición de degradado combinado en Divi
1. Cree la fila de relleno y el texto del encabezado
Aunque nos centraremos en el diseño de fondo de la sección para este tutorial, tiene sentido agregar una fila de relleno y un encabezado para tener una mejor idea de cómo se verá el diseño en un caso de uso normal.
Para comenzar, agregue una fila de una columna a la sección existente en el generador.
A continuación, agregue un módulo de texto a la fila/columna.
Configuración de texto
Abra la configuración del módulo de texto. En la pestaña Contenido, agregue un encabezado H2 al contenido del cuerpo.
<h2>Say Hello to Divi</h2>
En la pestaña de diseño, actualice las opciones de encabezado y el ancho máximo de la siguiente manera:
- Encabezado 2 Fuente: Inter
- Encabezado 2 Peso de fuente: Negrita
- Título 2 Color del texto: #fff
- Título 2 Tamaño del texto: 8vw
- Encabezado 2 Altura de línea: 1,2 em
- Título 2 Sombra de texto: ver captura de pantalla
- Intensidad de desenfoque de sombra de texto de título 2: 0,28 em
- Título 2 Color de sombra de texto: #10076d
- Ancho máximo: 50%
Configuración de fila
Ahora que el encabezado está en su lugar, actualicemos el tamaño y el espaciado de las filas para que sea más receptivo.
Abra la configuración de la fila. En la pestaña Diseño, actualice lo siguiente:
- Ancho: 100%
- Ancho máximo: 80vw
- Acolchado: 15vw arriba, 15vw abajo
2. Diseña el Fondo Degradado para la Sección
Ahora que el contenido de relleno está completo, estamos listos para comenzar a diseñar el fondo degradado de nuestra sección.
Configuración de degradado de fondo
Abra la configuración de la sección. En la pestaña Contenido, seleccione la pestaña de degradado en las opciones de fondo y actualice las opciones de degradado de la siguiente manera:
- Parada de gradiente 1: #0094ff (al 0 %)
- Parada de gradiente 2: #ff00c7 (al 25 %)
- Parada de gradiente 3: #0094ff (al 50 %)
- Parada de gradiente 4: #ff00c7 (al 75 %)
- Parada de gradiente 5: #0094ff (al 100 %)
- Tipo de degradado: Circular
- Posición del degradado: abajo a la izquierda
- Coloque el degradado sobre la imagen de fondo: SÍ
3. Agregue una imagen de fondo Parallax con el modo de mezcla de colores
Una vez que se completa el diseño del degradado, estamos listos para agregar nuestra imagen de fondo de paralaje. Luego, aplicaremos el modo de combinación de colores para combinar el diseño degradado con la imagen de fondo para obtener un hermoso diseño de fondo de paralaje.
Configuración de la imagen de fondo
Estando en las opciones de fondo de la sección, selecciona la pestaña Imagen de fondo y sube una imagen de fondo . La actualización lo siguiente:
- Usar efecto de paralaje: SÍ
- Método de paralaje: verdadero paralaje
- Mezcla de imagen de fondo: Color
¿Por qué el modo de mezcla de colores?
El modo de combinación de colores combina una versión en escala de grises de la imagen con los colores (tono y saturación) del degradado. Esto conserva la calidad visual de la imagen con un esquema de color completamente nuevo.
4. Agregue una máscara de fondo (¿por qué no?)
Para terminar el diseño, agreguemos una máscara de fondo que se colocará detrás de nuestro encabezado para hacer que el texto resalte un poco más y enfatice el efecto de paralaje.
Configuración de máscara de fondo
Mientras esté en las opciones de fondo de la sección, seleccione la pestaña Máscara de fondo y actualice lo siguiente:
- Máscara: Cuchillas
- Transformación de máscara: voltear horizontalmente, invertir
- Tamaño de la máscara: Tamaño personalizado
- Ancho de la máscara: 72vw
- Posición de la máscara: arriba a la derecha
5. Agregue un espacio de desplazamiento temporal para la prueba
Antes de ver los resultados finales, debemos agregar algo de espacio arriba y abajo de nuestra sección para que tengamos suficiente espacio de desplazamiento para ver el efecto de paralaje en acción. Para hacer esto, simplemente agregue el siguiente margen a la sección:
- Margen: 80vh arriba, 80vh abajo
No olvide eliminar este espacio cuando agregue la sección a su propia página.
Resultados finales
Echemos un vistazo al resultado final en una página en vivo.
Y aquí está el mismo diseño usando el Método CSS Parallax. Observe que el degradado permanece fijo/adjunto a la imagen de fondo para que parezca ser parte de la imagen real y no solo una capa.
Usar una superposición de degradado sin el modo de fusión
Aunque me encanta el modo de fusión para este diseño, es posible que sienta la necesidad de una superposición de degradado más tradicional para su imagen de fondo de paralaje.
Por ejemplo, puede optar por no agregar un modo de fusión al diseño y simplemente darle a cada una de las paradas de color del degradado un color semitransparente. Esto le permitiría ver una representación más sutil de la imagen de fondo detrás de la superposición de degradado.
Para hacer esto, puede reducir la opacidad de cada color a algo así como 72% y luego establecer la opción de mezcla de imagen de fondo en Normal.
Aquí hay un ejemplo de cómo se vería esto.
¡Prueba más degradados!
Gradient Builder puede crear muchos más colores y tipos de degradados que puede usar para hacer que estos diseños de fondo en capas se destaquen. Puede ver nuestras demostraciones en vivo de más posibilidades de diseño de degradado de fondo.
Pensamientos finales
La creación de un diseño de fondo de paralaje con una superposición de degradado combinado se puede hacer fácilmente usando las opciones de fondo integradas de Divi. Realmente te da el poder de Photoshop en Divi como nunca antes. Siéntase libre de explorar diferentes combinaciones de colores con innumerables paradas y posiciones de colores degradados. Además, también puedes experimentar con diferentes modos de fusión.
Con suerte, esto será útil para su propio sitio web o su próximo proyecto.
Espero escuchar de usted en los comentarios.
¡Salud!