Cuando diseñamos una página web utilizando el editor de bloques de WordPress, antiguamente conocido como Gutenberg, tenemos a nuestra disposición una multitud de opciones para personalizar la maquetación de los elementos directamente desde la interfaz sin necesidad de tener que crear estilos CSS a medida. No obstante, no siempre es intuitivo saber cómo se hacen determinadas cosas y si bien, este editor aún necesita incorporar funciones para llegar a los niveles de versatilidad de otros que podemos encontrar en el ecosistema, permite hacer mucho más de lo que a priori podría parecer.
Una de las cosas que suelo necesitar cuando trabajo en un proyecto, es igualar el alto de las cajas cuando muestro por ejemplo un listado de artículos estructurados en columnas usando el bloque Bucle de consulta, es decir, un query loop. Esto es especialmente conveniente cuando uso un color de fondo para cada contenedor, ya que hace más patente que el contenido variable en su interior da como resultado diferentes altos que estéticamente no siempre quedan visualmente bien. En este artículo vamos a ver de un modo sencillo los pasos para conseguir que todas las columnas de una misma fila se ajusten al alto de la entrada más alta.
- Lo primero que debemos hacer es insertar en una página el bloque en cuestión si aún no lo tienes. Al inspeccionarlo desde la columna izquierda veremos que está compuesto por un contenedor con el nombre del bloque y en su interior hay otro que es el de Plantilla de entrada. En este último debemos cambiar la vista por defecto de lista a cuadrícula para que las entradas se estructuren en columnas.
- Una vez tengamos las columnas, entraremos en la Plantilla de entrada y agruparemos los elementos con el bloque Grupo para poder manipular los estilos del contenedor que contiene cada post.
- Tras tener los elementos en un grupo, podemos irnos al panel de opciones de estilo de la columna derecha y bajaremos hasta la opción de altura mínima. En el campo de texto para introducir el valor, cambiaremos la unidad de medida a vh y después le daremos un valor de 100%.
- Verifica que efectivamente los elementos ahora tienen la misma altura y ya sólo nos queda guardar los cambios para que se reflejen en la parte pública.
Recuerda que a menos que le hayas dado un color de fondo al grupo que contraste con el fondo de la web, no podrás ver si efectivamente el alto se está igualando.
Como desarrollador WordPress freelance estos pasos me ahorran tener que recurrir a añadir estilos personalizados a través del panel o en la hoja de estilos del tema. Si bien no hay ningún problema si prefieres solucionarlo de este otro modo, cuando estoy usando el editor para hacer los temas, prefiero sacarle el mayor partido posible y tratar de no fragmentar estilos en la medida de lo posible.
Deja una respuesta