Cómo usar la división de gradiente del constructor para crear formularios de fondo únicos

El constructor de gradientes de Divi puede crear muchos antecedentes interesantes. Los colores trabajan juntos para crear formas y patrones que generalmente son difíciles de crear. El constructor de gradientes de Divi incluye configuraciones que hacen modelos circulares, como una forma de fondo circular, lo que lo hace crear fondos únicos. En esta publicación, veremos cómo usar la división de Gradient Builder para diseñar formularios de fondo únicos que llamen la atención sobre cualquier sección o columna. Vamos a empezar. Vista previa primero, veamos lo que construimos. Primer fondo de escritorio circular

Teléfono

Second Circular Desktop

Teléfono

Tercer fondo de escritorio circular

Teléfono

Cuarto fondo de escritorio del cuarto escritorio

Teléfono

Cree la sección de forma circular en lugar de usar una sección de un aspecto de división, crearemos una sección personalizada para este tutorial. La sección necesitará una fila con dos columnas con dimensiones iguales. En la columna izquierda, colocaremos un separador. Esto no será visible. Permite que se muestre el fondo de la columna 1 en pantallas más pequeñas. Solo se muestran columnas del módulo en pantallas más pequeñas. La columna derecha incluirá dos módulos de texto y un formulario de contacto.

Configuración Configuración Abra la configuración de la sección haciendo clic en el icono de la rueda.

Desplácese hacia abajo hacia el fondo y cambie el color a #FFF7EF.
Color de fondo: #FFF7EF

Luego seleccione la pestaña Diseño. Desplácese hacia abajo hasta el espacio e ingrese 0px para el relleno superior e inferior. Cierre la configuración de la sección.
Up: 0px
Abajo: 0px

Agregue la fila y luego, agregue dos columnas.

Luego abra la configuración de línea haciendo clic en el icono de la rueda.

Seleccione la pestaña de diseño y active la igualación de alturas de columna. Establezca el ancho al 100% y cambie el ancho máximo a ninguno. ELGALIZACIÓN DE LA COLUNTA DE LA COLUNTA: Sí
Ancho: 100%
Ancho máximo: ninguno
Luego desplácese hacia abajo hasta el espacio e ingrese 0px para el relleno hacia arriba y hacia abajo.

Llenado: 0px arriba, 0px abajo
Configuración de las siguientes columnas, haremos algunos ajustes de espaciado de columnas. Volveremos a la configuración de la columna al crear fondos circulares. Abra la configuración para la primera columna.

Vaya a la pestaña de diseño e ingrese 8VW para el relleno superior e inferior y 10% para el relleno izquierdo y derecho. Cierre la configuración de la columna.

UP: 8VW
Abajo: 8VW
Izquierda: 10%
Derecha: 10%
Luego abra la configuración de la segunda columna.

Vaya a la pestaña de diseño e ingrese 8VW para el relleno superior e inferior y del 12% para el relleno derecho. Cierre la configuración de columna y fila.

UP: 8VW
Abajo: 8VW
Derecha: 12%
El modo divisor, agregue un módulo divisor a la columna izquierda.

Abra la configuración del módulo Divisor y seleccione no mostrar visibilidad.

Muestra visibilidad: no
Luego seleccione la pestaña de diseño y desplácese hacia abajo. Seleccione el icono de la tableta y elija la pestaña de la tableta. Agregue 15 VH al revestimiento superior e inferior. La configuración del teléfono seguirá la configuración de la tableta. No necesitaremos estas configuraciones para la versión de escritorio. Cierre la configuración del módulo.

Revestimiento (tableta): 15 VH arriba, 15 VH abajo
Modo de texto de título Luego, agregue un módulo de texto a la columna derecha. Esto creará el título para el formulario de contacto.

Agregue el título “En contacto” y cambie la fuente al Título 1.

Fuente: Título 1
Contenido del cuerpo: ponte en contacto
Seleccione la pestaña Diseño y desplácese hacia abajo hasta el texto del título. Seleccione Inter para la fuente y elija Light for Font Weight.font: Inter

Peso de fuente: luz
Establezca el color de la fuente en negro, el tamaño de la fuente en el escritorio a 78px, el tamaño de la fuente de la tableta a 44 px y el tamaño de la fuente del teléfono a 28 px. Cambie la altura de la línea a 1.1 em. Cierre la configuración del módulo.
Color: #000000

Tamaño de fuente: 78px (escritorio), 44px (tableta), 28px (teléfono)
Altura de la línea: 1.1 em
El módulo de texto de descripción luego agregue un módulo de texto en el módulo de texto de título.
Abra la configuración y agregue su descripción a la zona de contenido. Solo uso contenido falso para mi ejemplo.

Texto del cuerpo: Descripción

Luego seleccione la pestaña de diseño y elija Inter para la fuente. Elija la luz para el peso de la fuente y coloque el color en el negro.
FUENTE: Inter

Peso de fuente: luz
Color: #000000
Seleccione el icono de la tableta para establecer las dimensiones para cada tipo de pantalla. Haga clic en el icono de escritorio y cambie el tamaño a 24px. Seleccione el icono de la tableta y cambie el tamaño a 20px. Seleccione el icono del teléfono y cambie el tamaño a 16px. Cambie la altura de la línea a 1.6 em. Cierre la configuración del módulo.
El módulo de formulario de contacto eventualmente agrega un formulario de contacto en el texto de descripción.

Abra la configuración, desplácese hacia abajo para spam y active Use un servicio de protección de spam. Para obtener más información sobre esta función, consulte el artículo Cómo utilizar un servicio de protección de spam en el módulo de correo electrónico del Div.

Use un servicio de protección de spam: si va a la pestaña de diseño y establece los campos de los campos en RGBA (0.0,0,0). Establezca el color del texto de los campos en negro.

Campos de color de fondo: RGBA (0.0,0,0)
Color de texto: #000000

Luego elija Inter para la fuente de campos. Cambie el tamaño a 16 px y la altura de la línea a 1.6 em.
FUENTE: Inter
Tamaño: 16px

Altura de la línea: 1.6 em
Botón Desplácese hacia abajo hasta el botón y seleccione usando estilos personalizados. Cambie el tamaño del texto a 16 px. Cambie el color del texto a blanco y establezca el color de fondo en #B35330.
Use estilos personalizados: sí
Tamaño de texto: 16px

Color de texto: #ffffff
Color de fondo: #B35330
Cambie el rayo de borde a 100px. Seleccione Inter para la fuente del botón. Cambiar peso a los medios.
Chenar Radius: 100px
Botón de fuente: Inter

Peso: medio
Desplácese hacia abajo hasta el acolchado de botones y agregue 16px para la parte superior e inferior y 40px para la izquierda y la derecha.
Botones: 16 PX (arriba, abajo), 40 PX (izquierda, derecha)
Los bordes de campo se desplazan hacia abajo hasta el borde y cambian el ancho de borde de entrada a 1px. Cambie el color del borde de entrada a #B35330.

El ancho del borde de entrada: 1px
Entradas Color del borde: #B35330

Configuración de campo Luego, abra la configuración del campo Nombre.
Seleccione la pestaña Diseño y active Make FullWidth. Cierre la configuración del campo Nombre.
Haga un ancho completo: Sí

Luego abra la configuración del campo de correo electrónico.

Seleccione la pestaña Diseño y active Make FullWidth. Cierre la configuración del campo de correo electrónico, cierre la configuración del formulario de contacto y guarde su trabajo.
Haga un ancho completo: Sí

Duplicar la sección Ahora tenemos una sección con una columna vacía a la izquierda y un formulario de contacto creado con dos módulos de texto y un formulario de contacto a la derecha. Antes de crear los fondos, duplique esta sección. Simplemente el cursor sobre la configuración de la sección y haga clic en el icono de duplicación tres veces. Luego tendremos cuatro secciones. Agregaremos un fondo circular diferente a cada uno.

Agregando el gradiente de fondo para cada uno de nuestros fondos circulares, agregaremos el gradiente de fondo a la columna izquierda. En su mayor parte, usarán los mismos colores y más tendrán un gradiente de apilamiento. Preste mayor atención al orden de la pila, ya que cambiará el gradiente. También usaremos diferentes unidades, pero todas comenzarán como porcentaje. Para crear un gradiente de fondo, abra la configuración de línea haciendo clic en el icono de la rueda.

Haga clic en el icono de la rueda para la primera columna.

Desplácese hacia abajo hacia el fondo, seleccione el fondo de pantalla de gradiente y haga clic en Agregar el gradiente de fondo.

Coloque las paradas de gradiente haciendo clic en la barra de gradiente. Cambie sus colores seleccionándolos. La barra de gradiente los muestra como porcentaje por defecto, pero los cambiaremos a medida que avanzamos.

Ahora, para construir nuestros ejemplos de fondo circular. Forma circular de este fondo circular tendrá cinco paradas de gradiente y creará muchos círculos en los círculos. La primera parada en el gradiente para la primera parada del gradiente, establece hasta un 29% y usa el color #FFB482.

Posición: 29

Color: #FFB482

La segunda parada en el gradiente agrega la segunda parada de gradiente a la marca del 31% y cambia el color a #A84321.

Posición: 31
Color: #A84321A La tercera parada en el gradiente establece la parada del tercer gradiente al 51% y cambia el color a #FFC99B.
Posición: 51

Color: #FFC99B
El cuarto gradiente de parada estableció la parada del cuarto gradiente a 63% y cambia el color a #FFC99B.
Posición: 63

Color: #FFC99B
La quinta parada en el gradiente estableció la parada del quinto gradiente en la marca del 78% y cambia el color a #FFB67F.
Posición: 78

Color: #FFB67F
Configuración de gradiente Para la configuración de gradiente, cambie el tipo en la circular y la posición en el centro. Active el gradiente repetidamente, cambie la unidad en píxeles y active gradualmente sobre el fondo.
Tipo: circular

Posición: centro
Repetición de gradiente: si
Unidad de gradiente: píxeles

Coloque el gradiente sobre la imagen de fondo: sí
El fondo circular de la forma dos de la segunda forma circular de fondo incluirá cinco paradas de gradiente. Mostrará una parte de un modelo rodeado desde una esquina. La primera parada en el gradiente para la primera parada del grado, establece el 31% y cambia el color a #A84321.
Posición: 31
Color: #A84321
La segunda parada en el gradiente coloca la segunda parada de gradiente a 51% y cambia el color a #FFB482.
Posición: 51

Color: #FFB482
La tercera parada en el gradiente coloca la parada del tercer gradiente al 52% y cambia el color a #FFC99B.
Posición: 52

Color: #FFC99B
El cuarto gradiente de parada estableció la parada del cuarto gradiente a 63% y cambia el color a #FFC99B.
Posición: 63

Color: #FFC99B
La quinta parada en el gradiente estableció la última parada de gradiente al 78% y cambia el color a #FFB67F.
Posición: 78

Color: #FFB67F
Configuración de gradiente Entonces, establezca los ajustes de gradiente. Cambie el tipo en la circular y establezca la posición en la parte superior derecha. Active el gradiente de repetición, seleccione píxeles para la unidad y active el gradiente sobre la imagen de fondo. Cierre el módulo y guarde la configuración. TIP: Circular
Posición: arriba hacia arriba

Repetición de gradiente: si
Unidad de gradiente: porcentaje
Coloque el gradiente sobre la imagen de fondo: sí

La forma circular del fondo tres para la tercera forma circular de fondo, usaremos las paradas de cinco gradientes con dos apiladas. Esto creará un círculo enfocado. La primera parada en el gradiente coloca el primer gradiente de parada al 7% y cambia el color a #FFB482.
Posición: 7
Color: #FFB482
La segunda parada en el gradiente coloca la segunda parada de gradiente al 51% y cambia el color a #A84321.
Posición: 51
Color: #A84321

La tercera parada en el gradiente coloca la parada del tercer gradiente al 51%, en el segundo y cambia el color a #FFC99B.
Posición: 51
Color: #FFC99B

La cuarta parada de gradiente coloca la parada de cuarto gradiente en la marca del 63% y cambia el color a #FFC99B.
Posición: 63
Color: #FFC99B

La quinta parada en el gradiente finalmente coloca la última parada de gradiente a 78% de marca y cambia el color a #FFB67F.
Posición: 78
Color: #FFB67F

La configuración de gradiente eventualmente cambia el tipo de gradiente en la circular y la posición en el centro. Active la repetición del gradiente, seleccione porcentaje para la unidad y active el gradiente sobre la imagen de fondo. Cierre su configuración y guarde su trabajo.
Tipo: circular
Posición: centro

Repetición de gradiente: si
Unidad de gradiente: porcentaje
Coloque el gradiente sobre la imagen de fondo: sí

Formulario circular Forma Cuatro Nuestro último ejemplo utiliza cinco paradas de gradiente y muestra una cuarta parte de un modelo circular. La primera parada en el gradiente estableció el primer gradiente de parada a la marca del 51%. Los cambiaremos en VH en nuestro entorno. Cambiar color a #A84321.Position: 51
Color: #A84321
La segunda parada en el gradiente de gradiente se detiene sobre el primero, con 51%. Cambie el color a #FFC99B.
Posición: 51
Color: #FFC99B
La tercera parada en el gradiente coloca la parada del tercer gradiente en la marca del 63% y cambia el color a #FFB482.

Posición: 63
Color: #FFB482
La cuarta parada del gradiente de la posición de la parada del cuarto gradiente por encima de la parada del tercer gradiente en la marca del 63%.

Posición: 63
Color: #FFC99B
La quinta parada en el gradiente coloca la parada del quinto gradiente en la marca del 78% y cambia el color a #FFB67F.

Posición: 78
Color: #FFB67F
La configuración de gradiente eventualmente cambia el tipo en la circular y establezca la posición en la parte inferior derecha. Active la repetición de gradiente, cambie la unidad a VH y active gradualmente sobre el fondo. Cierre su configuración y guarde su trabajo.

Tipo: circular
Posición: la parte inferior derecha
Repetición de gradiente: si

Unidad de gradiente: altura de la ventana (VH)
Coloque el gradiente sobre la imagen de fondo: sí
Resultados Primero formulario de fondo de escritorio circular

Teléfono
La segunda forma circular de fondo de escritorio
Teléfono
Tercer formulario de fondo de escritorio circular
Teléfono
Cuarta forma circular de fondo de escritorio

Teléfono