Conclusiones clave
- El diseño de una buena tabla de precios muestra tres o cuatro planos uno al lado del otro, con un plano visualmente elevado por encima del resto para que el lector tenga el valor predeterminado para elegir.
- Una tabla de precios se convierte mejor cuando cada tarjeta sigue el mismo orden: nombre del plan, para quién es, precio, período de facturación, una lista corta de funciones y un botón.
- Las filas de características deben tener de tres a seis palabras cada una; una fila que se ajusta a una segunda línea ralentiza la lectura y hace que las cartas sean desiguales.
- Un precio original tachado junto al precio de venta le da al lector un ancla, y el widget de la tabla de precios de complementos maestros tiene un interruptor de venta exactamente para eso.
- Una alternancia mensual y anual necesita dos juegos de tarjetas; en Complementos maestros, el widget Alternar contenido (Pro) cambia entre dos plantillas de sección guardadas.
- En un teléfono, las tarjetas de precios se apilan en una columna, por lo que el plan resaltado debe ocupar el primer lugar o el segundo lugar, no el tercero.
El diseño de la tabla de precios decide si un visitante que ya quiere su producto puede encontrar el plan correcto en unos segundos. El diseño es simple: una fila de cartas, un precio cada una, un botón cada una. Las decisiones importantes son menores que eso: cuántos planes, cuál aumenta, cómo se ve el precio, cuánto tiempo dura cada fila de funciones y qué dice el botón.
Esta publicación recorre diez consejos de diseño de tablas de precios, cada uno de los cuales se muestra en una tabla real creada con el widget de tabla de precios de Master Addons para Elementor. Los ejemplos utilizan planes inventados (Inicio, Crecimiento, Agencia) para que pueda copiar la estructura sin copiar los precios. Cuando una propina necesita un segundo widget, como el interruptor mensual y anual, la publicación dice cuál y si está en el plan Pro.
Tabla de contenidos
1. Mostrar tres planos, cuatro como máximo
Tres planes es el diseño de la tabla de precios que la mayoría de los lectores pueden comparar de un vistazo. Dos planes obligan a tomar una decisión de sí o no. Cinco o más planes convierten la tabla en una hoja de cálculo y el lector comienza a desplazarse hacia un lado en una computadora portátil y a darse por vencido en un teléfono.
Coloque el plan que desea que compre la mayoría de las personas en el medio. La gente lee una fila de izquierda a derecha, pero se instalan en el centro, que también es donde el ojo aterriza primero en un teléfono cuando se acumulan las tarjetas. Si vende un plan de agencia o empresarial con precios personalizados, consérvelo como una cuarta tarjeta con un botón “Contáctenos” en lugar de una tabla separada.
En Elementor, cada tarjeta es un widget de tabla de precios que se coloca en su propia columna o contenedor. Tres widgets en un contenedor de tres columnas, cada uno configurado con el mismo diseño, le brindan la tabla anterior. El Página del widget de la tabla de precios tiene la lista de control completa y cinco diseños en vivo.
2. Eleve un plan por encima del resto
Un plan resaltado le da al lector un valor predeterminado y la mayoría lo aceptará. Lo más destacado hace tres cosas a la vez: la tarjeta es un poco más alta o levantada, el botón usa el color del acento en lugar del estilo del contorno y una cinta nombra la razón (“Más popular”, “Mejor valor”, “Recomendado”).
Resalte exactamente una carta. Dos cartas resaltadas se cancelan entre sí. Elija el plan con el mejor margen para usted que aún se adapte a la mayoría de los lectores, no al más caro.
En el widget de la tabla de precios, enciéndalo Mesa destacada en la pestaña Contenido, luego abra el archivo Cinta sección para configurar el texto, alineación, posición y rotación. Dale a la tarjeta resaltada un color de botón diferente en la pestaña Estilo para que no dependa únicamente de la cinta.
3. Haz que el precio sea lo más importante de la tarjeta
El precio debe ser el texto más grande de la tarjeta, más grande que el nombre del plan. Los lectores escanean una tabla de precios para los números primero y leen los nombres del plan en segundo lugar, por lo que un diseño que hace que el nombre sea más grande que el precio los ralentiza.
Mantenga el símbolo de la moneda y el período de facturación más pequeños que el número. “$49” se lee más rápido que “49.00 USD por mes”. Si descuenta un plan, muestre el precio original tachado junto al precio de venta. El número tachado es un ancla: 49 parece más barato cuando 69 se encuentra junto a él que solo.
El widget tiene un Venta cambie a Precios. Enciéndalo, complete el Precio original, y el tachado aparece automáticamente. Elija la moneda de la lista o escriba su propio símbolo.
4. Nombra el plan en honor al comprador, no al nivel
Los nombres de los planes funcionan mejor cuando le dicen al lector para quién es el plan. “Iniciador, Crecimiento, Agencia” dice más que “Básico, Estándar, Premium”, y un subtítulo de una línea debajo de cada nombre (“Para un sitio”, “Para equipos pequeños”, “Para el trabajo del cliente”) elimina las conjeturas.
Evite nombres que necesiten la lista de funciones para que tengan sentido. Si un lector tiene que comparar filas para determinar qué plan es “Estándar”, el nombre ha fallado. Evite chistes y nombres en clave internos por la misma razón.
El widget de la tabla de precios tiene un Título y a Subtítulo campo en la sección Encabezado, además de un icono y una etiqueta opcionales. El subtítulo es el lugar correcto para “Para equipos pequeños”.
5. Mantenga las filas de funciones cortas y en el mismo orden
Cada fila de características debe caber en una línea, de tres a seis palabras. Las filas largas se envuelven, las cartas se vuelven desiguales y el lector deja de comparar entre planos porque las filas ya no están alineadas.
Ordene las filas de la misma manera en cada tarjeta, con las filas que cambian entre planes en la parte superior (“1 sitio” frente a “5 sitios” frente a “sitios ilimitados”). De cinco a siete filas por tarjeta es suficiente. Si tienes veinte funciones, la tabla de precios es el lugar equivocado para ellas: coloca las cinco primeras aquí y enlaza con una tabla comparativa para el resto.
Los widgets Características el repetidor toma un texto, un ícono y una información sobre herramientas opcional por fila. Utilice el mismo icono para cada función incluida y uno diferente (o ninguno) para las funciones que un plan no incluye, de modo que el patrón visual coincida entre cartas.
6. Coloque el detalle en la información sobre herramientas, no en la fila
Una información sobre herramientas le permite mantener la fila corta y aun así responder la pregunta “¿qué incluye eso?”. La fila dice “Todos los widgets”; la información sobre herramientas dice “Cada widget y extensión”.
Utilice información sobre herramientas para las dos o tres filas que generan preguntas de soporte, no para cada fila. Una tarjeta donde cada característica tiene un subrayado punteado parece ocultar algo. Mantenga el texto de información sobre herramientas en una oración.
En el widget de la tabla de precios, cada fila del repetidor de funciones tiene un Información sobre herramientas cambio, un campo de texto y una opción de ubicación (arriba, abajo, izquierda, derecha).
7. Un botón por carta, con un verbo
El botón es el único elemento de la tarjeta que hace algo, así que dale un trabajo y etiquétalo con un verbo. “Comience”, “Inicie la prueba gratuita”, “Elija el crecimiento”, todo funciona. “Enviar” y “Haga clic aquí” no lo hacen.
Debajo del botón, una breve línea de confianza elimina la última objeción: “Cancelar en cualquier momento”, “Devolución de dinero en 14 días”, “No se necesita tarjeta”. Manténgalo en cinco palabras y no apile tres de ellas.
Los widgets Pie de página la sección tiene el texto del botón, el enlace y un Información adicional campo para la línea de confianza. Si vende con Easy Digital Downloads, la misma sección tiene un botón de compra EDD que enlaza directamente con el producto. Para un producto WooCommerce, vincule el botón al producto o a la página de pago.
8. Agregue un interruptor mensual y anual solo cuando valga la pena mostrar el ahorro
Un cambio mensual y anual tiene sentido cuando la facturación anual le ahorra al lector una cantidad clara, generalmente dos meses o más. Si el descuento anual es pequeño, el cambio agrega un paso sin cambiar la decisión y una sola línea “facturada anualmente” hace el mismo trabajo.
Muestre el precio anual por mes (“$39 / mes, facturado anualmente”) en lugar del total anual completo, para que los dos estados de alternancia se comparen entre sí. Coloque el ahorro junto al interruptor (“Ahorre 20%”) para que el lector sepa por qué existe el interruptor antes de hacer clic en él.
El widget de la tabla de precios tiene un precio por tarjeta, por lo que el interruptor proviene de un segundo widget. Cree un conjunto de tarjetas con precios mensuales y otro con precios anuales, guarde cada una como plantilla de sección y coloque ambas en Alternar widget de contenido, que está en el plan Master Addons Pro. La página Alternar contenido tiene los pasos de configuración y un ejemplo en vivo.
9. Elija un diseño que coincida con la página y luego guárdelo
El diseño de una tabla de precios debe coincidir con la sección que la rodea: una tarjeta simple en una página SaaS limpia, un encabezado redondeado en una marca más suave, una imagen de fondo cuando el resto de la página usa fotografía. Elija uno y utilícelo para cada tarjeta de la tabla.
Mezclar diseños dentro de una mesa es un error común. El lector lee la diferencia de forma como una diferencia en los planos. Mantenga los colores limitados también: un color de acento para la tarjeta resaltada y otro neutral para el resto.
El widget de tabla de precios tiene cinco diseños en Diseño desplegable (predeterminado, contenido de alineación a la izquierda, tabla redondeada, tabla con imagen BG y patrón BG sesgado) y el contenido permanece en su lugar cuando cambia entre ellos. El Biblioteca de plantillas tiene secciones de precios basadas en estos diseños si prefiere comenzar con un diseño terminado.
10. Consulte la tabla en un teléfono antes de publicar
En un teléfono, las tarjetas se apilan en una columna, por lo que el lector ve un plan a la vez y pasa junto a los demás. Eso cambia dos decisiones: qué tarjeta viene primero y qué altura tiene cada tarjeta.
Coloque el plan resaltado primero o segundo en el móvil. Si ocupa el tercer lugar en el escritorio, use el orden responsivo de Elementor en el contenedor para subirlo. Mantenga las listas de funciones en cinco filas para que una tarjeta quepa aproximadamente en una pantalla y haga que el botón sea lo suficientemente ancho como para tocarlo.
Abra el modo responsivo Elementor (el ícono del teléfono en la parte inferior del panel) y verifique la tabla en el punto de interrupción del móvil. Los controles de la pestaña Estilo del widget de la tabla de precios tienen interruptores responsivos, por lo que puede reducir el precio de la fuente y el relleno de los teléfonos sin cambiar la versión de escritorio.
¿quieres los diez consejos en un widget? El Widget de tabla de precios tiene el interruptor de resaltado, la cinta, el precio de venta, información sobre herramientas de funciones y cinco diseños como controles de panel, por lo que cada consejo anterior es una configuración en lugar de un CSS personalizado.
Preguntas frecuentes
¿Cuántos planes debe tener una tabla de precios?
Tres es el número más seguro y cuatro funcionan cuando un plan tiene precios personalizados. Dos planes obligan a elegir sí o no, y cinco o más dejan de encajar uno al lado del otro en la pantalla de una computadora portátil y se convierten en un largo desplazamiento en un teléfono.
¿Qué plan debería destacarse en una tabla de precios?
Resalte el plan que se adapta a la mayoría de los lectores y que aún tiene un buen margen para usted, generalmente el del medio. Levántelo con una sombra, un botón sólido y una cinta como “Más popular”. Resalte una sola tarjeta; dos cartas resaltadas se cancelan entre sí.
¿cómo agrego un interruptor mensual y anual a una tabla de precios de Elementor?
Cree dos conjuntos de tarjetas de precios, una con precios mensuales y otra anual, y guárdelas como plantilla de sección. El widget Alternar contenido en Master Addons Pro muestra una plantilla a la vez detrás de un interruptor. El widget de la tabla de precios tiene un precio por tarjeta.
¿Debería una tabla de precios mostrar el precio original tachado?
Sí, cuando se descuenta un plan. Un precio original tachado junto al precio de venta le da al lector un ancla, y el precio de venta parece más bajo que solo. En el widget de la tabla de precios de complementos maestros, el conmutador de venta y el campo Precio original hacen esto.
¿cómo hago que las columnas de la tabla de precios tengan la misma altura en Elementor?
Coloque las tarjetas en un contenedor y establezca sus elementos de alineación en Estiramiento, luego dé a cada plan la misma cantidad de filas de funciones. Las filas que se envuelven en dos líneas son la causa habitual de las tarjetas desiguales, así que acorte el texto antes de ajustar el relleno.
Pensamientos finales
El diseño de la tabla de precios se reduce a una lista corta: tres planes, uno elevado, el precio como texto más grande, nombres de planes que dicen para quién es el plan, filas de características que se ajustan a una línea, información sobre herramientas para el detalle, un botón con un verbo, alternar solo cuando el ahorro anual es real, un diseño por tabla y una verificación en un teléfono. Cada uno de los diez ejemplos anteriores se creó con el widget de la tabla de precios y algunas configuraciones de panel.
Si estás empezando desde cero, abre el Página del widget de la tabla de precios para ver los cinco diseños en vivo, o elija una sección de precios terminada en Biblioteca de plantillas y cambiar los planes. El widget es uno de los widgets y extensiones en Complementos maestros, el widget Alternar contenido para el conmutador de facturación está en los planes del página de precios.
Lectura relacionada
- Widget de tabla comparativa: la matriz de características completa a la que debe vincularse una tabla de precios
- Widget de tabla dinámica: una lista de precios con un precio por fila, para menús y listas de servicios
- Botones animados Elementor: estilos de botones para el pie de página de la tarjeta
- Widgets de marketing de Elementor: los otros widgets de conversión en complementos maestros
- Documentación del widget de la tabla de precios: cada control explicado
- Creador de temas: plantillas de encabezado y pie de página para el resto de la página de precios
