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 cuadrícula. Esto se hace escalonando elementos y acentos de diseño en posiciones que rompen la estructura normal de un diseño de cuadrícula. Puede vernos aplicar muchos de estos diseños de cuadrículas rotas en nuestros increíbles diseños Divi . Por lo general, esto implica algo como mover módulos fuera de una columna o fila para que se extiendan fuera de un contenedor o se superpongan a otros elementos de 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 las nuevas opciones de columna de Divi , puedes 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 construiremos en este tutorial.

Descargue el diseño de módulos y columnas 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 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.

Descárgalo gratis

Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a 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 y traducción de Divi para colocar las columnas y los módulos que contienen.

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 rejilla rota.

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

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

Lo que necesitas para empezar

Para comenzar, necesitará tener lo siguiente:

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

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

Columnas y módulos asombrosos 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.

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

Cambie el texto del título a «Módulo Divi» 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 del texto: izquierda


Fuente del título: amargo


Tamaño del texto del título: 50 px


Espaciado entre letras del título: 2 px

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: 16px

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: 25px


Espaciado entre letras del botón: 2px


Fuente del botón: Raleway


Peso de la fuente del botón: Negrita


Estilo de fuente del botón: TT

A continuación, 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.

Actualizar espaciado entre filas

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

Margen: 20% superior, 20% inferior

Agregar imágenes de fondo de columna

Aunque todavía no podremos verlos, vamos a añadir imágenes de fondo a cada una de las columnas. Se volverán visibles una vez que muevamos nuestro módulo fuera del contenedor de columnas con transform translate.

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

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

Agregue una sombra de cuadro a cada columna

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

Sombra de cuadro: ver captura de pantalla

Posición horizontal de sombra de cuadro: 0px


Posición vertical de sombra de cuadro: 0px


Fuerza de propagación de sombra de cuadro: 100px


Color de sombra: rgba(151,178,193,0.21)

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.

Notará que las sombras del cuadro se superpondrán. El uso de un color de sombra de cuadro semitransparente ayudará a crear un efecto de superposición genial. Esto es lo mejor de usar sombras de cuadro en el diseño. A diferencia de los bordes, puede agregar sombras grandes que parezcan bordes pero que no afecten el espaciado real del diseño.

Escalonar columnas Divi usando Transform Translate

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

Columna escalonada 1

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

Transformar Traducir eje X: 25 %

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

Columna escalonada 2

Para la columna 2, agregue la siguiente propiedad transform translate.

Transformar Traducir eje X: -25 %

Transformar Traducir eje Y: 25 % (escritorio), 5 % (tableta)

Escalonar los módulos usando Transform Translate

Ahora estamos listos para escalonar nuestros módulos moviéndolos fuera del contenedor de columnas. 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.

Módulo de escalonamiento 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 eje Y: 50 % (escritorio), 10 % (tableta)

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:

Sombra de cuadro: ver captura de pantalla

Posición horizontal de sombra de cuadro: 0px


Posición vertical de sombra de cuadro: 0px


Fuerza de propagación de sombra de cuadro: 100px


Color de sombra: rgba(151,178,193,0.21)

Módulo escalonado 2

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

Transformar el eje X de traducción: 60 %

Transformar el eje Y de traducción: -50 % (escritorio), -10 % (tableta)

Agregue una sombra de caja 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 que esta sombra de cuadro sea casi completamente transparente porque se superpondrá al módulo 1 y no queremos dificultar la lectura del contenido.

Sombra de cuadro: ver captura de pantalla

Posición horizontal de sombra de cuadro: 0px


Posición vertical de sombra de cuadro: 0px


Fuerza de propagación de sombra de cuadro: 100px


Color de sombra: rgba(151,178,193,0.09)

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 un elemento de diseño de marco que se encuentra en el fondo.

Sombra de cuadro: ver captura de pantalla

Posición vertical de sombra de cuadro: 0px


Color de sombra: #97b2c1

Diseño final

Ahora veamos el diseño final.

Escritorio

Tableta

Teléfono

Experimentar 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 del mismo tamaño que el módulo

Debido a que el tamaño de la columna lo dicta 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 hacer que esa imagen de fondo siempre se escale 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:

Relleno: 20% arriba, 15% abajo

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

Agregar más módulos

De la misma manera que 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.

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

Aquí está el resultado.

Cambio de colores

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

Este es un ejemplo de cómo se vería al actualizar las sombras del cuadro semitransparente para la columna 1, el módulo 1 y el módulo 2.

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, e involucra principalmente unas pocas propiedades de transformación y traducción para escalonar las columnas y los 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 lo puede llevar el diseño.

Espero escuchar de usted en los comentarios.

¡Salud!