Cómo extender los módulos para crear aspectos de columna únicos en el Div

Cada nueva página que diseña con Divi Builder está estructurada utilizando varias columnas diferentes. DIV incluye estructuras de columnas incorporadas para cada fila, desde una columna hasta seis columnas. Pero a veces puede sentir la necesidad de ajustar estas columnas para aspectos aún más únicos. Hoy, te mostraré una forma creativa de hacer esto exactamente. En este tutorial, le mostraré una técnica de diseño simple que le permite expandir los módulos utilizando bordes negativos para ocupar más columnas. Esta técnica le permitirá diseñar algunos modelos únicos personalizados que quizás no haya considerado posible.
Vamos a empezar. Tire de la vista para comprender mejor lo que construiremos, aquí hay una versión antes y después del proyecto utilizando esta técnica. Antes de este es el diseño de la apariencia sin usar bordes personalizados para expandir los módulos a otras columnas.

Después de esto es la apariencia después de la extensión de 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 debe poder ver cómo los módulos se han expandido para ocupar la columna adyacente. Y lo único necesario para lograr esto es una configuración de margen simple de -100%.
Y el resultado en la tableta es aún más interesante.

Comprensión del concepto por defecto, cada modo de división tiene un ancho del 100%, lo que significa que cada módulo que coloca en una columna cubrirá el ancho completo de la columna en la que se encuentra. El ancho de la canaleta es lo que se divide para determinar la cantidad de espacio entre cada columna. Entonces, para este tutorial, es importante establecer el ancho de la canaleta en 1 para deshacerse de ese espacio. Aquí hay una ilustración de cómo cada módulo se extiende a lo largo de una columna en una fila con un ancho de la canaleta establecido en 1. Ahora, si agrega un margen negativo (izquierda o derecha) a un módulo, puede extender fácilmente ese módulo para ocupar Más columnas. Esto le permite crear aspectos de columna personalizados para su página que puede no considerar. En esta ilustración, puede ver que agregando un margen izquierdo de -100% al módulo en la columna 5, extiende el módulo izquierdo para ocupar tanto la columna 5 como la columna 4.

Y una de las bonificaciones de usar el aspecto de seis columnas es que el diseño se mantiene hermoso en la tableta.

Además, debido a la forma en que se ordenan las columnas de izquierda a derecha, los módulos generalmente deben extenderse a la izquierda, de modo que el contenido no se oculta detrás de la columna. Esto es especialmente cierto si tiene un conjunto de colores de fondo. Entonces, si encuentra el problema del contenido de módulo oculto detrás de una columna, probablemente extienda el módulo en la dirección incorrecta.

¿Por qué usar un aspecto de seis columnas? Hay tres razones principales para usar un aspecto de seis columnas para esta técnica de diseño. La primera razón es que le da más columnas para trabajar. La segunda razón es que seis columnas se convierten en tres columnas en la tableta, lo que mantendrá muy bien los elementos de diseño. La tercera razón es que las columnas mantendrán su orden en el móvil para que los colores de fondo de la columna sigan siendo los mismos. Esto es útil para los aspectos de la red. Este diseño también funciona con la aparición de la columna 1/2 1/6 1/6 1/6 y con la aparición de la columna 1/6 1/6 1/2 porque ambas mantendrán las tres columnas en la tableta. Mostró cómo Esta técnica de diseño funciona, lo guiaré a través del proceso de construcción de una estructura de cuadrícula simple para presentar los productos. Luego le mostraré cómo expandir los módulos en otras columnas para crear un diseño de aspecto personalizado. Configuración de la sección y las filas para comenzar, crear una nueva página e implementar el Visual Builder. Luego elija “Construir desde cero”. Luego continúe y agregue una apariencia de 1/2 1/6 1/6 1/6 de columna a la primera sección.
Luego actualice la configuración de la fila de la siguiente manera: Wallpaper: # 222831 El ancho de la canaleta: 1 Econalalizar las alturas de la columna: Sí Margen personalizado: 0 PX hacia arriba, 0 px Down Lining personalizado: 0 px hacia arriba, 0 px abajo
Guarde la configuración. Porque las tres líneas para este diseño compartirán estas configuraciones ordinarias. Continúe un duplicado de la fila para crear una segunda fila. Luego cambie la segunda fila para parecer seis columnas.

Para crear la tercera fila, simplemente copie la segunda fila. Ajuste de módulos en la fila en la primera columna Desde la primera fila, agregue un módulo de texto con la siguiente configuración: Color de texto: Abrir Tamaño de texto: 16 PX Lineo personalizado: 2VW arriba, 2VW Abajo, 2VW izquierda, 2 VW a la 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: [Elija icono] icono de color: #EEEEEEEEEEEEEEE Font Dimensión: 50 PX Color de texto: Orientación de texto abierto: Centro de forro personalizado: 3VW Up, 2 VW Guardar la configuración en la tercera columna , agregue una imagen.

En la última columna, queremos dejarlo vacío, para que podamos expandir el módulo de imagen para llenar y la columna. Pero no queremos dejarlo completamente vacía, de modo que la columna esté activa al apilar en el móvil. Entonces, lo más fácil de hacer es agregar un módulo divisor y elegir no mostrar el divisor. Entonces podemos ocultar el divisor del teléfono inteligente.

Actualice la configuración del divisor de la siguiente manera: Mostrar divisor: No encienda: teléfono
Agregando módulos en las filas 2 y 3 ahora, pasamos en la fila 2. En la primera columna copia y pegue el módulo de la propaganda que creó en la segunda columna de la primera fila. Luego cambie el icono y el texto del título en un color negro.


Luego agregue un módulo de texto a la segunda columna con el siguiente: Contenido: & lt; h2 & gt; producto & lt;/h2 & gt;
01

El color del texto del texto: #fffff TAMAÑO TEXTO: 50 PX Altura de la línea de texto: 1EM Orientación del texto: Título derecho 2 Alineación del texto: Rúbrica izquierda 2 Color de texto: 2 VW a la izquierda, 2 VW Copiar a la derecha El texto de cómo acaba de crear y pegue a 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 el Números de cada uno de los módulos de texto, por lo que puede ver cómo se modifican estos módulos móviles más adelante. En la columna 2 de la fila 3, agregue otra imagen. Después de eso, complete todas las columnas vacías en su sección con un separador copiando y pegando el divisor que creó en el turno 1. Aquí está cómo.

Agregar un margen negativo para expandir los módulos a otras columnas en este momento podemos comenzar a expandir nuestros módulos utilizando el margen negativo. Este proceso es extremadamente simple de hacer. Abra la configuración del módulo de imagen para la primera imagen de fila. Debido a que queremos expandir la imagen a la derecha, agregaremos un margen recto de -100%.
Luego agregue un margen izquierdo de -100% al módulo de texto en la fila 2, columna 3.
Ahora copie los estilos de los módulos 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.

Solo queda expandir la imagen de la fila 3, columna 2. Actualice el módulo de imagen con un margen personalizado de -100% a la 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 (desde arriba) Agregue lo siguiente: Columna 1 Color del sótano: # 393E46 Para la segunda fila, agregue lo siguiente: Columna 1 Color del sótano: #EEEEEE Columna 4 Color de fondo: # 7971ea Columna 5 Color de fondo: # 393E46 Columna 6 Color de fondo: # 393E46 Y para la última fila, agregue lo siguiente: Columna 3 Color de fondo: # 7971EA Columna 6 Color de fondo :. Ahora nos aseguremos de que las cosas se vean bien en su móvil. Ajustando la apariencia de la pantalla del teléfono inteligente en este momento, la apariencia actual se verá muy bien en el escritorio y la tableta, pero esos márgenes negativos que hemos agregado deberán ajustarse en el teléfono inteligente. Normalmente, si me gustaría reparar el margen negativo en el teléfono inteligente, solo establecería el margen izquierdo en 0% en la configuración del módulo del teléfono inteligente. Sin embargo, habrá un ajuste necesario para las dimensiones de la pantalla entre 479px y 767px de ancho. Por esta razón, la mejor manera de remediar el margen negativo en el teléfono inteligente es hacerlo con un fragmento CSS personalizado. Vaya a la configuración de la página y agregue los siguientes CSS personalizados en la pestaña avanzada: /** Correce márgenes negativos en el teléfono inteligente ** /

@Media Only Screen y (Max-Width: 479px) {

.et_pb_module {

Margen-izquierda: 0%! IMPORTANTE;

Margen-derecha: 0%! IMPORTANTE;

}
}
Lo que hace este fragmento CSS es establecer el margen derecho e izquierdo de todos los módulos en 0% cuando el tamaño de la pantalla es igual o menos de 479 PX de ancho. ¡Esto resuelve el hermoso problema! Ahora, revisemos el diseño final.