Cómo escalonar columnas y módulos divi para diseños únicos de cuadrícula rota


El diseño web moderno todavía se trata de romper la red. Esto se logra escalonando elementos y acentos de diseño en posiciones que rompen la estructura normal de un diseño de cuadrícula. Puedes vernos aplicar muchos de estos diseños de cuadrícula rota a lo largo de nuestra increíble Diseños Divi. Por lo general, esto implica algo así como mover módulos fuera de una columna o fila para que se extiendan fuera de un contenedor o se superpongan a otros elementos en la página. Pero es posible que no haya pensado en mover la columna real.

En este tutorial, le mostraré cómo escalonar columnas y módulos Divi para obtener diseños únicos de cuadrícula rota. Con lo nuevo de Divi opciones de columna, puede mover fácilmente las columnas y los módulos que contienen. Esto le permite diseñar tanto el módulo como la columna con estilos únicos para un diseño creativo de cuadrícula rota.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido a los ejemplos de diseño que crearemos en este tutorial.

escalonar columnas y módulos divi

escalonar columnas y módulos divi

escalonar columnas y módulos divi

Descargue el diseño de columnas y módulos de Stagger Divi GRATIS

Para poner sus manos en los diseños de este tutorial, 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Idea básica explicada

La idea básica detrás de cómo escalonar columnas y módulos Divi para diseños únicos de cuadrícula rota implica usar la propiedad de transformación de transformación de Divi para colocar columnas y los módulos que contienen.

escalonar columnas y módulos divi

Una vez que los elementos están escalonados, tiene todas las características de diseño de una columna y un módulo para agregar acentos de diseño que crean diseños únicos de cuadrícula rota.

escalonar columnas y módulos divi

Entonces, por ejemplo, podría agregar un fondo único (color, imagen, etc.) con una sombra de cuadro a su columna y un fondo completamente diferente y sombra de cuadro a su módulo.

escalonar columnas y módulos divi

Ahora que tiene la idea básica, creemos el diseño desde cero.

Lo que necesitas para empezar

Para comenzar, deberá tener lo siguiente:

  1. El tema Divi instalado y activo
  2. Una nueva página creada para construir desde cero en el front-end (generador visual)
  3. Un par de imágenes que se utilizarán para el contenido simulado

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Impresionantes columnas y módulos para crear un diseño único de cuadrícula rota en Divi

Primero, cree una nueva sección regular con una fila de dos columnas.

escalonar columnas y módulos divi

Luego agregue un módulo de llamada a la acción en la columna 1.

escalonar columnas y módulos divi

Cambie el texto del título a "Divi Module" u otro título corto de su elección.

Luego actualice el módulo con un color de fondo oscuro y luego cambie el texto del título de la siguiente manera:

Color de fondo: # 333333
Alineación de texto: izquierda
Título de la fuente: amargo
Tamaño del texto del título: 50 px
Espacio entre letras de título: 2px

escalonar columnas y módulos divi

Luego actualice el botón del módulo de llamada a la acción de la siguiente manera:

Tamaño del texto del botón: 16 px
Color del texto del botón: # 333333
Color de fondo del botón:
Color del borde del botón: #ffffff
Radio del borde del botón: 25 px
Espaciado entre letras de botones: 2px
Fuente del botón: Raleway
Peso de fuente del botón: negrita
Estilo de fuente del botón: TT

escalonar columnas y módulos divi

Luego, copie el módulo y pegue el duplicado en la columna 2 para que tenga el mismo módulo de llamada a la acción en cada columna.

escalonar columnas y módulos divi

Actualizar espaciado de fila

Ahora agreguemos un margen superior e inferior a la fila para dejar espacio para el diseño.

Margen: 20% superior, 20% inferior

escalonar columnas y módulos divi

Agregar imágenes de fondo de columna

Aunque todavía no podremos verlos, agregaremos imágenes de fondo a cada una de las columnas. Serán visibles una vez que traslademos nuestro módulo fuera del contenedor de la columna con transform translate.

Continúe y abra la configuración de la columna 1 y agregue una imagen de fondo.

escalonar columnas y módulos divi

Luego abra la configuración de la columna 2 y agregue una imagen de fondo.

escalonar columnas y módulos divi

Agregue un cuadro de sombra a cada columna

Abra la configuración de la columna 1 y agregue la siguiente sombra de cuadro:

Box Shadow: ver captura de pantalla
Posición horizontal de la sombra de la caja: 0px
Posición vertical de la sombra de la caja: 0px
Fuerza de propagación de sombra de caja: 100 px
Color de sombra: rgba (151,178,193,0.21)

escalonar columnas y módulos divi

Luego agregue el mismo estilo de sombra de cuadro a la columna 2. Para acelerar las cosas, puede usar las opciones de clic derecho para copiar los estilos de sombra de cuadro en la columna 1 y luego pegarlos en los estilos de sombra de cuadro en la columna 2.

escalonar columnas y módulos divi

Notará que las sombras de la caja se superpondrán. Usar un color de sombra de caja semitransparente ayudará a crear un efecto superpuesto genial. Esto es lo mejor de usar sombras de caja en el diseño. A diferencia de los bordes, puede agregar sombras grandes que se vean como bordes, pero no afectan el espaciado real del diseño.

Escalonar columnas divi usando Transformar Traducir

En este punto, estamos listos para comenzar a escalonar las columnas y los módulos para completar el diseño de la cuadrícula rota. Primero, debemos mover las columnas al borde exterior de la página. Luego podemos mover los módulos hacia el centro más tarde.

Stagger Column 1

Abra la configuración de la columna 1 y agregue la siguiente propiedad de transformación de traducción.

Transformar Traducir eje X: 25%
Transformar traducir el eje Y: -25% (escritorio), -5% (tableta)

escalonar columnas y módulos divi

Stagger Column 2

Para la columna 2, agregue la siguiente propiedad de transformación de traducción.

Transformar Traducir eje X: -25%
Transformar traducir el eje Y: 25% (escritorio), 5% (tableta)

escalonar columnas y módulos divi

Alterne los módulos con Transformar Traducir

Ahora estamos listos para escalonar nuestros módulos moviéndolos fuera del contenedor de la columna. Esto expondrá la imagen de fondo de la columna y nos permitirá agregar otra sombra de cuadro al módulo para un elemento de diseño superpuesto adicional.

Stagger Module 1

Abra la configuración del módulo de llamada a la acción en la columna 1 y actualice lo siguiente:

Transformar Traducir eje X: -60%
Transformar traducir el eje Y: 50% (escritorio), 10% (tableta)

escalonar columnas y módulos divi

Agregue una sombra de cuadro al Módulo 1

Luego agregue la siguiente sombra de cuadro al módulo de llamada a la acción en la columna 1:

Box Shadow: ver captura de pantalla
Posición horizontal de la sombra de la caja: 0px
Posición vertical de la sombra de la caja: 0px
Fuerza de propagación de sombra de caja: 100 px
Color de sombra: rgba (151,178,193,0.21)

escalonar columnas y módulos divi

Stagger Module 2

Para mover el módulo en la columna 2, actualice lo siguiente:

Transformar Traducir eje X: 60%
Transformar traducir el eje Y: -50% (escritorio), -10% (tableta)

escalonar columnas y módulos divi

Agregue una sombra de cuadro al Módulo 2

A continuación, podemos agregar una sombra de cuadro al módulo de llamada a la acción en la columna 2. Necesitamos hacer esta sombra de cuadro casi completamente transparente porque se superpondrá al módulo 1 y no queremos dificultar la lectura del contenido.

Box Shadow: ver captura de pantalla
Posición horizontal de la sombra de la caja: 0px
Posición vertical de la sombra de la caja: 0px
Fuerza de propagación de sombra de caja: 100 px
Color de sombra: rgba (151,178,193,0.09)

escalonar columnas y módulos divi

Agregar un marco de sombra de cuadro de fila

Para completar el diseño, agreguemos una sombra de cuadro a la fila que sirve como elemento de diseño de marco que se encuentra en el fondo.

Box Shadow: ver captura de pantalla
Posición vertical de la sombra de la caja: 0px
Color de sombra: # 97b2c1

escalonar columnas y módulos divi

Diseño final

Ahora veamos el diseño final.

Escritorio

escalonar columnas y módulos divi

Tableta

escalonar columnas y módulos divi

Teléfono

escalonar columnas y módulos divi

Experimentando con diferentes diseños

Lo bueno de este diseño es que le permite cambiar fácilmente la cantidad de módulos, colores y espacios para nuevos diseños. Y también puede escalonar columnas y módulos Divi en varias posiciones.

Agregar espacio al módulo para crear una imagen de fondo de columna de igual tamaño al módulo

Debido a que el tamaño de la columna está dictado por el tamaño del contenido que contiene, cualquier espacio que agregue al módulo también aumentará el tamaño de la columna. Y dado que nuestra columna se ha escalonado con una imagen de fondo, esta es una manera fácil de tener esa imagen de fondo siempre escala con el tamaño del módulo para un diseño equilibrado.

Por ejemplo, abra la configuración del módulo de llamada a la acción en la columna 1 y actualice el relleno de la siguiente manera:

Acolchado: 20% superior, 15% inferior

Y observe cómo la imagen de fondo de la columna 1 se escala con el tamaño del módulo.

escalonar columnas y módulos divi

Agregar más módulos

De la misma manera, agregar más relleno al módulo aumenta el tamaño del fondo de la columna, agregar más módulos en la columna también aumentará el tamaño del fondo de la columna.

Por ejemplo, duplique el módulo en la columna 2 y observe cómo la imagen de fondo se expande para acomodar el espacio necesario para los dos módulos en la columna.

escalonar columnas y módulos divi

Luego, puede mover el módulo superior de la columna 2 un poco hacia la derecha para obtener un diseño alternativo agradable.

escalonar columnas y módulos divi

Aquí está el resultado.

escalonar columnas y módulos divi

Cambio de colores

Si desea hacer coincidir el diseño con su propio esquema de color, una excelente manera de hacerlo es actualizar los colores de sombra del cuadro.

Aquí hay un ejemplo de cómo se vería al actualizar las sombras de caja semitransparentes para la columna 1, módulo 1 y módulo 2.

escalonar columnas y módulos divi

Pensamientos finales

Espero que este tutorial le haya dado un poco de inspiración sobre cómo puede escalonar columnas y módulos Divi para crear sus propios diseños únicos de cuadrícula rota. La técnica es realmente simple, involucra principalmente algunas propiedades de traducción de transformación para escalonar las columnas y módulos y algunas sombras de caja para crear el diseño único roto. Siéntase libre de explorar más opciones de color e introducir más módulos para ver a dónde podría llevarlo el diseño.

Espero tener noticias suyas en los comentarios.

¡Salud!