Cada nueva página que diseñe con Divi Builder está estructurada utilizando varios diseños de columnas diferentes. Divi incluye diseños de columnas 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 únicos. 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.
Para comprender mejor lo que vamos a construir, aquí hay una versión del diseño antes y después usando esta técnica.
Antes
Este es el diseño de diseño sin usar 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.
Comprender 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 del canalón 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 Gutter en 1 para deshacerse de ese espacio.
Aquí hay una ilustración de cómo cada módulo abarca el ancho completo de una columna en una fila con un ancho de medianil 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, 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 quede oculto detrás de la columna. Esto es especialmente cierto si tiene un conjunto de colores de fondo. Entonces, si se encuentra con el problema de que el contenido del módulo se oculta detrás de una columna, probablemente esté extendiendo el módulo en la dirección incorrecta.
¿Por qué usar 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 te da 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 conservará muy bien los elementos de diseño. La tercera razón es que las columnas mantendrán su orden en el dispositivo móvil, por lo que los colores de fondo de las columnas seguirán siendo los mismos. Esto es útil para los 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.
Configuración de su sección y filas
Para comenzar, cree una nueva página e implemente el generador visual. Luego elige «Construir desde cero». Luego continúe y agregue un diseño de columna de 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 medianil: 1
Igualar 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 tener un diseño de seis columnas.
Para crear la tercera fila, simplemente duplique la segunda fila.
Adición de 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: Texto claro Tamaño del texto: 16px
Relleno personalizado: 2vw arriba, 2vw abajo, 2vw izquierda, 2vw derecha
En la segunda columna de la primera fila, agregue un módulo de publicidad con la siguiente configuración:
Título: [ingresar 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
Relleno personalizado: 3vw arriba, 2vw abajo
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 al apilar en el móvil. Entonces, lo más simple es agregar un módulo divisor y elegir no mostrar el divisor. Entonces podemos ocultar el divisor para smartphone.
Actualice la configuración del divisor de la siguiente manera:
Mostrar divisor: NO
Deshabilitar en: Teléfono
Adición de 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 publicidad 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:
|
01
02
|
<h2>Product</h2>01 |
Texto Color del texto: #ffffff
Texto Tamaño del texto: 50px
Altura de la línea de texto: 1em
Orientación del texto:
Título derecho 2 Alineación del texto:
Título izquierdo 2 Color del texto: #ffffff
Título 2 Altura de la línea: 3em
Relleno personalizado: 2vw arriba, 2vw abajo, 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, columna 5 y 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 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 simple de hacer.
Abra la configuración del módulo de imagen para la imagen en la primera fila. Como queremos extender la imagen hacia la derecha, vamos a agregar 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% Izquierda.
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 todo se ve bien en el móvil.
Ajuste del diseño para la pantalla del teléfono inteligente
En este momento, el diseño actual se verá muy bien en computadoras de escritorio y tabletas, pero los márgenes negativos que agregamos deberán ajustarse en los teléfonos inteligentes.
Normalmente, si quisiera corregir 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, aún será necesario un ajuste para tamaños de pantalla entre 479 px y 767 px de ancho. Debido a esto, la mejor forma de corregir el margen negativo en un 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:
|
01
02
03
04
05
06
07
08
|
/** 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 inferior a 479 px de ancho. ¡Esto soluciona el problema muy bien!
Ahora veamos el diseño final.
Pensamientos finales
Usar un margen negativo para ampliar los módulos puede ser una forma conveniente de obtener diseños de diseño únicos en computadoras de escritorio y tabletas sin tener que recurrir a un montón de CSS para cambiar los diseños de columnas 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 escuchar de usted en los comentarios.
¡Salud!