Cómo diseñar líneas abstractas para enmarcar tu contenido en Divi

Divi te permite crear líneas abstractas de muchas maneras diferentes utilizando Visual Builder. Los divisores, los bordes, los degradados de fondo y las sombras de cuadro tienen las opciones que necesita. Y si se vuelve un poco creativo con el espaciado, puede usar una combinación de todos estos elementos para enmarcar su contenido de manera creativa.

En este tutorial, le mostraré cómo transformar fácilmente una sección de su diseño en un diseño único usando líneas.

Escurrir el bulto

Aquí hay un adelanto del 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 criptomonedas de Divi. El diseño de página Acerca de presenta un diseño único con una imagen de fondo de encabezado de líneas de conexión que continúa hacia abajo en la página para dividir el diseño de cuadrícula de dos columnas justo por la mitad. Así que decidí explorar el concepto de usar Divi para agregar líneas que enmarquen un poco más el contenido y agreguen un poco de brillo al diseño general.

Lo más destacado de este diseño es el uso del módulo divisor. Descubrí que el módulo Divider no se limita a crear líneas horizontales con un solo color. En realidad, con algunos ajustes, ¡también puedes crear líneas verticales con degradados de fondo!

Todo lo que necesitas es Divi

Lo único que necesitarás para este tutorial es Divi. Usaré el diseño de la página Acerca de la criptomoneda para proporcionar la base de nuestro diseño. Luego, personalizaré la configuración de las secciones, las filas y los módulos para completar el diseño.

Agregue Líneas con sus Bordes de Sección

Lo primero es lo primero. Continúe y cree una nueva página e importe el Diseño de página de Criptomoneda Acerca de utilizando Visual Builder.

El enfoque de este tutorial estará en el segundo segundo (el que está justo debajo del encabezado de ancho completo).

Agregar bordes de sección

Como ya sabrá, las secciones abarcan todo el ancho de su página de forma predeterminada. Por lo tanto, un borde de 2 píxeles a la izquierda y a la derecha de una sección apenas se notaría. Pero si le da a su sección un ancho personalizado, esos bordes aparecerán a la vista.

Vaya 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: Centro


Ancho del borde derecho: 4px


Color del borde derecho: #332faf


Ancho del borde izquierdo: 4px


Color del borde 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.

Agregar color de fondo del área de contenido

En este momento, el color de fondo del área de contenido es blanco para que pueda verlo expuesto en cada lado de su sección. Esto se puede cambiar yendo 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.

Color de fondo del área de contenido: #101535

Agregue líneas a su fila

Ahora actualicemos la configuración de Fila para crear algunos diseños de línea adicionales.

Agregar líneas usando degradados de fondo de columna

Para agregar una línea a nuestras columnas, podemos usar un pequeño truco con nuestro fondo degradado para agregar una división de degradado delgada en el costado de cada una de nuestras columnas. Para ello actualiza lo siguiente:

Color izquierdo del degradado de fondo de la columna 1: rgba(255,255,255,0)

Color derecho del degradado de fondo de la columna 1: rgba(237,240,0,0.34)


Dirección del degradado de la columna 1: 90 grados


Posición inicial de la columna 1: 99,5 %


Posición final de la columna 1: 0 %

Color izquierdo del degradado de fondo de la columna 2: rgba(51,47,175,0.51)

Color derecho del degradado de fondo de la columna 2: rgba(255,255,255,0)


Dirección del degradado de la columna 2: 90 grados


Posición inicial de la columna 2: 99,5 %


Posición final de la columna 2: 0 %

Dar a la fila un ancho personalizado

Dado que le dimos a nuestra sección un ancho personalizado, debemos darle a nuestra fila un ancho personalizado para crear más espacio para nuestros elementos de diseño. Establezca el ancho de la fila al 90%.

Agregue bordes a su fila

Para agregar bordes a su fila, actualice lo siguiente:

Ancho del borde izquierdo: 2px

Color del borde izquierdo: rgba(237,240,0,0.56)


Ancho del borde derecho: 2px


Color del borde derecho: #332faf

Espaciado

También necesitamos ajustar el espaciado de nuestra fila para ayudar a dividir la alineación de las líneas que agregaremos con nuestros módulos. Para hacer esto, actualice lo siguiente:

Relleno personalizado: 10 %

columna superior 1 Relleno personalizado: 5 % inferior, 3 % izquierda, 3 %


columna derecha 2 Relleno personalizado: 3 % derecha, 3 % izquierda

Agregar bordes a los módulos de texto

A continuación, agregaremos algunos bordes a nuestros módulos para diseños de líneas 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 ayudará a dividir nuestra alineación de líneas)

Ancho del borde izquierdo: 4px

Color del borde izquierdo: rgba(67,40,183,0.53)

En la columna de la derecha, actualice el módulo de texto superior con el encabezado con algo de espacio y un borde izquierdo.

Luego, agregue algo de espacio y un borde derecho al segundo módulo de texto en la columna derecha (el que tiene el texto ficticio) de la siguiente manera:

Margen personalizado: 5 % superior, 5 % derecho

Relleno personalizado: 5 % (superior, inferior, izquierda, derecha)

Ancho del borde derecho: 2px

Color del borde derecho: #332faf

Agregue bordes, degradado de fondo y sombra de cuadro al botón

Este elemento de diseño es quizás mi favorito de todos. Vamos a agregar elementos de línea para diseñar y enmarcar el botón usando bordes, un degradado de fondo y una sombra de cuadro.

Primero agreguemos un borde izquierdo al botón usando el siguiente degradado de fondo:

Color de degradado de fondo del botón izquierdo: #edf000

Color de degradado de fondo del botón derecho: rgba(255,255,255,0)


Dirección del degradado: 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 el fondo de la sección para que cree algo de espacio para nuestra sombra de caja:

Ancho del borde del botón: 24px

Color del borde del botón: #101535

Agregue algo de espacio para dar al texto del botón un poco de espacio para respirar:

Acolchado personalizado: 1em superior, 1em inferior

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

Posición horizontal de la sombra del cuadro: 2 px

Posición vertical de la sombra del cuadro: 2 px


Color de la sombra: #332faf


Posición de la sombra del cuadro: Sombra exterior

Agregar líneas con divisores personalizados

Aquí es donde las cosas se ponen un poco interesantes. Podemos agregar divisores en cualquier lugar que queramos a nuestra página. El truco consiste en utilizar los gradientes de fondo del divisor para crear un diseño único.

Primero, agreguemos un divisor justo encima del módulo de imagen en la columna izquierda de nuestra fila. Luego actualice la siguiente configuración:

Color de degradado de fondo del botón izquierdo: #edf000

Color de degradado de fondo del botón derecho: rgba(255,255,255,0)


Dirección del degradado: 90 grados


Posición inicial: 1 %


Posición final: 0 %

Color: #edf000

Peso del divisor: 2 px


Altura: 2 px


Relleno personalizado: 80 % restante

El Relleno personalizado empuja el color del borde hacia la derecha y expone el degradado 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 encabezado (reemplazando al que está actualmente allí).

Esto es lo que parece hasta ahora.

Agregar líneas divisorias verticales

Esta última fase agregará los toques finales al diseño mediante la introducción de algunas 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%

Relleno personalizado: 0px arriba, 0px abajo

Luego actualice el Relleno personalizado para todas las pantallas de la tableta…

Relleno de columna 1 (tableta): 20 % derecha

Relleno de columna 2 (tableta): 15 % derecha


Relleno de columna 1 (tableta): 30 % derecha


Relleno de columna 1 (tableta): 20 % izquierda

Esto compensará los divisores verticales (aún no agregados) cuando las columnas se apilen en pantallas móviles.

Ahora estamos listos para agregar nuestros módulos divisores.

Agregue un módulo divisor en la primera columna y actualice la siguiente configuración:

Mostrar divisor: NO

Color izquierdo del degradado de fondo: rgba(255,255,255,0)


Color derecho del degradado de fondo: #edf000


Altura: 100 px Ancho


: 2 px


Alineación del módulo: Derecho


Margen personalizado (escritorio): -300 px superior, 300 px inferior


Margen personalizado (tableta): 0px arriba, 0px abajo

Ahora copie ese módulo que acaba de crear y agréguelo a la segunda columna. Luego actualice lo siguiente:

Color izquierdo del degradado de fondo: #edf000

Color derecho del degradado de fondo: #332faf


Posición final: 40 %


Altura: 300 px


Alineación del módulo: medio

A continuación, copie y pegue el divisor de la primera columna en la tercera columna y actualice lo siguiente:

Alineación del módulo: medio

Margen personalizado (escritorio): 0 px


Margen personalizado (tableta): -200 px Arriba

Ahora copie ese módulo en la segunda columna y péguelo en la cuarta columna y actualice lo siguiente:

Degradado de fondo Color izquierdo: #332faf

Degradado de fondo Color derecho: #edf000


Posición final: 100 %


Altura: 200 px


Margen personalizado (tableta): -200 px Superior

Eso es todo. Mira el resultado final.

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

¿No hay suficientes líneas?

Siempre puede agregar fácilmente más líneas a su página agregando sombras de cuadro a cada uno de sus módulos divisores. Esto le permitirá colocar líneas básicamente en cualquier lugar que desee. El truco consiste en establecer la posición de la sombra del cuadro en la sombra exterior, elegir el color que desee y luego colocarlo en cualquier lugar de la página.

Mire cómo se vería agregar una sombra de cuadro al módulo divisor superior en la columna derecha…

Pensamientos finales

Al crear el diseño, mi objetivo inicial era explorar todas las formas posibles de agregar líneas a una sección en uno de los diseños prefabricados de Divi. ¡Descubrí que hay bastantes!

Y con las opciones de diseño flexible que se ofrecen en el módulo divisor, las posibilidades parecen infinitas.

Con suerte, esta publicación le brindó algunas herramientas más en su caja de herramientas de diseño para ayudarlo a maximizar Divi de formas nuevas e increíbles.

Espero escuchar de usted en los comentarios.