Una página de precios es donde los visitantes deciden si entregan su dinero. La tabla tiene que leer limpia, hacer que los planes sean comparables de un vistazo y señalar al lector cualquier opción que realmente desee que elija. El Widget de tabla de precios de Elementor de Complementos maestros para Elementor cubre todo eso, gratis, sin código.
Este tutorial cubre la compilación completa: instalar el complemento, colocar el widget en una sección y trabajar en los 6 paneles que controlan el contenido (diseño, encabezado, precio, funciones, botón CTA e insignia de cinta para el plan resaltado). También obtienes 5 diseños integrados, información sobre herramientas por función, descargas digitales sencillas en el botón y control de tipografía completo.
Una vez que lo haya seguido, tendrá una tabla de precios que se ve correctamente en cualquier tema de WordPress, se acumula correctamente en el dispositivo móvil y se convierte mejor que el bloque de precios predeterminado de Elementor.
Lo que cubre esta guía:
- Qué es el widget de la tabla de precios de Elementor
- Por qué es importante una buena tabla de precios
- Cómo agregar una tabla de precios en Elementor (paso a paso)
- Los 6 paneles de configuración explicados
- Diseñando su tabla de precios
- Consejos de diseño que realmente convierten
- 5 casos de uso para el widget
- Gratis vs Pro: lo que obtienes
- Preguntas frecuentes
¿qué es el widget de la tabla de precios de Elementor?
Es un widget de arrastrar y soltar que crea una tabla de precios de WordPress dentro del editor Elementor. Obtiene un encabezado de plan, el precio con moneda y período de facturación, una lista de funciones, un botón de llamada a la acción y una insignia de cinta opcional para el plan destacado. Sin código personalizado, sin códigos cortos, sin disputas HTML.
El widget de la tabla de precios de complementos maestros se encuentra en el complemento gratuito. Los 5 diseños, cintas, información sobre herramientas por función y descargas digitales sencillas admiten todo el trabajo sin una licencia Pro. Instale el complemento y el widget aparecerá en el panel Elementor en la sección Complementos maestros, denominada “Tabla de precios MA”
Por qué es importante una buena tabla de precios
Su página de precios tiene un tráfico de alta intención. Las personas que llegan a ella ya están pensando en comprar. Una tabla de precios descuidada le cuesta silenciosamente ingresos reales. Las razones habituales:
- Fricción de comparación. Si los visitantes no pueden comparar planes de un vistazo, se recuperan en Google.
- Sin jerarquía visual. Cuando cada plan parece idéntico, nadie sabe cuál quieres que elijan.
- Cta débil. Un botón gris de “Aprender más” pierde cada vez ante un seguro “Iniciar prueba gratuita”.
Un adecuado Tabla de precios de Elementor se ocupa de todo eso. Columnas una al lado de la otra, un plano resaltado con una cinta, un color de botón distinto y filas destacadas que se alinean a lo largo de las columnas. El widget a continuación viene con todo.
Cómo agregar una tabla de precios en Elementor (paso a paso)
Configuración completa a continuación. Esto supone que Elementor ya está instalado. De lo contrario, primero obtenga la versión gratuita del directorio de complementos de WordPress.
Paso 1: instale complementos maestros para Elementor
En el administrador de WordPress, vaya a Complementos → Agregar nuevo y busque “Complementos maestros para Elementor” Instalar, activar, listo. El instalación de complementos maestros doc tiene la versión más larga si algo te hace tropezar.
Paso 2: cree una sección con el número correcto de columnas
Abra la página en Elementor. Agregue una nueva sección y elija el recuento de columnas según cuántos planes desee mostrar. Tres columnas para Personal / Negocios / Desarrollador es la configuración más común. Cuatro columnas comienzan a sentirse abarrotadas en las tabletas, y cualquier cosa que supere las cuatro obliga a desplazarse horizontalmente en el móvil.
Paso 3: arrastre el widget de la tabla de precios de MA a su sección
En el panel de widgets, busque “Tabla de precios”. Verá la “Tabla de precios MA” con la insignia Addons maestros. Arrastrarlo a la primera columna.
Paso 4: revise el diseño predeterminado
Elementor carga un valor predeterminado completamente completo en el momento en que ingresa el widget. Título del plan, precio, lista de funciones, botón, cinta. Vale la pena verlo antes de cambiar las cosas para saber qué controla realmente cada campo.
Una vez que un plan esté configurado como lo desea, haga clic derecho en el widget y elija Duplicar (o copiar y pegar) para desarrollar los otros planes. Mucho más rápido que iniciar cada tarjeta desde cero y garantiza que las filas de funciones se alineen en las columnas.
Explicación de los 6 paneles de configuración
La pestaña Contenido tiene seis paneles plegables. Lo que hace cada uno, y la configuración en su interior que realmente importa:
1. Contenido de precios (selector de diseño)
Este panel elige uno de los 5 variaciones en el diseño de la tabla de precios. Cada diseño organiza el encabezado, el precio y el botón de manera ligeramente diferente. La otra cosa que vive aquí es el interruptor “Resalte esta tabla”. Actívelo para el plan que desea que elijan los visitantes. Esa palanca agrega el énfasis visual y desbloquea la configuración de la cinta en la parte inferior de la pestaña Contenido.
2. Encabezado
El nombre del plan (Personal, Empresarial, Desarrollador) y un subtítulo opcional (“Para autónomos solitarios”, “Para equipos pequeños”). Puedes cambiar la etiqueta HTML del título. H3 suele ser correcto, a menos que la sección sobre la tabla ya use H3, en cuyo caso muévalo a H4 para que su jerarquía de encabezados se mantenga limpia. El color de fondo del encabezado es independiente del resto de la tarjeta, por lo que puedes dividir la barra superior en un color diferente si lo deseas.
3. Precios
Símbolo de moneda, monto del precio, precio original (desglosado para descuentos) y período de facturación. El campo de precio original es útil cuando realiza una promoción. Coloque el precio de venta en el monto principal y el precio normal en el campo original, y el widget renderizará el tachado automáticamente. No se necesita CSS.
4. Características
Agregue tantas filas de funciones como desee. Cada fila toma texto de la función, un ícono (marca de verificación, cruz, cualquier cosa de la biblioteca de íconos) y una información sobre herramientas opcional. Las información sobre herramientas están infrautilizadas en la mayoría de las tablas de precios. Si una función necesita una aclaración de 10 palabras (“Incluye 3 asientos de equipo” → “Los asientos adicionales cuestan $5/mes cada uno”), use una información sobre herramientas en lugar de incluirla en el texto principal.
Tip de alineare: Mantenga el mismo orden de lista de funciones en los tres planes. La gente escanea las tablas de precios horizontalmente, fila por fila. Si la fila 3 es “Usuarios ilimitados” en el plan personal pero “soporte 24 horas al día, 7 días a la semana” en Negocios, se rompe ese patrón de escaneo y los visitantes se dan por vencidos a mitad de camino.
5. Pie de página (el botón Llamada a la acción)
Texto del botón, URL, alternancia de nofollow, alternancia de nueva pestaña, además de una línea opcional de texto secundario debajo del botón (“garantía de devolución de dinero de 14 días”). Si vende a través de descargas digitales sencillas, la opción Agregar al carrito EDD está en este panel. Actívelo y el botón se convertirá en un activador de compra ahora en lugar de un enlace simple.
6. Cinta (Insignia del plano destacado)
La cinta solo aparece en el plano donde alternaste “Resaltar esta tabla” en el panel 1. El texto común de la cinta es “Popular” o “Mejor valor”. Puedes cambiar la alineación (arriba a la izquierda, arriba a la derecha, arriba a la mitad del centro) y el color. Mantenga la cinta corta. Dos palabras máx. Las cintas largas se envuelven torpemente en el móvil.
Diseñar su tabla de precios de Elementor
Cambie a la pestaña Estilo. Obtienes un panel para cada una de las seis secciones de contenido, además de un panel general para la tarjeta misma (radio de borde, sombra, fondo). Cada panel cubre tipografía, color, espaciado y configuración de bordes.
Qué cambiar realmente:
- Fondo de la tarjeta y radio del borde. Combina con tu sitio. El radio de 8-12px funciona para la mayoría de los diseños modernos. Plano (radio 0) para una apariencia más corporativa.
- Antecedentes del plan destacado. Haga que el plan resaltado sea visualmente distinto. Un color de marca sólido en la tarjeta destacada junto a las tarjetas blancas es el movimiento más simple y funciona casi siempre.
- Tipografía de precios. El precio debe ser el texto más grande de la tarjeta, más grande que el nombre del plan. 40-56px es típico. Cualquier cosa más pequeña y toda la tarjeta se lee como copia genérica de marketing.
- Botón. Haga coincidir el botón principal de su sitio. El plan destacado tiene un botón lleno de sólidos. Otros planes reciben botones delineados. Ese espacio visual guía la atención hacia su plan preferido sin necesidad de una flecha o una etiqueta de “elija esto”.
Para obtener un recorrido más profundo de las decisiones visuales que mueven la aguja de conversión, consulte nuestro Consejos para la tabla de precios de Elementor publicar.
Consejos de diseño de tablas de precios que realmente se convierten
Patrones que se mantienen en páginas de precios reales:
- Tres planes, no cuatro. Personal / Negocios / Desarrollador funciona porque tres opciones mantienen la decisión simple. Cuatro planes ralentizan a las personas y una parte no trivial de ellos se van sin elegir nada.
- Ancla el plan intermedio. Coloque su plan de destino en la columna del medio y márquelo como aparece. Los visitantes comparan el plan barato con él y deciden que el del medio es mejor. Comparan el plan caro con él y deciden que el del medio es suficiente.
- Precio primero, luego características. La gente escanea de arriba a abajo. Coloque el precio cerca de la parte superior de la tarjeta para que vean el número antes de la lista de funciones.
- Etiquetas de artículos cortos. “Proyectos ilimitados” supera a “Puedes crear un número ilimitado de proyectos sin restricciones”. Utilice información sobre herramientas para la versión larga.
- Un CTA por tarjeta. Un botón por plan. No coloque “Más información” junto a “Comprar ahora” en la misma tarjeta. Esa división mata la conversión porque los visitantes eligen cada vez el clic de menor compromiso.
- Nota de devolución de dinero cerca del botón. Una pequeña línea de “garantía de devolución de dinero de 14 días” según la CTA reduce la ansiedad por la compra. Campo libre en el panel Pie de página.
5 casos de uso para el widget de tabla de precios de Elementor
- Página de precios de SaaS. Planes de tres niveles con una cinta en el plano central. El caso de uso predeterminado y aquel para el que está sintonizado el widget.
- Precios del servicio. Los autónomos y las agencias utilizan el mismo widget para paquetes de servicios (Básico/Estándar/Prima). Intercambie “por mes” por “por proyecto” en el campo del período de facturación.
- Planes del sitio de membresía. Combínalo con una función como restringir contenido para acceder a la puerta por nivel.
- Precios del curso. Curso único, cohorte única, acceso de por vida. Ponga la cinta en la opción de por vida, ya que suele ser la venta de mayor margen.
- Comparación de planes WooCommerce. Para productos digitales o cajas de suscripción, el widget también funciona como comparación de planes encima del botón de compra.
Si necesita comparar muchas funciones en muchos planes (no solo de 3 a 6 viñetas por tarjeta), el Tabla comparativa de complementos maestros el widget es el que mejor se adapta. Maneja páginas con muchas funciones con más de 15 filas sin parecer estrecho.
Gratis vs Pro: lo que obtienes
El widget MA Pricing Table se encuentra en el complemento gratuito Master Addons. Los 5 diseños, la cinta, la información sobre herramientas, los íconos y la integración EDD funcionan sin una licencia Pro. Pro desbloquea otros widgets y el conjunto de funciones más amplio que lo rodea.
| Característica | Gratis | Pro |
|---|---|---|
| Widget de tabla de precios (los 5 diseños) | Sí | Sí |
| Insignia de cinta para el plan destacado | Sí | Sí |
| Información sobre herramientas destacadas | Sí | Sí |
| Fácil integración de descargas digitales | Sí | Sí |
| Bibliotecas de iconos | Fuente impresionante | 8 bibliotecas premium |
| Widget de tabla comparativa (matriz de funciones) | No | Sí |
| Kits de plantillas y creador de widgets | No | Sí |
Si sólo necesitas la tabla de precios, gratis es suficiente. Si quieres el completo Biblioteca de más de 80 widgets, Creador de temas, Creador de ventanas emergentes y Kits de plantillas, comprueba Precios de Master Addons Pro. Para ver un paquete de complementos uno al lado del otro de Elementor importante, consulte Complementos maestros frente a complementos definitivos.
¿listo para crear su página de precios?
Únase a más de 40 000 creadores web que envían sitios Elementor más rápido con complementos maestros. Gratis para siempre. Actualice cuando realmente necesite más.
¿prefieres mirar? Aquí hay un tutorial rápido en Elementor:
Preguntas frecuentes
¿el widget de la tabla de precios de Elementor es gratuito?
Sí. El widget MA Pricing Table se encuentra en el complemento gratuito Master Addons for Elementor en WordPress.org. Los 5 diseños, la insignia de la cinta, la información sobre herramientas de funciones y la integración de Easy Digital Downloads funcionan sin una licencia Pro.
¿cómo agrego una tabla de precios en Elementor?
Instale complementos maestros, agregue una sección con 3 columnas y luego arrastre el widget de la tabla de precios MA a cada columna. Configure los paneles de la pestaña Contenido para el título, el precio, las funciones y el botón. Alterne “Resalte esta tabla” en el plan que desea presentar para que se muestre la cinta.
¿cuál es el mejor widget de tabla de precios para Elementor?
La tabla de precios de complementos maestros es una opción sólida y gratuita con 5 diseños, información sobre herramientas, una cinta e integración EDD. Para obtener una comparación completa de los principales paquetes de complementos, consulte nuestro Resumen de los 100 mejores complementos de Elementor.
¿Cómo destaco un plan recomendado?
Dentro del panel Contenido de precios, active el interruptor “Resaltar esta tabla”. Eso habilita la configuración de la insignia de la cinta y hace que el plan sea visualmente distinto. Configure el texto de la cinta en “Popular” o “Mejor valor” para que los visitantes sepan dónde hacer clic.
¿funciona la tabla de precios con WooCommerce o EDD?
La integración de descargas digitales sencillas está integrada en el panel Pie de página. Alternelo y el botón se convertirá en un disparador de complemento al carrito. Para WooCommerce, apunte el botón a la página de su producto y WooCommerce se encargará del resto del flujo de pago.
¿la tabla de precios responde en dispositivos móviles?
Sí. Utilice los controles responsivos estándar de Elementor para cambiar el número de columnas por dispositivo. Un diseño de escritorio de 3 columnas se convierte en un diseño apilado de 1 columna en el móvil de forma predeterminada. Deje caer el tamaño de fuente del precio para tableta y móvil en la pestaña Estilo si el número parece demasiado grande.
Envolviendo
Una página de precios creada con Widget de tabla de precios de Elementor from Master Addons maneja los casos importantes para la mayoría de los sitios de WordPress: tres planes, una opción destacada, botones limpios y control de estilo completo desde el panel Elementor. No se requiere código. Si desea obtener detalles sobre cada configuración, el documentación oficial de la tabla de precios tiene la referencia completa.
Combine la tabla de precios con una sólida sección de llamada a la acción encima y tendrá una página de precios que funciona. Para obtener más ideas de widgets centradas en la conversión, el Guía de widgets de marketing de Elementor es una buena próxima lectura.
Lectura relacionada: Consejos de diseño de tablas de precios | Widget Elementor FlipBox | Biblioteca de iconos de complementos maestros
