Cuando los compradores pesan dos o tres opciones, una mesa al lado de la otra responde a sus preguntas más rápido que desplazarse entre páginas separadas. El Widget de tabla comparativa, un widget Pro en Complementos maestros para Elementor, construye esa tabla: una columna de funciones en el costado, una columna por producto en la parte superior y un botón de precio más compra en cada una. Lo completa desde el panel Elementor, no se requieren tablas HTML.
Cada celda puede contener texto, una marca o una cruz, por lo que se lee de un vistazo. Cuatro estilos de diseño, un número ajustable de columnas de productos y control de color completo significan que la tabla puede coincidir con cualquier página. Esta guía cubre cada configuración, desde las filas de funciones hasta las franjas de cebra.
¿Prefieres verlo primero? Este breve tutorial recorre el widget de la tabla comparativa de un extremo a otro:
Qué hace el widget de la tabla comparativa #
El widget establece una cuadrícula: los nombres de las funciones se encuentran en la primera columna y cada producto obtiene su propia columna con un título, precio, valor por función y un botón de llamada a la acción. Cambie el recuento de productos y las columnas se ajustarán para que coincidan.
Escribe todo a mano, por lo que no depende de WooCommerce. Eso lo hace tan útil para comparar complementos, niveles de servicio o hardware como lo es para productos de tiendas.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros Pro instalado con una licencia activa, ya que la tabla comparativa es un widget Pro. ¿Nuevo en el complemento? Ver el guía de instalación.
- Los productos y la lista de funciones que desea comparar.
Cómo agregar el widget de la tabla comparativa #
En el editor Elementor, abra el Elementos panel y búsqueda Tabla comparativa, o desplácese hasta la sección Addones maestros. Arrástrelo a su página y aparecerá una tabla de muestra, ya llena de productos y funciones de marcador de posición para que edite desde un diseño funcional en lugar de una cuadrícula en blanco.
Ajustes generales: maquetación y recuento de productos #
Abre el Contenido pestaña y el General la sección contiene las dos configuraciones que dan forma a toda la mesa.
- Disposiciones: elija Estilo 1, 2, 3 o 4. Cada uno reorganiza el encabezado, el precio y las columnas en una apariencia diferente.
- Productos: establezca cuántas columnas de productos muestra la tabla, de 2 a 6. Suba el número y aparecerá una sección de Producto coincidente a continuación para cada nueva columna.
Establezca las filas de funciones #
El Características Caja la sección define la columna de la izquierda, la lista de cosas que estás comparando. El Encabezado es la etiqueta en la parte superior (como “Características” o “Producto”), y el Características el repetidor contiene un elemento por fila.
Cada elemento destacado es una etiqueta de fila, como Tamaño, Garantía o Disponibilidad. Usar Agregar artículo para agregar filas, el ícono de copia para duplicar una y la X para eliminarla. También hay un Encabezado de botón campo para la fila que contiene los botones de compra.
Rellene cada columna de producto #
Cada producto tiene su propia sección (Producto 1, Producto 2, etc.). En el interior, configura el título, el precio, la imagen, el texto del botón y el enlace de la columna, luego el valor de cada fila de funciones.
La parte útil es la por fila Contenido control. Para cada característica que elija, una verificación, una cruz, un ícono que elija o texto sin formato. Una cuadrícula de tictac y cruz se lee instantáneamente, mientras que los campos de texto se adaptan a especificaciones como “1 año” o “todos los tamaños” An Anular estilo alternar permite que una sola columna se destaque, lo cual es útil para resaltar la selección recomendada.
Elija un estilo de diseño #
Los cuatro diseños cambian el aspecto de la tabla sin tocar su contenido. Cambiar entre ellos es una forma de encontrar con un solo clic el estilo que se adapta a la página.
Estilo 4 convierte las columnas en cartas separadas con encabezados curvos y de colores, una apariencia más audaz para una comparación destacada.
Estilo 2 flota una insignia de precio circular encima de cada columna con una barra de título de color debajo. Aquí la tabla está configurada en cuatro productos, que muestran cómo escalan las columnas.
Estila la mesa #
El Estilo la pestaña controla el color y el espaciado. El General la sección establece el aspecto de toda la mesa, y el resto se divide en Cuadro de características, Productos, Botón, y Patrones cuando el libre Patrones la extensión está encendida.
- Color de fila impar y color de fila par: las rayas de cebra que facilitan la lectura de las mesas largas.
- Tipo de borde, ancho y color: las líneas entre células.
- Radio de caja, espaciado de columnas y espaciado de filas: esquinas redondeadas y espacios entre columnas y filas.
- Cuadro de características, productos, botón: tipografía, colores, alineación y relleno para cada parte de la tabla.
El resultado en la página #
Publique o obtenga una vista previa y la tabla se representará con sus funciones, productos, precios y botones en su lugar, filas de cebra y todo. A continuación se muestra una tabla Estilo 2 con tres productos.
Casos de uso comunes #
- Comparaciones de productos poniendo dos o tres modelos uno al lado del otro.
- Niveles de plan o precios cuando quieres una cuadrícula en lugar de apilada tablas de precios.
- Matrices de funciones de complementos o software con filas de tictac y cruz.
- Paquetes de servicio comparando lo que incluye cada nivel.
- Tablas entre nosotros y ellos resaltando su producto con el interruptor Estilo de anulación.
Consejos para trabajar con el widget de la tabla comparativa #
- Utilice tics y cruces para funciones de sí/no. Escanean más rápido que las palabras “Sí” y “No” y mantienen la mesa ordenada.
- Mantenga breves las etiquetas de las funciones. Una o dos palabras por fila evitan que la primera columna se ensanche.
- Resalte una columna con Anular estilo. Un color diferente guía el ojo hacia la opción recomendada.
- Establece colores cebra con suficiente contraste. Los colores de fila alternos son los que hacen que una mesa larga sea legible.
- Haga coincidir el recuento de productos con la pantalla. Tres columnas se ajustan a la mayoría de los diseños; cuatro o más pueden quedar abarrotados en pantallas más pequeñas. Debajo del formato de pestaña Inicio Desde el ancho (767px de forma predeterminada), algunos diseños cambian a pestañas de producto, así que verifique la vista móvil.
Preguntas frecuentes #
¿cuál es el widget de la tabla comparativa en los complementos maestros?
Es un widget Master Addons Pro para Elementor que crea una cuadrícula de comparación lado a lado. Los nombres de las funciones se encuentran en la primera columna y cada producto obtiene su propia columna con un título, precio, valor por función y un botón. Ingresas todo a mano, por lo que no necesita WooCommerce.
¿Cuántos productos puedo comparar en la tabla?
Establece el número, del 2 al 6, en el campo Productos en General. Levántelo y aparecerá una nueva sección de Producto para cada columna que agregue. Tres columnas se adaptan a la mayoría de los anchos de página, mientras que cuatro o más funcionan mejor en diseños más amplios.
¿puedo mostrar marcas y cruces en lugar de texto?
Sí. En cada sección de producto, cada fila de funciones tiene un control de contenido donde elige un cheque, una cruz, un ícono de su elección o texto sin formato. Las marcas de tictac y cruz hacen que las funciones de sí/no sean escaneables, mientras que el texto se adapta a especificaciones como la duración de la garantía.
¿cuántos estilos de diseño tiene la Tabla comparativa?
Cuatro. El estilo 1 es una tabla clásica, el estilo 2 agrega insignias de precios circulares y el estilo 4 convierte las columnas en tarjetas con encabezados curvos. Cambiar diseños reorganiza el mismo contenido, para que puedas probar cada uno sin rehacer tus datos.
¿Puedo resaltar una columna de producto?
Sí. Cada sección del producto tiene un interruptor de estilo de anulación que le permite darle a una columna sus propios colores. Úselo para que su opción recomendada se destaque de las demás en la tabla.
Envolviendo #
El widget de la tabla comparativa convierte una lista de productos y características en una cuadrícula clara, una al lado de la otra: elija un diseño, establezca el número de columnas, agregue las filas de funciones y complete cada columna con valores, precios y botones. Dado que no depende de WooCommerce, aparece en cualquier página. Para ver ejemplos de diseño y cuándo elegir una tabla de precios, consulte Widget de tabla comparativa de Elementor página. Emparejarlo con el Widget de tabla de precios para páginas de planes, explore las completas Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.
