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!
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:
- El tema Divi instalado y activo
- Una nueva página creada para construir desde cero en el front-end (constructor visual)
- 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!