Cómo agregar superposiciones de color y degradado a Divi Parallax y fondos de video

Las superposiciones de colores y degradados son excelentes elementos de diseño que pueden captar la atención de su audiencia y hacer que su contenido se destaque. Funcionan muy bien con imágenes de fondo. Agregue una imagen de fondo a una sección, fila o columna, agregue una superposición de color o degradado y luego coloque su contenido sobre eso. Sin embargo, un problema es que las superposiciones de color y degradado no funcionan con fondos de paralaje y video en Divi de manera predeterminada.

En este tutorial, le mostraremos cómo agregar superposiciones de color y degradado a fondos con una imagen en paralaje o un video usando un complemento de terceros de nuestro mercado . También veremos las superposiciones trabajando con divisores de sección. Esto normalmente requeriría código, pero con las herramientas adecuadas, no es difícil de implementar para nadie.

Empecemos.

Vistazo

Aquí hay un vistazo a lo que construiremos en este tutorial.

Estoy creando un diseño con un fondo de paralaje en una sección y un fondo de video en otra. El fondo de paralaje tendrá un degradado y el fondo del video tendrá una superposición de un solo color. También diseñaremos los divisores de sección. Estoy usando la página de destino del paquete de diseño de pizzería porque, bueno, pizza. Así es como se ve en un escritorio.

Así es como se ve el mismo diseño en un teléfono.

Fondos de video y paralaje Divi estándar

Las herramientas Divi estándar le permiten agregar imágenes de fondo y videos a secciones, filas y columnas, pero las superposiciones para ellos son limitadas. Para las imágenes de fondo, puede agregar una superposición de degradado pero no una superposición para un color sólido. Las opciones de video no incluyen superposiciones.

Las opciones para las imágenes de fondo incluyen paralaje, pero si habilita el paralaje para la imagen de fondo, la superposición ya no se muestra sobre la imagen. Está desactivado, aunque lo haya seleccionado para mostrar la superposición.

Cómo agregar superposiciones de color y degradado a Divi Parallax y fondos de video

Agregaremos superposiciones de color y degradado a los fondos de video y paralaje usando un complemento de terceros llamado Divi Background Plus. También veremos cómo diseñar los divisores de sección usando este complemento.

Instalar Divi Background Plus

Divi Background Plus está disponible en Divi Marketplace . Veamos cómo empezar. Primero, compre y descargue Divi Background Plus en su computadora.

En su tablero de WordPress, vaya a Complementos y seleccione Agregar nuevo . Haga clic en Cargar complemento en la parte superior de la pantalla.

Seleccione Elegir archivo , navegue hasta el archivo comprimido en su computadora, seleccione el archivo y haga clic en Instalar ahora .

Una vez que se cargue el archivo, haga clic en Activar complemento . No se necesita ninguna otra configuración. El complemento ya está listo para usar.

Se agrega un nuevo módulo a Divi Builder llamado Divi Background Plus. Usaremos este módulo para crear nuestras superposiciones de degradado y color para fondos de video de anuncios de paralaje. Este complemento y los fondos en las secciones son todo lo que necesitaremos para este tutorial.

Agregue superposiciones de degradado al fondo Divi Parallax

Abre la sección de configuración donde subirás tu imagen de fondo. En este ejemplo, estoy usando la imagen de fondo con la primera sección en el paquete de diseño de Pizzería, pero puede cargarla en cualquier sección, fila o columna que desee.

Abra la pestaña de la imagen en la configuración de Contenido. Habilite Usar efecto de paralaje . Estoy usando True Parallax, que es la configuración predeterminada. CSS Parallax también funciona.

Habilitar el efecto de paralaje deshabilita el degradado, pero la configuración del degradado aún está en su lugar. En lugar de usar el degradado en la configuración de la sección, agregaremos el degradado en la configuración del módulo Divi Background Plus.

Si desea usar el mismo degradado que ya se usó para esta sección (como yo), seleccione la pestaña Gradiente y haga clic con el botón derecho en algún lugar del degradado. Haga clic en Copiar colores degradados de fondo .

Seleccione para agregar un nuevo módulo a la sección con su imagen de fondo y elija Divi Background Plus .

En la configuración de Diseño en la pestaña Contenido, elija aplicar la configuración a la sección, fila o columna. Estoy seleccionando Sección .

Abra la configuración de Fondo y seleccione la pestaña Degradado. El degradado predeterminado se aplica automáticamente. Puede ajustar la opacidad para que se vea el fondo, crear su propio degradado o usar el del diseño.

Para usar el del diseño, haga clic con el botón derecho y seleccione Pegar colores de degradado de fondo . Esto no solo aplicará los colores, sino también la configuración del tipo de degradado, la dirección, la posición inicial, la posición final y la colocación del degradado sobre la imagen de fondo.

Aquí está el resultado. Ahora tengo una versión del original que incluye la misma imagen y superposición, pero ahora muestra el fondo en verdadero paralaje.

Así es como se ve el mismo diseño en un teléfono.

Agregar superposición de color al fondo de video Divi

Agregue una nueva sección regular debajo de la primera sección. Agregaremos el video de fondo a esta sección, un módulo Divi Background Plus para la superposición y agregaremos módulos de texto para mostrar mensajes, información de contacto y un CTA en la superposición.

Planeo usar el texto de la sección Llamado a la acción. Esto es fácil de hacer con las herramientas de capas de Divi. Para hacer esto, haga clic con el botón derecho en la sección que desea copiar y seleccione Ir a capa .

Haga clic con el botón derecho en las filas que desea copiar y seleccione Copiar fila .

Luego, seleccione la sección donde desea colocar la fila, haga clic con el botón derecho y seleccione Pegar fila . Estoy haciendo esto para las dos filas que quiero copiar de esta sección. Alternativamente, podría haber copiado esta sección y agregarle el módulo Divi Background Plus.

Ahora tengo una nueva sección con Divi Background Plus, varios módulos de texto y un CTA.

A continuación, agregue el video al fondo de la sección. Los colores del video funcionan bien con los colores del texto, pero quiero agregar una superposición para que se destaquen un poco más. Para mi video de fondo, estoy usando el video gratuito Mixed Toppings Over a Pizza de Tima Miroshnichenko de Pexels.

Abra la configuración de Divi Background Plus y elija Sección para el diseño.

Desplácese hacia abajo hasta la pestaña Fondo y seleccione la opción de color. Por supuesto, sus colores serán diferentes dependiendo de su video. Quería darle al video un tinte rojo. He usado:

• rgba(150,0,0,0.15)

Así es como se ve el video de fondo con mi superposición teñida de rojo en un escritorio.

Aquí está el mismo diseño en un teléfono.

Para algunos ejemplos más, aquí está con el fondo morado estándar con una opacidad del 30%.

Este es el naranja estándar con una opacidad del 80%.

Dale estilo al divisor de sección

Las superposiciones también funcionan con separadores de sección. Para agregar un divisor de sección, abra la configuración de la sección.

Vaya a la pestaña Diseño, seleccione Divisores y elija Superior o Inferior , según dónde desee agregar un divisor. Estoy agregando un divisor solo en la parte inferior. Haga clic en el cuadro desplegable denominado Estilo de divisor para elegir su divisor.

Elija el estilo de divisor que desee. Estoy seleccionando el quinto estilo, que crea un ángulo con dos colores.

Seleccione el icono de edición para agregar un color personalizado. Este es el color que aparece en esa sección donde no se muestra el divisor. El color por defecto es el blanco, como puedes ver en el ejemplo anterior. Agregue el color como un código hexadecimal o elija el color del selector de color. Estoy agregando el color #0d0d0d, que es uno de los colores en la sección debajo del video.

• Color #0d0d0d

El video ahora tiene un divisor con estilo para la parte inferior de esa sección. Puede ver el video que se muestra a través de las partes transparentes del divisor y combina bien con ambas secciones.

Resultado

Echemos un vistazo a cómo se ve el diseño en el escritorio y en el móvil.

Aquí hay un vistazo a la versión de escritorio. Tiene un verdadero fondo de paralaje con una superposición de degradado en la primera sección. La segunda sección incluye una imagen de fondo con una superposición de color y un divisor de sección que la separa de la siguiente sección.

Así es como se ve el diseño en un teléfono. Todos los elementos funcionan bien en dispositivos móviles.

pensamientos finales

Ese es nuestro vistazo a cómo agregar superposiciones de color y degradado a los fondos de video y paralaje de Divi. Divi Background Plus los hace fáciles de construir y usar. Funciona con secciones, filas y columnas y es fácil elegir entre ellas. Todas las personalizaciones son herramientas y configuraciones estándar de Divi, por lo que son familiares.

¡Ahora sus fondos pueden incluir superposiciones de colores y degradados sin tener que desactivar el paralaje y los videos!

Queremos escuchar de ti. ¿Ha creado superposiciones de colores y degradados para sus imágenes y videos de paralaje con Divi Background Plus? Háganos saber lo que piensa al respecto en los comentarios.

Imagen destacada a través de Lauritta / shutterstock.com