Si vendes productos o servicios online, probablemente te haya surgido la necesidad de crear una Tabla de Precios en tu web.

Para añadir este elemento a tu sitio, puedes usar un plugin específico para ello, o si dispones de la plantilla Divi o del plugin Divi Builder, te sorprenderá la facilidad para agregarlo.

Diseñar y crear una Tabla de Precios con el constructor web Divi te puede llevar muy poco tiempo, aunque no tengas muchos conocimientos de diseño.

En esta entrada, te ayudo un poco más a crear tú mismo este comparador de precios, de forma que te ayude a generar más ventas.

¿Empezamos? 😉

5 Cosas que debes tener en cuenta al crear una Tabla de Precios para tu web

Las Tablas de Precios pueden ser un elemento esencial para hacer que un cliente potencial acabe comprando tus productos o servicios.

Además de ofrecer información relevante, ordenada y clara sobre lo que vendes, tienen la capacidad de captar rápidamente la atención del usuario web. También permite hacer una comparación de tarifas y ventajas de tus productos.

Obviamente, cuanto mejor diseñada y optimizada sea tu Tabla de Precios, más ventas generarás.

Para crear una Tabla de Precios atractiva y capaz de persuadir a que un cliente compre, te aconsejo aplicar estos 5 consejos:

Enfócate en los beneficios del cliente

Obviamente debes reflejar cuáles son las características de cada producto, plan o servicio, pero hay mucha diferencia en simplemente nombrarlos (Ej: Dominio gratis) o también comentar los beneficios para el cliente (Ej: ¡Ahorra dinero con un dominio gratis!).

Se trata de comprender lo que el usuario que visita tu web anda buscando exáctamente y proporcionarle el gancho que necesita.

Asigna nombres apropiados a tus planes

Intenta nombrar a tus planes de forma que puedan ser recordados y al mismo tiempo vayan en concordancia con la línea de tu negocio.

Es conveniente ser original y marcar la diferencia, pero de tal forma que no se vuelvan productos impronunciables 😉

Resalta el «mejor» plan

¿Has oído hablar del Efecto anclaje? Este se da cuando vemos una información por primera vez y nos provoca un prejuicio cognitivo de tomarla como referencia, dándole un mayor peso a la hora de tomar una decisión.

Por esta misma razón, es recomendable que resaltes la pestaña del producto que más te interese vender, ya sea por margen o por cualquier otra razón que te beneficie, para que el cliente lo retenga desde el principio en su mente.

Para destacar una pestaña, Divi cuenta con una opción directa y muy sencilla, que comentaré más abajo.

Otra de las tácticas dentro de una Tabla de Precios online, para persuadir en la compra del producto que más te beneficia, es resaltarlo y al mismo tiempo crear un producto superior con alguna ventaja más, pero a un precio relativamente más alto.

De esta forma, el usuario compara y precibe que por mucho menos dinero tiene prácticamente las mismas ventajas en el producto intermedio (el que tú quieres venderle).

Incluye testimonios

Siempre que se quiere vender algo, la recomendación de otros clientes resulta un empuje esencial para convencer a los potenciales clientes.

Por eso, puedes añadir una sección junto a la de Tabla de Precios en la que incluyas testimonios de clientes satisfechos con tu producto. Hay una forma muy sencilla de diseñar estos testimonios con el módulo Recomendación de Divi.

Apuesta por el diseño simple

Las Tablas de Precios de una web son un espacio pequeño con el que debes convencer e incentivar la compra. Por tanto, incluye información precisa y relevante, con las ideas principales.

El diseño simple expresa mucho más que un diseño sobrecargado y además evitas distraer al cliente con información irrelevante.

Si deseas añadir un apartado de FAQ, por ejemplo, puedes incorporar un módulo Acordeón de Divi y resolver aquí dudas que los clientes puedan tener antes de la compra.

Y ahora que ya tenemos una idea de cómo será nuestra Tabla de Precios, es hora de comenzar a crearla con el constructor web de Divi.

Cómo diseñar y crear una Tabla de Precios con Divi

Si necesitas hacer una Tabla de Precios, con la plantilla o constructor web de Divi es muy sencillo y no te llevará mucho tiempo, ya que dispone de un módulo específico para agregar esta función.

Lo primero que tendrás que hacer, si aún no lo has hecho, es abrir la edicíon de la página en WordPress y clicar en el botón de Usar el constructor Divi.

Después añadir una Sección estándar, añadir una fila y por último, añadir el módulo Tabla de Precios.

Ahora es el momento de personalizar a tu gusto esta Tabla de Precios.

Antes de nada, conviene que sepas cómo están estructurados los ajustes del constructor web Divi.

La estructura de ajustes de cada sección de Divi es siempre la misma:

SECCIÓN ESTÁNDAR

• Ajustes generales.
• Css Personalizado.

FILA

• Ajustes generales.
• Ajustes avanzados de diseño.
• CSS Personalizado.

MÓDULO

• Ajustes generales.
• Ajustes avanzados de diseño.
• CSS Personalizado.

PESTAÑAS DEL MÓDULO

• Ajustes generales.
• Ajustes avanzados de diseño.
• CSS Personalizado.

Por lo tanto, para configurar una Tabla de Precios sencilla con Divi vamos a ver los pasos más importantes.

Configurar el módulo Tabla de Precios

Empieza por configurar el módulo Tabla de Precios. Entra dentro del módulo, clica en la pestaña Añadir nueva Tabla de Precios y añade una pestaña por cada uno de los productos o planes que quieras mostrar.

Ahora, para diseñar todas las pestañas, hazlo clicando en los Ajustes avanzados de diseño del módulo.

Desde este apartado podrás personalizar:

• Color de fondo de la cabecera de la tabla.
• Color del punto del listado de ventajas.
• Título Cabecera: personaliza la fuente, el tamaño, el color de texto, el espacio entre letras y la altura de línea.
• Subtítulo: personaliza la fuente, el tamaño, el color de texto, el espacio entre letras y la altura de línea.
• Moneda: puedes elegir la fuente, el tamaño, el color, el espacio entre letras y la altura de línea.
• Precio: puedes elegir la fuente, el tamaño, el color, el espacio entre letras y la altura de línea.
• Cuerpo (texto): personaliza la fuente, el tamaño, el color de texto, el espacio entre letras y la altura de línea.
• Color de fondo de la tabla.
• Usar borde: si clicas, automáticamente se abrirán los ajustes de diseño para el borde de la tabla de precios justo abajo.
  Aquí podrás modificar el color, la anchura y el estilo del botón (sólido, puntos. guiones, doble, ranura, cresta, insersión, comienzo).
• Personalizar botón: si clicas, automáticamente se abrirán los ajustes de diseño para los botones de la tabla de precios justo abajo. Si lo dejas por defecto, los botones tomarán el diseño general de botones que hayas configurado en la plantilla.
  Aquí podrás modificar el tamaño y color de texto, el color de fondo, el ancho y color de borde, el radio frontera (para redondear los bordes), el espacio entre letras, la fuente o agregar un icono al botón (también puedes personalziar este icono).
• Hover: personaliza el hover (estilo al pasar el ratón por encima) del texto, fondo, borde, botón
• Tabla destacada: personaliza los ajustes de diseño de la tabla o producto que quieres destacar.
  Modifica el color de título y subtítulo, el color de precio, el color de fondo, el color de texto, el color del punto del listado o el color de fondo.
• Por último, puedes eliminar o activar el efecto de sombra que se crea al mostrar la tabla destacada en relieve.

A continuación, entra en los ajustes de cada pestaña (clicando en el icono de las tres líneas) para personalizarlas de forma individual y añadir toda la información.

En mi ejemplo voy a añadir 3 planes: Principiante, Profesional y Avanzado.

Dentro de cada pestaña podrás:

Configurar los Ajustes generales:

• Destacar la tabla: si clicas en este botón, esta tabla aparecerá en relieve sobre las demás. Este sería el producto que más te interesa vender.
• Añadir un título y subtítulo.
• Añadir el símbolo de la moneda y el precio. Puedes añadir también si se trata de un precio por mes o año.
• Añadir la URL del botón: este llevaría a la página del producto o directamente a la página de pago.
• Texto del botón: Podría ser Comprar, Contratar, Únete, Suscríbete…
• Contenido: aquí podrás incluir todas las ventajas de tu producto. El listado de características que incluye o no incluye.

Y también configurar los Ajustes avanzados de diseño:

Aquí podrás dar estilo individual a esta pestaña en concreto:

• Título y subtítulo: selecciona la fuente, el tamaño, el color, el espacio entre letras y la altura de línea.
• Moneda y Precio: selecciona la fuente, el tamaño, el color, el espacio entre letras y la altura de línea.
• Texto (cuerpo): selecciona la fuente, el tamaño, el color, el espacio entre letras y la altura de línea.
• Color de fondo.
• Usar estilos personalizados para botón: si clicas, automáticamente se abrirán los ajustes de diseño para los botones de la tabla de precios justo abajo. Si lo dejas por defecto, los botones tomarán el diseño general de botones que hayas configurado en la plantilla.
  Puedes modificar el tamaño y color de texto, el color de fondo, el ancho y color de borde, el radio frontera (para redondear los bordes), el espacio entre letras, la fuente o agregar un icono al botón y personalizarlo.
• Hover: personaliza el hover (estilo al pasar el ratón por encima) del texto, fondo, borde, botón

Presta atención si has personalizado los ajustes de diseño del módulo y también de las tablas por separado, pues se solaparán. Todo lo que no modifiques, la plantilla acoge la configuración que tengas establecida por defecto.

Si tienes conocimientos avanzados de diseño web, clica en el apartado del módulo CSS Personalizado y desde aquí podrás añadir código para este módulo.

Estos son los ajustes básicos para poner a tu gusto y al estilo de tu marca la Tabla de Precios de tus productos, pero se pueden personalizar muchos más aspectos.

Por ejemplo, si deseas añadir una imagen o un color de fondo a la sección, lo puedes hacer entrando en los ajustes de la sección. Desde estos ajustes puedes activar el efecto paralaje de esta imagen de fondo simplemente clicando en un botón.

Aunque al principio pueda parecer sencillo configurar una Tabla de Precios estándar, ya ves como con la plantilla Divi tienes mil opciones de configuración y se pueden crear diseños simples o diseños muy elaborados y personalizados.

Este sería un ejemplo de una Tabla de Precios simple con la plantilla Divi:

Con esto ya tendrías todos los pasos para crear una Tabla de Precios con Divi, capaz de maximizar conversiones y convencer a tus clientes de las ventajas de tus productos. Además, se mostrará totalmente responsive en los distintos dispositivos.