Cómo diseñar líneas abstractas para adaptarse a su contenido en la división

Div le permite crear líneas abstractas de muchas maneras diferentes usando Visual Builder. Los divisores, los bordes, los gradientes de fondo y las sombras de caja tienen todas las opciones que necesita. Y si te vuelves un poco creativo al espaciar, puedes usar una combinación de todos estos elementos para adaptarse a tu contenido de manera creativa. En este tutorial, le mostraré cómo transformar fácilmente una sección de su apariencia en un diseño único usando líneas. Sneak Peak es una breve mirada al diseño que construiremos.

Inspiración de diseño La inspiración detrás de este diseño provino del paquete de diseño de las criptomonedas de división. La aparición de la página presenta un diseño único con la imagen de fondo de las líneas de revestimiento que continúan por la página para dividir la apariencia de las dos columnas justo en el medio. Así que decidí explorar el concepto de uso de la división para agregar líneas que enmarcan el contenido un poco más y para agregar un poco de brote al diseño general.
La principal culminación de este diseño es el uso del módulo divisor. Descubrí que el módulo divisor no se limita a la creación de líneas horizontales con un solo color. De hecho, con algunos cambios, ¡también puede crear líneas verticales con gradientes de fondo! Todo lo que necesitas es lo único que necesitarás para este tutorial es Div. Usaré criptomonedas sobre la página de diseño para proporcionar la base de nuestro diseño. Luego personalizaré la configuración de las secciones, filas y módulos para completar las líneas de adición de diseño con los bordes de la sección para comenzar con el comienzo. Vaya más allá y cree una nueva página e importe criptomonedas sobre la apariencia de la página utilizando Visual Builder. La suposición de este tutorial estará en el segundo (el que está bajo el encabezado de ancho completo). Agregue los bordes de sección como probablemente ya sepa, las secciones cubren implícitamente todo el ancho de la página. Entonces, un borde de 2 px a la izquierda y a la derecha de una sección sería difícil de ver. Pero si le da a la sección un ancho personalizado, estos bordes serán visibles. Acceda a la configuración de la sección y actualice la configuración de la sección de la siguiente manera: Ancho: 90% Alineación de la sección: Luz -Desede Ancho: 4 PX Edge recto: # 332FAF Ancho del borde izquierdo: 4 PX Edge izquierdo: RGBA (237,240,0,0, 51)

Ahora no se preocupe, el ancho personalizado de la sección volverá al 100% en dispositivos móviles. Agregue el color de fondo de la zona de contenido en este momento, el color de fondo de la zona de contenido es blanco, por lo que puede verlo expuesto a cada lado de la sección. Esto se puede cambiar accediendo a la configuración de su página y asignando el mismo color oscuro para el fondo del área de contenido para que coincida con el fondo de la sección. El color del fondo de la zona de contenido: # 101535 pone líneas en su turno ahora para actualizar la configuración de la fila para crear algunos modelos de línea adicionales.

Agregue líneas usando gradientes de fondo para agregar una línea a nuestras columnas, podemos usar un pequeño truco con nuestro fondo de gradiente para agregar una división de gradiente delgada a cada columna. Para hacer esta actualización, siga lo siguiente: Columna 1 Color izquierdo 1: RGBA (255,255,255.0) Columna 1 Derecha -Coloque ANTECEDENTES: RGBA (237,240,0.34) Columna 1 Dirección de gradiente: 90 grados Columna 1 Posición inicial: 99.5% Posición final : 0%

Columna 2 Gradiente de fondo izquierdo: RGBA (51,47,175,0.51) Columna 2 Jardín de color derecho: RGBA (255,255,255,0) Columna 2 Dirección de gradiente: 90 grados Columna 2 Posición inicial: 99.5% Columna 2 Posición final: 0%%
Dale a la fila un ancho personalizado porque le hemos dado a nuestra sección un ancho personalizado, debemos darle a la fila un ancho personalizado para crear más espacio para nuestros elementos de diseño. Establezca el ancho de la fila en 90%.

Agregue bordes en su turno para agregar bordes en su turno, actualice lo siguiente: Ancho del borde izquierdo: 2 px Color de borde izquierdo: RGBA (237,240,0.56) Ancho de borde recto: 2 PX Borde recto: # 332Fafsparation También debemos ajustar el espacio del espacio de Nuestra fila para ayudar a separar las líneas que agregaremos con nuestros módulos. Para hacer esto, actualice lo siguiente:

Revestimiento personalizado: 10% de la columna superior 1 revestimiento personalizado: 5% de baja, 3% izquierda, 3% de la columna derecha 2 finalización personalizada: 3% derecho, 3% izquierda

Agregue los bordes a los módulos de texto luego, agregaremos algunos bordes a nuestros módulos para proyectos de línea adicionales. Para el módulo de imagen en la columna izquierda, actualice la siguiente configuración: Ancho: 62% (esto nos dará más espacio y nos ayudará a romper la alineación de la línea) Ancho del borde izquierdo: 4 PX Edge izquierdo: RGBA (67,40,183, 0.53)

En la columna derecha, actualice el módulo de texto superior con el título con cierta distancia y un borde izquierdo.
Luego agregue espacio y un borde recto al segundo módulo de texto en la columna derecha (el que tiene el texto falso) de la siguiente manera: Margen personalizado: 5% arriba, 5% de revestimiento personalizado derecho: 5% (arriba, hacia abajo, derecha, derecha ) Ancho de borde recto: 2 px Color de borde recto: # 332FAF

Agregue bordes, gradiente de fondo y caja de sombra al botón Este elemento de diseño es probablemente mi favorito de todos. Agregaremos elementos de línea para estilizar y enmarcar el botón con bordes, un gradiente de fondo y una caja. Primero agregemos un borde izquierdo al botón utilizando el siguiente gradiente de fondo:

Botón de gradiente de fondo izquierdo: # EDF000 Botón de fondo del color derecho: RGBA (255,255,255.0) Dirección de gradiente: 90 grados Posición inicial: 1% Posición final: 0% Ahora aumentamos el tamaño del borde y cambiamos el color para que coincida con la sección de fondo, por lo que En cuanto a crear un espacio para la sombra de nuestra caja: el ancho del botón: 24 px El color del botón: # 101535 Agregue espacio para darle al botón una cámara de respiración: forro personalizado: 1em hacia arriba, 1em abajo

Ahora, para que la sombra de nuestra caja coloque la esquina inferior derecha del botón:


Posición horizontal de la sombra de la caja: 2 PX Box Sombra Posición vertical: 2 PX Color de sombra: # 332FAF Box Sombra Posición: Sombra exterior
Agregue líneas con divisores personalizados aquí las cosas se vuelven poco interesantes. Podemos agregar separadores donde quiera en nuestra página. El truco es usar gradientes de fondo divisorio para crear un diseño único. Primero, agregue un separador justo encima del módulo de imagen en la columna izquierda de nuestra fila. Luego, actualice la siguiente configuración: Botón de jardinería en color con la izquierda: # EDF000 Botón de jardinería de color derecho: RGBA (255,255,255.0) Dirección de gradiente: 90 grados Posición inicial: 1% Posición final: 0%

Color: # EDF000 Peso divisor: 2 PX Altura: 2 PX Lineo personalizado: 80% Izquierda

La trenza personalizada empuja el color del borde hacia la derecha y expone el gradiente de fondo para crear un efecto único. Ahora copie el módulo y péguelo en la parte superior de la columna derecha y también directamente debajo del módulo de texto con el título (reemplazando el que actualmente). Esto es lo que parece hasta ahora.
Agregue líneas de separación vertical Esta última fase agregará los últimos toques al diseño, introduciendo líneas verticales adicionales que sangran en la sección. Para hacer esto, necesitamos crear una nueva fila con cuatro columnas y actualizar la configuración de la fila de la siguiente manera: Ancho personalizado: 95% de alineación personalizada: 0 PX hacia arriba, 0 px y luego actualice el rodamiento personalizado para todas las pantallas de tabletas … Columna 1 revestimiento (tableta): 20% de columna derecha 2 revestimiento (tableta): 15% de columna derecha 1 revestimiento (tableta): 30% de columna derecha 1 revestimiento (tableta): 20% a la izquierda esto compensará para separadores verticales (que no se han agregado todavía) cuando las columnas se apilan en las pantallas móviles. Ahora estamos listos para agregar nuestros módulos de división. Agregue un módulo Divisor a la primera columna y actualice la siguiente configuración: Mostrar divisor: No izquierda Color del fondo Alineación: margen personalizado correcto (escritorio): -300px en la parte superior, 300px en el margen personalizado inferior (tableta): 0 px arriba, 0 px abajo

Ahora copie el módulo que acaba de crear y agréguelo a la segunda columna. Luego actualice lo siguiente: Color izquierdo del gradiente de fondo: # EDF000 Color derecho del gradiente de fondo: # 332FAF Posición final: 40% Altura: 300 PX Alineación del módulo: Medio
Luego copie y pegue el divisor en la primera columna en la tercera columna y actualice lo siguiente: Alineación del módulo: margen personalizado medio (escritorio): 0 px margen personalizado (tableta): -200px top

Ahora copie ese módulo en la segunda columna y péguelo a la cuarta columna y actualice lo siguiente: Color izquierdo del gradiente de fondo: # 332FAF Color derecho del gradiente de fondo: # EDF000 Posición final: 100% Altura: 200 PX Margen personalizado ( tableta): -200px Topast e. Verifique el resultado final.

Así es como se ve en la tableta y el teléfono inteligente …

¿No son suficientes líneas? Siempre puede agregar aún más líneas a su página agregando sombras de caja a cada uno de sus módulos de división. Esto le permitirá colocar las líneas prácticamente donde quiera. El truco es establecer la posición de la caja en el tono exterior, elegir el color deseado y luego colocarlo en cualquier lugar de la página. Mira cómo se vería el Módulo de divisor superior en la columna derecha …

Pensamientos finales Cuando construí el diseño, mi objetivo inicial era explorar todas las formas posibles de agregar líneas a una sección en uno de los aspectos prefabricados de Div. ¡Descubrí que hay suficientes! Y con las opciones de diseño flexibles ofrecidas en el módulo divisor, las posibilidades aparentemente se vuelven interminables. Esperamos que esta publicación le haya dado algunas otras herramientas en el conjunto de herramientas de diseño para ayudarlo a maximizar Divi de nuevas maneras increíbles. Espero tener noticias suyas en los comentarios.