Cómo usar la opción de repetición de degradado de Divi para crear patrones de fondo personalizados

[ad_1]

Las opciones de fondo de Divi ofrecen muchas formas de crear patrones de fondo. Incluso puede crear patrones de fondo usando solo degradados. La opción Gradient Repeat hace que esto sea simple y fácil. En esta publicación, veremos cómo usar la opción Gradient Repeat de Divi para crear patrones de fondo personalizados.

Empecemos.

¿Qué es la repetición de degradado?

La opción Gradient Repeat crea un patrón basado en Gradient Stops. Las paradas de degradado son medidas que determinan dónde aparecen los colores y se detienen dentro del degradado. Gradient Builder de Divi usa esas paradas para crear el patrón.

El último color le dice al degradado dónde se encuentra el punto de parada dentro del degradado. Puede tener tantos colores como desee antes de ese punto de parada. El Gradient Builder luego lo repetirá para llenar la pantalla que crea el patrón. La opción se puede agregar a cualquier sección, fila, columna o módulo, y se pueden usar juntos.

Habilite la opción de repetición de degradado

Para habilitar la opción Repetir degradado, abra la configuración de la sección haciendo clic en su icono de engranaje. Esto también funciona con filas, columnas y módulos.

Desplácese hacia abajo para Fondo. Selecciona el Gradiente de fondo pestaña y haga clic Agregar degradado de fondo.

Habilite la opción de repetición de degradado

Debajo de la barra Gradient Stop hay una configuración llamada Gradiente de repetición. Esto está deshabilitado por defecto. Simplemente haga clic en él para habilitarlo.

Habilite la opción de repetición de degradado

El degradado ahora se repetirá, creando un patrón basado en sus Paradas de degradado y sus otras configuraciones de degradado, como la Unidad de degradado.

Habilite la opción de repetición de degradado

Unidades de gradiente

La Unidad de Gradiente es la unidad de medida. Esto especifica lo que indican los números de Gradient Stop en la barra de gradiente, lo que determina cómo se miden las Gradient Stops. Afecta al patrón creado por la opción de repetición.

Unidades de gradiente

Background Gradient Builder de Divi tiene 15 unidades para elegir. Veamos un ejemplo de las cuatro opciones más populares. Como veremos en nuestros ejemplos, el resultado cambiará según la cantidad de paradas de gradiente y la configuración. Estoy usando colores de nuestros ejemplos y lo configuré para que se repita para que sea más fácil de ver. Usaré tres colores con esta configuración:

  • Color 1: #fff6ee (14 % de posición)
  • Color 2: #ede3dc (46% Posición)
  • Color 3: #e8ded7 (82% Posición)

Configuración de degradado

  • Tipo: Lineal
  • Dirección: 214 grados
  • Gradiente de repetición: Sí
  • Unidad: Porcentaje
  • Colocar degradado encima de la imagen de fondo: No
Por ciento

El porcentaje mide las paradas de gradiente en porcentaje. Esto calcula los puntos de degradado en función del elemento principal. Cuanto más pequeño es el último punto de degradado, más ajustado es el patrón que crea. Al ajustar la posición de cualquiera de los colores, ese color se mueve mientras los demás permanecen en su lugar.

Unidades de gradiente

Píxeles

Los píxeles miden el número de píxeles para cada Gradient Stop. Esto le da al gradiente un patrón más pequeño que muchos de los otros tipos de unidades. Mover la posición del primer o último color cambia la posición de cada color.
Unidades de gradiente

Altura de la ventana gráfica (vh)

La ventana gráfica es el área de la ventana del navegador que está visible. Se mide en alto y ancho por separado. Altura de la ventana gráfica utiliza las paradas de degradado para medir el porcentaje de la altura del tamaño de la ventana gráfica. Ajustar la posición del primer o último color afecta a todos los colores.

Unidades de gradiente

Ancho de ventana gráfica (vw)

El ancho de la ventana gráfica utiliza las paradas de degradado para medir el porcentaje del ancho del tamaño de la ventana gráfica (o el ancho del navegador). Los ajustes cambian en función del ancho. Cuando ajusta el número más grande o más pequeño, ese color específico cambia de posición mientras que los demás permanecen igual.

Unidades de gradiente

Ejemplos de opciones de repetición de degradado

Para nuestros ejemplos, estoy usando la sección Llamada a la acción de la página de destino del Paquete de diseño de acupuntura gratuito que está disponible en Divi.

Ejemplos de opciones de repetición de degradado

Tendremos que hacer un ajuste en la primera columna de la sección. Abre el configuración de la fila haciendo clic en su icono de engranaje.

Ejemplos de degradado

A continuación, seleccione el icono de engranaje para la primera columna.

Ejemplos de degradado

Gradiente de la columna uno

La columna uno tiene su propio degradado de fondo. Esto es parte del diseño. No cambiaremos esto. Usaremos este mismo gradiente en nuestros cuatro ejemplos. Aquí están los ajustes en caso de que los necesite.

  • Color 1: #f4d5b8 (Posición 0px)
  • Color 2: rgba(244,213,184,0) (Posición 100px)

Configuración de degradado

  • Tipo: Lineal
  • Dirección: 180 grados
  • Gradiente de repetición: No
  • Unidad: Porcentaje
  • Colocar degradado encima de la imagen de fondo: No

Espaciado

Agregaremos algo de espacio a la izquierda de la columna. Ve a la diseño configuración, desplácese hacia abajo hasta Espaciadoy seleccione el icono de tableta para abrir las opciones del dispositivo. Agregue un 5 % de relleno a la izquierda para las pestañas del escritorio y la tableta. Elija la pestaña del teléfono y elimine el relleno izquierdo. Deje la parte superior y la derecha en su configuración actual.

  • Relleno superior: 180px
  • Relleno izquierdo: 5%
  • Relleno derecho: 80px

Ejemplo uno

Nuestro primer ejemplo crea un patrón que se repite en diagonal con líneas finas.

Opción de repetición de degradado Ejemplo uno

Este tiene tres Gradient Stops. Él primero el color es #fff6ee, colocado en la Posición 4px. Él segundo es #ede3dc, colocado en la Posición 9px. Ultimo es #e8ded7, colocado en la Posición 14px. Esto significa que el degradado se detiene en 14 píxeles, que es donde comenzará la repetición. Las paradas de color están juntas, manteniendo el patrón pequeño.

  • Color 1: #fff6ee (posición de 4 px)
  • Color 2: #ede3dc (posición de 9 px)
  • Color 3: #e8ded7 (Posición 14px)

  Opción Ejemplo Uno

Para los ajustes de degradado, cambie el Tipo de degradado a Lineal y establecer su Dirección a 156 grados. Permitir Gradiente de repetición. Seleccione Píxeles para el Unidad.

  • Tipo: Lineal
  • Dirección: 156 grados
  • Gradiente de repetición: Sí
  • Unidad: Píxeles
  • Colocar degradado encima de la imagen de fondo: No

  Opción Ejemplo uno

Ejemplo dos

Nuestro segundo ejemplo crea un patrón de repetición diagonal con líneas más grandes.

Opción de repetición de degradado Ejemplo dos

Este tiene tres Gradient Stops. Él primero es el color #fff6ee, colocado en la Posición 4px. Nuestro segundo el color es #ede3dc, colocado en la posición 43px. Ultimo es #e8ded7, colocado en la Posición de 50px. Este degradado se detendrá en 50px y repetirá el patrón.

  • Color 1: #fff6ee (posición de 4 px)
  • Color 2: #ede3dc (Posición 43px)
  • Color 3: #e8ded7 (Posición de 50 px)

Ejemplo dos de gradiente

Para la configuración de degradado, seleccione Lineal para el Tipo y establecer el Dirección a 156 grados. Permitir Gradiente de repetición y cambiar el Unidad a píxeles.

  • Tipo: Lineal
  • Dirección: 156 grados
  • Gradiente de repetición: Sí
  • Unidad: Píxeles
  • Colocar degradado encima de la imagen de fondo: No

Ejemplo dos

Ejemplo tres

Nuestro tercer ejemplo crea un patrón circular repetitivo con círculos de tamaño mediano.

Ejemplo tres

Este tiene tres Gradient Stops. Él primero el color es #fff6ee, colocado en la Posición 4px. Color 2 es #e8ded7, colocado en la Posición 7px. Él ultimo el color es #ede3dc, colocado en la Posición 8px. Este degradado se detendrá en 8 píxeles y los otros colores estarán muy juntos, creando un patrón ajustado.

  • Color 1: #fff6ee (posición de 4 px)
  • Color 2: #e8ded7 (posición de 7 px)
  • Color 3: #ede3dc (posición de 8 px)

Ejemplo tres

Para los ajustes de degradado, cambie el Tipo a Circular y configure el Dirección Hacia abajo. Permitir Gradiente de repetición y cambiar el Unidad a Por ciento.

  • Tipo: Circular
  • Dirección: Abajo
  • Gradiente de repetición: Sí
  • Unidad: Porcentaje
  • Colocar degradado encima de la imagen de fondo: No

Opción de repetición de degradado Ejemplo tres

Ejemplo cuatro

Nuestro cuarto ejemplo crea un patrón circular con círculos grandes.

Opción de repetición de degradado Ejemplo cuatro

Este tiene tres Gradient Stops. Él primero es #fff6ee, colocado en la posición 4px. Segundo es #e8ded7, colocado en la Posición 23px. Tercera es #ede3dc, colocado en la Posición 31px. Este degradado crea un patrón más grande con los colores más separados y deteniéndose en 31 píxeles.

  • Color 1: #fff6ee (posición de 4 px)
  • Color 2: #e8ded7 (posición de 23 px)
  • Color 3: #ede3dc (Posición 31px)

Ejemplo de gradiente cuatro

Para los ajustes de degradado, cambie el Tipo a Circular y configure el Dirección al Centro. Permitir Gradiente de repetición y cambiar el Unidad a Por ciento.

  • Tipo: Circular
  • Dirección: Centro
  • Gradiente de repetición: Sí
  • Unidad: Porcentaje
  • Colocar degradado encima de la imagen de fondo: No

Ejemplo de gradiente cuatro

pensamientos finales

Ese es nuestro vistazo a cómo usar la opción de repetición de degradado de Divi para crear fondos personalizados. Hay muchos ajustes dentro de la configuración del degradado que afectan el diseño del degradado. Gradient Repeat funciona bien con todos estos ajustes para crear interesantes patrones de fondo personalizados con facilidad. Recomiendo probar los ejemplos que proporcionamos aquí y hacer cambios para ver cómo se ven afectados los degradados y crear sus propios degradados de fondo personalizados.

Queremos escuchar de ti. ¿Utiliza la opción de repetición de degradado de Divi con sus fondos personalizados? Cuéntanoslo en los comentarios.



[ad_2]

Source link

Deja una respuesta

Tu dirección de correo electrónico no será publicada.