Máscaras de Fondo en Divi

Las máscaras de fondo te dan opciones para agregar formas a tus fondos.

Hay 23 formas diferentes disponibles con controles de color, transformación y relación de aspecto. También puedes elegir el tamaño y modos de fusión para las máscaras.

Cómo Agregar Color en las Opciones de Fondo de Divi

• Haz clic en el ícono del balde de pintura

• Haz clic en el botón Agregar Color de Fondo para añadir el color que prefieras.

• Haz clic dentro del selector de color o introduce directamente un código hexadecimal. También puedes añadir colores desde tus colores guardados, globales o recientes.

Cómo Agregar un Degradado en las Opciones de Fondo de Divi

• Selecciona la segunda pestaña - Degradado de Fondo

• Haz clic en el botón Agregar Degradado de Fondo

• Haz clic en la barra de degradado de Divi sobre cada punto de color.

• Introduce un código hexadecimal específico, usa el sistema de color mágico de Divi para generar un color o carga un color reciente, global o guardado.

Cómo Agregar un Punto de Color (Color Stop)

Puedes agregar tantos puntos de color como desees.

• Haz clic en el control deslizante del degradado para agregar un nuevo punto. 
  

• Haz doble clic sobre el punto para cambiar el color.

  • Puedes elegir un color desde los guardados, globales o recientes.

  • También puedes hacer clic dentro del selector de color para elegir uno personalizado.
    

Para cambiar la posición del punto, haz clic y arrastra al lugar deseado.
Cuanto más cercanos estén los puntos, más fuerte será la mezcla de colores.

Tipos de Degradados en Divi

Hay cuatro tipos de degradado en las opciones de fondo de Divi:

• Lineal

• Circular

• Elíptico

• Cónico

Cada tipo proporciona un efecto diferente. Experimenta con ellos para lograr el aspecto deseado.

Degradado Lineal
Es el tipo predeterminado al hacer clic en Agregar Degradado de Fondo.
Puedes elegir la dirección del degradado, siendo 180 grados la posición predeterminada.
Modificar la dirección del tipo de degradado cambia su apariencia.

Dirección del Degradado en Divi

Como se demostró anteriormente, la dirección del degradado modifica su apariencia.
Por ejemplo, un degradado lineal con puntos de color superpuestos a un ángulo de 147 grados crea una línea angulada entre colores.

Repetir Degradado en Divi

La opción de repetir degradado crea patrones según los puntos de color.

• El primer punto indica dónde comienza el degradado

• El último punto indica dónde termina

• Los puntos intermedios mezclan el degradado

Puedes combinar dos o más puntos de color para crear efectos visuales llamativos.

Ejemplo:
Tres puntos de color en 0%, 2% y 4%.

Cuando el interruptor de Repetir Degradado se activa en sí, Divi repetirá el degradado tantas veces como sea necesario para llenar el espacio disponible.

Unidades de Degradado en Divi

Las unidades definen la medición aplicada a los puntos de color en los degradados.

Por ejemplo:
Si usas porcentaje y tienes dos puntos en 44 y 100, habrá una distancia de 56% entre ellos.
Si usas centímetros, esa distancia será de 56 cm, lo que marca una gran diferencia.

Aplicar un Degradado sobre una Imagen de Fondo

La última opción del degradado te permite colocar el degradado sobre una imagen de fondo.

• Cuando se activa en sí, el degradado aparecerá sobre la imagen.

Nota: Debes ajustar la transparencia del color para que la imagen de fondo sea visible.

Pasos:

• Activa la opción Colocar degradado sobre imagen de fondo

• Haz clic en el control deslizante de color

• Ajusta la transparencia para revelar la imagen debajo

Cómo Agregar una Imagen en las Opciones de Fondo de Divi

Otra funcionalidad genial de Divi es la capacidad de agregar una imagen como fondo.

• Selecciona la tercera pestaña - Imagen de Fondo

• Haz clic en Agregar Imagen de Fondo

• Elige una imagen de la biblioteca de medios o sube una nueva

• Efecto Parallax (Js o CSS)
  El parallax crea una ilusión de profundidad al animar dos dimensiones.

A diferentes velocidades de desplazamiento, los elementos de fondo parecen moverse aunque en realidad estén fijos.

Para activar el efecto parallax en Divi:

• Activa el interruptor de Parallax a sí

Efecto de paralaje en imágenes

• Si está habilitado, puedes elegir entre paralaje real (JavaScript) o paralaje CSS.

• El paralaje real combina CSS y JavaScript, ofreciendo un movimiento más realista y más lento que los otros elementos de la página.

• Con el método CSS, solo se usa CSS para crear el efecto: el fondo permanece fijo mientras el resto de la página se desplaza normalmente.

• Cover: la imagen cubrirá todo el ancho del contenedor donde se aplique.

• Fit: ajusta la imagen dentro del espacio disponible.

• Actual size: mantén el tamaño original de la imagen.

• Stretch to fill: estira la imagen para llenar todo el contenedor, sin importar su tamaño.

• Custom Size: define el tamaño personalizado de la imagen de fondo.

Posición de la imagen de fondo en Divi

• Top Left

• Top Center

• Top Right

• Center Left

• Center

• Center Right

• Bottom Left

• Bottom Center

• Bottom Right

Desplazamiento horizontal y vertical del fondo

Repetición de la imagen de fondo

• Repeat

• Repeat X (horizontal)

• Repeat Y (vertical)

• Repeat with space between

• Repeat and stretch

• No repeat

Modo de fusión de la imagen de fondo

Cómo agregar video de fondo en Divi

• Se admiten archivos mp4 y webm (recomendable incluir ambos).

• Accede a la cuarta pestaña (fondo de video) y añade tu archivo desde la biblioteca.
  

• Ajusta ancho y alto del video. 
  

• 

  
  

• Activa pausar video cuando otro se reproduzca.
  

• 

  
  

• Activa pausar video cuando no esté visible.
  

• 

  
  

Cómo agregar patrones de fondo en Divi

Divi viene con 24 opciones de patrón para mejorar el diseño de fondo. Los patrones se pueden voltear, rotar e invertir para crear apariencias ilimitadas.

Color del patrón y opacidad del color
Al igual que con otras opciones de fondo en Divi, los usuarios pueden editar el color asociado a los patrones. Además, se puede ajustar la opacidad.

Los usuarios pueden editar o crear muestras a partir de colores recientes, guardados o globales utilizando el sistema mágico de color de Divi. Consulta nuestra documentación sobre el sistema de gestión de color de Divi para obtener más información.

Transformación del patrón

Tamaño del patrón

• Real

• Cubrir

• Estirar para llenar

• Ajustar

• Tamaño personalizado

Con el tamaño personalizado, puedes ajustar los elementos horizontales y verticales haciendo clic en sus respectivos deslizadores.

Origen de repetición del patrón

Desplazamiento horizontal y vertical del patrón

Repetición del patrón

• Repetir

• Repetir en X (horizontal)

• Repetir en Y (vertical)

• Repetir con espacio entre

• Repetir y estirar

Modo de fusión del patrón

Cómo añadir una máscara en las opciones de fondo de Divi

Las máscaras de fondo utilizan el espacio positivo y negativo para crear formas en tus diseños. Se colocan sobre degradados, imágenes, videos y patrones para crear fondos impactantes.

Combinadas con otros elementos, puedes crear diseños de fondo únicos donde no hay dos fondos iguales. Hay 23 opciones de máscara para elegir.

• Selecciona la sexta pestaña - Video de fondo

• Haz clic en el botón Añadir máscara de fondo

• Elige una de las máscaras predefinidas disponibles

Además de añadir máscaras de fondo, puedes elegir un color de máscara y transformarla volteándola horizontal o verticalmente, rotándola o invirtiéndola.

Relación de aspecto de la máscara
La relación de aspecto de la máscara tiene varias orientaciones:

• Horizontal

• Vertical

• Cuadrado

Color de la máscara
El color de la máscara puede ser un color estático a tu elección. Además, puedes optar por usar un color reciente, guardado o global.

Otra opción es utilizar el sistema dinámico de color de Divi para elegir un color para tu máscara. La opacidad se puede ajustar para revelar otros elementos utilizados en las opciones de fondo.

• Estirar para llenar – La máscara ocupará todo el espacio disponible asignado

• Cubrir – La máscara cubrirá toda la altura del elemento

• Ajustar – La máscara cubrirá toda la altura y anchura del elemento. Esto forzará la repetición de la máscara

• Tamaño personalizado – Define un tamaño personalizado para la máscara

Estas opciones te permiten controlar la posición de tu máscara.

Cada uno permite obtener efectos diferentes para tus máscaras.

Continuar aprendiendo

• Cómo crear máscaras sutiles con patrones de fondo (3 ejemplos)

• Cómo diseñar un llamado a la acción con combinación de patrón y máscara

• Cómo usar máscaras y transformaciones con patrones de fondo

• Cómo utilizar la opción de repetición de degradados para crear fondos únicos

• Cómo diseñar un fondo con doble capa de degradados, máscaras y patrones

• Cómo usar el generador de degradados de Divi para formas circulares únicas