¿Le gustaría crear patrones de fondo personalizados usando la opción Gradient Repeat de Divi ?
Las opciones de fondo de Divi ofrecen muchas maneras 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 este artículo veremos cómo utilizar la opción Repetición de degradado de Divi para crear patrones de fondo personalizados.
Vamos a empezar.
Ver también: Divi: Cómo crear un formulario de contacto que aparece después de hacer clic en un botón
¿Qué es la repetición de gradiente?
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 en el degradado. Divi y su Gradient Builder usan estas paradas para crear el patrón.
El último color le dice al degradado dónde está el punto de interrupción en el degradado. Puede tener tantos colores como desee antes de este punto de interrupción.
Le Constructor de degradado 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.
Activa la opción "Degradado de fondo"
Para activar la opción Repetición de degradado, abra la configuración de la sección haciendo clic en su icono de engranaje. También funciona con filas, columnas y módulos.
Desplazarse hasta Antecedentes . Seleccionar pestaña Fondo degradado y haga clic Agregar degradado de fondo.
Debajo de la barra de parada de gradiente hay una configuración llamada Repetición de degradado . Esto está deshabilitado por defecto. Simplemente haga clic en él para activarlo.
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 parada de degradado en la barra de degradado, lo que determina cómo se miden las paradas de degradado. Esto afecta el patrón creado por la opción de repetición.
El generador de degradado de fondo de Divi ofrece 15 unidades. 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.
por ciento (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ña sea la última puntada degradada, más apretado será el patrón creado. Al ajustar la posición de uno de los colores, ese color se mueve mientras los demás permanecen en su lugar.
Píxeles (px)
Píxeles mide el número de píxeles para cada parada de degradado. Esto le da al gradiente un patrón más pequeño que la mayoría 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 (vh)
La ventana gráfica es el área de la ventana del navegador que es visible. Se mide en alto y ancho por separado. La altura de la ventana utiliza paradas de gradiente para medir el porcentaje de la altura del tamaño de la ventana. Ajustar la posición del primer o último color afecta a todos los colores.
Ancho de la ventana (vw)
El ancho de la ventana usa paradas de gradiente para medir el porcentaje del ancho del tamaño de la ventana (o ancho del navegador). Los ajustes cambian dependiendo del ancho. A medida que 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 uso de la opción "Repetición de degradado"
Lea también: Divi: Cómo crear una tableta con contenido teaser desplazable
Para nuestros ejemplos, usamos la sección Llamada a la acción de la página de inicio del paquete de diseño de acupuntura gratis disponible en divi.
Tendremos que hacer un ajuste a la primera columna de la sección. Ábrelos parámetros de línea haciendo clic en su icono de engranaje.
Luego seleccione el icono de engranaje para la primera columna.
gradiente de columna uno
La primera columna tiene su propio degradado de fondo. Es parte del diseño. No cambiaremos eso. Usaremos este mismo gradiente en nuestros cuatro ejemplos. Aquí están los ajustes en caso de que los necesite.
- Paradas de gradiente:
- 0px: #f4d5b8
- 100 píxeles: rgba (244,213,184,0)
Configuraciones de degradado
- Tipo de gradiente: lineal
- Posición del gradiente: 180 grados
- Gradiente de repetición: NO
- Unidad de gradiente: porcentaje
- Gradiente cuadrado sobre la imagen de fondo: NO
espaciamiento
Agregaremos espacio a la izquierda de la columna. Accede a la pestaña Diseño, desplácese hasta Distanciamiento y seleccione el icono de tableta para abrir las opciones del dispositivo.
Agregue un 5 % de relleno a la izquierda para las pestañas de escritorio y tableta. Elija la pestaña del teléfono y elimine el relleno izquierdo. Deje Arriba y Derecha en su configuración actual.
- Relleno
- Superior: 180px
- Izquierda: 5%
- Izquierda: 80px
ejemplo uno
Nuestro primer ejemplo crea un patrón de repetición diagonal con líneas finas.
Este tiene tres paradas de gradiente.
- Paradas de gradiente:
- 4 píxeles: #fff6ee
- 9px: #ede3dc
- 14px: #e8ded7
Utilice la siguiente configuración.
- Tipo de gradiente: lineal
- Dirección del gradiente: 156 grados
- Gradiente de repetición: SÍ
- Unidad de gradiente: píxeles
- Gradiente cuadrado sobre la imagen de fondo: no
Segundo ejemplo
Nuestro segundo ejemplo crea un patrón de repetición diagonal con líneas más grandes.
Este tiene tres paradas de gradiente.
- Paradas de gradiente:
- 4 píxeles: #fff6ee
- 43px: #ede3dc
- 50px: #e8ded7
Para la configuración de degradado,
- Tipo de gradiente: lineal
- Dirección del gradiente: 156 grados
- Gradiente de repetición: SÍ
- Unidad de gradiente: píxeles
- Gradiente cuadrado sobre 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 paradas de gradiente.
- Paradas de gradiente
- 4 píxeles: #fff6ee
- 7px: #e8ded7
- 8px: #ede3dc
Aplique la siguiente configuración de degradado
- Tipo de degradado: Circular
- Posición del degradado: inferior
- Gradiente de repetición: SÍ
- Unidad de gradiente: porcentaje
- Gradiente cuadrado sobre la imagen de fondo: NO
Ejemplo 4
Nuestro cuarto ejemplo crea un patrón circular con círculos grandes.
Este tiene tres paradas de gradiente.
- Paradas de gradiente:
- 4 píxeles: #fff6ee
- 23px: #e8ded7
- 31px: #ede3dc
Para la configuración de degradado, cambie de la siguiente manera:
- Tipo de degradado: Circular
- Posición del degradado: Centro
- Gradiente de repetición: SÍ
- Unidad de gradiente: porcentaje
- Gradiente cuadrado sobre la imagen de fondo: no
¡¡¡Descarga DIVI ahora!!!
Conclusión
Este es nuestro vistazo a cómo usar la opción para Repetición de degradado de Divi para crear fondos personalizados. Muchos ajustes en la configuración del degradado afectan el diseño del degradado.
Gradient Repeat funciona bien con todos estos ajustes para crear fácilmente interesantes patrones de fondo personalizados.
Recomendamos probar los ejemplos que proporcionamos aquí y realizar cambios para ver cómo se ven afectados los degradados y crear sus propios degradados de fondo personalizados.
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
