Cuando creas y editas páginas con el editor de bloques de WordPress seguramente más de una vez te has frustado intentando cambiar la disposición o los estilos de algunos bloques sin querer recurrir a tocar código. Particularmente, cuando recurres a crear columnas para crear diseños para los que no están pensadas las columnas, es cuando más te desesperas.
En esta entrada veremos que tenemos alternativas más adecuadas para algunos diseños de partes de página. Con un par de ejemplos, verás algunas de las posibilidades que te ofrecen los bloques grupo, fila y pila («group», «raw» y «stack», respectivamente en inglés) que solucionan algunos de los problemas que encontrábamos con columnas.
Para los ejemplos mostrados en esta entrada he usado la versión de WordPress 6.0.1 y el tema Twenty Twenty-Two.
Ejemplos usando columnas
Veamos, por ejemplo, dos sencillos diseños del primer bloque que nos gustaría mostrar en la página de una agencia de turismo.
Para reproducir el primer ejemplo en el editor de bloques, una opción es primero añadir un bloque de tipo fondo con la imagen seleccionada y luego añadir un par de columnas de distinto tamaño. La columna de la derecha ocupa un tercio y le añadimos un título, un párrafo y dos botones y ya tenemos nuestro primer bloque creado.
Al visualizarlo a tamaño completo lo vemos bien pero si reducimos el tamaño de la ventana, el navegador mantiene la visualización en forma de columnas y muestra los botones uno encima de otro.
Ya ves que con esta solución no sólo hemos añadido una columna vacía sinó que además no es exactamente la visualización que estariamos buscando en dispositivos más pequeños.
De forma similar, para el segundo ejemplo también añadimos primero un bloque de tipo fondo, a continuación un par de columnas y el contenido. En este ejemplo, en vez de dos botones tenemos un icono de un sobre seguido de una dirección de email. La opción de mostrarlo con un bloque de medios y texto, no es posible ya que el tamaño mínimo de la imagen del bloque supera el tamaño de lo que queremos mostrar. Optamos por crear dos columnas, en una añadimos la imagen del icono y, a continuación, en la siguiente el texto. Alineamos las dos columnas centradas para que quede bien su visualización.
Al igual que antes, además de haber añadido columnas vacías, al reducir el tamaño de la ventana, el resultado que se nos muestra en pantalla no es exactamente el que desearíamos.
Como puedes ver en la imagen anterior, aparte de quedar todo el texto muy agrupado a la izquierda, la combinación de la imagen del sobre con la dirección de correo no queda bien. Se pierden las proporciones y se parte el texto del correo.
Veamos cómo podemos solucionar los problemas anteriores si, en vez de usar columnas, usamos los bloques de tipo grupo, fila y pila.
El bloque grupo
El bloque grupo, como ya seguramente sabes, es un bloque que nos sirve para agrupar un conjunto de bloques dentro de un contenedor. Es como el bloque «padre» que tiene un conjunto de hijos.
Se añade como cualquier otro bloque pero una vez insertado no se muestra como tal y la forma de navegar a él es haciendo clic al mismo mostrado en la Lista de Vista o al final del editor posicionando el cursor sobre el bloque grupo.
Lo más usual es usar un bloque de grupo para agrupar un conjunto de columnas o párrafos y añadirles un color de fondo o un espaciado y margen único y distinto al resto.
También puedes indicar un tamaño máximo a todo su contenido y añadirle un borde con cierto estilo y color.
Nelio Unlocker
Pásate a WordPress manteniendo tus diseños y contenidos
Mejora hoy mismo el SEO de tu web y acelera su velocidad de carga convirtiendo tus páginas a estándares HTML, CSS y WordPress. No necesitas conocimientos técnicos y solo pagarás por aquello que necesites.
Los bloques fila y pila
El bloque fila y el bloque pila son un tipo de bloques que te permiten insertar varios bloques en una fila (o columna, con el bloque Pila) y espaciarlos uniformemente. Puedes utilizar el bloque fila o pila para crear separadores o añadir varios elementos en la misma línea como si estuvieran incluidos en columnas.
Las propiedades que puedes especificar en ambos bloques son muy parecidas a las de grupo, a excepción de que no puedes indicar el tamaño máximo de su contenido. Y en este caso, puedes añadir la justificación de todo el bloque respecto a su contenedor.
Veamos cómo podemos crear los dos ejemplos anteriores usando estos tipos de bloques en vez de columnas, y las ventajas que nos proporcionan.
Ejemplos con bloques de grupo, fila y pila
Para crear el primer bloque del primer ejemplo sin usar columnas, creamos primero el bloque de tipo fondo con la imagen igual que antes. A continuación, dentro del bloque fondo añadimos un bloque de tipo grupo. Una de las características del bloque de tipo grupo es que su alineación es siempre de ancho completo y está centrado en su contenedor. Por lo tanto, al añadir el título, párrafo y los dos bloques y alineando en el centro cada uno de estos bloques, el resultado es el siguiente.
No es lo que queríamos inicialmente, ya que el bloque de grupo nos muestra toda la información en el centro en vez de a la derecha del bloque fondo.
Pero tiene la ventaja de que podemos indicar un ancho máximo al mismo de forma que el texto mostrado no ocupe todo el ancho del bloque fondo. Y a diferencia de la columna, por mucho que reduzcamos el tamaño de la ventana, los botones siempre quedan alineados uno al lado del otro.
¿Cómo conseguimos mostrar el grupo en la parte derecha de la imagen? Aquí es donde el grupo tipo pila nos aporta la solución que estábamos buscando.
Tras crear el bloque de tipo fondo, añade un bloque de tipo pila y justificación derecha. A continuación añade el bloque grupo limitando su tamaño y añade el contenido.
Ahora, no tenemos ningún bloque vacio y al visualizar la página sea cual sea el tamaño de la página, el contenido se muestra con los botones alineados uno al lado del otro en todo momento.
El segundo ejemplo es muy parecido pero, ¿cómo solucionamos el problema del icono y la dirección de correo?
La solución es, en vez de añadir dos columnas en las que añadíamos la imagen y el texto, crear un bloque de tipo fila en el que añadimos un bloque de imagen y un párrafo.
Ahora, cuando reducimos el tamaño de la ventana, la visualización del primer bloque de la página sigue viéndose genial, manteniendo la imagen y la dirección de correo alineados y sin romperse el texto.
Conclusión
Con estos dos ejemplos hemos podido ver que algunos de los problemas de diseño que nos encontrábamos con las columnas ahora pueden resolverse con los bloques de tipo grupo, pila y fila. Con estos bloques ganas flexibilidad respecto a columnas al poder añadir justificaciones y márgenes. Además no te ves forzado a ir añadiendo columnas vacías que no tienen ningún sentido. Así que olvídate de crear páginas con columnas vacías.
Imagen destacada de La-Rel Easter en Unsplash.
Deja una respuesta