Uso de los contornos de la columna para enfatizar su cuadrícula de diseño de la divicidad

La estructura incorporada de los elementos de la división se puede utilizar en formas tradicionales para definir y estilizar diferentes secciones, filas, columnas y módulos. Pero también se pueden usar creativamente para mejorar las estructuras de diseño en su página en este tutorial, le mostraremos cómo usar los contornos de las columnas para enfatizar la cuadrícula de diseño de la divicidad. Dedicaremos una línea absolutamente posicionada para crear los hermosos contornos del fondo y unirlos con otras líneas en nuestra sección. ¡Podrá descargar el archivo JSON de forma gratuita! Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio

Móvil

Descargue los bocetos de la columna gratuita para poner sus manos en el esquema de la columna gratuita, primero deberá descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Comencemos a recrear! Agregue una nueva sección de recreación, comience agregando una nueva sección a la página en la que trabaja. Abra la configuración de la sección y establezca las afueras. Esto le asegurará que nada va más allá del contenedor de la sección, especialmente los bocetos de la columna que agregaremos más tarde al tutorial.
Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Ancho: 100%
Ancho máximo: 100%
Alineación de filas: correcto
Espacio entonces, empujaremos el giro hacia el lado derecho de la página en el escritorio utilizando algunas configuraciones de tamaño personalizada.

Margen superior: 200 PX
Revestimiento izquierdo: 47% (escritorio), 6% (tableta), 10% (teléfono)
Revestimiento derecho: 6% (tableta), 10% (teléfono)
Border completaremos la configuración de la línea general agregando un borde superior e inferior.

El ancho de los bordes superiores e inferiores: 4 PX
Color Edge hacia arriba y hacia abajo: #bdffed
Configuración de la columna 1 Espacio Después de haber completado la configuración de la fila general, abra la configuración de la primera columna y agregue algunos valores de espaciado personalizados. Cabezal superior: 12%

Finamiento inferior: 12%
ENLIZACIÓN IZQUIERDA: 3%
Revelaje derecho: 3%
Configuración de la columna 2 Espacio abrir y luego la configuración de la segunda columna y usar la siguiente configuración de espaciado:
Revestimiento superior: 12%

Finamiento inferior: 12%
Revelaje izquierdo: 5% (escritorio), 20% (tableta), 15% (teléfono)
Revestimiento derecho: 5% (escritorio), 20% (tableta), 15% (teléfono)
Agregue el módulo de texto no. 1 en la columna 1 Agregar contenido H2 es hora de agregar módulos, comenzando con un módulo de texto que contiene contenido H2 en la columna 1.
Configuración de texto H2 Cambiar a la pestaña Diseño del módulo y cambiar la configuración de texto H2 en consecuencia:

2 Sección de fuentes: código fuente PRO

Título 2 Fuente de peso: Bold
El color de 2 texto: RGBA (35,38,211,0,46)
Título 2 Dimensión de texto: 4VW (escritorio), 60 px (tableta), 50 px (teléfono)
Rúbrica 2 Espaciación de litros: 5 PX
Título 2 TEXTO Sombra Horizontal Longitud: 0.05em
Título 2 TEXTO Sombra Longitud vertical: 0.07em

Título 2 Texto de sombra de color: #BDFFED
El movimiento vertical agregará algún movimiento vertical.
Habilitar el movimiento vertical: sí

Compensación de inicio: 2
Brecha promedio: 0
Grado final: -2
El desencadenante del efecto de movimiento: el medio del elemento
Agregue el módulo de texto no. 2 En la columna 2 Agregar contenido Agregue otro módulo de texto justo debajo del anterior e ingrese un contenido de descripción.
Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto en consecuencia:

Texto de fuente: código fuente Pro

Color de texto: RGBA (35,38,211,0,76)
Tamaño del texto: 15 pxcînțeity de la línea de texto: 2em
Movimiento vertical usaremos un movimiento vertical para este módulo.
Habilitar el movimiento vertical: sí
Compensación de inicio: 2

Brecha promedio: 0
Grado final: -2
El desencadenante del efecto de movimiento: el medio del elemento
Agregue el módulo de botón a la columna 1 Agregue una copia El último módulo que necesitamos en la columna 1 es un módulo de botón. Agregue una copia de su elección.
Configuración del botón Pase a la pestaña Diseño del módulo y estilice el botón de la siguiente manera:
Use estilos personalizados para el botón: Sí

El color del texto del botón: # 2326d3

El rasgo de botón de botón: 0 px
Botón de fuente: código fuente PRO
Muestra el icono del botón: Sí
Icono de botón de colocación: izquierda

Muestre el icono solo en el cursor para el botón: no
Espacio entonces, agregue algunos valores de llenado personalizados.
Revestimiento superior: 20 px
Finamiento inferior: 20 PX


ENNIZACIÓN IZQUIERDA: 50 PX
Revestimiento derecho: 50 PX
Movimiento vertical y complete la configuración del módulo agregando un movimiento vertical.
Habilitar el movimiento vertical: sí
Compensación de inicio: 2

Brecha promedio: 0
Grado final: -2
El desencadenante del efecto de movimiento: el medio del elemento
Agregue el módulo de imagen a la columna 2 Cargue una imagen 1: 1 en la columna 2, el único módulo que necesitamos un módulo de imagen. Sube una imagen con una relación 1: 1.
Dimension Switch a la pestaña Diseño del módulo y forzar el ancho de imagen completo.
Fuerza el ancho completo: si

Border convertiremos la imagen en un círculo agregando algunas esquinas redondeadas.

Todas las esquinas: 50VW
Box Shadow y luego agregaremos un tono de caja.

Posición horizontal de la sombra de la caja: 30 px
Box Shadow Posición vertical: 30 pxculores sombra: RGBA (38.255.197.0.3)

Movimiento vertical y completaremos la configuración del módulo agregando un movimiento vertical.
Habilitar el movimiento vertical: sí
Comenzando el desplazamiento: -2
Brecha promedio: 0

Compensación final: 2
El desencadenante del efecto de movimiento: el medio del elemento
Clone toda la fila dos veces después de haber completado la primera fila, puede clonarlo dos veces.
Cambie todo el contenido e imágenes Asegúrese de cambiar todo el contenido y las imágenes duplicados.
Agregue el margen inferior a la última fila y abra la configuración de la última línea, acceda a la configuración del espacio y agregue un borde inferior.
Margen inferior: 200 PX

Dedique la nueva fila (en la parte superior de la sección) a los contornos de la estructura de la columna ahora que tenemos las líneas generales en su lugar, es hora de agregar los contornos de la columna. Para esto, agregaremos una nueva fila a la parte superior de nuestra sección utilizando la siguiente estructura de columna:

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

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1

Igualar las alturas de la columna: sí

Ancho: 90%
Ancho máximo: 100%
Espacio eliminamos y todo el revestimiento implícito, desde arriba y abajo.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Posicione luego, pase a la pestaña avanzada y reposicione toda la fila. Al establecer la posición en absoluto, eliminaremos el espacio del contenedor ocupado por el giro dentro de la página.

Posición: Absoluto
Ubicación: el centro superior
El ancho CSS del elemento principal de todas las columnas Una vez que la configuración general está en su lugar, es hora de comenzar el estilo de las columnas. Primero, agregue un ancho personalizado a cada columna utilizando 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 un tamaño más pequeño de la pantalla. Ancho: 20%! Importante; Configuración de espaciado de la columna 1 y luego abra la configuración de la columna 1 y cambie los valores de llenado en diferentes tamaños de pantalla.

Revelaje superior: 150VH (escritorio), 250VH (tableta y teléfono)
Bajo forro: 150 VH (escritorio), 250 VH (tableta y teléfono)
Border agregue un borde izquierdo.

Ancho del borde izquierdo: 5 PX


Color de borde izquierdo: #BDFFED
Estilo de borde izquierdo: puntiagudo
Configuración Columna 2 Color de fondo Luego, abriremos la configuración de la columna 2 y agregaremos un color de fondo.

Color de fondo: # B5FFF1
Border usaremos un borde recto.
El ancho del borde recto: 4 PX
Color de borde derecho: #bdffed

El estilo del marco correcto: sólido
Configuración de borde de la columna 3 En la tercera columna, usaremos un borde recto con la siguiente configuración:

El ancho del borde recto: 4 PX
Color del borde derecho: RGBA (35,38,211,0.12)
El estilo del borde derecho: puntiagudo
Configuración del borde de la columna 4 Entonces, abriremos la configuración de la columna 4 y cambiaremos la configuración de borde en consecuencia:

El ancho del borde recto: 4 PX
Color de borde derecho: #bdffed
El estilo del marco correcto: sólido
Configuración de borde de la columna 5 Completaremos la configuración de la columna agregando un borde recto a la columna 5.

El ancho del borde recto: 4 PX
Color del borde derecho: RGBA (35,38,211,0.12)
El estilo del borde derecho: coño
Agregue un módulo divisor a las columnas 1 y 2 de visibilidad en la vista previa móvil desde el comienzo de esta publicación, puede ver un resultado ligeramente diferente del del escritorio. Permitimos los contornos de la columna 1 y 2 solo agregando un módulo divisor a las columnas respectivas. ¡Asegúrese de ocultar ambos separadores en la configuración de visibilidad y haya terminado! Show Divider: No

Vista previa ahora que hemos dado todos los pasos, para echar 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 creativos con las columnas incorporadas del Div. Específicamente, le mostré cómo usar los contornos de las columnas para enfatizar la cuadrícula de diseño de la divicidad. Este enfoque ayuda a crear un diseño único, sin la necesidad de un software de edición de imágenes adicional. ¡Podrías 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.