La presentación de sus tablas de precios es importante para influir en los clientes. Una forma eficaz de mejorar las tablas de precios es incorporar una cinta. Visualmente, se trata de una llamativa pancarta de etiquetas que se despliega en diagonal sobre una tabla para destacar ofertas, descuentos y características específicas.
Tanto si promociona un descuento por tiempo limitado, una función especial o paquetes muy vendidos, una cinta bien colocada puede influir instantáneamente en los clientes potenciales para que tomen decisiones. Tableberg es un plugin intuitivo y potente para hacerlo.
En este post, le mostraremos cómo añadir una tabla de precios con cinta en WordPress con Tableberg.
Una vez que tengas el plugin instalado en tu sitio, entra en el siguiente tutorial.
Paso 1: Añadir el bloque Tableberg al editor
El complemento añade un bloque denominado Tableberg a la biblioteca de bloques de Gutenberg. Añade el bloque al editor simplemente pulsando el icono más (+).
Establece el número de columnas y filas que necesitas para tu tabla. Para este tutorial, vamos a establecer 3*1 para columnas y filas.
Puede ver que el diseño básico de la tabla de precios se ha creado con columnas y una fila.
Paso 2: Añadir contenido a la tabla
Una tabla de precios suele incluir nombres de productos, imágenes, precios, precios con descuento y botones CTA. Veamos cómo añadirlos a la tabla.
Añadir el nombre del producto
Tableberg te permite añadir diferentes tipos de bloques a sus celdas como el editor de bloques de Gutenberg. Añade el Bloque de párrafos para escribir el nombre del producto. (Por defecto, el bloque de párrafo se añade a las celdas de la tabla).
Escriba el nombre de su producto en la celda. Alinee el texto en el centro, póngalo en negrita, cambie su color y modifique su tamaño utilizando las opciones que se muestran en la imagen siguiente.
Añadir la imagen del producto
Añada el bloque Imagen a la tabla de precios.
El bloque de imagen le permitirá cargar la imagen del producto. Cambie el tamaño de la imagen según sea necesario y alinéela adecuadamente.
Añadir un precio anterior
Mostrar la diferencia entre el precio anterior y el actual es una buena forma de resaltar el descuento. Así que vamos a añadir un precio anterior debajo de la imagen del producto.
Añadir un efecto de tachado al precio anterior puede llamar la atención de la gente. Para ello, seleccione el precio con el cursor. Haga clic en el Más opciones en la barra de herramientas.
Ir a el Destaque y Opciones de tachado. Podrás cambiar el color del precio y añadir un tachado.
Añadir el precio actual del producto
Ahora, añada el precio actual del producto en un tipo de letra comparativamente más grande para que pueda llamar la atención de la gente.
Añadir un botón CTA
Al final de todo el contenido, añada el Bloque de botones.
Cambie el color de fondo del botón, el color del texto, el tamaño de la tipografía y el relleno. Realice estos cambios como desee.
Paso 3: Añadir espacios entre los bloques
Así pues, el contenido de la columna está listo. Pero como puedes ver, todos los bloques están demasiado congestionados. Tenemos que añadir espacio entre ellos para crear un aspecto más fresco.
Para ello, seleccione la columna concreta. A continuación, vaya al Ficha Estilos. Come to the Espacio entre bloques desplazando la pestaña. Aumenta el espacio añadiendo un valor en la casilla.
Del mismo modo, añada contenido a las demás columnas. Pero para ahorrar tiempo, puedes duplicar la columna y luego actualizar el contenido. Aquí tienes una guía sobre cómo duplicar una columna y una fila Tableberg.