Un tutorial completo sobre la creación de tablas comparativas con Elementor

Una tabla comparativa de productos es una forma muy útil de mostrar información como características principales, imágenes, especificaciones y precios de varios productos uno al lado del otro para ayudar a los visitantes a tomar decisiones rápidas. Si utiliza Elementor Construir un sitio web puede revelar que no tiene la capacidad de crear tablas de comparación de productos directamente por sí mismo. Pero no se preocupe.HappyAddons El plugin hace exactamente eso.

¿Qué son los HappyAddons y cómo te ayudan?

HappyAddons es una extensión de plugin para usuarios de Elementor que contiene más de 130 widgets útiles que amplían los límites de la funcionalidad de Elementor. Su widget de tabla de comparación facilita la creación de tablas de comparación de productos versátiles.

¿Por qué los sitios web de comercio electrónico necesitan tablas comparativas de productos?

Un cuadro comparativo de productos puede presentar información sobre varios productos de forma claramente estructurada, lo que facilita a los clientes completar las comparaciones y tomar decisiones de compra en poco tiempo. La presentación clara e intuitiva de la información también aumenta la confianza y expresa la seguridad del comerciante en el producto.

Este tipo de tabla es habitual en las plataformas de comercio electrónico, no sólo se utiliza para mostrar los distintos modelos de sus propios productos, sino que también suele utilizarse para comparar sus productos con los de la competencia, de forma que aparezcan las ventajas y los inconvenientes. Los consumidores pueden ver la diferencia entre los productos con un rápido vistazo, reducir las dudas y realizar rápidamente un pedido.

Pasos para crear una tabla comparativa de productos con HappyAddons

Paso 1: Instale los plug-ins necesarios

Por favor, instale y active los dos siguientes plugins antes de empezar:

• Elementor (versión gratuita)
• HappyAddons (versión gratuita)

A continuación, abra la página o el artículo que desea editar y vaya al editor de Elementor y realice los siguientes ajustes:

Paso 2: Añadir el widget de tabla comparativa

Escriba "Tabla comparativa" en la barra de búsqueda del panel izquierdo y arrastre el widget a la página.

Se cargará un formulario predeterminado en la página y aparecerán cuatro áreas principales de configuración de contenidos:

• Ajustes del cabezal de la mesa (Cabezal de la mesa)
• Configuración de la fila de la tabla (fila de la tabla)
• Configuración de los botones (Botón Tabla)
• Configuración de la mesa

Establecer el contenido de la cabecera

Haga clic en "Añadir elemento" para crear un nuevo elemento de cabecera. Cada elemento permite configurar la alineación (izquierda, centro, derecha), la posición del icono (izquierda o derecha), la etiqueta del título, el color del icono, el ancho de la columna, etc.

También puede encenderse Cabecera adhesiva cuando está activada, la cabecera de la tabla se fija en la parte superior de la página mientras se desplaza.

Añadir y gestionar filas de tablas

En su estado inicial, la tabla tiene dos filas de contenido, cada una con varias columnas.

Haga clic en "Añadir elemento" para añadir una nueva fila y, a continuación, inserte columnas (Título, Icono, Imagen) en la fila.

Por ejemplo, para añadir una columna de cabecera:

• Haga clic en Añadir elemento → Establecer como columna → seleccione "Tipo de contenido" como "Título".

• importaciónleyenda, descripciones, con la posibilidad de insertar iconos, etc.

Consejo: Por defecto, el contenido de las columnas se ordena de derecha a izquierda.

Configurar el área de botones

Vaya a la opción "Botón de tabla" e introduzca el título del botón y la dirección del enlace.

Si necesita embellecer el estilo del botón, puede activar estilos personalizados para ajustar aún más el color del texto, el color de fondo y la sombra,hoverEfectos, etc.

Ajustar la anchura del formulario y la capacidad de respuesta

"Ajustes de la tabla" permite configurar el ancho de la tabla según los distintos dispositivos. Cuando se visualiza en una tableta o un teléfono móvil, el contenido de la tabla puede deslizarse horizontalmente para ajustarse a los distintos anchos de pantalla.

Área de estilo personalizado

En "Estilo", puede ajustar los tipos de letra, colores, márgenes y otros estilos de la cabecera de la tabla, las filas de la tabla y las zonas de botones para crear un estilo de visualización más acorde con el estilo de su marca.

Introducción a las funciones avanzadas de tabla comparativa de HappyAddons Pro

Si desea crear tablas comparativas más complejas e informativas, pruebe a actualizar a HappyAddons Pro, que ofrece el widget Tabla comparativa avanzada.

Características destacadas del widget avanzado:

• Admite hasta 10 columnas
• La posición de los iconos puede ajustarse libremente
• Icono de expansión y contracción
• Soporte para navegación por insignias con capacidad de respuesta
• Soporte para múltiples tipos de contenido (texto, iconos, imágenes, botones, precios, etc.)
• La cabecera de la tabla puede ajustarse a una visualización fija
• Importación de plantillas yetiqueta dinámicafunción integrada

Pasos a seguir:

• Instalación: Elementor Free Edition + HappyAddons Free Edition + HappyAddons Pro
• Añadir componentes: arrastrar y soltar en la tabla de comparación avanzada
• Inicialización: por defecto se carga una vista de tres columnas, el número de columnas puede ampliarse (hasta 10) en la opción General.
• Rellenar contenido: Amplíe columna por columna para insertar distintos tipos de contenido, como texto o iconos,botoneset al. (y otros autores)

Opciones de configuración personalizadas:

• Anchura ajustable de cada columna
• Colocación flexible de los iconos
• Los proyectos de fila admiten plegado y desplegado
• Soporte para añadir descripciones Tooltip por celda
• Importe plantillas predefinidas o utilice códigos cortos para incrustar datos dinámicos

Características de embellecimiento del diseño:

• Colores personalizados,contextosFuentes, bordes, etc.
• Admite estilos de fila pares e impares
• Se pueden definir estilos individuales para cada elemento (texto, insignias, botones, etc.).
• Ajustes globales de color y tipo de letra para mayor coherencia

Ajustes sensibles:

• Soporte móvil para el cambio de distintivo de navegación
• Estilos de botones separados en dispositivos móviles

Resumen de funciones avanzadas

• datos dinámicosAcceso: compatibilidad con códigos cortos y etiquetas dinámicas

• Efecto de animación de cabecera pegajosa: la cabecera siempre está visible cuando el contenido se desliza

• Importación de plantillas predefinidas: construya rápidamente estructuras de tablas complejas
• Control de estilo versátil: se adapta a las distintas necesidades de las marcas

Puntos fuertes y débiles del widget de tabla comparativa

Ventaja:

• Fácil de poner en marcha y muy personalizable
• Disponible directamente en Elementor Manipulación en el editor
• Fijación de la cabecera de la tabla, sugerencias de descripción, filas contraídas, insignias y muchas otras mejoras.
• Plantillas activables con contenido dinámico y diseño flexible

Insuficiente:

• El número máximo de columnas es 10
• Sin captura directa WooCommerce Datos del producto
• La estructura del formulario debe configurarse manualmente y no tiene lógica de generación automática

Ejemplos de aplicación

• Tabla comparativa de productosPor ejemplo, muestra la diferencia de características entre las distintas líneas del Apple Watch.

• Comparación de paquetes de servicios: Demostración del contenido de los servicios para distintos tramos de precios

• Tabla de diferenciación funcionaldemostrar los módulos funcionales de un producto o servicio

Estos escenarios pueden diseñarse con el widget Tabla comparativa avanzada.

resúmenes

Si está creando un sitio de comercio electrónico o un sitio de servicios de escaparate y necesita crear tablas comparativas claramente estructuradas y visualmente agradables.ElementorEste widget con HappyAddons le proporcionará una solución eficaz y estéticamente agradable.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: [email protected]
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres