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 Tabla comparativa widget adentro 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 para Elementor instalado y activo. ¿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. 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 función, elija un tic, una cruz, un icono de información 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 (una opción profesional).
- 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 y espaciado de columnas: esquinas redondeadas y espacio entre columnas de producto.
- 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.
Preguntas frecuentes #
¿cuál es el widget de la tabla comparativa en los complementos maestros?
Es un widget de 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?
Usted establece el número 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 se elige una marca, una cruz, un ícono de informació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 funciones 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. Como no depende de WooCommerce, aparece en cualquier 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.
