Cómo crear un aspecto de la cuadrícula CSS para los módulos de división

Para aquellos que ya están familiarizados con la creación de sitios web en DIV, la creación de planes de red personalizados es un aspecto esencial de Divi Builder. Simplemente cree una fila y elija entre varias columnas hechas para esa fila. Una vez que la aparición de la columna está en su lugar, simplemente agregamos el contenido / módulos que queremos en cada columna. ¿Pero si queríamos un aspecto adicional para estos módulos? En este tutorial, exploraremos cómo expandir los aspectos de la cuadrícula de la Divica creando estructuras de cuadrícula CSS para módulos Divi en una sola columna. La propiedad de la red CSS (junto con CSS Flex) es una forma popular de crear planes de red predecibles y receptivos para solo unas pocas líneas CSS. Con esto, podemos organizar todos los módulos en una columna en una cuadrícula completamente receptiva. Piense en ello como una apariencia adicional de la cuadrícula para módulos que puede agregar a cualquier columna de la Divica. Pero una de las mejores cosas de esta técnica es que cada módulo adyacente tendrá la misma altura y ancho, sin hacer todo tipo de problemas al tratar de hacerlo utilizando alturas o alturas personalizadas en cada módulo.
Tal vez sea mejor saltar y mostrarte cómo funciona esto. ¡Vamos a empezar! Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial. Y aquí hay un vistazo a la misma técnica, utilizando diferentes módulos y modelos en el paquete de gimnasio. Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No se “volverá a suscribirse” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.

Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la aparición de la sección en la Biblioteca de la Divica, navegue en la Biblioteca de la Divica.
Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar. Después de que haya terminado, el aspecto de la sección estará disponible en Divi Builder. Pasemos al tutorial, ¿no? Qué necesitas para empezar
Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.

Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Creación de un aspecto de cuadrícula CSS personalizado para los módulos DIV Parte 1: agregar módulos a una columna de división antes de organizar nuestros módulos en un aspecto de la cuadrícula, primero agregue todos los módulos que queremos usar en nuestra columna. Para comenzar, cree una nueva fila con una columna en la sección predeterminada habitual de Divi Builder.
Creación de módulos en la columna de fila, agregue un nuevo módulo de texto. Luego actualice la configuración del contenido del módulo de la siguiente manera:
Agregue un título de H2 sobre el texto del párrafo del contenido predeterminado del cuerpo

Color de fondo: # 333333
Luego actualice la configuración de diseño de la siguiente manera:
Texto de fuente: Poppins

Color de texto: Abierto
Seleccione la pestaña H2 debajo del texto del encabezado
2 encabezado de estilo de fuente: TT
Revestimiento: 10% más, 10% de baja, 10% izquierda 10% derecha
Nota: Para simplificar, permaneceremos con el uso de varios módulos de texto con diferentes colores de fondo para mostrar una distinción entre cada módulo. Pero, como explicaré más adelante, puede usar cualquier combinación de módulos que desee (módulos de propaganda, llamada a la acción, módulos de formulario de contacto, etc.). Abra las capas de las capas (opcionales) y cree el siguiente módulo de texto de la siguiente manera: duplicar el módulo de texto.
Abra la configuración de texto para el módulo duplicado.

Actualizar el color de fondo
Color de fondo: # 4C6085
Repita este proceso para crear el tercer modo de texto de la siguiente manera:
Duplicar el módulo de texto anterior.
Abra la configuración de texto para el módulo duplicado.

Actualizar el color de fondo
Color de fondo: # 39A0ed
Repita este proceso una vez más para crear el cuarto modo de texto de la siguiente manera:
Duplicar el módulo de texto anterior.
Abra la configuración de texto para el módulo duplicado.

Actualizar el color de fondo
Color de fondo: # 13C4A3
Para crear los siguientes cuatro módulos, use la función de elección múltiple para seleccionar los cuatro módulos. Luego copie y pegue los módulos a la misma columna para crear un total de ocho módulos de texto.
Parte 2: Creando la apariencia de la cuadrícula CSS para los módulos ahora que nuestros módulos están en su lugar, estamos listos para crear la cuadrícula CSS para estos módulos. Configuración de fila Para este ejemplo, usamos un aspecto de columna para que podamos mostrar nuestra cuadrícula del módulo en un aspecto de ancho completo. Por lo tanto, tendremos que actualizar la configuración de la fila para asegurarnos de que la fila se estire a lo largo del ancho de la página. También debemos eliminar el ancho de canaleta predeterminado para que no se agregue bordes adicionales a nuestros módulos. Abra la configuración de la fila y actualice lo siguiente: Gggheab Ancho: 1
Ancho: 100%

Ancho máximo: 100%

Agregar la cuadrícula CSS a la columna para construir la apariencia de la cuadrícula del módulo es el paso clave en el tutorial que crea la apariencia de los módulos utilizando la propiedad CSS Grid. Para hacer esto, agregaremos tres líneas CSS a la columna que determinarán la apariencia de nuestros módulos. Abra la configuración de la columna y, en la pestaña avanzada, pegue el siguiente CSS en el elemento principal: Display: Grid;
Columnas de plantilla de cuadrícula: 25% 25% 25% 25%;
Gridu-Auto-Rows: Auto;
La primera línea del CSS presenta el contenido (o módulos) de acuerdo con el módulo de cuadrícula CSS.

Pantalla: la segunda línea de CSS define la plantilla de columna de la cuadrícula. En este caso, la cuadrícula tendrá cuatro columnas con un ancho del 25% cada una (ver captura de pantalla arriba). Grile-Cheat-Colon: 25% 25% 25% 25% La tercera línea de CSS especifica que las filas se generarán automáticamente, según sea necesario, con un tamaño (o altura) establecido en el automóvil. Esto significa que la altura de cada fila estará determinada por la altura vertical del contenido (o módulos) en una fila (ver la captura de pantalla de arriba). Grile-Automation: Ajuste automáticamente la apariencia de la cuadrícula en el móvil, necesitaremos ajustar la apariencia de la cuadrícula en los dispositivos móviles, según sea necesario. Para hacer esto, simplemente debemos agregar el CSS adicional a cada tableta en un dispositivo móvil que Cambia el número de columnas y el ancho de cada columna. En este ejemplo, cambiaremos la apariencia de la cuadrícula para que los módulos de tableta tengan dos columnas cada 50% de ancho. Abra las opciones de responsabilidad y seleccione la pestaña de la tableta debajo del elemento principal y pegue el siguiente CSS:
Pantalla: cuadrícula;
Columnas de plantilla de cuadrícula: 50% 50%;

Gridu-Auto-Rows: Auto;
Para mostrar el teléfono, queremos un aspecto de una sola columna. Para crear esto, pegue los siguientes CSS en la pestaña del teléfono Elemento principal: Display: Grid;
Columnas de plantilla de cuadrícula: 100%;

Gridu-Auto-Rows: Auto;
Parte 3: Hacer cambios en los elementos de la cuadrícula (o módulos) agregar un nuevo módulo a la cuadrícula y la forma en que reacciona ahora que cada módulo está en la cuadrícula CSS, agregando un nuevo módulo presionará los otros módulos hacia la derecha y creará automáticamente nuevas filas, según sea necesario. Debido a que de todos modos necesitamos un módulo para este aspecto, copie el primer módulo de texto para ver cómo se ajustan los otros módulos en la cuadrícula. Como la cuadrícula responde a diferentes cantidades de contenido en este momento, todos los módulos de texto tienen la misma cantidad de contenido, Por lo tanto, es difícil ver cómo la apariencia de la cuadrícula maneja los módulos con diferentes cantidades de contenido. Para ver cómo funciona, cambie la cantidad de texto del párrafo en cada módulo. Observe que los módulos permanecerán a la misma altura que el módulo con el contenido más alto en la misma fila. Y la altura de la fila también estará determinada por el módulo con el contenido más alto (o altura vertical).
Cambiar la posición de los módulos (o elementos de la cuadrícula) Los elementos de la cuadrícula CSS se pueden colocar utilizando la línea construida del módulo de cuadrícula. Cada línea en la cuadrícula representa un número. Para las columnas, los números de línea comienzan desde 1 y continúan horizontalmente. Cada número de línea está al principio y al final de cada columna. Entonces, para nuestra estructura de cuatro columnas, el número de línea comienza en 1 a la izquierda de la primera columna y termina en 5 en el lado derecho de la cuarta columna. Y, debido a que tenemos tres líneas, los números de línea para filas comienzan desde 1 hasta la parte superior de la primera fila y continúan 4 en la parte inferior de la tercera fila.

Para cambiar la posición de un módulo (o elemento de cuadrícula) en la cuadrícula CSS, podemos determinar dónde queremos colocar un módulo determinado en la cuadrícula. Esto sobrescribirá la colocación predeterminada del módulo en la cuadrícula. Para este ejemplo, moveremos el primer módulo de texto a una posición diferente. Para hacer esto, debemos agregar dos líneas CSS al modo. Abra la configuración para el primer módulo de texto y pegue los siguientes CSS personalizados en el elemento principal: Grid-Column: 2/4; Grid-Row: 2/3;
La primera línea del CSS define la posición del módulo (o el elemento de la cuadrícula) horizontalmente, diciéndole al módulo que comience en la línea 2 de la columna y termine en la línea 4 de la columna. Columna-grilla: 2/4 La segunda línea de CSS define la posición del módulo (o elemento de la cuadrícula) verticalmente, diciéndole al módulo que comience en la fila 2 y finalice en la fila 3. Conjunto de grile: 2/3 para mostrar tabletas y Del teléfono, queremos devolver el módulo a la ubicación original. Esto es útil para mantener el encabezado principal en la parte superior de la página. Para hacer esto, seleccione la pestaña tableta en la opción de reacción para el elemento principal y pegue el siguiente CSS: Grid-Column: Car;
Guida de cuadrícula: auto;

Ahora la posición del módulo volverá al flujo original (automático) de los elementos de la cuadrícula. Sigamos y coloque algunos módulos más (o elementos de cuadrícula) utilizando este método. Posicionaremos el tercer módulo de texto (ahora en la segunda columna de la fila superior) en una nueva ubicación establecida en la cuadrícula. Esta nueva posición comenzará desde la línea de columna 1 y finalizará en la línea de columna 2 y también comenzará desde la fila 2 y finalizará en la fila 4.

Para hacer esto, abra la configuración para el tercer módulo de texto y pegue los siguientes CSS personalizados en el elemento principal: Grid-Column: 1/2; Grid-Row: 2/4;

Ahora podemos volver a cambiar la posición al dispositivo móvil agregando el siguiente CSS para la tableta: Grid-Column: Auto;

Guida de cuadrícula: auto;
Para nuestra colocación final de la cuadrícula de módulos personalizados, posicionaremos el séptimo módulo de texto (ahora en la última columna de la segunda fila) en una nueva ubicación establecida en la cuadrícula. Esta nueva posición comenzará desde la línea de columna 4 y finalizará en la línea 5 de la columna y también comenzará desde la fila 2 y finalizará en la fila 4.

Para hacer esto, abra la configuración para el séptimo modo de texto y pegue los siguientes CSS personalizados en el elemento principal: Grid-Column: 4/5;
Row de cuadrícula: 2/4;

Luego pegue el siguiente CSS para mostrar la tableta como lo hicimos para los módulos anteriores. Columna de cuadrícula: coche;

Guida de cuadrícula: auto;
Alinear el contenido del módulo (o el elemento de la cuadrícula) en el centro podríamos detener aquí, pero perderíamos una forma útil de alinear (o centrar) el contenido de nuestro módulo vertical. Tener un contenido del módulo de contenido (o cuadrícula) verticalmente es una característica conveniente de un aspecto de la cuadrícula, porque hace que todo sea más simétrico y más estético. Para hacer esto, podemos agregar un fragmento CSS que use la propiedad Flex CSS para alinear y justificar el contenido. Debemos agregar este fragmento a cada uno de los módulos. Para hacer esto, podemos usar elecciones múltiples para seleccionar todos los módulos (o elementos de cuadrícula) que aún no tienen CSS personalizados en el elemento principal (no queremos reemplazar esos módulos con posiciones personalizadas). Luego abra la configuración del elemento abriendo la configuración para uno de los módulos seleccionados. En la pestaña avanzada, pegue los siguientes CSS para el elemento principal: Display: Flex; Flex-Direction: Column;

Alinine-Ritams: Centro;
Justify-Concursing: Centro;

Ahora podemos volver a los otros tres módulos (Módulo # 1, # 3 y # 7) individualmente y agregar el mismo fragmento CSS además de CSS que se utilizó para darle al módulo una posición personalizada. Asegúrese de agregar el fragmento CSS debajo del CSS existente para el escritorio y la tableta. Agregue CSS al primer módulo de texto

Agregue CSS al tercer módulo de texto
Agregar CSS al séptimo modo de texto

El resultado final aquí es el resultado final de la apariencia personalizada de la cuadrícula CSS para nuestros módulos de texto.
Observe cómo los módulos (o elementos de la cuadrícula) se ajustan fácilmente en diferentes anchos del navegador para un diseño agradable y receptivo. Ejemplo El uso de diferentes módulos y modelos es difícil ver el potencial total de usar la cuadrícula CSS para crear modelos de módulos utilizando solo módulos de texto. Así que pensé en mostrarle un diseño que creé aplicando los mismos pasos en este tutorial utilizando diferentes módulos y elementos de diseño de nuestro paquete de gimnasios de fitness Fitness. Aquí está … También incluí este aspecto junto con la apariencia del módulo de texto con la descarga gratuita presentada al comienzo de esta publicación. ¡Siéntase libre de tomarlo en una rotación! Pensamientos finales En este tutorial, te mostré cómo crear un aspecto de la cuadrícula CSS para el Div. Aunque el proceso se basa en CSS personalizado, es sorprendente que no sea demasiado, dados los fuertes resultados que puede tener. Es bueno poder controlar la apariencia de todos sus módulos a nivel de columna cuando sea necesario para múltiples divisiones únicas. Para obtener más información sobre la cuadrícula CSS, debe consultar esta guía completa para considerar más posibilidades. Espero tener noticias suyas en los comentarios. ¡Suerte!