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.
Cree bonitas mesas
Con el editor de bloques
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.
Paso 4: Añadir radio a las columnas de la tabla
Puede mejorar la estética añadiendo un radio de borde a las columnas de la tabla. Select el Icono de Tabelberg en la barra de herramientas. Ir a el Ficha Estilos.
Desplácese y venir a Espacio entre celdas. Arrastrando la opción correspondiente, puede añadir espacios entre las columnas de la tabla.
Verá el Borde de la mesa justo debajo. Establecer que desee Valor del radio parar tanto el borde interior como el exterior.
Así, podrá preparar su tabla de precios.
Paso 5: Añadir una cinta a la tabla de precios
Seleccione la columna a la que desea añadir una cinta. Pulse el icono más (+) y busque el icono Bloque de cintas. A continuación, haga clic y el bloque a la columna.
La cinta se añadirá a la tabla. A continuación, desde el Ficha Configuraciónseleccione el Tipo de cinta, el Texto de la cinta, el Lado y la Distancia.
A continuación, personalice el texto y el color de fondo desde el menú Ficha Estilos.
Así pues, su tabla de precios está lista con un lazo.
¡Cerrando!
Espero que te haya gustado este tutorial. Pero hay varios puntos que debes recordar. Asegúrate de que tu tabla está limpia y despejada. Los diseños minimalistas de mesas de precios siempre impactan a los clientes potenciales.
En segundo lugar, utilice un texto claro y conciso que conecte al instante con los visitantes de la web. si es posible, añada algunas ventajas/características de los productos en la tabla. Si quiere abarcar varios planes en sus tablas de precios, es mejor mostrarlos con un conmutador.
Aquí tiene una guía sobre cómo crear una tabla de precios con el conmutador en WordPress.
