Widget de tabla comparativa de Elementor (Pro)
La tabla comparativa es un widget Master Addons Pro que crea una cuadrícula de funciones para de 2 a 6 productos o planes. Los nombres de las funciones se encuentran en la primera columna y cada columna de producto tiene un título, precio, imagen, un valor para cada fila de funciones y un botón. Los valores pueden ser una marca de verificación, una cruz, un icono o un texto. Elija uno de los cuatro diseños, dé a una columna sus propios colores para marcar la opción recomendada y diseñe filas, encabezados y botones. No necesita WooCommerce, por lo que funciona para planes, software, hardware o paquetes de servicios. Para tarjetas de plan único, el Tabla de precios widget es el que mejor se adapta y no necesita Master Addons Pro.
Cómo agregar una tabla comparativa en Elementor
La tabla comparativa necesita Elementor y un activo Complementos maestros Pro licencia.
- Active Master Addons Pro, edite su página con Elementor y busque en el panel de widgets Tabla comparativa.
- En general, elija un Diseño y establezca Productos en el número de columnas.
- En Características Caja, agregue un elemento por fila de funciones y establezca el encabezado.
- Abre cada Producto sección y agregue el título, precio, imagen, texto del botón y enlace.
- Establezca cada valor de fila en una verificación, cruz, ícono o texto, en el mismo orden que la lista de funciones.
- Active Anular estilo para la columna que recomienda, diseñe la tabla y luego compruébela en la vista móvil.
Cada entorno está cubierto en el Configuración del widget de la tabla comparativa guía.
Combina bien con: Tabla de precios, Tabla dinámica, Alternar contenido para un cambio mensual y anual, Cuadro informativo para funciones destacadas, y Horario comercial.
Tabla comparativa de un vistazo
Qué hace el widget, lea el código Master Addons Pro.
| Artículo | Widget de tabla comparativa |
|---|---|
| Productos por mesa | 2 a 6, con 3 por defecto |
| Diseños | 4 (Estilo 1 a Estilo 4) |
| Filas de características | Una lista de repetidores, tantas filas como necesites |
| Valores celulares | Revisa, cruza, un ícono de tu elección o envía un mensaje de texto |
| Campos de productos | Título, precio, imagen, texto del botón y enlace |
| Resalte una columna | Anular estilo por producto: encabezado, precio, filas y colores de botones |
| Insignias numéricas | El diseño 3 muestra un círculo numerado encima de cada producto |
| Móvil | Por debajo de 767px (Formato de pestaña de inicio desde) una fila de nombres de productos y la primera columna de producto; establezca 0 para conservar todas las columnas |
| Estilo por celda | No, el estilo es por mesa o por columna de producto |
| Texto de cinta o insignia | No, coloque la etiqueta en el título del producto o en el precio |
| Importación CSV | prohibido |
| Fuente WooCommerce | No, los valores se escriben en el panel |
| Necesidades | Complementos de Elementor y Maestros Pro |
Compare de 2 a 6 productos Característica por Característica
Conjunto Productos en General (2 a 6, 3 por defecto) y a Producto la sección aparece para cada columna. Enumere sus filas una vez. Características Caja: un encabezado, un elemento repetidor por función y un encabezado de botón. Luego llene cada producto con a Título, Precio, Imagen, Texto del botón, Enlace y un valor para cada fila.
- El valor de cada fila es un cheque, una cruz, un ícono de su elección o texto sin formato como “1 año”.
- Las filas de funciones se comparten, así que mantenga la misma cantidad de artículos en cada producto para que las filas se alineen.
- El contenido se escribe en el panel. Los precios no se obtienen de WooCommerce.
Cree una tabla comparativa de productos
Una tabla comparativa de productos coloca los productos en columnas y las especificaciones en filas, para que el comprador pueda escanear una función en cada opción. Establezca los productos en la cantidad de artículos, enumere las especificaciones una vez en el cuadro de características y luego complete cada sección del producto con un título, precio, imagen, texto de botón y enlace. Utilice una verificación o cruz para especificaciones de sí o no y texto para números como duración de la batería o garantía.
Cada valor está escrito en el panel. El widget no lee productos WooCommerce ni importa un CSV, por lo que se adapta a una lista corta que seleccione, como tres auriculares, tres planos o su producto frente a dos rivales. Active Anular estilo en el producto que recomienda para que su columna se destaque.
Tres auriculares comparados en el Diseño 1, con el producto intermedio resaltado a través de Override Style.
Tabla comparativa frente a widgets de tabla de precios
Elementor y Elementor Pro no tienen ningún widget de tabla comparativa. Elementor Pro tiene un widget de tabla de precios para tarjetas de plan único. Aquí es cuándo usar cada opción.
| cuerda | Diseño | Mejor para | Precio |
|---|---|---|---|
| Tabla comparativa de complementos maestros | Una cuadrícula, de 2 a 6 columnas de productos que comparten las mismas filas de funciones | Decisiones característica por característica entre planes o productos | Complementos maestros Pro |
| Complementos maestros Tabla de precios | Una tarjeta de plan por widget con encabezado, precio, funciones y botón | Páginas de precios con dos o tres planes sencillos | Incluido, no se necesitan Master Addons Pro |
| Tabla de precios de Elementor Pro | Una tarjeta de plan por widget con opción de cinta | Planifique tarjetas en sitios que ya usan Elementor Pro | Elemento Pro |
Si los visitantes necesitan consultar las mismas funciones en varias opciones, una tabla comparativa es más fácil de leer que las tarjetas una al lado de la otra. Si cada plan tiene una lista corta y un precio, las tarjetas de precios ocupan menos espacio. También útil: Tabla dinámica para tablas de datos simples.
¿qué widget de tabla necesito?
| cuerda | Lo que construye | Úselo para |
|---|---|---|
| Tabla comparativa (Pro) | Columnas de productos con título, precio, imagen y botón, y filas de funciones compartidas | Elegir entre 2 a 6 productos o planes |
| Tabla de precios | Una tarjeta de plan por widget: encabezado, precio, lista de funciones y botón | Páginas de precios con dos o tres planes |
| Tabla dinámica | Una tabla de datos general con filas y columnas | Horarios, especificaciones, listas y cualquier dato simple |
Cuatro diseños y estilismo de mesa
Elegir Estilo 1 a Estilo 4 en Diseños, desde una mesa clásica hasta tarjetas de productos separadas con insignias de precios. La pestaña Estilo tiene cuatro secciones. general establece colores de fila pares e impares, borde, radio de caja, espaciado de columnas y espaciado de filas. Cuadro de características establece el ancho, los colores, la alineación y el acolchado de la columna de funciones. Productos estilos encabezados, precios, imágenes y punto de interrupción móvil, y Botón estiliza los botones de compra.
- Las filas de cebra con colores de filas impares y colores de filas pares hacen que las mesas largas sean más fáciles de escanear.
- Box Width establece qué tan ancha es la columna de funciones.
- Debajo del formato de pestaña Inicio Desde el ancho (767px de forma predeterminada), la tabla muestra una fila de nombres de productos y solo la primera columna de producto. Para mantener cada columna en los teléfonos, configure el formato de pestaña Inicio de a 0 y la tabla completa se reducirá para adaptarse a la pantalla. Consulte la tabla en la vista móvil antes de publicar.
Resalte la columna recomendada
Encender Anular estilo dentro de una sección de producto para darle a esa columna sus propios colores. Puede configurar el color y el fondo del encabezado, la insignia de conteo, el precio y el fondo de la columna, el texto destacado, los colores de verificación y cruz, los colores de fila pares e impares y los colores de los botones. Úselo para su plan “más popular” o su propio producto en una tabla de nosotros versus ellos.
- El estilo de anulación funciona por columna de producto, no por celda.
- No hay cinta ni insignia incorporadas, así que agregue la etiqueta al título del producto o al texto del precio.
- Mantenga otras columnas en el estilo global para que la resaltada se destaque.
Ejemplos de tablas comparativas
Diez demostraciones en vivo creadas con el widget. Los dos primeros mantienen cada columna en los teléfonos; el resto cambia a la fila del nombre del producto debajo de 767px, que puedes desactivar con el formato de pestaña Inicio Desde establecido en 0.
- Comparación de relojes inteligentes: Diseño 3 con insignias numeradas.
- Compara nuestros planes: Dispone 4 cartas con el precio en el encabezado.
- Planes de precios SaaS: un nivel resaltado.
- Estados Unidos versus tres competidores: tema oscuro.
- Paquetes de fotografía: fotos en el encabezado.
- Tarifas móviles: clasificados del uno al cuatro.
- Cinco planes de hosting: uno al lado del otro.
- Tres giras: precio en círculo.
- Dos listados de propiedades: cara a cara.
- Tabla comparativa original: la primera demostración.
Preguntas frecuentes para la tabla comparativa
¿el widget de la tabla comparativa es gratuito?
No. La tabla comparativa es parte de Complementos maestros Pro. Sin Pro puedes usar el Tabla de precios widget para tarjetas de plan único. Elementor en sí no tiene widget de tabla comparativa, gratuito o profesional.
¿Cuántos productos puedo comparar?
Entre 2 y 6. Cambio Productos en la sección General y las secciones de producto se agregan u ocultan para que coincidan. Tres o cuatro columnas se leen mejor en la mayoría de los anchos de página.
¿puedo importar un CSV o una hoja de cálculo?
No. Los productos, los precios y el valor de cada fila se escriben en el panel de widgets. Para un conjunto de datos grande, desea importar desde una hoja de cálculo, un complemento de tabla como Prensa de mesa maneja archivos CSV y Excel. Para una tabla de estilo pequeño integrada en el panel, utilice Tabla dinámica Widget.
¿puede extraer productos de WooCommerce?
No. El widget no tiene fuente WooCommerce, por lo que los títulos, precios, imágenes y botones se ingresan a mano para cada columna de producto. Eso también significa que funciona para cualquier cosa: planes, servicios, hardware o software.
¿Cómo se ve la tabla comparativa en dispositivos móviles?
Debajo del formato de pestaña Inicio Desde el ancho en Estilo, Productos (767px de forma predeterminada), la tabla muestra una fila de nombres de productos encima de la columna de funciones y solo la primera columna de producto. Para mantener todos los productos visibles en los teléfonos, configure el formato de pestaña Inicio de a 0 y la tabla se reducirá para que encaje. Vea una vista previa en la vista móvil de Elementor antes de publicar.
¿Debo utilizar una tabla comparativa o una tabla de precios?
Utilice una tabla comparativa cuando los visitantes necesiten comparar las mismas funciones entre varias opciones. Utilice una tabla de precios cuando cada plan sea una tarjeta corta con un precio y algunas funciones. Los complementos maestros Tabla de precios widget maneja eso sin Pro.
¿en qué se diferencia del widget de tabla dinámica?
Dynamic Table crea una tabla de datos general con cualquier número de filas y columnas y no se necesitan Master Addons Pro. La tabla comparativa está diseñada para decisiones de productos: un título, precio, imagen y botón para cada columna, valores de verificación y cruce, y una columna que puede resaltar.
¿elementor tiene un widget de tabla comparativa?
No. Ni Elementor ni Elementor Pro gratuitos tienen uno. Elementor Pro tiene un widget de tabla de precios para tarjetas de plan único. Para obtener una cuadrícula de funciones en varios productos, necesita un widget complementario como este.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
![Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de publicaciones/páginas
