Cómo ser creativo con las unidades de la división con columnas de 6 filas y amp;Visión

La variedad de estructuras de columnas de la columna de la divina le permite crear prácticamente cualquier diseño que tenga en mente. Y, aunque el uso de estructuras de columnas en su forma original es lo más simple, también puede dar un paso más, combinando los elementos de diseño en una fila con 6 columnas con unidades de visualización. Una de las cosas que podría crear, por ejemplo, es un collage. ¡No tendrá que usar el software de edición de imágenes en absoluto! Además, también puede permitir que cada una de las imágenes se abra en una caja de luz separada. En esta publicación, le mostraremos cómo hacer todo lo anterior utilizando solo las opciones incrustadas del DIV.
¡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.

Acercarse
Eliminamos todo el ancho de la canaleta entre la sección, la fila y las columnas para que podamos manejar los bordes y rellenos personalizados en cada módulo (usando unidades de visualización)
Ver unidades Asegúrese de que el diseño de elementos de diseño siga siendo el mismo en todas las dimensiones de la pantalla de escritorio
Ajustaremos la configuración de separación de cada elemento de diseño individualmente para que coincida con el diseño general del collage
Debido a las opciones de reacción en Div
Comencemos a crear la vista previa Backend Este es el resultado final de una perspectiva de fondo:

Agregue una nueva sección Lo primero que tendrá que hacer es crear una nueva página o abrir una existente y agregarle una sección ordinaria.

Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila y modifique la configuración de tamaño. Este es un paso importante en este tutorial. Al eliminar todos los márgenes predeterminados y los valores de llenado entre la sección, la fila y los módulos, podemos agregar manualmente el espacio a cada elemento de diseño utilizando unidades de visualización.
Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1

El espacio agregue algunas filas personalizadas a la izquierda y a la derecha.
Junta izquierda: 6.5VW
Junta derecha: 6.5VW

Agregue el módulo de texto de título en la columna 6 Agregar contenido es hora de comenzar a agregar módulos. Comenzaremos agregando un modo de texto en la columna 6. Incluya una copia del Título 2 de su elección.

Configuración de texto Entime luego acceda a la pestaña de diseño y cambie la configuración del texto del encabezado del módulo.
2 Sección de fuentes: Battambang
Título 2 Fuente de peso: Bold
2 Tamaño de texto: 4.2VW (escritorio), 10VW (tableta), 8VW (teléfono)
Rúbrica 2 Espaciación de litros: -1 PX

El espacio agregue algunos valores de espaciado personalizados para que esta línea se superponga con la columna 6 y 5 de la fila.
Margen superior: 10 VW
Margen izquierdo: -8VW (escritorio), 0VW (tableta y teléfono)
Margen derecho: -50VW (tableta y teléfono)

Agregue el módulo de descripción de texto a la columna 6 agrega contenido La siguiente forma que necesitamos en la columna 6 es una descripción del modo de texto. Agregue un contenido a su elección.

Espacio entonces, acceda a la configuración de espaciado y presione este módulo hacia la izquierda.
Margen superior: 2VW
Margen izquierdo: -8VW (escritorio), 0VW (tableta y teléfono) Margen recto: -50VW (tableta), -3VW (teléfono)
Agregue un módulo de botón a la columna 6 Agregue una copia y el último módulo requerido en la columna 6 es un módulo de botón. Agregue una copia de su elección.

Establece el botón Luego, acceda a la pestaña de diseño y modifique la configuración del botón.

Use estilos personalizados para el botón: Sí
El color del texto del botón: #ffffff
El ancho del nudo del botón: 1 PX
Cenas de libros: # 000000
El rasgo de botón de botón: 0 px
Distancia entre letras y botones: -2 PX
Espacio y nuevamente, tendremos que hacer que este módulo se superponga a la columna 5 y 6 utilizando valores de margen personalizados en la configuración de espaciado.


Margen superior: 2VW (escritorio), 5VW (tableta), 10VW (teléfono)
Margen izquierdo: -8VW (escritorio), 0VW (tableta y teléfono)
Margen derecho: -50VW (tableta y teléfono)
Revelaje izquierdo: 30 PX
Revestimiento derecho: 30 PX
Agregue el módulo de imagen no. 1 en la columna 1 ¡El tamaño de la imagen es hora de comenzar a agregar todos los diferentes módulos de imagen! El ejemplo que recreamos es 100% receptivo si solo usa imágenes con un ancho de 880 PX y una altura de 1320. Entonces, si desea crear exactamente el mismo ejemplo desde cero, debe usar imágenes con ese conjunto de tamaño específico. Sin embargo, si desea hacer esto para cualquier tipo de tamaño de imagen, deberá ajustar manualmente las unidades de visualización de cada módulo de imagen para que coincida con el diseño general.

Cargue la imagen Cada una de las primeras tres columnas contará dos módulos de imagen. Agregue el primer módulo de imagen a la columna 1.
Espacio entonces, acceda a la configuración de espaciado y aumente el tamaño de la imagen con la visual


Margen inferior: 0.5 VW (solo tableta y teléfono)
Margen izquierdo: -5VW (escritorio), 0.5VW (tableta y teléfono)
Margen derecho: -2VW (escritorio), 0.5VW (tableta y teléfono)
Agregue el módulo de imagen no. 2 en la columna 1 Cargue la carga de imagen y el segundo módulo de imagen en la columna 1.
Espacio y modifica la configuración de espaciado de este módulo.

Margen superior: 0.4VW (escritorio), 0.5VW (tableta y teléfono)

Margen inferior: 0.5 VW (solo tableta y teléfono)
Margen izquierdo: -8.1VW (escritorio), 0.5VW (tableta y teléfono)
Margen derecho: 3.7VW (escritorio), 0.5VW (tableta y teléfono)
ENLIZACIÓN IZQUIERDA: 3VW (escritorio), 0VW (tableta y teléfono)
Revelaje derecho: 3VW (escritorio), 0VW (tableta y teléfono)
Agregue el módulo de imagen no. 3 en la columna 2 ¡Cargue la imagen que nos movemos a la segunda columna! Agregue un nuevo módulo de imagen y cargue una imagen.
El espacio continúa utilizando valores de margen personalizado y llenado en la configuración de espaciado para reducir el tamaño de la imagen.

Margen superior: 0.5VW (solo tableta y teléfono)

Margen inferior: 0.5 VW (solo tableta y teléfono)
Margen izquierdo: -0.5VW (escritorio), 0.5VW (tableta y teléfono)
Margen derecho: 0.5VW (solo tableta y teléfono)
ENLIZACIÓN IZQUIERDA: 3VW (escritorio), 0VW (tableta y teléfono)
Revelaje derecho: 3VW (escritorio), 0VW (tableta y teléfono)
Agregue el módulo de imagen no. 4 En la columna 2 Cargue la imagen Agregue un segundo módulo de imagen a la columna 2.
Espacio y cambia la configuración de espaciado aquí.

Margen superior: 0.5 VW

Margen inferior: 0.5 VW (solo tableta y teléfono)
Margen izquierdo: -0.5VW (escritorio), 0.5VW (tableta y teléfono) Margen recto: 0.5VW (solo tableta y teléfono)
ENLIZACIÓN IZQUIERDA: 3VW (escritorio), 0VW (tableta y teléfono)
Revelaje derecho: 3VW (escritorio), 0VW (tableta y teléfono)
Agregue el módulo de imagen no. 5 en la columna 3 Cargue el interruptor de imagen a la siguiente y última columna. Agregue el primer módulo de imagen.
Modifie de espartiones Las configuraciones de Spaction del módulo de imagen. Estos valores ayudarán a aumentar el tamaño de la imagen como puede ver en la pantalla de impresión a continuación.
Margen superior: 0.5VW (solo tableta y teléfono)

Margen inferior: 0.5 VW (solo tableta y teléfono)

Margen izquierdo: -2,5VW (escritorio), 0.5VW (tableta y teléfono)
Margen derecho: -17.5VW (escritorio), 0.5VW (tableta y teléfono)
Agregue el módulo de imagen no. 6 en la columna 3 Cargue la imagen Agregue el siguiente módulo de imagen en la columna 3.
Espacio y cambia toda la posición agregando valores de margen personalizados. Para fines receptivos, agregamos este módulo a la columna 3 en lugar de la columna 2.
Margen superior: -26.7VW (escritorio), 0.5VW (tableta y teléfono)

Margen inferior: 0.5 VW (solo tableta y teléfono)

Margen izquierdo: -20,5VW (escritorio), 0.5VW (tableta y teléfono)
Margen derecho: 17.3VW (escritorio), 0.5VW (tableta y teléfono)
Habilite la caja de luz para el módulo de imagen no. 1 Una vez que tenga todas las imágenes en su lugar, puede continuar y activar la opción Lightbox en la primera configuración del módulo de imagen.
Abierto en Lightbox: Sí
Copie la opción LightBox y aplique a todas las imágenes en la sección Después de haber activado la opción Lightbox para el primer módulo de imagen, puede copiar esta opción y puede pegarla en todos los demás módulos de imagen. Agregue el radio de borde al módulo de imagen no. 1 Agregar y algunas esquinas redondeadas al primer módulo de imagen.

Extienda el rayo de borde a todas las imágenes en la sección y extienda estas esquinas redondeadas a todos los módulos de imagen en la sección para ahorrar tiempo.
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.

Pensamientos finales Las oportunidades que tiene con la nueva fila con 6 columnas divididas son infinitas. En esta publicación, le mostré cómo crear un collage sorprendente y único usando la fila con 6 columnas y las unidades de visualización. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.