Uso de contornos de columnas para enfatizar su cuadrícula de diseño Divi

La estructura de elementos incorporada de Divi se puede utilizar de manera tradicional para definir y diseñar diferentes secciones, filas, columnas y módulos. Pero también se pueden utilizar de forma creativa para mejorar las estructuras de diseño de su página. En este tutorial, le mostraremos cómo usar los contornos de las columnas para enfatizar su cuadrícula de diseño Divi. Dedicaremos una fila de posición absoluta para crear los hermosos contornos de la columna de fondo y fusionarla con otras filas de nuestra sección. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue el diseño de los contornos de las columnas GRATIS

Para poner sus manos en el diseño de los esquemas de columnas libres, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

¡Empecemos a recrear!

Agregar nueva sección

Desbordes

Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y configure los desbordamientos como ocultos. Esto ayudará a garantizar que nada supere el contenedor de la sección, específicamente los contornos de las columnas que agregaremos más adelante en el tutorial.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y modifique la configuración de tamaño de la siguiente manera:

• Ancho: 100%
• Ancho máximo: 100%
• Alineación de filas: derecha

Espaciado

A continuación, empujaremos la fila hacia el lado derecho de la página en el escritorio usando algunas configuraciones de tamaño personalizadas.

• Margen superior: 200 px
• Relleno izquierdo: 47% (escritorio), 6% (tableta), 10% (teléfono)
• Relleno derecho: 6% (tableta), 10% (teléfono)

Frontera

Completaremos la configuración general de la fila agregando un borde superior e inferior.

• Ancho del borde superior e inferior: 4px
• Color del borde superior e inferior: #bdffed

Configuración de la columna 1

Espaciado

Una vez que haya completado la configuración general de la fila, abra la configuración de la primera columna y agregue algunos valores de espaciado personalizados.

• Acolchado superior: 12%
• Acolchado inferior: 12%
• Acolchado izquierdo: 3%
• Acolchado derecho: 3%

Configuración de la columna 2

Espaciado

Abra la configuración de la segunda columna a continuación y use la siguiente configuración de espaciado para ella:

• Acolchado superior: 12%
• Acolchado inferior: 12%
• Relleno izquierdo: 5% (escritorio), 20% (tableta), 15% (teléfono)
• Relleno derecho: 5% (escritorio), 20% (tableta), 15% (teléfono)

Agregue el módulo de texto n. ° 1 a la columna 1

Agregar contenido H2

Es hora de agregar módulos, comenzando con un módulo de texto que contenga contenido H2 en la columna 1.

Configuración de texto H2

Vaya a la pestaña de diseño del módulo y modifique la configuración del texto H2 en consecuencia:

• Fuente del título 2: Código fuente Pro
• Peso de fuente del encabezado 2: Negrita
• Título 2 Color del texto: rgba (35,38,211,0.46)
• Tamaño del texto del encabezado 2: 4vw (escritorio), 60px (tableta), 50px (teléfono)
• Encabezado 2 espaciado de letras: 5px

• Longitud horizontal de la sombra del texto del encabezado 2: 0.05em
• Longitud vertical de la sombra del texto del encabezado 2: 0.07em
• Color de la sombra del texto del encabezado 2: #bdffed

Movimiento vertical

Agregaremos algo de movimiento vertical también.

• Habilitar movimiento vertical: sí
• Desplazamiento inicial: 2
• Desplazamiento medio: 0
• Desplazamiento final: -2
• Disparador de efecto de movimiento: medio del elemento

Agregue el módulo de texto n. ° 2 a la columna 2

Agregar contenido

Agregue otro módulo de texto justo debajo del anterior e inserte algún contenido descriptivo de su elección.

Configuración de texto

Vaya a la pestaña de diseño del módulo y modifique la configuración del texto en consecuencia:

• Fuente de texto: código fuente Pro
• Color del texto: rgba (35,38,211,0.76)
• Tamaño del texto: 15px
• Altura de la línea de texto: 2em

Movimiento vertical

También usaremos algo de movimiento vertical para este módulo.

• Habilitar movimiento vertical: sí
• Desplazamiento inicial: 2
• Desplazamiento medio: 0
• Desplazamiento final: -2
• Disparador de efecto de movimiento: medio del elemento

Agregar módulo de botones a la columna 1

Agregar copia

El último módulo que necesitamos en la columna 1 es un módulo de botones. Agregue una copia de su elección.

Configuración de botones

Vaya a la pestaña de diseño del módulo y aplique el estilo del botón de la siguiente manera:

• Usar estilos personalizados para el botón: Sí
• Color del texto del botón: # 2326d3
• Radio del borde del botón: 0px

• Fuente del botón: Código fuente Pro
• Mostrar icono de botón: Sí
• Ubicación del icono del botón: Izquierda
• Mostrar solo el icono al pasar el mouse por el botón: No

Espaciado

Luego, agregue algunos valores de relleno personalizados.

• Acolchado superior: 20px
• Acolchado inferior: 20px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Movimiento vertical

Y complete la configuración del módulo agregando algo de movimiento vertical.

• Habilitar movimiento vertical: sí
• Desplazamiento inicial: 2
• Desplazamiento medio: 0
• Desplazamiento final: -2
• Disparador de efecto de movimiento: medio del elemento

Agregar módulo de imagen a la columna 2

Cargar imagen de proporción 1: 1

En la columna 2, el único módulo que necesitamos es un módulo de imagen. Sube una imagen con una proporción de 1: 1.

Dimensionamiento

Pase a la pestaña de diseño del módulo y fuerce el ancho completo en la imagen.

• Forzar ancho completo: Sí

Frontera

A continuación, convertiremos la imagen en un círculo agregando algunas esquinas redondeadas.

• Todos los rincones: 50vw

Sombra de la caja

Luego, agregaremos una sombra de caja.

• Posición horizontal de la sombra del cuadro: 30px
• Posición vertical de la sombra del cuadro: 30px
• Color de sombra: rgba (38,255,197,0.3)

Movimiento vertical

Y completaremos la configuración del módulo agregando algo de movimiento vertical.

• Habilitar movimiento vertical: sí
• Desplazamiento inicial: -2
• Desplazamiento medio: 0
• Desplazamiento final: 2
• Disparador de efecto de movimiento: medio del elemento

Clonar toda la fila dos veces

Una vez que haya completado la primera fila, puede clonarla dos veces.

Cambiar todo el contenido y las imágenes

Asegúrese de cambiar todo el contenido y las imágenes duplicados.

Agregar margen inferior a la última fila

Y abra la configuración de la última fila, vaya a la configuración de espaciado y agregue un margen inferior.

• Margen inferior: 200 px

Dedicar nueva fila (en la parte superior de la sección) a los contornos de las columnas

Estructura de la columna

Ahora que tenemos las filas generales en su lugar, es hora de agregar los contornos de las columnas. Para hacer eso, agregaremos una nueva fila en la parte superior de nuestra sección usando la siguiente estructura de columnas:

Dimensionamiento

Abra la configuración de la fila, vaya a la pestaña de diseño y cambie la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 90%
• Ancho máximo: 100%

Espaciado

También eliminaremos todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Posición

Luego, pase a la pestaña avanzada y cambie la posición de toda la fila. Al configurar la posición en absoluto, eliminaremos el espacio contenedor que ocupa la fila dentro de la página.

• Posición: Absoluto
• Ubicación: Top Center

Ancho de CSS del elemento principal de todas las columnas

Una vez que la configuración general de la fila está en su lugar, es hora de comenzar a diseñar las columnas. Primero, agregue un ancho personalizado a cada columna usando una línea de Código CSS dentro del elemento principal de la fila. Esto nos ayudará a mantener la estructura de la columna en pantallas de menor tamaño.

width: 20% !important;

Configuración de la columna 1

Espaciado

Luego, abra la configuración de la columna 1 y modifique los valores de relleno en diferentes tamaños de pantalla.

• Acolchado superior: 150vh (escritorio), 250vh (tableta y teléfono)
• Acolchado inferior: 150vh (escritorio), 250vh (tableta y teléfono)

Frontera

Agrega un borde izquierdo también.

• Ancho del borde izquierdo: 5px
• Color del borde izquierdo: #bdffed
• Estilo de borde izquierdo: discontinuo

Configuración de la columna 2

Color de fondo

A continuación, abriremos la configuración de la columna 2 y agregaremos un color de fondo.

• Color de fondo: # b5fff1

Frontera

También usaremos un borde derecho.

• Ancho del borde derecho: 4px
• Color del borde derecho: #bdffed
• Estilo de borde derecho: sólido

Configuración de la columna 3

Frontera

En la tercera columna, usaremos un borde derecho con la siguiente configuración:

• Ancho del borde derecho: 4px
• Color del borde derecho: rgba (35,38,211,0.12)
• Estilo del borde derecho: discontinuo

Configuración de la columna 4

Frontera

Luego, abriremos la configuración de la columna 4 y cambiaremos la configuración del borde en consecuencia:

• Ancho del borde derecho: 4px
• Color del borde derecho: #bdffed
• Estilo de borde derecho: sólido

Configuración de la columna 5

Frontera

Completaremos la configuración de la columna agregando un borde derecho a la columna 5 también.

• Ancho del borde derecho: 4px
• Color del borde derecho: rgba (35,38,211,0.12)
• Estilo del borde derecho: discontinuo

Agregar módulo divisor a las columnas 1 y 2

Visibilidad

En la vista previa para dispositivos móviles al comienzo de esta publicación, pudo notar un resultado ligeramente diferente al del escritorio. Solo permitimos que aparezcan los contornos de las columnas 1 y 2 agregando un Módulo divisor a esas columnas específicas. ¡Asegúrese de ocultar ambos divisores en la configuración de visibilidad y listo!

• Mostrar divisor: No

Avance

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

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo ser creativo con las columnas integradas de Divi. Más específicamente, le mostramos cómo usar los contornos de las columnas para enfatizar su cuadrícula de diseño Divi. Este enfoque ayuda a crear un diseño único sin la necesidad de un software de edición de imágenes adicional. ¡También pudo descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.