Cómo agregar la superposición del color y degradarse al paráxa y el video div Div

¡El complemento recomendado para la venta ahora en el fondo Div Div Plus Square está disponible en Divic Square! Esto significa que nuestra revisión ha pasado y se ha encontrado que cumple con nuestros estándares de calidad. Puede visitar Superfly en el mercado para ver todos los productos disponibles. Los productos comprados en Div Marketplace tienen un uso ilimitado del sitio web y una garantía de 30 días para devolver dinero (como Div). Compra en el Div
Las superposiciones de color y gradiente son excelentes elementos de diseño que pueden captar la atención de su audiencia y hacer que su contenido se destaque. Funciona muy bien con imágenes de fondo. Agregue una imagen de fondo a una sección, fila o columna, agregue un color o superposición de gradiente, luego coloque el contenido sobre ella. Sin embargo, un problema es que las superposiciones de color y gradiente no funcionan por defecto con antecedentes paralelos y de video en la división.
En este tutorial, le mostraremos cómo agregar color y superposiciones de gradiente en fondos, ya sea con una imagen paralela o con un video utilizando una tercera parte de nuestro mercado. También veremos superposiciones que funcionan con separadores de sección. Esto normalmente requeriría código, pero con las herramientas adecuadas, no es difícil de implementar por nadie. Vamos a empezar. Él hace un ojo sobre lo que construiremos en este tutorial. Creo un aspecto con un fondo de paralaje en una sección y un fondo de video. El fondo de paralaje tendrá un gradiente, y el fondo de video tendrá solo un color. También estilizaremos las divisiones de las secciones. Utilizo la página de destino en el paquete de diseño Pizzeria porque, bueno, pizza. Así es como se ve en un escritorio. Por lo tanto, muestra el mismo diseño en un teléfono. DIV estándar
Las herramientas DIV estándar le permiten agregar imágenes y videos de fondo a secciones, filas y columnas, pero la superposición es limitada. Para las imágenes de fondo, puede agregar una superposición en el gradiente, 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 Parallax, pero si activa el Paralax para la imagen de fondo, la superposición ya no se muestra sobre la imagen. Está deshabilitado, incluso si lo ha seleccionado para mostrar superposición.

Cómo agregar superposiciones de color y degradarse a los fondos de la división de paralaje y video agregaremos color y superposiciones de gradiente a desfiles y fondos de video utilizando un complemento de tercera parte llamado Div Fondo Plus. También veremos cómo estilizar los separadores de sección utilizando este complemento. Instale el fondo Divin Plusddivi ​​Background Plus está disponible en Divic Square. Veamos cómo comenzar. Primero, compre y descargue el fondo de diva más en su computadora.
En el tablero de WordPress, vaya a complementos y seleccione Agregar un nuevo. Haga clic en la carga del complemento en la parte superior de la pantalla.

Seleccione Elija el archivo, navegue al archivo comprimido en su computadora, seleccione el archivo y haga clic en la instalación ahora.

Después de cargar el archivo, haga clic en activar el complemento. No se requiere otra configuración. El complemento ahora está listo para su uso.

Se agrega un nuevo módulo al Builder Divin llamado Div Bondicle Plus. Usaremos este módulo para crear superposiciones de gradiente y color para fondos de video paralaje. Este complemento y fondos en las secciones son todo lo que necesitaremos para este tutorial. Agregar superposición de gradiente al paralaje div

Abra la configuración de la sección donde cargará la imagen de fondo. En este ejemplo, utilizo la imagen de fondo con la primera sección del paquete de apariencia de Pizzeria, pero puede cargarla en cualquier sección, fila o columna.

Abra la pestaña Imagen en la configuración del contenido. Active el uso del efecto Paralax. Utilizo True Parallax, que es la configuración predeterminada. El paralaje CSS también funciona. La activación del efecto de paralaje deshabilita el gradiente, pero las configuraciones de gradiente aún están en su lugar. En lugar de usar el gradiente en la configuración de la sección, agregaremos el gradiente a la configuración en el módulo de fondo Div Plus. Si desea usar el mismo gradiente que ya se usa para esta sección (como soy), seleccione la pestaña de gradiente Y haga clic derecho en algún lugar del gradiente. Haga clic en Copiar los colores del gradiente de fondo.

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

En la configuración de aspecto en la pestaña Contenido, elija aplicar la configuración de configuración, fila o columna. Selecciono la sección.

Abra la configuración de fondo y seleccione la pestaña de gradiente. El gradiente predeterminado se aplica automáticamente. Puede ajustar la opacidad para que se muestre su fondo, creando su propio gradiente o usando el de la apariencia.

Para usar el de la apariencia, haga clic con el botón derecho y seleccione los colores del gradiente de fondo. Esto no solo aplicará los colores, sino también la configuración del tipo de gradiente, la dirección, la posición inicial, la posición final y la colocación del gradiente 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 el verdadero paralelo.

Así es como se ve el mismo aspecto en un teléfono. Agregue la superposición de color al video div

Agregue una nueva sección habitual en la primera sección. Agregaremos el video de fondo a esta sección, un módulo de fondo Plus para su superposición y agregaremos módulos de texto para mostrar mensajes, información de contacto y una superposición de CTA. Esto es fácil de hacer con las herramientas de capa de Divi. Para hacer esto, haga clic en la sección que desea copiar y seleccionar ir a la capa.

Haga clic en las filas que desea copiar y seleccionar la fila de copiadores.

Luego seleccione la sección en la que desea colocar el giro, haga clic en la derecha y seleccione Lipire Row. Hago esto para ambas filas que quiero copiar de esta sección. Alternativamente, podría copiar esta sección y agregar el módulo de fondo Div Plus.

Ahora tengo una nueva sección con fondo de diva plus, varios módulos de texto y un CTA.

Luego agregue el video al fondo de la sección. Los colores en el video funcionan bien con los colores del texto, pero quiero agregar una superposición para que salgan un poco más. Para mi video de fondo, uso el video gratuito de los ingredientes de mixxt de Tima Mirignnicko sobre Pizza de Pexels.

Abra la configuración de fondo Diva Plus y elija la sección Sección.

Desplácese hacia abajo hasta la pestaña de fondo y seleccione la opción Color. Por supuesto, sus colores serán diferentes dependiendo del video. Quería darle al video un tono rojo. Solía:

RGBA (150,0,0,0,15)

Así es como se ve el video de fondo con mi superposición roja en un escritorio. Aquí está el mismo look en un teléfono.

Para algunos otros ejemplos, aquí está con el fondo púrpura estándar con una opacidad del 30%. Esta es la naranja estándar con una opacidad del 80%. Estilizar la sección divisor

Los sobrepuntos 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 separadores y elija arriba o hacia abajo, dependiendo de dónde desee agregar un separador. Agregue un separador solo en la parte inferior. Haga clic en el cuadro Drop -down llamado estilo divisor para elegir su divisor.
Elija el estilo divisor deseado. Selecciono 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 en la que el divisor no aparece. El color predeterminado es blanco, como puede ver en el ejemplo anterior. Agregue el color como código hexagonal o elija el color del selector de color. Agregue el color # 0D0D0D, que es uno de los colores en la sección debajo del video.

Color # 0d0d0d