Cómo ser creativo con las unidades de ventana y fila de 6 columnas de Divi

La variedad de estructuras de columnas de Divi le permite crear básicamente cualquier diseño que tenga en mente. Y aunque usar las estructuras de columnas en su forma original es lo más sencillo de hacer, también puede ir un paso más allá combinando los elementos de diseño en una fila de 6 columnas con unidades de ventana.

Una de las cosas que podrías crear, por ejemplo, es un collage. ¡No tendrá que utilizar ningún software de edición de imágenes! Además de eso, 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 integradas de Divi.

¡Hagámoslo!

Avance

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

Acercarse

• Estamos eliminando todo el ancho de la canaleta entre la sección, la fila y las columnas para que podamos agregar margen personalizado y relleno a cada módulo manualmente (usando unidades de ventana gráfica)
• Las unidades de visualización garantizan que el posicionamiento de los elementos de diseño siga siendo el mismo en todos los tamaños de pantalla de escritorio
• Vamos a ajustar la configuración de espaciado de cada elemento de diseño individualmente para que coincida con el diseño general del collage.
• Gracias a las opciones de respuesta en Divi, podemos asegurarnos de que las configuraciones mencionadas anteriormente no se apliquen a tabletas y teléfonos

Empecemos a crear

Vista previa de backend

Este es el resultado final desde una perspectiva de backend:

Agregar nueva sección

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

Agregar nueva fila

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 cambie la configuración de tamaño. Este es un paso importante en este tutorial. Al eliminar todos los valores predeterminados de margen y relleno entre la sección, la fila y los módulos, podemos agregar manualmente el espaciado a todos y cada uno de los elementos de diseño utilizando unidades de ventana gráfica.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Agregue un poco de relleno personalizado a la izquierda y a la derecha a la fila también.

• Acolchado izquierdo: 6.5vw
• Acolchado derecho: 6.5vw

Agregar módulo de texto de título a la columna 6

Agregar contenido

¡Es hora de comenzar a agregar módulos! Comenzaremos agregando un título Módulo de texto a la columna 6. Incluya una copia del título 2 de su elección.

Configuración del texto del encabezado

Luego, vaya a la pestaña de diseño y cambie la configuración del texto del encabezado del módulo.

• Fuente del encabezado 2: Battambang
• Peso de fuente del encabezado 2: Negrita
• Encabezado 2 Tamaño del texto: 4.2vw (escritorio), 10vw (tableta), 8vw (teléfono)
• Espacio entre letras del encabezado 2: -1px

Espaciado

Agregue algunos valores de espaciado personalizados a continuación para que esta fila se superponga a la sexta y quinta columna de la fila.

• Margen superior: 10vw
• Margen izquierdo: -8vw (escritorio), 0vw (tableta y teléfono)
• Margen derecho: -50vw (tableta y teléfono)

Agregar módulo de texto descriptivo a la columna 6

Agregar contenido

El siguiente módulo que necesitaremos en la columna 6 es un módulo de texto descriptivo. Agregue algún contenido de su elección.

Espaciado

Luego, vaya a la configuración de espaciado y empuje este módulo también hacia la izquierda.

• Margen superior: 2vw
• Margen izquierdo: -8vw (escritorio), 0vw (tableta y teléfono)
• Margen derecho: -50vw (tableta), -3vw (teléfono)

Agregar módulo de botones a la columna 6

Agregar copia

El siguiente y último módulo necesario en la columna 6 es un módulo de botones. Agregue una copia de su elección.

Configuración de botones

Luego, vaya a la pestaña de diseño y cambie la configuración del botón.

• Usar estilos personalizados para el botón: Sí
• Color del texto del botón: #ffffff
• Ancho del borde del botón: 1 px
• Color del borde del botón: # 000000
• Radio del borde del botón: 0px
• Espacio entre letras del botón: -2px

Espaciado

Y nuevamente, necesitaremos hacer que este módulo se superponga a las columnas 5 y 6 usando 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)
• Relleno izquierdo: 30px
• Relleno derecho: 30px

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

Dimensiones de la imagen

¡Es hora de comenzar a agregar todos los diferentes módulos de imagen! El ejemplo que estamos recreando responde al 100% si solo usas imágenes con un ancho de 880 px y una altura de 1320 píxeles . Entonces, si está buscando crear exactamente el mismo ejemplo desde cero, debe usar imágenes con ese conjunto específico de dimensión. Sin embargo, si desea que esto funcione para cualquier tipo de conjunto de dimensiones de imagen, tendrá que ajustar las unidades de la ventana gráfica de cada módulo de imagen manualmente para que se ajusten al diseño general.

Cargar imagen

Cada una de las tres primeras columnas contará con dos módulos de imagen. Agregue el primer módulo de imagen a la columna 1.

Espaciado

Luego, vaya a la configuración de espaciado y aumente el tamaño de la imagen usando unidades de ventana gráfica.

• Margen superior: 0.5vw (solo tableta y teléfono)
• Margen inferior: 0.5vw (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 n. ° 2 a la columna 1

Cargar imagen

Cargue también el segundo módulo de imagen en la columna 1.

Espaciado

Y cambie también la configuración de espaciado de este módulo.

• Margen superior: 0.4vw (escritorio), 0.5vw (tableta y teléfono)
• Margen inferior: 0.5vw (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)
• Relleno izquierdo: 3vw (escritorio), 0vw (tableta y teléfono)
• Relleno derecho: 3vw (escritorio), 0vw (tableta y teléfono)

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

Cargar imagen

¡A la segunda columna! Agregue un nuevo módulo de imagen y cargue una imagen.

Espaciado

Continúe utilizando valores de margen y relleno personalizados 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.5vw (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)
• Relleno izquierdo: 3vw (escritorio), 0vw (tableta y teléfono)
• Relleno derecho: 3vw (escritorio), 0vw (tableta y teléfono)

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

Cargar imagen

Agregue también un segundo módulo de imagen a la columna 2.

Espaciado

Y cambie la configuración de espaciado aquí también.

• Margen superior: 0.5vw
• Margen inferior: 0.5vw (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)
• Relleno izquierdo: 3vw (escritorio), 0vw (tableta y teléfono)
• Relleno derecho: 3vw (escritorio), 0vw (tableta y teléfono)

Agregue el módulo de imagen n. ° 5 a la columna 3

Cargar imagen

A la siguiente y última columna. Agregue el primer módulo de imagen.

Espaciado

A continuación, cambie la configuración de espaciado del módulo de imagen. Estos valores ayudarán a aumentar el tamaño de la imagen, como puede observar en la pantalla de impresión a continuación.

• Margen superior: 0.5vw (solo tableta y teléfono)
• Margen inferior: 0.5vw (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 n. ° 6 a la columna 3

Cargar imagen

Agregue el siguiente y último módulo de imagen en la columna 3.

Espaciado

Y cambie su posición completa agregando valores de margen personalizados. Para propósitos de respuesta, estamos agregando este módulo a la columna 3 en lugar de a la columna 2.

• Margen superior: -26.7vw (escritorio), 0.5vw (tableta y teléfono)
• Margen inferior: 0.5vw (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)

Habilitar Lightbox para el módulo de imagen n. ° 1

Una vez que tenga todas las imágenes en su lugar, puede continuar y habilitar la opción de caja de luz en la configuración del primer módulo de imagen.

• Abrir en Lightbox: Sí

Copiar la opción Lightbox y aplicar a todas las imágenes de la sección

Una vez que haya habilitado la opción de caja de luz para el primer módulo de imagen, puede copiar esta opción y pegarla en todos los demás módulos de imagen de la sección.

Agregar radio de borde al módulo de imagen n. ° 1

Agregue también algunas esquinas redondeadas al primer módulo de imagen.

Ampliar el radio del borde a todas las imágenes de la sección

Y extienda estas esquinas redondeadas a todos los módulos de imagen de la sección para ahorrar tiempo.

Avance

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

Pensamientos finales

Las oportunidades que tiene con la nueva fila de 6 columnas de Divi son infinitas. En esta publicación, le mostramos cómo crear un collage impresionante y único utilizando las unidades de ventana y fila de 6 columnas. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!