Cómo crear un diseño de cuadrícula CSS para módulos Divi

Para aquellos que ya están familiarizados con la creación de sitios web en Divi, la creación de diseños de cuadrícula personalizados es un aspecto central de Divi Builder. Simplemente cree una fila y elija entre varios diseños de columnas integrados para esa fila. Una vez que el diseño de la columna está en su lugar, simplemente agregamos el contenido / módulos que queremos dentro de cada columna. Pero, ¿y si quisiéramos un diseño de cuadrícula adicional para esos módulos?

En este tutorial, vamos a explorar cómo expandir los diseños de cuadrícula de Divi creando diseños de cuadrícula CSS para módulos Divi dentro de una sola columna. La propiedad CSS Grid (junto con CSS Flex) es una forma popular de crear diseños de cuadrícula predecibles y receptivos para contenido con solo unas pocas líneas de CSS. Con él, podemos organizar todos los módulos en una columna en una cuadrícula totalmente receptiva. Piense en ello como un diseño de cuadrícula adicional para módulos que puede agregar a cualquier columna Divi. Pero una de las mejores cosas de esta técnica es que cada módulo adyacente tendrá la misma altura y ancho sin la molestia de intentar hacer esto usando valores de altura o relleno personalizados en cada módulo.

Quizás sea mejor que intervengamos y le mostremos cómo funciona esto.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.

Y aquí hay un vistazo a la misma técnica utilizando diferentes módulos y diseños del paquete de diseño de gimnasio Fitness.

Descarga el diseño GRATIS

Para poner sus manos sobre 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón Importar.

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active Divi Theme.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Elija la opción "Construir desde cero".

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Creación de un diseño de cuadrícula CSS personalizado para módulos Divi

Parte 1: Agregar los módulos a una columna Divi

Antes de organizar nuestros módulos en un diseño de cuadrícula, primero agreguemos todos los módulos que queremos usar a nuestra columna.

Para comenzar, cree una nueva fila de una columna en la sección regular predeterminada en Divi Builder.

Creando los Módulos

Dentro de la columna de la fila, agregue un nuevo módulo de texto. Luego actualice la configuración de contenido del módulo de la siguiente manera:

1. Agregue un encabezado H2 encima del texto del párrafo del contenido del cuerpo predeterminado
2. Color de fondo: # 333333

Luego actualice la configuración de diseño de la siguiente manera:

1. Fuente de texto: Poppins
2. Color del texto: claro
3. Seleccione la pestaña H2 debajo de Texto de encabezado
4. Estilo de fuente del título 2: TT
5. Relleno: 10% arriba, 10% abajo, 10% izquierda 10% derecha

NOTA : Para simplificar, vamos a seguir usando varios módulos de texto con varios colores de fondo para mostrar una distinción entre cada módulo. Pero, como explicaré más adelante, puede utilizar cualquier combinación de módulos que desee (módulos de propaganda, módulos de llamada a la acción, módulos de formulario de contacto, etc.).

Abra la vista de capas (opcional) y cree el siguiente módulo de texto de la siguiente manera:

1. Duplica el módulo de texto.
2. Abra la configuración de texto para el módulo duplicado.
3. Actualizar el color de fondo
   • Color de fondo: # 4c6085

Repita este proceso para crear el tercer módulo de texto de la siguiente manera:

1. Duplica el módulo de texto anterior.
2. Abra la configuración de texto para el módulo duplicado.
3. Actualizar el color de fondo
   • Color de fondo: # 39a0ed

Repita este proceso una vez más para crear el cuarto módulo de texto de la siguiente manera:

1. Duplica el módulo de texto anterior.
2. Abra la configuración de texto para el módulo duplicado.
3. Actualizar el color de fondo
   • Color de fondo: # 13c4a3

Para crear los siguientes cuatro módulos, use la función de selección múltiple para seleccionar los cuatro módulos. Luego copie y pegue los módulos en la misma columna para crear un total de ocho módulos de texto.

Parte 2: Creación del diseño de cuadrícula CSS para los módulos

Ahora que nuestros módulos están en su lugar, estamos listos para crear nuestra cuadrícula CSS para esos módulos.

Configuración de filas

Para este ejemplo, estamos usando un diseño de una columna para que podamos mostrar la cuadrícula de nuestro módulo en un diseño de ancho completo. Por lo tanto, necesitaremos actualizar la configuración de la fila para asegurarnos de que la fila abarque todo el ancho de la página. También necesitamos eliminar el ancho del canalón predeterminado para que no se agreguen márgenes adicionales a nuestros módulos.

Abra la configuración de la fila y actualice lo siguiente:

• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 100%

Adición de cuadrícula CSS a la columna para crear el diseño de cuadrícula para los módulos

Este es el paso clave en el tutorial que crea el diseño de los módulos usando la propiedad CSS Grid.

Para ello, vamos a agregar tres líneas de CSS a la Columna que determinarán el diseño de nuestros módulos.

Abra la configuración de la columna y, en la pestaña avanzada, pegue el siguiente CSS dentro del Elemento principal:

display:grid;
grid-template-columns: 25% 25% 25% 25%;
grid-auto-rows: auto;

La primera línea de CSS presenta el contenido (o módulos) de acuerdo con el módulo de cuadrícula CSS.

pantalla: cuadrícula

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 de 25% cada una (vea la captura de pantalla anterior).

columnas-plantilla-cuadrícula: 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 automático. Esto significa que la altura de cada fila estará determinada por la altura vertical del contenido (o módulos) dentro de la fila (vea la captura de pantalla anterior).

grid-auto-rows: auto

Ajustar el diseño de la cuadrícula en dispositivos móviles

También necesitaremos ajustar el diseño de la cuadrícula en los dispositivos móviles según sea necesario.

Para hacer esto simplemente necesitamos agregar CSS adicional a cada tableta un móvil que cambia el número de columnas y el ancho de cada columna.

En este ejemplo, vamos a cambiar el diseño de la cuadrícula de los módulos en la tableta para que sean dos columnas con un 50% de ancho cada una.

Abra las opciones de respuesta y seleccione la pestaña de la tableta debajo del elemento principal y pegue el siguiente CSS:

 display:grid;
grid-template-columns: 50% 50%;
grid-auto-rows: auto; 

Para la pantalla del teléfono, queremos un diseño de una sola columna. Para crear esto, pegue el siguiente CSS en el elemento principal de la pestaña Teléfono:

 display:grid;
grid-template-columns: 100%;
grid-auto-rows: auto; 

Parte 3: Realizar cambios en los elementos (o módulos) de la cuadrícula

Agregar un nuevo módulo a la cuadrícula y cómo reacciona

Ahora que cada módulo está dentro de la cuadrícula CSS, agregar un nuevo módulo empujará los otros módulos hacia la derecha y creará nuevas filas automáticamente según sea necesario.

Como de todos modos necesitamos un módulo más para este diseño, duplique el primer módulo de texto para ver cómo se ajustan los otros módulos dentro de la cuadrícula.

Cómo responde Grid a módulos con diferentes cantidades de contenido

En este momento, todos los módulos de texto tienen la misma cantidad de contenido, por lo que es difícil ver cómo el diseño de cuadrícula maneja los módulos con diferentes cantidades de contenido. Para ver cómo funciona esto, cambie la cantidad de texto de párrafo dentro de cada módulo. Tenga en cuenta que los módulos permanecerán a la misma altura que el módulo con la mayor parte del contenido en la misma fila. Y la altura de la fila también la determinará el módulo con más contenido (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 el sistema de numeración de líneas incorporado del módulo de cuadrícula. Cada línea de la cuadrícula representa un número. Para las columnas, los números de línea comienzan en 1 y continúan horizontalmente. Cada número de línea se encuentra 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, dado que tenemos tres filas, los números de línea para las filas comienzan en 1 en la parte superior de la primera fila y continúan hasta 4 en la parte inferior de la tercera fila.

Para cambiar la posición de un módulo (o elemento de la cuadrícula) en CSS Grid, podemos definir dónde queremos que se coloque un determinado módulo en la cuadrícula. Esto anulará la ubicación predeterminada del módulo en la cuadrícula.

Para este ejemplo, vamos a mover el primer módulo de texto a una posición diferente. Para hacer esto, necesitamos agregar dos líneas de CSS al módulo.

Abra la configuración del primer módulo de texto y pegue el siguiente CSS personalizado en el elemento principal:

grid-column: 2/4;
grid-row: 2/3;

La primera línea de CSS define la posición del módulo (o elemento de la cuadrícula) horizontalmente diciéndole al módulo que comience en la línea de la columna 2 y termine en la línea de la columna 4.

columna de cuadrícula: 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 termine en la fila 3.

fila de cuadrícula: 2/3

Para la pantalla de la tableta y el 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 de la tableta debajo de la opción de respuesta para el elemento principal y pegue el siguiente CSS:

grid-column: auto;
grid-row: auto;

Ahora la posición del módulo volverá al flujo original (automático) de los elementos de la cuadrícula.

Sigamos adelante y coloquemos algunos módulos más (o elementos de cuadrícula) usando este método.

Vamos a colocar el tercer módulo de texto (ahora en la segunda columna de la fila superior) en una nueva ubicación dentro de la cuadrícula. Esta nueva posición comenzará en la línea de la columna 1 y terminará en la línea de la columna 2 y también comenzará en la línea de la fila 2 y terminará en la línea de la fila 4.

Para hacer esto, abra la configuración del tercer módulo de texto y pegue el siguiente CSS personalizado en el elemento principal:

grid-column: 1/2;
grid-row: 2/4;

Ahora podemos cambiar la posición de nuevo en el móvil agregando el siguiente CSS para tableta:

grid-column: auto;
grid-row: auto;

Para la ubicación de la cuadrícula de nuestro módulo personalizado final, vamos a colocar el séptimo módulo de texto (ahora en la última columna de la segunda fila) en una nueva ubicación establecida dentro de la cuadrícula. Esta nueva posición comenzará en la línea de la columna 4 y terminará en la línea de la columna 5 y también comenzará en la línea de la fila 2 y terminará en la línea de la fila 4.

Para hacer esto, abra la configuración del séptimo módulo de texto y pegue el siguiente CSS personalizado en el elemento principal:

grid-column: 4/5;
grid-row: 2/4;

Luego pegue el siguiente CSS para la visualización de la tableta como lo hicimos para los módulos anteriores.

grid-column: auto;
grid-row: auto;

Alinear el contenido del módulo (o elemento de cuadrícula) al centro

Podríamos detenernos allí, pero perderíamos una forma útil de alinear (o centrar) el contenido de nuestro módulo verticalmente. Tener el contenido del módulo (o elemento de la cuadrícula) centrado verticalmente es una característica conveniente de un diseño de cuadrícula porque hace que todo sea más simétrico y estéticamente agradable.

Para hacer esto, podemos agregar un fragmento de CSS que usa la propiedad flex CSS para alinear y justificar el contenido en el centro. Necesitamos agregar este fragmento a cada uno de los módulos. Para hacer esto, podemos usar la selección múltiple para seleccionar todos los módulos (o elementos de la cuadrícula) que aún no tienen CSS personalizado para el elemento principal (no queremos anular esos módulos con posiciones personalizadas). A continuación, abra la configuración del elemento abriendo la configuración de uno de los módulos seleccionados. En la pestaña Avanzado, pegue el siguiente CSS en el elemento principal:

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

Ahora podemos volver a nuestros otros tres módulos (módulo n. ° 1, n. ° 3 y n. ° 7) individualmente y agregar el mismo fragmento de CSS además del CSS que se usó para darle al módulo una posición personalizada en la cuadrícula. Asegúrese de agregar el fragmento de CSS debajo del CSS existente tanto para el escritorio como para la tableta.

Agregar CSS al primer módulo de texto

Agregar CSS al tercer módulo de texto

Agregar CSS al séptimo módulo de texto

Resultado final

Aquí está el resultado final de nuestro diseño de cuadrícula CSS personalizado para nuestros módulos de texto.

Observe cómo los módulos (o elementos de la cuadrícula) se ajustan sin problemas en diferentes anchos de navegador para un diseño agradable y receptivo.

Ejemplo de uso de diferentes módulos y diseños

Es difícil ver todo el potencial de usar la cuadrícula CSS para crear diseños de módulos usando solo módulos de texto. Así que pensé en mostrarte un diseño que creé aplicando los mismos pasos en este tutorial usando diferentes módulos y elementos de diseño de nuestro paquete de diseño de gimnasio.

Aquí está…

También incluí este diseño junto con el diseño del módulo de texto con la descarga gratuita que se muestra al comienzo de esta publicación.

¡Siéntete libre de probarlo!

Pensamientos finales

En este tutorial, le mostramos cómo crear un diseño de cuadrícula CSS para módulos Divi. Aunque el proceso se basa en algunos CSS personalizados, sorprendentemente no es tanto, considerando los poderosos resultados que puede tener. Es bueno poder controlar el diseño de todos sus módulos a nivel de columna cuando sea necesario para diseños Divi más exclusivos. 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 tuyas en los comentarios.

¡Salud!