En más de un año hemos visto una gran evolución en el editor de bloques Gutenberg. Comparándolo con el editor clásico de WordPress, ahora podemos diseñar elementos en nuestras entradas y páginas que antes sólo podían hacerse tocando código.
Por ejemplo, con el editor clásico, para mostrar una tabla lo que resultaba más fácil era crear una imagen a partir de una tabla creada en una hoja de cálculo, y luego insertarla en la entrada donde querías mostrarla. Pero uno de los bloques que ahora encontramos en el nuevo editor de WordPress es el bloque de tabla. Veamos cómo creamos una tabla con Gutenberg y hasta qué punto podríamos crear una tabla de precios con este mismo bloque.
El bloque Tabla
Ahora, crear una tabla es tan fácil como añadir un nuevo bloque de tipo tabla en el que indicamos el número de filas y columnas que queremos y su alineación.

En un bloque de tipo tabla, podemos personalizar las siguientes propiedades:

Adicionalmente, también podemos indicar en cada celda la alineación del texto y si la fuente es negrita o cursiva, y añadir enlaces. Además, en todo momento puedes modificar la tabla añadiendo o eliminando filas y/o columnas.
De esta forma, vemos que podemos crear de forma sencilla la siguiente tabla:
Planes de Nelio A/B Testing | ||
---|---|---|
Básico | Profesional | Enterprise |
para autónomos y webs personales | para pequeños empresarios | para equipos centrados en optimizar |
29€ / mes | 89€ / mes | 259€ / mes |
1️⃣ 1 sitio | 5️⃣ 5 sitios | ? 10 sitios |
5.000 visitas a páginas testeadas | 35.000 visitas a páginas testeadas | 200.000 visitas a páginas testeadas |
Suscríbete | Suscríbete | Suscríbete |
Esto es mucho más sencillo y rápido que lo que podíamos hacer con el editor clásico. Y el resultado obtenido seguramente te puede llegar a servir para mostrar una tabla de datos.
Limitaciones del bloque tabla
Aunque nos ha sido muy fácil crear la tabla anterior, nos encontramos con bastantes limitaciones. Por un lado, las tablas que diseñas con el bloque de tipo tabla en Gutenberg, a día de hoy tienen una capacidad de adaptación («responsiveness» en inglés) a dispositivos pequeños limitada. Es decir, la tabla no se rompe pero se va haciendo más pequeña sin ser capaz de mostrar los distintos elementos de la tabla por columnas:

Una tabla que se adapta totalmente a los dispositivos muestra los elementos de la tabla rompiendo la tabla en columnas, de forma que se visualicen mucho mejor todas las celdas.
Adicionalmente a la capacidad de adaptación a dispositivos, como ya te habrás dado cuenta, en un bloque de tipo tabla no podemos fácilmente en cada celda cambiar el tipo y tamaño de fuente, los colores, etc. Es decir, debido a todas sus limitaciones el bloque tabla de Gutenberg no te sirve para crear una tabla de precios atractiva para tus productos.
¿Cómo podemos crear estas tablas responsive?

Nelio A/B Testing
Me sorprendió mucho la calidad del plugin, lo fácil que fue configurarlo y el increíble soporte que me dio Nelio. Recomiendo encarecidamente usar Nelio A/B Testing.

Josette Millar
Alternativas
El bloque columnas
Una alternativa sería intentar maquetar la tabla con el bloque de columnas:
Básico
para autónomos y webs personales
29€ / mes
1️⃣ 1 sitio
5.000 visitas a páginas testeadas
Profesional
para pequeños empresarios
89€ / mes
5️⃣ 5 sitios
35.000 visitas a páginas testeadas
Enterprise
para equipos centrados en optimizar
259€ / mes
? 10 sitios
200.000 visitas a páginas testeadas
La ventaja del bloque columnas, respecto al bloque tabla, es que es totalmente responsive, y en una pantalla de móvil veremos que cada unos de los planes se visualizan detrás del otro.

Vemos que las columnas son más responsive. Y seguramente las columnas, para mostrar poca información y sin demasiadas complicaciones, son una alternativa a considerar. Aún así, me parece estar volviendo a los 90s.
Plugins de bloques de tablas de precios
Mi recomendación si tienes que crear tablas de precios atractivas es que te instales alguno de los plugins que incluyen bloques para ello. Quizá no te permitirán, sin tocar código, cualquier tipo de personalización. Pero en muchos casos, puedes obtener unos resultados muy elegantes. Veamos algunos ejemplos totalmente integrados con el editor de bloques Gutenberg.
CoBlocks
Coblocks es un plugin que incluye todo un conjunto de bloques adaptados totalmente a Gutenberg. Uno de ellos es el bloque Tabla de Precios.
Es muy sencillo y fácil de utilizar y lo que puedes personalizar (sin tocar código) es indicar si tiene 1, 2 o 3 columnas y aspectos relacionados con la tipografía. También puedes personalizar los colores de las columnas y texto.
En nada tienes un tabla de precios totalmente responsive como la que te muestro en la siguiente imagen.

Getwid
De forma similar, el plugin Getwid también incluye todo un conjunto de bloques totalmente compatible con el editor de Gutenberg. Rápidamente, de forma sencilla puedes construir una tabla de precios totalmente responsive como la que te muestro.

En este caso, puedes personalizar los tipos de letra y los colores de fondo y texto.
Premium Blocks for Gutenberg
El plugin Premium Blocs for Gutenberg también incluye bloques con los que puedes crear tablas de precios muy atractivas. A continuación te muestro una imagen de tabla de precios que he creado con el bloque Pricincg Table insertado en columnas.

Este bloque te permite personalizar los colores, las tipografías, el tipo de botones, si quieres incluir un icono, propiedades de cómo mostrar el precio, las características y la descripción, entre otras. Como ves, te permite una personalización muy completa.
Plugins con editores de tablas de precios
Alternativamente, encontrarás otro tipo de plugins que incluyen un editor de tablas de precios que se integra en tu escritorio de WordPress (built-in editor) y con los que puedes crearte tablas muy completas y personalizadas. Una vez construída la tabla deseada, dicha tabla se incluye en cualquier página o entrada mediante un shortcode. Veamos algunos ejemplos:
Responsive Pricing Table
Responsive Pricing Table es un plugin que añade un nuevo editor en tu WordPress para que puedas crear tablas de precios. Puedes añadir un gran número de planes y personalizar cada uno de ellos.
Para cada plan, puedes añadir el nombre, subtítulo, descripción y precio. También puedes añadir una lista de características, personalizar el botón de compra y cambiar el esquema de colores del plan.

Una vez creado el plan, sólo tienes que añadirlo mediante un shortcode en la página de precios.
Pricing Table de Supsystic
El plugin Pricing Table de Supsystic añade un editor de arrastrar y soltar en tu escritorio de WordPress con el que puedes construir tablas. Te ofrece una gran cantidad de diseños de tabla responsive. En la versión gratuita tienes hasta 7 diseños disponibles.

Tras seleccionar el diseño de tabla deseado, dispones de un editor que te permite modificar el número de columnas y personalizar un montón de características de cada una de los planes que se muestran. Y además puedes cambiar de diseño en cualquier momento. Finalmente, al igual que antes, la tabla la puedes incluir en cualquier página o entrada con un shortcode.
Otro plugins gratuitos que integran editores de tablas de precios son:
- Pricing Table de ARPrice
- Pricing Tables WordPress Plugin – Easy Pricing Tables de Fatcat Apps
- Responsive Pricing Table Builder – wpPricing Builder
- WRC Pricing Tables
- Pricing Table Builder – AP Pricing Tables Lite
- TC Pricing Table de themesCode
- Pricing Table – de A WP Life
Conclusión
Como ves, En WordPress tienes una gran variedad de alternativas para construir tablas de precios sin un coste adicional y, sin tener que tocar código directamente. Así que sólo es cuestión de elegir aquella opción que se ajuste mejor a tus necesidades.
Recuerda que la página en la que muestras los precios de tus productos acaba siendo la más crítica para conseguir clientes. Así que, el tiempo que inviertas en hacerla atractiva, no será en vano. Y para inspirarte, pudes echar una ojeada al diseño de la tabla de precios de nuestros producto Nelio A/B Testing que es la que está como imagen destacada de esta entrada ?.
Deja una respuesta