Conclusiones clave
- Una lista de precios de Elementor es una lista con un precio por fila, para menús, tarifas de servicio y listas de piezas; es un widget diferente de una tabla de precios, que tiene un precio por tarjeta.
- El widget de lista de precios propio de Elementor es parte de Elementor Pro, con título, descripción, precio e imagen opcional por artículo.
- El widget Master Addons Dynamic Table crea una lista de precios como una tabla HTML real: una fila de encabezado con anchos de columna, un repetidor de cuerpo donde cada elemento inicia una nueva fila, filas rayadas y un modo responsivo para teléfonos.
- Un widget de tabla de precios es la herramienta incorrecta para un menú, porque diez platos significarían diez tarjetas, pero es la correcta para dos o tres paquetes de servicios con una lista de funciones cada uno.
- Los precios de una lista deben estar alineados correctamente en su propia columna para que el ojo pueda recorrerlos y las descripciones deben permanecer en una línea por artículo.
- Una lista de precios basada en tablas es texto sin formato en la página, por lo que los motores de búsqueda y lectores de pantalla pueden leer cada nombre y precio de plato.
Una lista de precios de Elementor es una lista de artículos con un precio en cada línea: un menú de restaurante, tarifas de servicio de salón, una lista de repuestos de taller. No es una tabla de precios. Una tabla de precios tiene un precio por tarjeta y vende planes; una lista de precios tiene un precio por fila e informa. Elementor coloca su widget Lista de precios en Elementor Pro, por lo que en el complemento gratuito necesitas otra ruta.
Esta guía muestra tres formas de crear uno y cuándo encaja cada uno. La ruta 1 es el widget de lista de precios de Elementor Pro. La ruta 2 es el widget de la tabla dinámica Complementos maestros, que convierte un menú en una tabla limpia con una columna de precios. La ruta 3 son tarjetas de precios para el caso en que la “lista” sea dos o tres paquetes con funciones, que después de todo es un trabajo de tabla de precios.
Tabla de contenidos
Lista de precios versus tabla de precios
Una lista de precios tiene muchos artículos y un precio cada uno; una tabla de precios tiene pocos planes y una lista de funciones cada uno. El menú de un restaurante es una lista de precios. Los tres planes de hosting en un sitio SaaS son una tabla de precios. Mezclarlos es la razón habitual por la que un menú integrado en Elementor se ve mal: diez platos como diez tarjetas de precios es una pared de cajas, y tres planos como lista ocultan las características que los venden.
Entonces, la primera pregunta es cuántos artículos tiene y si cada uno necesita una lista de funciones. Más de cuatro artículos con precio y una descripción de una línea: lista de precios. De dos a cuatro artículos con varias características cada uno: tabla de precios.
Ruta 1: widget de lista de precios de Elementor Pro
Elementor Pro tiene un widget de lista de precios creado para menús. Cada elemento de su repetidor tiene un título, una descripción, un precio, una imagen opcional y un enlace, y el widget dibuja un separador punteado o sólido entre el título y el precio. La pestaña Estilo controla el espaciado de la lista, el estilo del separador y el tamaño de la imagen. Necesita Elementor Pro, por lo que en el complemento gratuito el widget no aparece en el panel.
Si ya pagas por Pro, esta es la ruta más corta para un menú clásico. Lo que no hace son columnas: cada artículo es una línea con el precio empujado hacia la derecha, por lo que una lista que necesita una columna de tamaño o cantidad, o tres precios por artículo (pequeño, mediano, grande), no encaja. Fuente: Página de ayuda del widget de la lista de precios de Elementor.
Ruta 2: un menú con el widget Tabla Dinámica
El Widget de tabla dinámica crea una tabla HTML real en el panel Elementor: un repetidor de encabezado para las columnas y un repetidor de cuerpo para las celdas. Para una lista de precios que significa una columna Dish, una columna Descripción y una columna Precio, con cada elemento del menú en su propia fila. El widget está en el complemento Master Addons y no necesita Elementor Pro.
Configure las columnas
- Deja caer el Tabla dinámica widget en la página y abra el Encabezado repetidor.
- Agregue tres celdas de encabezado: Plato, Descripción, Precio. En cada uno, enciende Ancho personalizado y establezca 28, 56 y 16 por ciento para que la descripción obtenga la habitación y la columna de precios se mantenga estrecha.
- Establezca la alineación del encabezado Precio a la derecha.
Añade los artículos
- Abre el Cuerpo repetidor. Cada entrada es una celda. Agregue el nombre del primer plato y enciéndalo Iniciar nueva fila para ello.
- Agregue la descripción como la siguiente celda y el precio como la tercera, con la celda de precio alineada a la derecha.
- Repita para cada elemento: comienza una nueva fila en el nombre del plato y luego dos celdas más. Seis elementos son dieciocho celdas.
Una celda puede llevar un ícono o una imagen en lugar de texto, que es como un menú obtiene una pequeña foto al lado de un plato o un ícono de hoja en las filas vegetarianas. Las celdas también pueden abarcar columnas, por lo que un título de curso como “Mains” puede ubicarse en una fila propia en todo su ancho.
Dale estilo como un menú
En la pestaña Estilo, establezca el fondo del encabezado en un color oscuro y el texto del encabezado en blanco, enciéndalo Filas rayadas entonces, cada segunda fila se tiñe y le da a la tabla un borde de un píxel en gris claro. Mantenga el texto del cuerpo del mismo tamaño que sus párrafos y haga que la columna de precios esté en negrita si desea que el ojo aterrice en los números. El modo responsivo del widget apila cada fila en un bloque en los teléfonos, con el encabezado de la columna impreso junto a cada valor, por lo que un menú de tres columnas permanece legible sin desplazarse hacia los lados.
Ruta 3: paquetes de servicios como tarjetas de precios
Algunas “listas de precios” son en realidad dos o tres paquetes: un servicio único y un plan mensual, o un nivel básico y premium del mismo trabajo. Cada paquete tiene algunas cosas incluidas y el lector elige entre ellas. Esa es una tabla de precios y el Widget de tabla de precios lo hace en una tarjeta por paquete con el precio grande y las inclusiones como lista.
La sección anterior, del Biblioteca de plantillas, muestra la forma: una amplia fila por paquete con el nombre y descripción a la izquierda, los artículos incluidos y excluidos en dos columnas y el precio con un botón a la derecha. Es una lista de precios en espíritu y una tabla de precios en estructura, y la regla general se cumple: pocos artículos, varias características cada uno, por lo que las tarjetas. Hay más diseños de tarjetas en la publicación de plantillas de la tabla de precios.
Reglas de diseño de listas de precios
- Precios en su propia columna, alineados a la derecha. El lector escanea los precios como una columna. Un precio escondido después de la descripción en cada línea no se puede escanear.
- Una línea por descripción. “Aceite de aceite, masa madre miga” es suficiente. Un párrafo por plato convierte la lista en una página.
- Grupo por curso o categoría con una fila de encabezado de ancho completo y mantenga los grupos en el pedido que pediría un cliente.
- Mostrar la moneda una vez en el encabezado o el primer precio, o mantenga el símbolo en cada precio; mezclar los dos parece un error.
- Mantenlo texto. Un menú cargado como imagen no se puede buscar, leer en voz alta ni actualizar sin un diseñador. Una tabla en Elementor es texto.
- Compruébalo en un teléfono. Una tabla de tres columnas de 390 píxeles de ancho necesita el modo apilado y el precio aún debería aparecer justo después del nombre del plato.
Qué ruta elegir
| Si tu | Usar | Porque |
|---|---|---|
| Tenga Elementor Pro y un menú sencillo de un solo precio | Ruta 1, widget de lista de precios | Hecho para el trabajo, separador de puntos incorporado. |
| Ejecute Elementor gratis o necesite una columna de tamaño o cantidad | Ruta 2, Tabla Dinámica | Columnas reales, filas rayadas, pilas en teléfonos. |
| Tienen de dos a cuatro paquetes con funciones cada uno | Ruta 3, Tarjetas de tabla de precios | Pocos artículos, una lista de funciones cada uno, un botón por paquete. |
| Necesita precios que varíen según el tamaño (pequeño, mediano, grande) | Ruta 2, Tabla Dinámica | Una columna por tamaño en la misma fila. |
¿necesitas un menú con una columna de precios y sin Elementor Pro? El Widget de tabla dinámica lo construye como una mesa real en el panel Elementor, con filas rayadas y un diseño apilado para teléfonos.
Preguntas frecuentes
¿el widget de la lista de precios de Elementor es gratuito?
No. El widget Lista de precios es parte de Elementor Pro y no aparece en el panel del complemento gratuito. En Elementor gratuito, una lista de precios proviene de un widget de tabla complementaria como Master Addons Dynamic Table, o de tarjetas de precios cuando la lista es realmente de unos pocos paquetes.
¿Cuál es la diferencia entre una lista de precios y una tabla de precios?
Una lista de precios tiene muchos artículos con un precio cada uno y sin listas de funciones, como un menú. Una tabla de precios tiene algunos planes con una lista de funciones y un botón cada uno, como niveles de alojamiento. Utilice una lista para artículos y una tabla de tarjetas para planes.
¿cómo hago un menú de restaurante en Elementor sin Pro?
Utilice el widget de tabla dinámica de complementos maestros: agregue celdas de encabezado de plato, descripción y precio con anchos personalizados, luego agregue cada elemento como tres celdas de cuerpo con Iniciar nueva fila en la primera. Active las filas rayadas y el modo responsivo para que el menú se apile en los teléfonos.
¿Puede una lista de precios tener más de un precio por artículo?
Sí, con una tabla. Agregue una columna por tamaño u opción, como Pequeño, Mediano y Grande, y coloque cada precio en su propia celda en la fila del artículo. El widget Lista de precios de Elementor Pro muestra un precio por artículo.
¿Un menú debería ser una imagen o un texto?
Texto. Un menú de imágenes no se puede buscar, leer por lectores de pantalla ni actualizar sin rehacer la imagen, y se difumina en los teléfonos retina. Una tabla o widget de lista mantiene cada plato y precio como texto en la página.
Pensamientos finales
Una lista de precios en Elementor es un precio por fila y la ruta depende de lo que tengas. El widget Lista de precios de Elementor Pro cubre un menú simple para usuarios profesionales. La tabla dinámica de complementos maestros cubre el mismo menú en Elementor gratuito y agrega columnas para tamaños, cantidades o cursos. Dos o tres paquetes con funciones son una tabla de precios, no una lista, y el widget de la tabla de precios los maneja como tarjetas.
Comience con el Página del widget de la tabla dinámica para la ruta del menú, o el Página del widget de la tabla de precios si su lista es realmente un conjunto de paquetes.
Lectura relacionada
- Diseño de tabla de precios: 10 consejos con ejemplos
- Widget de tabla dinámica
- Documentación de la tabla dinámica
- Widget de tabla comparativa
- Biblioteca de plantillas de complementos maestros
- Cómo agregar un cambio mensual y anual a una tabla de precios de Elementor
- Tabla de precios de Elementor versus tabla comparativa: cuál usar
