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

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 contornos de columna GRATIS

Para poner sus manos en el diseño de esquemas de columnas gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

¡Empecemos a Recrear!

Agregar nueva sección

desbordamientos

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 sobrepase 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

Añadir Fila #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 la 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: 200px
• Relleno izquierdo: 47 % (escritorio), 6 % (tableta), 10 % (teléfono)
• Relleno derecho: 6% (tableta), 10% (teléfono)

Borde

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%
• Relleno izquierdo: 3%
• Relleno 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 ello:

• 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

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

• Título 2 Fuente: Código fuente Pro
• Encabezado 2 Peso de fuente: Negrita
• Título 2 Color del texto: rgba(35,38,211,0.46)
• Título 2 Tamaño del texto: 4vw (Escritorio), 60px (Tableta), 50px (Teléfono)
• Encabezado 2 Espaciado entre letras: 5px

• Encabezado 2 Sombra de texto Longitud horizontal: 0,05 em
• Encabezado 2 Sombra de texto Longitud vertical: 0,07 em
• Título 2 Color de sombra de texto: #bdffed

movimiento vertical

Agregaremos algo de movimiento vertical también.

• Habilitar movimiento vertical: Sí
• Compensación inicial: 2
• Desplazamiento medio: 0
• Compensación final: -2
• Disparador de efecto de movimiento: medio del elemento

Agregue el Módulo de Texto #2 a la Columna 2

Agregar contenido

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

Configuración de texto

Pase 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 línea de texto: 2em

movimiento vertical

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

• Habilitar movimiento vertical: Sí
• Compensación inicial: 2
• Desplazamiento medio: 0
• Compensación 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 alguna copia de su elección.

Configuración de botones

Pase a la pestaña de diseño del módulo y diseñe el 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
• Solo mostrar icono al pasar el mouse sobre el botón: No

Espaciado

Luego, agregue algunos valores de relleno personalizados.

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

movimiento vertical

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

• Habilitar movimiento vertical: Sí
• Compensación inicial: 2
• Desplazamiento medio: 0
• Compensación final: -2
• Disparador de efecto de movimiento: medio del elemento

Agregar módulo de imagen a la columna 2

Subir imagen con relació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í

Borde

Convertiremos la imagen en un círculo agregando algunas esquinas redondeadas a continuación.

• Todas las esquinas: 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í
• Compensación inicial: -2
• Desplazamiento medio: 0
• Compensación 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 e 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: 200px

Dedicar una 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 del canalón: 1
• Igualar alturas de columna: Sí
• Ancho: 90%
• Ancho máximo: 100%

Espaciado

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

• Relleno superior: 0px
• Relleno 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 del contenedor que ocupa la fila dentro de la página.

• Posición: Absoluta
• Ubicación: Centro superior

Ancho de CSS del elemento principal de todas las columnas

Una vez que la configuración general de las filas 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 columnas en tamaños de pantalla más pequeños.

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)

Borde

Agregue un borde izquierdo también.

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

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

Borde

Usaremos un borde derecho también.

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

Configuración de la columna 3

Borde

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 de borde derecho: punteado

Configuración de la columna 4

Borde

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

Borde

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 de borde derecho: punteado

Agregue el módulo divisor a la columna 1 y 2

Visibilidad

En la vista previa móvil al comienzo de esta publicación, pudo notar un resultado ligeramente diferente al de la computadora de escritorio. Solo permitimos que se muestren los contornos de las columnas 1 y 2 agregando un módulo divisor a esas columnas específicas. ¡Asegúrate 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 necesidad de software de edición de imágenes adicional. ¡También pudo descargar el archivo JSON de forma gratuita! 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 regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.