Cómo superponer horizontalmente los bordes de las filas con Divi

Crear diseños de páginas que interactúen no siempre es una tarea fácil. Además de centrarse en la experiencia del usuario, los principios de diseño y las tendencias de diseño, también necesita crear algo que coincida con la marca de su empresa y cautive a sus visitantes a primera vista.

Si busca en nuestro blog, encontrará un montón de formas creativas de abordar su diseño web utilizando Divi y las opciones integradas versátiles de Divi. Hoy, estamos agregando otro enfoque creativo a esa lista. Le mostraremos cómo superponer creativamente los bordes de las filas para crear un diseño impresionante. Nos aseguramos de tener el mismo tipo de diseño en todos los tamaños de pantalla.

¡Hagámoslo!

Suscríbete a nuestro canal de Youtube

Avance

Crearemos un ejemplo desde cero, pero antes de sumergirnos en él, echemos un vistazo al resultado final en diferentes tamaños de pantalla.

Descargar fuente gratuita Mightype

Lo primero que debe hacer es descargar la fuente gratuita Mightype con letras a mano de AF studio. Vaya al siguiente enlace y habilite la descarga gratuita por correo electrónico.

Agregar nueva sección

Espaciado

Una vez que haya descargado la fuente gratuita mencionada en el paso anterior, puede continuar y crear una nueva página. Después de hacerlo, habilite Visual Builder, abra la primera sección de su nueva página y agregue algo de relleno personalizado:

• Relleno superior: 250 px
• Acolchado inferior: 250px

Agregar nueva fila

Estructura de la columna

Necesitaremos dos filas en total. Comenzaremos con el primero y luego lo clonaremos una vez que esté listo. Agregue una nueva fila a su sección usando la siguiente estructura de columnas:

Columna 1 Fondo degradado

Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue el siguiente fondo degradado de la columna 1:

• Color 1: #ffffff
• Color 2: rgba (0,255,233,0.25)
• Tipo de gradiente de columna: radial
• Dirección radial de la columna: izquierda
• Posición inicial de la columna: 59%
• Posición final de la columna: 59%
• Degradado del lugar de la columna sobre la imagen de fondo: Sí

Patrón de fondo de la columna 1

Continúe guardando el siguiente patrón en su computadora y cargándolo como imagen de fondo de la columna 1:

Una vez que haya cargado el patrón, utilice la siguiente configuración de imagen de fondo:

• Tamaño de la imagen de fondo de la columna: tamaño real
• Repetición de la imagen de fondo de la columna: Espacio

Alineación de filas

Habilite también la alineación de filas a la derecha.

Dimensionamiento

También estamos usando algunas configuraciones de tamaño personalizadas para esta fila:

• Usar ancho personalizado: Sí
• Ancho personalizado: 950px

Espaciado

Estos son los valores de espaciado que debe agregar a continuación:

• Margen inferior: 100 px
• Margen derecho: -30px (tableta y teléfono)
• Relleno superior: 0px
• Acolchado inferior: 0px

Frontera

Por último, pero no menos importante, agregue un borde en la parte superior, izquierda e inferior de su fila:

• Ancho del borde: 14px
• Color del borde: # 000000
• Estilo de borde izquierdo: Doble

Agregar módulo de texto de título

Agregar copia H2

¡Ahora podemos comenzar a agregar nuestros módulos! Agregue un módulo de texto de título y asegúrese de que su copia sea H2.

Color de fondo

Vamos a interrumpir el borde izquierdo de nuestra fila agregando un color de fondo blanco al Módulo de texto.

Cargar fuente Mightype

A continuación, busque la fuente Mightype en su computadora y cárguela en su biblioteca de fuentes haciendo clic en el botón de carga en su lista de fuentes.

Seleccione el archivo de fuente Mightype, asigne un nombre a su fuente y cárguelo en su biblioteca de fuentes.

Configuración de texto H2

Una vez que haya agregado la nueva fuente, continúe y realice algunos otros cambios en la configuración de texto H2:

• Fuente del título 2: Mightype
• Color del texto del encabezado: # 000000
• Tamaño del texto del encabezado 2: 150 px (escritorio), 100 px (tableta), 60 px (teléfono)

Espaciado

Para cada uno de los módulos que desee superponer los bordes de las filas, deberá agregar un margen negativo. Este margen negativo solo afectará al módulo en cuestión, no a la fila en la que se colocó. El margen negativo que deberá agregar depende de la cantidad de caracteres que se utilicen en su copia.

• Margen superior: 200 px
• Margen inferior: 100 px
• Margen izquierdo: -35%
• Relleno superior: 50px
• Acolchado inferior: 50px

Modo de mezcla

Y para asegurarse de que el color de fondo del módulo de texto solo afecte el borde de la fila, y no el fondo de la columna 1, habilite el modo de fusión 'Multiplicar' en la configuración de Filtros.

Agregar módulo de texto de descripción

Color de fondo

Justo debajo del título Módulo de texto, continúe y agregue una descripción del Módulo de texto con un color de fondo blanco.

Configuración de texto

Vaya a la configuración de texto y realice algunos cambios:

• Tamaño del texto: 22px (escritorio), 18px (tableta), 15px (teléfono)
• Altura de la línea de texto: 1.8em
• Orientación del texto: centro

Dimensionamiento

Disminuya el tamaño de este módulo de texto a '96% 'a continuación.

Espaciado

Agregue un poco de espacio también:

• Margen inferior: 200 px
• Margen izquierdo: -50%
• Acolchado superior: 20px
• Acolchado inferior: 20px

Modo de mezcla

Y use el modo de fusión 'Multiplicar' aquí también.

Fila de clonación

¡Terminamos de modificar la primera fila! Creemos el mismo resultado pero en el otro lado de la página. Para ahorrarnos algo de tiempo, clonaremos la fila que ya tenemos y haremos algunos cambios en el camino.

Cambiar la configuración de la fila

Columna 1 Fondo degradado

Lo primero que deberá cambiar es el fondo degradado de la columna 1:

• Color 2: rgba (255,187,0,0.33)
• Dirección radial de la columna: derecha

Alineación de filas

Queremos que la fila aparezca en el otro lado, por eso elegiremos Alineación de filas a la izquierda.

Espaciado

También estamos ajustando la configuración de espaciado:

• Margen izquierdo: -25% (tableta y teléfono)

Frontera

Elimine el borde izquierdo que se ha aplicado a su fila y aplíquelo en el lado derecho en su lugar:

• Ancho del borde derecho: 14px
• Color del borde derecho: # 000000
• Estilo de borde derecho: Doble

Cambiar la configuración del módulo de texto del título

Espaciado

A continuación, cambie la configuración de espaciado del módulo de texto del título:

• Margen izquierdo: 52% (escritorio y tableta), 58% (teléfono)
• Margen derecho: -52% (escritorio y tableta), 58% (teléfono)

Cambiar la configuración del texto de la descripción

Espaciado

Por último, pero no menos importante, la descripción del módulo de texto también necesita otros valores de espaciado:

• Margen izquierdo: 50%
• Margen derecho: -50%

Avance

Ahora que hemos pasado por todos los diferentes pasos, echemos un vistazo final al resultado final en diferentes tamaños de pantalla.

Pensamientos finales

La superposición de los bordes de las filas con las opciones integradas de Divi puede brindarle a su sitio web la personalización que podría haber estado buscando. En esta publicación, le mostramos exactamente cómo hacerlo. Hemos recreado un hermoso ejemplo desde cero. ¡Este ejemplo se ve muy bien en todos los tamaños de pantalla y solo hemos usado las opciones integradas de Divi! Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!