Widget de table de comparaison d'éléments (Pro)
Tableau comparatif est un widget Master Addons Pro qui construit une grille de fonctionnalités pour 2 à 6 produits ou plans Les noms de fonctionnalités parcourent la première colonne, et chaque colonne de produits a un titre, un prix, une image, une valeur pour chaque ligne de fonctionnalités et un bouton Les valeurs peuvent être une coche, une croix, une icône ou un texte Choisissez l'une des quatre mises en page, donnez à une colonne ses propres couleurs pour marquer l'option recommandée, et des lignes de style, des en-têtes et des boutons Il n'a besoin d'aucun WooCommerce, donc il fonctionne pour les plans, logiciels, matériel ou progiciels Pour les cartes à plan unique, le Tableau des prix widget est le meilleur ajustement, et il n'a pas besoin de Master Addons Pro.
Comment ajouter un tableau comparatif dans Elementor
Comparaison Tableau a besoin d'Elementor et d'un actif Maître Addons Pro licence.
- Activez Master Addons Pro, modifiez votre page avec Elementor et recherchez dans le panneau des widgets Tableau comparatif.
- Dans Général: choisissez une mise en page et définissez les produits sur le nombre de colonnes.
- Dans Caractéristiques Box(en), ajoutez un élément par ligne de fonctionnalités et définissez le titre.
- Ouvrez chaque Produit sectionnez et ajoutez le titre, le prix, l'image, le texte du bouton et le lien.
- Définissez chaque valeur de ligne sur une vérification, une croix, une icône ou un texte, dans le même ordre que la liste des fonctionnalités.
- Activez le style de remplacement pour la colonne que vous recommandez, stylez le tableau, puis vérifiez-le dans la vue mobile.
Chaque paramètre est couvert dans le Paramètres du widget Comparaison Table guide.
Se marie bien avec: Tableau des prix, Tableau dynamique, Basculer le contenu pour un changement mensuel et annuel, Boîte d'informations pour les faits saillants des fonctionnalités, et Heures d'affaires.
Tableau comparatif en un coup d'œil
Ce que fait le widget, lisez le code Master Addons Pro.
| Article | Widget Tableau Comparatif |
|---|---|
| Produits par table | 2 à 6, avec 3 par défaut |
| Dispositions | 4 (Style 1 à Style 4) |
| Lignes caractéristiques | Une liste de répéteurs, autant de lignes que nécessaire |
| Valeurs cellulaires | Cochez, croisez, une icône de votre choix, ou du texte |
| Champs produits | Titre, prix, image, texte du bouton et lien |
| Mettre en surbrillance une colonne | Remplacer Style par produit : le titre, le prix, les lignes et les couleurs des boutons |
| Badges numériques | La disposition 3 montre un cercle numéroté au-dessus de chaque produit |
| mobile | Sous 767 px (Format de l'onglet de démarrage à partir de) une ligne de noms de produits et la première colonne de produits ; définir 0 pour conserver toutes les colonnes |
| Style par cellule | Non, le style est par tableau ou par colonne de produit |
| Texte de ruban ou de badge | Non, mettez l'étiquette dans le titre ou le prix du produit |
| Importation CSV | Non |
| Source WooCommerce | Non, les valeurs sont saisies dans le panneau |
| Besoins | Addons Elementor et Master |
Comparez 2 à 6 produits Caractéristique par fonctionnalité
Définir Produits en général (2 à 6, 3 par défaut) et a Produit section apparaît pour chaque colonne Répertoriez vos lignes une fois dans Caractéristiques Box: un titre, un élément répétiteur par fonctionnalité et un titre de bouton. Remplissez ensuite chaque produit avec un Titre, Prix, imaginer, Texte du bouton, Lien et une valeur pour chaque ligne.
- Chaque valeur de ligne est un chèque, une croix, une icône de votre choix ou un texte brut tel que “1 Year”.
- Les lignes de fonctionnalités sont partagées, conservez donc le même nombre d'éléments dans chaque produit afin que les lignes s'alignent.
- Le contenu est tapé dans le panneau Les prix ne s'éloignent pas de WooCommerce.
Construire un tableau comparatif des produits
Un tableau de comparaison de produits met les produits en colonnes et les spécifications en lignes, afin qu'un acheteur puisse analyser une fonctionnalité dans chaque option Définir les produits sur le nombre d'articles, répertorier les spécifications une fois dans la boîte de fonctionnalités, puis remplir chaque section Produit avec un titre, un prix, une image, un texte de bouton et un lien Utiliser une vérification ou une croix pour les spécifications oui et non et le texte pour des chiffres tels que l'autonomie ou la garantie.
Chaque valeur est tapé dans le panneau Le widget ne lit pas les produits WooCommerce ni n'importe un CSV, il convient donc à une courte liste que vous organisez, comme trois écouteurs, trois plans ou votre produit contre deux rivaux Allumez Override Style sur le produit que vous recommandez pour que sa colonne se démarque.
Trois écouteurs comparés dans la disposition 1, le produit du milieu étant mis en évidence via Override Style.
Widgets de table de comparaison et de table de tarification
Elementor et Elementor Pro n'ont pas de widget de table de comparaison Elementor Pro a un widget de table de prix pour les cartes à forfait unique Voici quand utiliser chaque option.
| widget | Disposition | Meilleur pour | Prix |
|---|---|---|---|
| Tableau comparatif des addons principaux | Une grille, 2 à 6 colonnes de produits partageant les mêmes lignes de fonctionnalités | Décisions caractéristique par caractéristique entre plans ou produits | Maître Addons Pro |
| Additions maîtres Tableau des prix | Une carte plan par widget avec en-tête, prix, fonctionnalités et bouton | Pages de prix avec deux ou trois plans simples | Inclus, aucun Master Addons Pro n'est nécessaire |
| Tableau des prix Elementor Pro | Une carte plan par widget avec une option ruban | Planifiez des cartes sur des sites qui utilisent déjà Elementor Pro | Élémenteur Pro |
Si les visiteurs doivent vérifier les mêmes caractéristiques sur plusieurs options, un tableau comparatif est plus facile à lire que les cartes côte à côte Si chaque plan a une liste courte et un prix, les cartes de prix prennent moins de place Aussi utile : Tableau dynamique pour les tableaux de données simples.
De quel widget de table ai-je besoin ?
| widget | Ce qu'il construit | Utilisez-le pour |
|---|---|---|
| Tableau comparatif (Pro) | Colonnes de produits avec un titre, un prix, une image et un bouton, ainsi que des lignes de fonctionnalités partagées | Choisir entre 2 à 6 produits ou forfaits |
| Tableau des prix | Une carte plan par widget : en-tête, prix, liste de fonctionnalités et bouton | Pages de prix avec deux ou trois plans |
| Tableau dynamique | Un tableau de données général avec toutes les lignes et colonnes | Horaires, spécifications, listes et toutes données simples |
Quatre mises en page et style de table
Choisir Style 1 à Style 4 dans Dispositions[TRADUCTION], d'une table classique à des cartes de produits séparées avec des badges de prix L'onglet Style comporte quatre sections. Général définit les couleurs de lignes impaires et paires, la bordure, le rayon de la boîte, l'espacement des colonnes et l'espacement des lignes. Boîte de fonctionnalités définit la largeur de la colonne de caractéristiques, les couleurs, l'alignement et le remplissage. Produits titres de styles, prix, images et point d'arrêt mobile, et Bouton stylise les boutons d'achat.
- Les rangées de zèbres avec la couleur des rangées étranges et la couleur des rangées paires facilitent le balayage des longues tables.
- La largeur de la boîte définit la largeur de la colonne de fonctionnalités.
- Sous le format de l'onglet Démarrer À partir de la largeur (767 px par défaut), le tableau affiche une ligne de noms de produits et uniquement la première colonne de produits Pour conserver chaque colonne sur les téléphones, définissez le format de l'onglet Démarrer de à 0 et le tableau complet rétrécit pour s'adapter à l'écran Vérifiez le tableau en vue mobile avant de publier.
Mettez en surbrillance la colonne recommandée
Allumez Remplacer le style à l'intérieur d'une section de produit pour donner à cette colonne ses propres couleurs Vous pouvez définir la couleur de titre et l'arrière-plan, le badge de comptage, le prix et son fond de colonne, le texte de la fonctionnalité, les couleurs de contrôle et de croix, les couleurs impaires et paires de lignes, et les couleurs de bouton Utilisez-le pour votre plan de” le plus populaire des“ ou votre propre produit dans un tableau nous contre eux.
- Override Style fonctionne par colonne de produit, pas par cellule.
- Il n'y a pas de ruban ou de badge intégré, alors ajoutez l'étiquette au titre du produit ou au texte du prix.
- Gardez les autres colonnes sur le style global pour que celle surlignée se démarque.
Exemples de tableaux comparatifs
Dix démos live construites avec le widget Les deux premières conservent chaque colonne sur les téléphones ; le reste passe à la ligne de nom de produit en dessous de 767 px, que vous pouvez désactiver avec le format d'onglet Démarrer De la configuration à 0.
- Comparaison SmartWatch: Disposition 3 avec badges numérotés.
- Comparez nos plans: Disposez 4 cartes avec le prix dans l'en-tête.
- Plans tarifaires SaaS: un niveau mis en évidence.
- Nous contre trois concurrents: thème sombre.
- Forfaits photographiques: photos dans l'en-tête.
- Tarifs mobiles: classé un à quatre.
- Cinq plans d'hébergement: côte à côte.
- Trois tours: prix en cercle.
- Deux annonces de propriétés: tête à tête.
- Tableau comparatif original: la première démo.
Foire aux questions pour le tableau comparatif
Le widget Tableau comparatif est-il gratuit ?
N° Tableau comparatif fait partie de Maître Addons Pro. Sans Pro, vous pouvez utiliser le Tableau des prix widget pour cartes à plan unique Elementor lui-même n'a pas de widget de table de comparaison, gratuit ou Pro.
Combien de produits puis-je comparer ?
Entre 2 et 6. Changement Produits dans la section Général et les sections de produits sont ajoutées ou masquées pour correspondre Trois ou quatre colonnes se lisent mieux sur la plupart des largeurs de page.
Puis-je importer un CSV ou une feuille de calcul ?
Non, les produits, les prix et chaque valeur de ligne sont saisis dans le panneau du widget. Pour un grand ensemble de données, vous souhaitez importer à partir d'une feuille de calcul, un plugin de table tel que TablePresse gère les fichiers CSV et Excel Pour une petite table stylisée intégrée dans le panneau, utilisez le Tableau dynamique Widget.
Peut-il extraire des produits de WooCommerce ?
Non. Le widget n'a pas de source WooCommerce, donc les titres, les prix, les images et les boutons sont saisis à la main pour chaque colonne de produit. Cela signifie également qu'il fonctionne pour n'importe quoi : plans, services, matériel ou logiciel.
Comment se présente le tableau comparatif sur mobile ?
Sous le format de l'onglet Démarrer À partir de la largeur dans Style, Produits (767 px par défaut), le tableau affiche une ligne de noms de produits au-dessus de la colonne de fonctionnalités et uniquement la première colonne de produits Pour garder chaque produit visible sur les téléphones, définissez Start Tab Format De à 0 et le tableau rétrécit pour l'ajuster Prévisualisez-le dans la vue mobile d'Elementor avant de publier.
Dois-je utiliser un tableau comparatif ou un tableau tarifaire ?
Utilisez le tableau comparatif lorsque les visiteurs doivent comparer les mêmes caractéristiques sur plusieurs options Utilisez un tableau tarifaire lorsque chaque forfait est une carte courte avec un prix et quelques fonctionnalités Les modules complémentaires principaux Tableau des prix widget gère cela sans Pro.
En quoi est-il différent du widget Table dynamique ?
Dynamic Table construit une table de données générale avec n'importe quel nombre de lignes et de colonnes et aucun Master Addons Pro nécessaire La table de comparaison est construite pour les décisions de produits : un titre, un prix, une image et un bouton pour chaque colonne, des valeurs de contrôle et de croisement et une colonne que vous pouvez mettre en surbrillance.
Elementor a-t-il un widget de table de comparaison ?
Non. Ni Elementor gratuit ni Elementor Pro n'en ont un Elementor Pro a un widget Table des prix pour les cartes à forfait unique Pour une grille de fonctionnalités sur plusieurs produits, vous avez besoin d'un widget addon tel que celui-ci.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
