Cómo usar la opción de repetición de degradado de Divi para crear patrones de fondo personalizados
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. Divi y su Gradient Builder usan 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
A continuación, seleccione el icono de engranaje para la primera columna.
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.
Este tiene tres Gradient Stops. los primero el color es #fff6ee, colocado en la Posición 4px. los 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)
Para los ajustes de degradado, cambie el Tipo de degradado a Lineal y establecer su Dirección a 156 grados. Habilitar 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
Ejemplo dos
Nuestro segundo ejemplo crea un patrón de repetición diagonal con líneas más grandes.
Este tiene tres Gradient Stops. los 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)
Para la configuración de degradado, seleccione Lineal para el Escribe y establecer el Dirección a 156 grados. Habilitar 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 tres
Nuestro tercer ejemplo crea un patrón circular repetitivo con círculos de tamaño mediano.
Este tiene tres Gradient Stops. los primero el color es #fff6ee, colocado en la Posición 4px. Color 2 es #e8ded7, colocado en la Posición 7px. los 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)
Para los ajustes de degradado, cambie el Escribe a Circular y configure el Dirección Hacia abajo. Habilitar 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
Ejemplo cuatro
Nuestro cuarto ejemplo crea un patrón circular con círculos grandes.
Este tiene tres Gradient Stops. los primero es #fff6ee, colocado en la posición 4px. Segundo es #e8ded7, colocado en la Posición 23px. Tercero 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)
Para los ajustes de degradado, cambie el Escribe a Circular y configure el Dirección al Centro. Habilitar 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
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.
