Crear tablas de precios con Gutenberg

Publicada en WordPress.

Mira nuestro vídeo

Existe una versión mejor de tu web

Comparte este artículo

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.

Insertar una nueva tabla con el editor de bloques Gutenberg.
Insertar una nueva tabla con el editor de bloques Gutenberg.

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

Ajustes del bloque Tabla.
Ajustes del bloque Tabla.

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ásicoProfesionalEnterprise
para autónomos y webs personalespara pequeños empresariospara equipos centrados en optimizar
29€ / mes89€ / mes259€ / mes
1️⃣ 1 sitio5️⃣ 5 sitios🔟 10 sitios
5.000 visitas a páginas testeadas35.000 visitas a páginas testeadas200.000 visitas a páginas testeadas
SuscríbeteSuscríbeteSuscrí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:

Tabla poco responsive.
Tabla poco responsive.

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?

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.

Adaptación de las columnas al móvil.
Adaptación de las columnas al móvil.

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.

Tabla de precios con CoBlocks.
Captura de imagen de una tabla de precios creada con CoBlocks.

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.

Tabla de precios creada con un bloque del plugin Getwid,
Tabla de precios creada con un bloque del plugin Getwid.

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.

Tabla de precios con Premium Blocks
Tabla de precios con Premium Blocks

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.

Editor del plugin Responsive Pricing Table.
Editor del plugin Responsive Pricing Table.

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.

Plantillas de tablas de precios de Supsystic.
Plantillas de tablas de precios de Supsystic.

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:

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

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.