Cómo extender módulos para crear diseños de columnas únicos en Divi

Cada nueva página que diseña con Divi Builder está estructurada utilizando varios diseños de columnas diferentes. Divi incluye diseños de columna incorporados para cada fila que van desde una columna hasta seis columnas. Pero, a veces, puede sentir la necesidad de ajustar estas columnas para diseños aún más exclusivos. Hoy, les mostraré una forma creativa de hacer precisamente eso.

En este tutorial, le mostraré una técnica de diseño simple que le permite extender módulos usando márgenes negativos para ocupar más de una columna. Esta técnica le permitirá diseñar algunos diseños personalizados únicos que quizás no haya considerado posibles.

Empecemos.

Vistazo

Para comprender mejor lo que vamos a construir, aquí hay una versión del diseño antes y después utilizando esta técnica.

Antes

Este es el diseño de diseño sin utilizar márgenes personalizados para extender módulos a otras columnas.

Después

Este es el diseño después de extender los dos módulos de imagen y los tres módulos de texto etiquetados con los números "01", "03" y "05".

El cambio es sutil, pero debería poder ver que los módulos se han extendido para ocupar la columna adyacente. Y lo único que se necesita para lograr esto es una configuración de margen simple de -100%.

Y el resultado en tableta es aún más emocionante.

Entendiendo el concepto

De forma predeterminada, cada módulo Divi tiene un ancho del 100%, lo que significa que cada módulo que coloque en una columna abarcará todo el ancho de la columna en la que se encuentra. El ancho de la canaleta es lo que Divi usa para determinar la cantidad de espacio entre cada columna. Entonces, para este tutorial, es importante establecer el ancho de su Canal en 1 para deshacerse de ese espacio.

A continuación, se muestra una ilustración de cómo cada módulo abarca todo el ancho de una columna en una fila con un ancho de canaleta establecido en 1.

Ahora, si agrega un margen negativo (izquierdo o derecho) a un módulo, puede extender fácilmente ese módulo para ocupar más de una columna. Esto le permite crear diseños de columnas personalizados para su página que quizás no haya considerado.

En esta ilustración, puede ver que al agregar un margen izquierdo de -100% al módulo en la columna 5, se extiende el módulo hacia la izquierda para ocupar tanto la columna 5 como la columna 4.

Y una de las ventajas de usar el diseño de seis columnas es que el diseño se conserva muy bien en la tableta.

Además, debido a la forma en que las columnas están ordenadas de izquierda a derecha, los módulos generalmente deben extenderse hacia la izquierda para que el contenido no se oculte detrás de la columna. Esto es especialmente cierto si tiene un color de fondo establecido. Entonces, si se encuentra con el problema de que el contenido del módulo está oculto detrás de una columna, probablemente esté extendiendo el módulo en la dirección incorrecta.

¿Por qué utilizar un diseño de seis columnas?

Hay tres razones principales para utilizar un diseño de seis columnas para esta técnica de diseño. La primera razón es que le brinda más columnas con las que trabajar. La segunda razón es que los diseños de seis columnas se convierten en un diseño de tres columnas en la tableta, lo que preservará los elementos de diseño realmente bien. La tercera razón es que las columnas mantendrán su orden en el móvil, por lo que los colores de fondo de las columnas permanecerán iguales. Esto es útil para diseños de cuadrícula.

Este diseño también funciona con el diseño de columna 1/2 1/6 1/6 1/6 y el diseño de columna 1/6 1/6 1/6 1/2, ya que ambos conservarán las tres columnas en la tableta también.

Implementando el Diseño

Para mostrar cómo funciona esta técnica de diseño, lo guiaré a través del proceso de creación de un diseño de cuadrícula simple para presentar productos. Luego, le mostraré cómo extender módulos a otras columnas para crear un diseño de diseño personalizado.

Configurar su sección y filas

Para comenzar, cree una nueva página e implemente el constructor visual. Luego elija "Construir desde cero". Luego continúe y agregue un diseño de columna 1/2 1/6 1/6 1/6 a su primera sección.

Luego actualice la configuración de la fila de la siguiente manera:

Color de fondo: # 222831
Ancho de la canaleta: 1
Ecualizar alturas de columna: SÍ
Margen personalizado: 0px superior, 0px inferior
Relleno personalizado: 0px superior, 0px inferior

Guardar ajustes.

Dado que las tres filas de este diseño compartirán esta configuración de fila. Continúe y duplique la fila para crear una segunda fila. Luego, cambie la segunda fila para que tenga un diseño de seis columnas.

Para crear la tercera fila, simplemente duplique la segunda fila.

Agregar módulos a la fila 1

En la primera columna de la primera fila superior, agregue un módulo de texto con la siguiente configuración:

Color del texto: claro
Tamaño del texto del texto: 16px
Acolchado personalizado: 2vw superior, 2vw inferior, 2vw izquierda, 2vw derecha

En la segunda columna de la primera fila, agregue un módulo de propaganda con la siguiente configuración:

Título: [ingrese el título]
Contenido: [eliminar]
Icono: [elegir icono]
Color del icono: #eeeeee
Tamaño de fuente del icono: 50px
Color del texto: claro
Orientación del texto: centro
Acolchado personalizado: 3vw superior, 2vw inferior

Guardar ajustes

En la tercera columna, agregue una imagen.

En la última columna, queremos dejarla vacía para que podamos extender el módulo de imagen para llenar esa columna también. Pero no queremos dejarlo completamente vacío para que la columna esté activa cuando se apila en el móvil. Entonces, lo más simple que puede hacer es agregar un módulo divisor y elegir no mostrar el divisor. Entonces podemos ocultar el divisor para teléfono inteligente.

Actualice la configuración del divisor de la siguiente manera:

Mostrar divisor: NO
Desactivar en: teléfono

Agregar módulos a las filas 2 y 3

Ahora pasemos a la Fila 2. En la primera columna, copie y pegue el módulo de propaganda que creó en la segunda columna de la primera fila. Luego cambie el ícono y el texto del título a un color negro.

Luego agregue un módulo de texto a la segunda columna con lo siguiente:

Contenido:

<h2>Product</h2>
01

Color del texto del texto: #ffffff
Tamaño del texto del texto: 50px
Altura de la línea de texto: 1em
Orientación del texto: Derecha
Alineación del texto del encabezado 2: izquierda
Color del texto del encabezado 2: #ffffff
Altura de línea de rumbo 2: 3em
Acolchado personalizado: 2vw superior, 2vw inferior, 2vw izquierda, 2vw derecha

A continuación, copie el módulo de texto que acaba de crear y péguelo en la columna 4 y la columna 6.

También puede pegar el mismo módulo de texto en la columna 3, la columna 5 y la columna 6 de la Fila 3. Después de eso, puede usar el editor en línea para cambiar los números de cada uno de los módulos de texto para que pueda ver cómo se acumulan estos módulos en móvil más adelante.

En la columna 2 de la Fila 3, agregue otra imagen.

Después de eso, complete todas las columnas vacías a lo largo de su sección con un divisor copiando y pegando el divisor que creó en la fila 1.

Así es como debería verse su diseño en este punto (los cuadrados vacíos representan un módulo divisor):

Agregar margen negativo para extender módulos a otras columnas

En este punto podemos comenzar a extender nuestros módulos usando un margen negativo. Este proceso es extremadamente sencillo de realizar.

Abra la configuración del módulo de imagen para la imagen en la primera fila. Como queremos extender la imagen a la derecha, agregaremos un margen derecho de -100%.

A continuación, agregue un margen izquierdo de -100% al módulo de texto en la fila 2, columna 3.

Ahora copie los estilos del módulo y péguelos en los módulos de texto en la Fila 2, columna 6 y también en el módulo de texto en la Fila 3, columna 5.

Todo lo que queda es extender la imagen en la fila 3, columna 2. Actualice el módulo de imagen con un margen personalizado de -100% Left.

Agregar colores de fondo a sus columnas

La última fase del diseño es agregar colores de fondo a sus columnas. Para la primera fila (superior) agregue lo siguiente:

Color de fondo de la columna 1: # 393e46

Para la segunda fila, agregue lo siguiente:

Color de fondo de la columna 1: #eeeeee
Color de fondo de la columna 4: # 7971ea
Color de fondo de la columna 5: # 393e46
Color de fondo de la columna 6: # 393e46

Y para la última fila, agregue lo siguiente:

Color de fondo de la columna 3: # 7971ea
Color de fondo de la columna 6: # 7971ea

Eso es todo para el diseño de escritorio. Ahora asegurémonos de que las cosas se vean bien en dispositivos móviles.

Ajuste del diseño de la pantalla del teléfono inteligente

En este momento, el diseño actual se verá genial en computadoras de escritorio y tabletas, pero esos márgenes negativos que agregamos deberán ajustarse en el teléfono inteligente.

Normalmente, si quisiera arreglar el margen negativo en el teléfono inteligente, simplemente establecería el margen izquierdo en 0% dentro de la configuración del módulo para dispositivos de teléfonos inteligentes. Sin embargo, todavía habrá un ajuste necesario para tamaños de pantalla entre 479px y 767px de ancho. Debido a esto, la mejor manera de corregir el margen negativo en el teléfono inteligente es hacerlo con un fragmento de CSS personalizado.

Vaya a la configuración de la página y agregue el siguiente CSS personalizado en la pestaña Avanzado:

/** Fixes negative margins on smartphone**/

@media only screen and (max-width: 479px){
.et_pb_module {
    margin-left: 0%!important;
    margin-right: 0%!important;
}
}

Lo que hace este fragmento de CSS es establecer el margen derecho e izquierdo de todos los módulos en 0% siempre que el tamaño de la pantalla sea igual o menor a 479 px de ancho. ¡Esto soluciona el problema muy bien!

Ahora veamos el diseño final.

Pensamientos finales

Usar un margen negativo para extender los módulos puede ser una forma conveniente de obtener diseños de diseño únicos en el escritorio y la tableta sin tener que recurrir a un montón de CSS para cambiar los diseños de columna predeterminados de Divi. Y una de mis cosas favoritas de esta técnica de diseño es lo hermoso que se ve el diseño en la tableta. Con suerte, será útil para su próximo proyecto. En todo caso, siempre ayuda a obtener una comprensión más profunda de Divi.

Espero tener noticias tuyas en los comentarios.

¡Salud!