Cree tablas de precios con el editor de bloques de Gutenberg

En más de un año hemos visto una gran evolución en el editor de bloques de Gutenberg. En comparación con el editor clásico de WordPress, ahora podemos diseñar elementos en nuestras publicaciones y páginas que antes solo se podían hacer mediante codificación.

Por ejemplo, con el editor clásico, la forma más fácil de mostrar una tabla en una publicación era crear dicha tabla en una hoja de cálculo, exportarla como una imagen y luego insertarla en la publicación donde quería mostrarla. Pero uno de los bloques que ahora encontramos en el nuevo editor de WordPress es el bloque de tablas. 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 de mesa

Crear una tabla es tan fácil como añadir un nuevo bloque Table en el que indicamos el número de filas y columnas que queremos y su alineación.

En un bloque Tabla, podemos personalizar las siguientes propiedades:

También podemos indicar en cada celda la alineación del texto y si la fuente está en negrita o cursiva, y añadir enlaces. Además, podemos modificar la tabla en cualquier momento añadiendo o eliminando filas y/o columnas.

De esta forma, vemos que podemos crear fácilmente 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 puede servir para mostrar una tabla de datos.

Limitaciones de bloque de tabla

Aunque nos ha resultado muy fácil crear la tabla anterior, nos hemos encontrado con bastantes limitaciones. Por un lado, las tablas que diseñas con el bloque de tipo Table en Gutenberg no son responsive. Es decir, la tabla no se rompe sino que se hace más pequeña sin poder mostrar los diferentes elementos de la tabla por columnas:

Una tabla que se adapta completamente a los dispositivos muestra los elementos de la tabla dividiendo la tabla en columnas, de manera que todas las celdas se visualizan mucho mejor.

Además de la (in)capacidad de adaptación a dispositivos, como habrás notado, en un bloque de tabla no podemos cambiar fácilmente el tipo y tamaño de fuente, colores, etc. en cada celda. Es decir, debido a todas sus limitaciones, el bloque de tablas de Gutenberg no es útil para crear una tabla de precios atractiva para sus productos.

¿Cómo podemos crear estas tablas receptivas?

Alternativas

El bloque de columnas

Una alternativa sería tratar de diseñar la tabla con el bloque de columnas:

Básico

para autónomos y sitios web personales

29€/mes

1 sitio

5.000 visitas a páginas testeadas

Suscribir

Profesional

para pequeños empresarios

89€/mes

5 sitios

35.000 visitas a páginas testeadas

Suscribir

Empresa

para equipos enfocados en optimizar

259€/mes

? 10 sitios

200.000 visitas a páginas testeadas

Suscribir

La ventaja del bloque de columnas, en comparación con el bloque de tablas, es que es totalmente receptivo, y en una pantalla móvil veremos que cada uno de los planes se muestra detrás del otro.

Vemos que las columnas responden completamente. Y seguro que las columnas, para mostrar poca información y sin demasiadas complicaciones, son una alternativa a tener en cuenta.

Complementos de bloque de tabla de precios

Mi recomendación si tienes que crear tablas de precios atractivas es que instales alguno de los plugins que incluyen bloques para ello. Puede que no te permitan, sin tocar código, ningún tipo de personalización, pero en muchos casos puedes conseguir resultados muy elegantes. Veamos algunos ejemplos totalmente integrados con el editor de bloques de Gutenberg.

cobloques

Coblocks es un plugin que incluye todo un conjunto de bloques totalmente adaptados a Gutenberg. Uno de ellos es el bloque Tabla de Precios.

Es muy simple y fácil de usar y, sin codificación, puedes personalizar el número de columnas y algunos aspectos relacionados con la tipografía, así como los colores de las columnas y el texto. Rápidamente tiene una tabla de precios totalmente receptiva como la que se muestra en la siguiente imagen.

Obtener

Del mismo modo, el complemento Getwid también incluye todo un conjunto de bloques totalmente compatibles con el editor Gutenberg. Rápidamente, puede crear fácilmente una tabla de precios totalmente receptiva como esta:

En este caso, puedes personalizar las fuentes y los colores de fondo y texto.

Bloques premium para Gutenberg

El complemento Premium Blocs for Gutenberg también incluye bloques con los que puedes crear tablas de precios muy atractivas. A continuación les muestro una imagen de tabla de precios que creé con el bloque de Tabla de precios insertado en columnas.

Este bloque te permite personalizar colores, fuentes, el tipo de botones, si quieres incluir un ícono, propiedades de cómo mostrar el precio, características y descripción, entre otros. Como ves, te permite una personalización muy completa.

Complementos con editores incorporados

Alternativamente, encontrarás otro tipo de complementos que incluyen un editor de tablas de precios incorporado que se integra en tu tablero de WordPress y con el que puedes crear tablas muy completas y personalizadas. Una vez que se crea la tabla deseada, esta tabla se puede incluir en cualquier página o publicación mediante un código abreviado. Veamos algunos ejemplos:

Tabla de precios adaptable

Responsive Pricing Table es un complemento que agrega un nuevo editor a su WordPress para que pueda crear tablas de precios. Puedes añadir una gran cantidad de planes y personalizar cada uno de ellos.

Para cada plan, puede agregar el nombre, el subtítulo, la descripción y el precio. También puede agregar una lista de funciones, personalizar el botón de compra y cambiar la combinación de colores del plan.

Una vez que se crea el plan, solo tiene que agregarlo usando un código abreviado en la página de precios.

Tabla de precios de Supsystic

El complemento Supsystic Pricing Table agrega un editor de arrastrar y soltar a su panel de WordPress con el que puede crear tablas. Te ofrece muchos diseños de mesa receptivos. 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 uno de los planos mostrados. Y también puede cambiar el diseño en cualquier momento. Finalmente, como antes, la tabla se puede incluir en cualquier página o publicación con un código abreviado.

Otros complementos gratuitos que integran editores de tablas de precios son:

• Tabla de precios por ARPrice
• Complemento de WordPress para tablas de precios: tablas de precios fáciles de Fatcat Apps
• Generador de tablas de precios adaptables – wpPricing Builder
• Tablas de precios de WRC
• Generador de tablas de precios – AP Pricing Tables Lite
• Tabla de precios de TC por themesCode
• Tabla de Precios – bh A WP Life

Conclusión

Como ves, en WordPress tienes una gran variedad de alternativas para construir tablas de precios sin coste extra y sin tener que codificar directamente. Así que solo es cuestión de elegir la opción que mejor se adapte a tus necesidades.

Recuerda que la página donde muestras los precios de tus productos termina siendo la más crítica para conseguir clientes. Así, el tiempo que dediques a hacerla atractiva no será en vano. Y para inspirarte, puedes echar un vistazo al diseño de la tabla de precios de nuestro producto Nelio A/B Testing, ¿cuál es el que destaca como imagen destacada de este post?.