Lorsque les acheteurs pèsent deux ou trois options, une table côte à côte répond à leurs questions plus rapidement que le défilement entre des pages séparées. Le Widget Tableau Comparatif, un widget Pro dans Modules complémentaires principaux pour Elementor., construit ce tableau : une colonne de fonctionnalités sur le côté, une colonne par produit en haut et un bouton prix plus achat sur chacun. Vous le remplissez à partir du panneau Élémenteur, aucune table HTML n'est requise.
Chaque cellule peut contenir du texte, une coche ou une croix, donc elle lit en un coup d'œil Quatre styles de mise en page, un nombre réglable de colonnes de produits et un contrôle des couleurs complet signifient que le tableau peut correspondre à n'importe quelle page. Ce guide couvre chaque paramètre, des lignes de fonctionnalités aux rayures zébrées.
Préférez regarder en premier ? ce court tutoriel parcourt le widget Table de comparaison bout en bout :
Ce que fait le widget Tableau comparatif #
Le widget présente une grille : les noms de fonctionnalités s'étendent sur la première colonne et chaque produit obtient sa propre colonne avec un titre, un prix, une valeur par fonctionnalité et un bouton d'appel à l'action. Modifiez le nombre de produits et les colonnes s'ajustent pour correspondre.
Vous saisissez tout à la main, cela ne dépend donc pas de WooCommerce. Cela le rend tout aussi utile pour comparer des plugins, des niveaux de service ou du matériel que pour les produits de magasin.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Maître Addons Pro installé avec une licence active, puisque Comparison Table est un widget Pro. Nouveau dans le plugin ? voir le guide d'installation.
- Les produits et la liste de fonctionnalités que vous souhaitez comparer.
Comment ajouter le widget Tableau comparatif #
Dans l'éditeur Elementor, ouvrez le Éléments panneau et recherche pour Tableau comparatif(ou faites défiler vers la section Addons principaux) Faites-le glisser sur votre page et un exemple de tableau apparaît, déjà rempli de produits et de fonctionnalités réservés afin que vous modifiiez à partir d'une mise en page fonctionnelle au lieu d'une grille vierge.
Paramètres généraux : mise en page et nombre de produits #
Ouvrir le Contenu tab et le Général la section contient les deux paramètres qui façonnent toute la table.
- Dispositions: choisissez Style 1, 2, 3 ou 4. Chacun réorganise l'en-tête, le prix et les colonnes dans un look différent.
- Produits: définissez le nombre de colonnes de produits indiquées dans le tableau, de 2 à 6. augmentez le nombre et une section Produit correspondante apparaît ci-dessous pour chaque nouvelle colonne.
Définissez les lignes de fonctionnalités #
Le Caractéristiques Box section définit la colonne de gauche, la liste des choses que vous comparez Le Titre est le label en haut (comme“Features” ou “Product”), et le Caractéristiques le répéteur contient un élément par ligne.
Chaque élément de fonctionnalité est une étiquette de ligne telle que la taille, la garantie ou la disponibilité. Utiliser Ajouter un élément pour ajouter des lignes, l'icône de copie pour en dupliquer une, et le X pour la supprimer Il y a aussi un Cap du bouton champ pour la rangée qui contient les boutons d'achat.
Remplissez chaque colonne de produit #
Chaque produit obtient sa propre section (Produit 1, Produit 2(, et ainsi de suite).À l'intérieur, vous définissez le titre, le prix, l'image, le texte du bouton et le lien de la colonne, puis la valeur de chaque ligne de fonctionnalités.
La partie pratique est la ligne par ligne Contenu contrôle. Pour chaque fonctionnalité, vous choisissez une vérification, une croix, une icône que vous choisissez ou du texte brut. Une grille de tic-et-croisement se lit instantanément, tandis que les champs de texte conviennent à des spécifications telles que les“1 Year” ou les“All sizures.” An Remplacer le style toggle laisse une seule colonne se démarquer, ce qui est utile pour mettre en évidence votre choix recommandé.
Choisissez un style de mise en page #
Les quatre mises en page changent l'apparence du tableau sans toucher à votre contenu. Basculer entre eux est un moyen en un clic de trouver le style qui correspond à la page.
Style 4 transforme les colonnes en cartes séparées avec des en-têtes incurvés et colorés, un look plus audacieux pour une comparaison caractéristique.
Style 2 flotte un badge de prix circulaire au-dessus de chaque colonne avec une barre de titre colorée en dessous. Ici, le tableau est réglé sur quatre produits, montrant comment les colonnes évoluent.
Style la table #
Le Style tab contrôle la couleur et l'espacement Le Général la section définit l'apparence de la table, le reste étant divisé en Boîte de fonctionnalités, Produits, Bouton, et Modèles quand le gratuit Modèles l'extension est allumée.
- Couleur de rangée impaire et même couleur de rangée : la rayure zébrée qui facilite la lecture des longues tables.
- Type de bordure, largeur et couleur : les lignes entre les cellules.
- Rayon de boîte, espacement des colonnes et espacement des rangées : coins arrondis et espaces entre les colonnes et les rangées.
- Boîte de fonctionnalités, produits, bouton : typographie, couleurs, alignement et remplissage pour chaque partie du tableau.
Le résultat sur la page #
Publiez ou prévisualisez et le tableau se rend avec vos fonctionnalités, produits, prix et boutons en place, lignes zébrées et tout. Vous trouverez ci-dessous un tableau Style 2 avec trois produits.
Cas d'utilisation courants #
- Comparaisons de produits mettre deux ou trois modèles côte à côte.
- Niveaux de plan ou de tarification quand vous voulez une grille au lieu d'être empilée tableaux tarifaires.
- Matrices de plugins ou de fonctionnalités logicielles avec tick-and-cross rows.
- Forfaits services comparer ce que chaque niveau comprend.
- Tables nous-contre-eux mise en valeur de votre produit avec le bouton Override Style.
Conseils pour travailler avec le widget Comparaison Table #
- Utilisez des tiques et des croix pour les fonctionnalités oui/non. Ils scannent plus vite que les mots “Yes” et “No” et gardent la table bien rangée.
- Gardez les étiquettes de fonctionnalités courtes. Un ou deux mots par ligne empêchent la première colonne de se écarter.
- Mettez en surbrillance une colonne avec Override Style. Une couleur différente guide l'œil vers votre option recommandée.
- Définissez les couleurs zébrées avec suffisamment de contraste. Les couleurs alternées des lignes sont ce qui rend une longue table lisible.
- Faites correspondre le nombre de produits à l'écran. Trois colonnes correspondent à la plupart des mises en page ; quatre ou plus peuvent être exigus sur des écrans plus petits Sous le format de l'onglet Démarrer De largeur (767 px par défaut) certaines mises en page passent aux onglets de produit, alors vérifiez la vue mobile.
Foire aux questions #
Qu'est-ce que le widget Comparaison Table dans Master Addons ?
C'est un widget Master Addons Pro pour Elementor qui construit une grille de comparaison côte à côte Les noms de fonctionnalités parcourent la première colonne et chaque produit obtient sa propre colonne avec un titre, un prix, une valeur par fonctionnalité et un bouton Vous saisissez tout à la main, il n'a donc pas besoin de WooCommerce.
Combien de produits puis-je comparer dans le tableau ?
Vous définissez le nombre, de 2 à 6, dans le champ Produits sous Généralités Augmentez-le et une nouvelle section Produit apparaît pour chaque colonne que vous ajoutez Trois colonnes conviennent à la plupart des largeurs de page, tandis que quatre ou plus fonctionnent mieux sur des mises en page plus larges.
Puis-je afficher les coches et les croisements au lieu du texte ?
Oui. Dans chaque section produit, chaque ligne de fonctionnalités dispose d'un contrôle de contenu où vous choisissez un chèque, une croix, une icône de votre choix ou du texte brut. Les marques de tic-et-croisement rendent les fonctionnalités oui/non numérisables, tandis que le texte convient aux spécifications telles que la durée de la garantie.
Combien de styles de mise en page a le tableau comparatif ?
Quatre. Le style 1 est un tableau classique, le style 2 ajoute des badges de prix circulaires et le style 4 transforme les colonnes en cartes avec des en-têtes incurvés. La commutation des mises en page réorganise le même contenu, afin que vous puissiez essayer chacune sans refaire vos données.
Puis-je mettre en évidence une colonne de produit ?
Oui. Chaque section de produit a une bascule de style de remplacement qui vous permet de donner à une colonne ses propres couleurs. Utilisez-le pour que votre option recommandée se démarque des autres dans le tableau.
Envelopper #
Le widget Table de comparaison transforme une liste de produits et de fonctionnalités en une grille claire côte à côte : choisissez une mise en page, définissez le nombre de colonnes, ajoutez vos lignes de fonctionnalités et remplissez chaque colonne de valeurs, de prix et de boutons. Puisqu'il ne repose pas sur WooCommerce, il tombe sur n'importe quelle page. Pour les exemples de mise en page et quand choisir un tableau de prix à la place, consultez le Widget de table de comparaison d'éléments page. Associez-le au Widget de table de tarification pour les pages de plan, parcourez l'intégralité Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.
