Vamos a ver en este post cómo construir un diseño en forma de rejilla 2×2 (2 filas y 2 columnas) en WordPress 6.2. Para ello usaremos los bloques de Grupo y Columnas.
En la imagen siguiente se muestra el diseño que queremos lograr.
Se trata de algo muy básico pero es un punto de partida para cualquier diseño con bloques que quieras implementar en el editor (de publicaciones o del sitio) de WordPress 6.2.
Bloque de grupo (contenedor) y establecer el ancho del diseño
Lo primero sería insertar un bloque de grupo como contenedor de nuestro diseño. Esto no es estrictamente necesario pero sí es recomendable con el fin de establecer algunos parámetros del diseño; como -por ejemplo- el espacio entre las filas (gap horizontal).
El bloque de grupo también nos permite establecer el ancho del diseño. Esta cuestión podría variar dependiendo del tema que tengas activo. Simplemente hay que cambiar la alineación del bloque de grupo, eligiendo Full Width o Wide Width (ver imagen siguiente).
La alineación, en el bloque de grupo, se modifica señalando el bloque y haciendo clic en el botón de la pantalla de la botonadura superior.
Sin embargo, para que veas cambiar el ancho, lo normal es que haya que desactivar la opción «Inner blocks use content width» en la configuración del bloque de grupo del apartado «Layout» (ver imagen siguiente).
Color de fondo y separación entre filas, dentro del bloque de grupo
A continuación, podemos fijar el color de fondo (opcional) para el bloque de grupo y, pensando en que el diseño contenga varias filas, la separación (gap) entre estas. También, podríamos querer añadir un relleno (padding) dentro del bloque contenedor. Para ello, iremos a la configuración del bloque de grupo y estableceremos estos parámetros (Color -background-, Dimensions -padding y block spacing-). Ver imagen siguiente donde no se ha establecido ningún color de fondo ni relleno alguno. Solo se ha configurado un espacio entre filas (block spacing) de 1.
Dos bloques de columnas dentro del bloque de grupo
La estructura de 2×2 se puede implementar, insertando dos bloques de columnas dentro del bloque de grupo (ver imagen siguiente).
Si activas la vista de lista (muy recomendable) verás la estructura montada tras la inserción de los dos bloques de columnas, con dos columnas en cada uno de ellos.
En la configuración del bloque de columnas es donde se establece la separación entre las dos columnas (block spacing) de 1 (ver imagen siguiente).
Naturalmente, este espacio es opcional pero conviene que coincida con el valor del block espacing impuesto en el bloque de grupo. Así la separación entre las celdas de la rejilla es homogénea.
Color de fondo y relleno en cada bloque de columna
Lo siguiente es aplicar un color de fondo y un relleno, si así se prefiere, para las cuatro columnas del diseño.
En la imagen siguiente se puede observar la configuración de una de las columnas: Color (Background) y Dimensions (Padding 4). Repetiremos esta configuración, cambiando el color de fondo si así lo preferimos.
Insertar contenido en cada columna
Por último, insertaremos bloques dentro de cada columna dependiendo del contenido que queramos añadir. En este ejemplo, hemos insertado un bloque de párrafo (con un lore ipsum). Observa que el texto del lore ipsum se visualiza de acuerdo al relleno (padding) configurado.
Otros detalles
Si hubiésemos puesto un color de fondo en el bloque de grupo, los espacios entre las cuatro celdas se verían de ese color.
También podríamos haber aplicado un relleno (padding) a los cuatro costados en el bloque de grupo y, entonces, la rejilla se vería endentada por esos cuatro costados dentro de dicho bloque de grupo.
Ejercicio
Modifica el diseño que hemos construido en este post para lograr el siguiente (ver imagen). Por supuesto, emplea la imagen que quieras. Pero ten en cuenta sus dimensiones porque quizá tengas que ajustarlas en la configuración del bloque de imagen, para que el diseño se muestre sin el gap vertical entre columnas, aunque hayas puesto dicho gap (block spacing) a 0.
Conclusiones
Hemos implementado una estructura muy básica (rejilla de 2×2 celdas) mediante un método que te puede servir para escalarlo y construir diseños más complejos que ocupen, incluso, toda la página.
Vemos, como WordPress 6.2 permite -a nivel de bloques- construir cualquier diseño con cualquier complejidad, a partir de algo muy simple como puede ser un bloque de grupo con dos bloques de columnas dentro.
Te hemos proporcionado en este post, paso a paso, el método para que tú mismo puedas diseñar lo que quieras partiendo del bloque de grupo contenedor y tantos bloques de columnas dentro como necesites.
Deja una respuesta