Crea Columnas Asimetricas con Gutenberg en WordPress

Como cada pocas semanas, vamos desentrañando todas las opciones y posibilidades que nos ofrece Gutenberg, el nuevo editor para WordPress. Y es que se van notando síntomas que es un proyecto que viene para quedarse y va a evolucionar a lo largo del tiempo, como estamos leyendo sobre la Fase 2. Pero en esta ocasión, vamos a centrarnos en lo que tenemos a día de hoy y, de forma particular, como potenciar el bloque Columnas.

Si has usado alguna vez el bloque Columnas de Gutenberg, habrás observado que es bastante parco en opciones. De hecho, solo tiene dos: el número de columnas y añadirle una clase CSS. Cuando vi esto por primera vez, una parte de mi dijo «bien, que fácil es crear columnas ahora!». Pero otra parte respondió «si, ¿pero todas las columnas tienen que tener el mismo ancho?». Y es que, es muy común que queramos que nuestras columnas sean desiguales o asimétricas. Que las dos laterales sean mas estrechas que la central, tener una que ocupe una zona más amplia que la otra… Las opciones son múltiples y Gutenberg, a día de hoy, no nos permite hacer este tipo de maquetaciones para nuestros diseños.

Si pertenecéis a este grupo que quiere apretar un poco más las opciones que nos da Gutenberg, estáis de enhorabuena. En este artículo vamos a ver como, mediante dos métodos diferentes, podemos controlar con total exactitud el ancho de cada una de nuestras columnas. Vamos con ello.

Método 1 – Con el plugin Kadence Blocks

En el repositorio de plugins de WordPress existen varios complementos, tanto para añadir diferentes tipos de bloques a Gutenberg en general. Si nos centramos en los que cuentan con opciones para crear columnas, destacan varios, como Caxton y GhostKit Grid Block Collection. Pero, en esta ocasión, quiero centrarme en Kadence Blocks ya que es, bajo mi opinión, el que más variables nos ofrece si queremos crear columnas.

Una vez tengamos instalado Kadence Blocks, si queremos añadir en Gutenberg el bloque que vamos a usar, lo buscaremos como Row Layout. Por defecto, al instalar Kadence Blocks, todos los bloques que nos añade el plugin deberían de estar activados. Si no nos aparecen, ve a las opciones del complemento para activarlo. Una vez elegido, veremos algo así.

Elegiremos la plantilla que queramos sin mucha preocupacion, ya que se puede cambiar en cualquier momento. Una vez seleccionada, si miramos el panel lateral de ajustes de bloque, nos damos cuenta de que las opciones disponibles han aumentado considerablemente. En resumen, al conjunto de columnas podemos cambiar estas variables:

• Margins y paddings del bloque completo.
• Cambiar el fondo, ya sea poniendo un color plano, un degradado, o una imagen.
• Mostrar divisores gráficos.
• Modificar el color del texto de las columnas.
• Variar el alto y ancho del bloque.

También es posible modificar cada columnas de forma individual. Aunque estas opciones se reducen a variar sus margins y paddings de forma individual, y variar su color, tanto del borde como del fondo.

Como veis, las posibilidades que nos ofrece este plugin son variadas, y podemos crear un bloque de columnas a nuestro gusto con gran precisión. Pero, ¿y si somos de los que preferimos tener en nuestro WordPress el mínimo número de plugins instalados? Pues vosotros también tenéis alternativa.

Método 2 – Mediante Flexbox

Si, con Flexbox. Y es que, si tenemos un poco de curiosidad y usamos el inspector de nuestro navegador para ver el código bajo Gutenberg, veremos como el bloque de columnas funciona con Flexbox. Pero antes de entrar en detalles, un par de consideraciones.

En primer lugar, es aconsejable tener ciertas nociones de CSS. Un buen punto de partida es nuestro artículo de iniciación a CSS, para familiarizarte con su forma de trabajar y la estructura de sus reglas. Y por otro lado, saber como funcionan los media queries, ya que también vamos a hacer uso de ellos. Una vez aclarado esto, vamos a hacer nuestras columnas personalizadas en Gutenberg.

Crear columnas y asignar clases

Una vez hayamos creado una entrada o página con Gutenberg, vamos a insertar el bloque Columnas. En nuestro caso, para que resulte más sencillo, vamos a hacer un bloque con dos columnas. En la columna de la derecha vamos insertar un bloque con una imagen que hemos descargado de Unsplash, y en la otra un texto. Algo muy sencillo de hacer. Pero claro, queremos que la imagen ocupe dos tercios del ancho de la pantalla en formato escritorio, y el texto el tercio restante, algo que no podemos hacer directamente con Gutenberg.

Una vez tengamos nuestro bloque Columnas, con su imagen y texto insertado, asignaremos a cada columna individual una clase CSS. Esto se hace en el panel lateral de ajustes de bloque, en el apartado Avanzado. Pondremos a cada columna un nombre significativo que podamos recordar con facilidad. En mi caso, le pondré image-left a la columna de la imagen, y text-right a la columna del texto. Acordaos de que las clases CSS no pueden contener espacios. Guardamos, y pasamos al siguiente punto.

Añadir estilo CSS a nuestras columnas

Como explicamos en uno de nuestros artículos, añadir o modificar CSS en nuestro WordPress es muy sencillo, además de disponer de varios métodos para hacerlo. Para este artículo, insertaremos el código CSS mediante el Customizer.

Si habéis visto con el inspector de vuestro navegador web, habréis visto que Gutenberg usa un media query para hacer responsive las columnas de Gutenberg. Si la anchura de la web es mayor de 600px, veremos las columnas con normalidad. Pero si bajamos de 600px de ancho, cada elemento del bloque se apilara uno encima de otro, facilitando la navegación en dispositivos con pantalla de menor tamaño.

Como nosotros solo queremos mostrar las columnas asimétricas en resoluciones mayores, usaremos el mismo media query que Gutenberg, con un min-width: 600px. Esta sería la primera parte de nuestro nuevo código CSS. La siguiente es decirle a nuestra web la anchura de cada elemento de cada columna. Usaremos la propiedad flex de Flexbox, para establecer el grado de flexibilidad de cada uno de los elementos.  Como dijimos que la imagen ocuparía dos tercios del ancho, y el texto el tercio restante, la imagen sería flex: 2, y el texto flex: 1. Por lo que el código resultante sería algo así:

@media (min-width:600px) {
    .image-left {
        flex: 2;
    }

    .text-right {
        flex: 1;
    }

}

Siendo este el resultado obtenido:

Y esto es todo. Si vemos nuestra entrada, veremos que tanto la imagen como el texto ocupan el ancho que teníamos previsto. Y que no hemos perdido el diseño responsive si disminuimos el ancho de la web. Si queremos añadir más propiedades a cada elemento del bloque columna, ya sean padding, color de fondo, etc… solo habría que añadirlo al código CSS que hemos visto arriba.

La propiedad flex de Flexbox puede tener otros valores, ya sean absolutos o como porcentajes. Por ejemplo, este sería el código para tres columnas (con sus clases CSS correspondientes), con las imágenes laterales ocupando cada una el 25% del ancho, y el texto central el 75%, además de añadirle otras propiedades:

@media (min-width:600px) {
    .image-left {
        flex: 25%;
        padding-left: 20px;
    }

    .text-center {
        flex: 50%;
        font-size: 18px;
    }

    .image-right {
        flex: 25%;
        padding-right: 20px;
    }

}

Y como quedarían las tres columnas con sus anchos correspondientes en la web:

Por supuesto, todo esto lo podemos hacer con el número de columnas que queramos. Solo tenemos que tener en cuenta el asignar una clase CSS a cada elemento de la columna dentro de Gutenberg. Y en el código CSS que insertemos, que cada clase tenga su propiedad Flexbox con su valor correspondiente para que funcione de forma correcta.

Conclusión

Tanto usando plugins como sin ellos, la creación de bloques de columnas con Gutenberg, como su posterior modificación, se ha convertido en un proceso muy sencillo. El único limite lo marca nuestra imaginación a la hora de proponer diseño funcionales y atractivos para nuestra web.

Como siempre, esperamos que os haya servido de ayuda, y podéis compartir con nosotros vuestras dudas y diseño que hayáis conseguido en la creación de columnas asimétricas!