Grid Builder para WordPress

WP Grid Builder: presentaciones con estilo

Los diseños de cuadrícula son una manera atractiva de mostrar y filtrar contenido en nuestra web. Esto es deseable (y necesario) para brindar experiencias de usuario limpias y que destilen elegancia. Sin ir más lejos, algo como lo siguiente:

Y otro ejemplo más:

Esta es la razón de ser de Grid Builder, un cuidado plugin que nos permite crear rápidamente diseños de cuadrícula avanzados en nuestro WordPress vía una interfaz intuitiva, fácil de usar. El plugin sale de fábrica con un repertorio de características óptimas pensadas tanto para principiantes como para desarrolladores.

Para quienes estén algo verdes con el desarrollo web, WP Grid Builder es una solución práctica para crear diseños de cuadrícula flexibles y filtrables sin necesidad de saber programar. Pero, si nos damos maña como desarrolladores o directamente somos profesionales del diseño web, el creador de cuadrículas nos mima con numerosas acciones y funciones que nos van a tener con la cola en la silla largo rato.

Grid Builder funciona con todos los temas de WordPress sin inconvenientes, e integra también la mayoría de los plugins populares (como WooCommerce) de manera impecable. Además, incluye otros complementos que nos darán más funcionalidades y libertades a nuestra cuadrícula y filtros de búsqueda (se conocen como “facetas”).

Características de WP Grid Builder

WP Grid Builder nos trae todas las funcionalidades para crear diseños de cuadrícula a nivel profesional. A diferencia de sus competidores, este plugin resulta bien práctico al momento de diseñar nuestra tienda online, sitio de portafolio, blog o lo que fuera.

Estas son algunas de sus características notables.

• Integración perfecta con WooCommerce, Easy Digital Downloads, SearchWP, Relevanssi, Polylang, WPML, Advanced Custom Fields y Gutenberg.
• 100% responsivo para móviles, con soporte táctil para lightbox y carrusel.
• Optimizado para SEO: WP Grid Builder cumple con los estándares W3C y utiliza las mejores prácticas de SEO a la fecha.
• Rendimiento ultrarrápido gracias a endpoints AJAX personalizados.
• Un sistema de filtrado avanzado que permite ordenar el contenido de WordPress por términos de taxonomía (personalizada), campos de publicaciones o campos personalizados de manera eficiente.
• Más de 15 tipos de facets (facetas), incluidos radios, checkboxes, sliders, selectores, valoraciones, botones de cargar más, botones de reinicio y más, lo que permite a tus usuarios refinar los resultados de búsqueda a su antojo.
• Funcionalidad de importar y exportar para mover fácilmente nuestras configuraciones de WP Grid Builder a otro sitio.
• Lightbox integrado.
• Creador de cuadrículas con función de arrastrar y soltar.
• Más de 20 tarjetas de cuadrícula listas para usar y fáciles de personalizar. Además, podemos crear nuestros mosaicos de cuadrícula desde cero.
• Más de 900 fuentes de Google.
• Más de 250 iconos SVG (es decir vectoriales, bien livianos) para decorar nuestros mosaicos como deseemos.
• Soporte para compartir en redes sociales, permitiendo compartir directamente desde las cuadrículas.
• Soporte para formatos de publicación de imagen, video (incluyendo embeds de sitios como YouTube), galerías y audio.
• Más de 3 diseños de cuadrícula, incluyendo Masonry, Justified y Metro.
• Carga diferida para mejorar la velocidad de carga de la página.
• Más de 20 animaciones de carga (para reducir la percepción del tiempo percibida por nuestros usuarios).
• Soporte RTL para idiomas que se leen de derecha a izquierda.
• Un panel de administración súper intuitivo.
• Y mucho más.

Como queda claro, WP Grid Builder nos ofrece una amplia gama de herramientas y funciones para personalizar y optimizar nuestros diseños de cuadrícula, mejorando tanto la apariencia como la funcionalidad de nuestra web.

Instalando WP Grid Builder

Este plugin no posee una versión gratis al momento de escribir esta nota; por ende, para usarlo debemos cuanto menos pagar el plan para un único sitio, cuyo valor es de USD49 por año. Una vez comprado, podremos descargar el .zip y luego subirlo desde la sección de plugins de nuestro escritorio de WordPress.

Y, a continuación:

Tras este paso, podremos activarlo mediante el botón correspondiente.

Y aquí podremos ingresar la clave (que deberíamos haber recibido tras la compra a nuestro correo) para activar la licencia:

Usando WP Grid Builder

A continuación veremos, paso a paso, cómo crear nuestra primera grilla en una guía práctica de Grid Builder con capturas de pantalla.

Empecemos creando una nueva grilla realizando los clics que se señalan en la captura inferior:

El botón “Add new” que hemos cliqueado nos llevará a la siguiente pantalla.

Query (consulta)

Como se muestra en la captura superior, disponemos de tres tipos de fuentes para buscar contenido (si no hemos incluimos otro tripo de contenidos, como cuando instalamos WooCommerce):

• Content: podemos extraer contenido de nuestras entradas, páginas, biblioteca multimedia o cualquier otro tipo de entrada personalizada.
• Terms: es posible obtener contenido basado en categorías, etiquetas o cualquier otro término de taxonomía personalizada.
• Users: Esta opción nos permite obtener contenido de usuarios específicos de WordPress.

Bajo estas opciones podemos establecer el número de elementos por página (10 por defecto).

Si deseamos mostrar todo, debemos escribir “-1”, mientras que “0” es el valor por defecto del número de entradas por página obtenido de los ajustes de WordPress.

Más abajo podemos establecer cómo se ordenarán los resultados (por defecto, fecha de creación) y también es posible añadir más reglas (“Add Order“).

Finalmente, podemos decidir más opciones, como las típicas inclusiones o exclusiones de autores o entradas particulares.

Siempre recordemos presionar el botón de SAVE para guardar los cambios.

Veamos ahora las opciones de la solapa Layout (diseño).

Layout (diseño)

Aquí veremos las opciones de diseño, es decir, cómo lucirá nuestra grilla, su personalidad estética a los ojos de nuestros usuarios. Lo primero que podemos elegir es el tipo de maquetación: Masonería, Metro o Justificada. Esta es una decisión importante dado que el resultado de estas tres alternativas es bien diferente. Veamos:

Masonry

El diseño de cuadrícula “masonry” organiza los elementos en una disposición tipo mampostería (similar a cómo se colocan los ladrillos en una pared). Este diseño permite que los elementos de diferentes alturas se organicen de manera ajustada, sin espacios en blanco.

En Masonry no existe un tamaño fijo para las filas, ya que las alturas de los elementos pueden variar. Los elementos se colocan en la siguiente posición disponible en la columna más corta, creando una apariencia ordenada y visualmente equilibrada. Es ideal para galerías de imágenes y portafolios donde las imágenes tienen diferentes proporciones.

Ejemplo: Pinterest utiliza un diseño de cuadrícula masonry.

Metro

Metro se basa en el estilo del diseño popularizado por la interfaz de usuario de Windows 8. Son bloques de diferentes tamaños y formas que se ajustan a la cuadrícula, es decir, una combinación de elementos grandes y pequeños para crear un diseño más dinámico.

Si bien los elementos se organizan en una cuadrícula estricta, algunos bloques pueden ocupar más columnas o filas dependiendo del tamaño de la imagen. Este diseño es elegido para generar un diseño moderno que podría resultar más atractivo para el público de ciertos contenidos.

Justified

El diseño de cuadrícula Justificado organiza los elementos en filas de igual altura, alineando los bordes izquierdo y derecho de cada fila. Es una maquetación elegida para fotografía, por ejemplo, y otras galerías de imágenes.

Todas las filas tienen la misma altura, y los elementos se ajustan en ancho para completar su zócalo sin permitir espacios en blanco. Esto genera una apariencia más ordenada y alineada.

Flickr utiliza un diseño de cuadrícula justified para sus galerías de fotos.

Tras esta elección de presentación podemos también optar por el ancho completo (full width), de modo que la grilla emplee toda la pantalla, de izquierda a derecha, para mostrar las filas y columnas de los resultados.

A continuación vemos las opciones de Comportamiento (behaviour). Esto nos da control sobre cómo se organizan y muestran las tarjetas (cards) dentro de una cuadrícula. A continuación, explicamos las tres alternativas:

Horizontal Order (Orden Horizontal)

Esta opción organiza las tarjetas de izquierda a derecha en lugar de arriba hacia abajo. Puede resultar útil para diseños donde pretendemos que el contenido fluya horizontalmente antes de pasar a la siguiente fila. Esto es ideal para carruseles o galerías horizontales, donde el contenido necesita ser explorado de forma lateral.

Fit into Rows (Ajustar en Filas)

Esta alternativa organiza las tarjetas en filas que progresan verticalmente, es decir, se ajustan dentro de filas que se alinean una debajo de la otra, haciendo que la cuadrícula sea fácil de leer y navegar. Se usa comunmente en galerías de imágenes y portfolios donde se desea una presentación ordenada y coherente de elementos visuales.

Equal Height Columns (Columnas de la misma Altura)

Esta funcionalidad iguala la altura de las columnas dentro de cada fila, asegurando que todas las columnas dentro tengan el mismo alto. Se proporciona un aspecto más pulcro, beneficioso para diseños de cuadrícula donde es importante mantener una altura uniforme para mejorar la estética visual y la legibilidad.

Finalmente, mediante la configuración de tamaño (sizing) podemos añadir las configuraciones de tamaño deseadas según el ancho de la pantalla del navegador de turno (ej.: anchos en celulares) a fin de personalizarlo según nuestras preferencias.

Pasemos ahora a la siguiente solapa de configuración: Carousel.

Carousel

La primera opción es crítica: si pretendemos transformar el contenido de nuestra grilla en imágenes deslizantes, deberemos activarlo.

Esta es una característica que permite que el diseño de la cuadrícula muestre el contenido horizontalmente y sea desplazable. En lugar de que todo el contenido se muestre en pantalla al mismo tiempo, el carrusel permite a los usuarios navegar por la cuadrícula horizontalmente, ya sea deslizando o haciendo clic en los botones de navegación. Es una manera dinámica, interactiva, de mostrar contenidos (sobre todo si consideramos que el espacio en pantalla es limitado).

En la siguiente sección de Comportamiento (Behaviour), podremos realizar un ajuste fino del comportamiento del carrusel, incluida la disposición de las diapositivas.

• Alineación de diapositivas (slides alignment): alinear diapositivas dentro del elemento carrusel.
• Diapositiva inicial (initial slide): índice basado en cero de la celda seleccionada inicial.
• Agrupar Tarjetas (groups cards): agrupa las tarjetas en las diapositivas.
• Reproducción Automática (auto play): avanza automáticamente a la siguiente diapositiva.

Finalmente, en el último set de configuración “Appearance” (apariencia) definiremos colores y el tamaño del botón.

Prosigamos ahora con la configuración de las cards o tarjetas.

Cards (Tarjetas)

En este apartado decidiremos qué tipo de diseño pretendemos para las Tarjetas o Cards. Podemos crear múltiples diseños de Tarjetas diferentes, y usarlo en cualquier tipo de grilla que querramos. Por ejemplo, un tipo de diseño para grillas de carrousel, otro para grillas normales o bien para productos de WooCommerce si es lo que estamos usando.

Las Tarjetas deben de haber sido creadas previamente en el apartado All Cards. Por ende, saltemos por ahora hacia este apartado.

Para los fines de esta guía, optemos por importar las demos a fin de acelerar el proceso y, además, poder apreciar la diversidad que WP Grid Builder nos trae de fábrica. Por ende, hemos hecho clic en Import Demos para encontrarnos con la siguiente ventana emergente.

Como se aprecia en la captura superior, tenemos a nuestra disposición diseños para blog, portfolio, WooCommerce, y además una serie de diseños con nombres de colores (Agate, Amber, Coral, Emerald, etc.). Importaremos lo que no necesitemos o bien querramos probar.

Tras este paso, veremos la lista de Tarjetas o Cards importadas.

En la captura de arriba comprobamos que deslizando el cursos sobre las filas de las Tarjetas podremos editarlas. Veamos con qué nos encontramos tras hacer clic en el botón Edit.

Nos topamos entonces con los bloques Gutenberg que componen la Tarjeta. Podemos añadir más bloques o borrar lo que no necesitemos, y editar el diseño de cuanto querramos. Nota especial al Type o tipo de Tarjeta, donde optaremos por Masonry o Metro, dependiendo del diseño de nuestra preferencia. En este ejemplo, la plantilla de Tarjeta es “Lava” y responde a los fines de un blog.

Regresemos entonces al apartado de diseño de Tarjetas.

Lo cierto es que, a fin de poder mostrar datos de Entradas, Términos o Usuarios en nuestra grilla, es necesario asignar tarjetas. Notaremos que no se asignan de manera explícita, por lo que WP Grid Builder designará automáticamente una tarjeta por defecto que mostrará solo la miniatura de la entrada o el avatar del usuario (si están disponibles).

Siguiendo con el ejemplo de nuestra guía, tipearemos “Lava” en el campo de Card o Tarjeta para poder seleccionarla.

Las tarjetas pueden ser asignadas con condiciones, dependiendo de los datos consultados en la rejilla. Por ejemplo, podemos asignar tarjetas a Entradas que contengan términos específicos o bien campos personalizados. También es posible añadir condiciones para dispositivos móviles o diferentes escenarios de Usuarios. Como veremos, WP Grid Builder nos brinda libertades impresionantes.

En esta solapa también se nos brindan opciones para Tamaños (Sizing); es decir, podemos anular globalmente el número de filas y columnas utilizadas para todas las tarjetas dentro de la grilla (estos ajustes afectarán exclusivamente a los diseños Masonry y Metro).

Por último, en Animation encontramos los ajustes para diseñar las apariciones y transformaciones que se producen al desplazar la página.

A medida que hacemos scroll, las animaciones revelarán dinámicamente las Tarjetas dentro de la cuadrícula, efectos visuales que mejoran el atractivo visual del contenido y, tentativamente, la participación de nuestros usuarios. Hay varias opciones de animación para elegir.

Siempre recordemos guardar los cambios. Pasemos ahora al apartado de Media, donde podremos configurar el comportamiento de visualización de los medios en función de la consulta.

Media (Medios)

En este panel podemos determinar qué formatos multimedia estarán permitidos en nuestras Tarjetas. Podemos activar o desactivar los formatos de galería, audio o video con un clic sobre los botones correspondientes:

En Behaviour (Comportamiento), WP Grid Builder brinda la posibilidad de automáticamente recuperar el primer elemento multimedia del contenido de la Entrada para los casos en que ninguna imagen destacada fue asignada. Si esto es lo que deseamos, podemos activar la opción First Media Content (Primer Contenido Multimedia). Paralelamente, tenemos las opciones de mostrar los thumbnails de videos incrustrados y de mostrar videos en un marco tipo Lightbox.

A continuación, en las opciones de Thumbnails, podemos cambiar tamaños y diseños por defecto, incluso contemplando escenarios para dispositivos móviles.

Advanced (Configuración Avanzada)

En la última solapa se nos brinda la posibilidad de personalizar los mensajes, el aspecto y las funcionalidades de la rejilla para adaptarlos a nuestras preferencias y requisitos específicos.

Modificar los mensajes a nuestro idioma o a la manera de expresión general de nuestra web es algo importante, pero el resto de los campos requieren conocimientos avanzados de programación y por ende no formarán parte de esta guía rápida.

Vista Previa

Siempre podemos previsualizar nuestra grilla mientras vamos tomando decisiones de configuración, pero vamos a ver ahora cuál es el resultado de la grilla de nuestra demo ahora:

Voilá:

En este ejemplo vemos los resultados para Blog, tal cual lo hemos rápidamente configurado. Las imágenes se ponen a color sólo si pasamos el ratón encima de ellas, pero esto es fácilmente modificable: si algo no nos termina de convencer en cuanto a colores de enlaces, textos o tipos de fuentes, podremos modificarlo a través de los bloques Gutenberg en la edición de la Tarjeta. Recordemos que podemos eliminar bloques (por ejemplo, la información sobre los comentarios, o la información del autor).

En cuanto a estructura, si creemos que algo necesita mejorar, volveremos al apartado correspondiente en el diseño de grilla.

Filtros de búsqueda

Parte importante y complementaria de toda presentación de contenido es la posibilidad de ordenar éste según los anhelos o necesidades de nuestros usuarios. Por esto existen los filtros de búsqueda, y en Wp Grid Builder, tal cual hemos adelantado. se llaman “Facets“.

Podemos crear todas las Facets que necesitemos (en principio pensemos que en una sola), siempre dependiendo de las necesidades de nuestra web.

Para hacerlo, debemos dirigirnos aquí:

Veremos que de fábrica ya existen una serie de Facets; éstos deben ser pensados como elementos o bloques que vamos a invocar desde Gutenberg o nuestro builder favorito (como podría ser Elementor). Por ejemplo, vemos que ya tenemos listo un buscador (Search), un cargar más (Load More), etc.

Crearemos una Facet de filtro para nuestro blog ahora, entendiendo que el proceso es el mismo para una tienda o portfolio.

Tras hacer clic sobre Add New, veremos la siguiente pantalla de creación:

En Behaviour (Comportamiento), desplegable de Facet Action, por defecto estará seleccionado Filter Content (Filtrar Contenido). Lo dejaremos así.

En Filter Type, es decir, Tipo de Filtro, tenemos un desplegable lleno de las opciones típicas: casilla de verificación, menú desplegable, cambiar el orden (A a la Z ó inverso, 1 al 10 o inverso), filtro de rango (por ejemplo para precios), etc. Dado que pretendemos filtras por categoría, podemos elegir un desplegable (Dropdown).

En Data Source, o sea la fuente de datos, es posible activar y desactivar los contenidos en donde deseamos que la búsqueda se realice (si tenemos WooCommerce también veremos productos). Como en el ejemplo de esta guía hemos optado por un blog, dejaremos Posts y filtrado por categorías.

En Order & Number (orden y número) tenemos las opciones relacionadas justamente al ordenamiento de los elementos en nuestra grilla.

Muy importante es que, hacia el final, podemos seleccionar AND ú OR, es decir, los condicionantes que combinan los requisitos que deben cumplirse para que un elemento sea mostrado. Por ejemplo, Categoría = Libros AND (y) precio < 15.000 (se mostrarán todos los ítems que sean libros por debajo de $15.000.

Por su lado, OR se emplea para sumar múltiples condiciones. Ejemplo: Categoría = Libros OR Categoría = Revistas (se mostrarán todos los ítems de ambas categorías).

Siempre recordemos guardar los cambios.

Incorporando Grilla y Filtros en una Página

En nuestras maquetaciones, podemos añadir los elementos de nuestra grilla o la caja de filtrado que hemos creado gracias a los widgets correspondientes que añade WP Grid Builder a nuestro WordPress.

En Gutenberg, por ejemplo, los encontraremos aquí:

Esta disponibilidad implica que podemos añadir nuestras Grillas y Facets en donde se nos ocurra.

Para la captura siguiente hemos creado una tabla de dos columnas a ancho completo y añadido, del lado izquierdo, un Facet, eligiendo debidamente el nombre del filtro que hemos creado antes (debemos escribirlo). Lo mismo con la Grilla del lado derecho: añadido el widget, lo configuraremos para que presente nuestra grilla creada.

Y con este último paso hemos terminado nuestra guía de WP Grid Builder para principiantes.

¿Cuáles son los “puntos flojos” de Grid Builder?

Si bien WP Grid Builder es user friendly, y posee un repertorio tremendo de opciones de configuración, la cantidad de alternativas presupone una curva de aprendizaje algo lenta, sobre todo si es la primera vez que nos arrojamos a esta pileta de presentaciones en mosaico y filtrado de los elementos. Sin una guía (como ésta, claro), ponerse a leer los manuales en inglés o ver los videos oficiales en YouTube puede resultar fastidioso o inaplicable. Por ende, quizás necesitemos una alternativa más enérgica que no insuma tanto tiempo (sin embargo, si logramos cruzar esta piscina de lado a lado, luego no vamos a querer salir del agua).

Por otro lado, no existen versiones gratuitas. WP Grid Builder sólo ofrece planes pagos Basic, Premium y Ultimate, comenzando por la versión básica para un sitio único que cuesta USD49 anual. Esto, en muchos países o bien para ciertos desarrolladores, podría resultar un freno, o bien una decisión que no se tomaría a priori, sin probar el producto antes.

Finalmente, si pretendemos un grilla modesta con algunas reglas de filtrado sin tanta complejidad, este plugin sin dudas resultará “demasiado”.

Conclusiones

Grid Builder es un plugin para WordPress que realmente descolla en su versatilidad, en la cantidad de opciones y libertades que nos brinda para crear cuadrículas sin límite en cuanto a diseño o configuración. Es un producto diseñado para que podamos maquetar diseños de grilla avanzados y filtrables sin obstáculos (no va a pasar que digamos “eh, esto no me deja hacerlo”).

Resulta ideal para cualquier género de sitio web, ya sea de tienda electrónica, blog o portafolio; se demuestra como una solución integral todo terreno. Su interfaz de usuario intuitiva lo vuelve accesible tanto para desarrolladores amateurs como para profesionales experimentados.

Gracias a WP Grid Builder dispondremos de una integración perfecta con las herramientas más populares de WordPress (WooCommerce, Elementor, etc.). Su repertorio de funcionalidades potentes, como filtrado avanzado, búsqueda facetada y rendimiento optimizado con Ajax, lo vuelven probablemente el mejor plugin para presentaciones en Grilla del momento. No es una opción que podamos dejar pasar tan fácil.

Recordemos que WP Grid Builder forma parte de la treintena de plugins que incluimos gratuitamente en nuestros servicios de WordPress Administrado. Agradecemos la lectura y les deseamos éxitos en sus emprendimientos. Estamos para ayudarles.