Crear tablas de precios con Gutenberg

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:

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

WordPress.org

Ver planes

Alternativas

El bloque columnas

Una alternativa sería intentar maquetar la tabla con el bloque de columnas:

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 ?.