Comment faire un tableau comparatif de produits avec un plugin WordPress gratuitement ?

Publié: 2022-05-04

Table des matières

Les tableaux de comparaison de produits aident à visualiser et à structurer les informations sur deux ou plusieurs services/produits. Ils contribuent grandement à la convivialité des ressources et aident les clients à prendre des décisions d'achat plus rapidement. Jusqu'à présent, un plugin de tableau de comparaison WordPress est le moyen le plus efficace de créer des tableaux le plus rapidement possible. Leur fonctionnalité fonctionne également pour comparer les plans tarifaires, les adhésions, les horaires, les scores de compétition, etc.

Pourquoi utiliser des tableaux comparatifs de produits ?

  1. Comparaison visuelle des principales caractéristiques ou avantages/inconvénients (important pour les boutiques en ligne, les sites Web de services, etc.)
  2. Affichage rapide de ce qui rend chaque option différente (fonctionnalités, prix, nombre de services dans un abonnement)
  3. Envie de choisir une option plus chère (en les étiquetant comme "meilleure offre" ou "la plus populaire")

Créez gratuitement un tableau de comparaison des produits et des prix

Lisez plus loin si vous travaillez dans Elementor ou Gutenberg et recherchez des plugins WordPress gratuits de tableau de comparaison de produits.

Plugin gratuit de tableau de comparaison WordPress pour Elementor

Stratum for Elementor est la meilleure solution pour ajouter des tableaux de comparaison de produits que nous pouvons offrir chez MotoPress.

À l'origine, Stratum est une bibliothèque freemium de plus de 24 widgets avancés pour Elementor :
Liste des widgets Stratum Elementor
Faits saillants de la strate :

  • Plus de 24 widgets Elementor polyvalents
  • Universel pour les blogs personnels et les ressources des grandes entreprises
  • Fonctionnalité étendue dans Stratum PRO
  • Chaîne d'outils de conception avancée
  • Intégration de la bibliothèque de modèles Elementor
  • Les widgets héritent du style visuel du thème actuel
  • Entièrement compatible avec d'autres addons

DEMO Strate.

La version gratuite de l'addon donne accès à la plupart des éléments de cette liste, y compris le widget Price Table. Cet élément est identique au widget Price Table d'Elementor PRO. Mais contrairement à la version payante, Stratum permet aux utilisateurs de créer gratuitement des tableaux de prix attrayants.

Éléments clés des tableaux de prix de strate :

  1. plusieurs sections de texte (sous-titres et éléments de liste illimités
  2. bouton CTA hautement personnalisable (avec URL)
  3. paramètres de style réguliers et de survol

Voir aussi : Widgets Stratum : Widget Tableau de tarification Elementor

Apprenons maintenant à créer un tableau de comparaison pour les plans tarifaires dans Elementor à l'aide de Stratum.

Mais d'abord, assurez-vous d'installer et d'activer les plugins Elementor & Stratum.

Étape 1 : Sélectionnez la structure

En ce qui concerne les tableaux de prix, vous commencez généralement par sélectionner une section à plusieurs colonnes. Le nombre de colonnes dépendra du nombre de produits/services/plans de comparaison.

La structure la plus courante est un tableau à trois colonnes avec des colonnes égales :
Widget de tableau de prix pour Elementor

Étape 2 : Insérez le widget dans votre page

Après avoir sélectionné la mise en page préférée, recherchez le widget Tableau des prix dans la liste des widgets Strate. Maintenant, vous devez faire glisser le widget vers chaque colonne :

Le widget est livré avec un contenu par défaut pour une meilleure représentation visuelle :
Widget de tableau de prix pour Elementor

Étape 3 : Personnalisez le contenu

Les paramètres de contenu sont au cœur de ce widget. Dans le tableau des prix, vous pouvez placer:

  • Titre & sous-titre
  • Texte du prix et sous-titre du prix
  • Valeur de prix
  • Devise et alignement des devises
  • Description du prix
  • Éléments de liste (illimités)
  • Un bouton renvoyant vers une page

Tout le contenu textuel fournit des paramètres de typographie (police, taille, style, décoration, etc.) avec la possibilité de personnaliser la hauteur de ligne, l'espacement des lettres et l'espacement des mots.

La section de liste vous permet d'insérer un nombre illimité de fonctionnalités. Tous peuvent être complétés par une icône d'élément individuel si nécessaire.
Contenu du widget Tableau des prix

Étape 4 : Personnalisez le style

Dans les paramètres de style, vous pouvez ajuster une couleur individuelle à chaque section de texte et bouton :
Style du widget du tableau des prix

Étape 5 : Utiliser les paramètres avancés

Enfin, utilisez l'onglet Avancé pour configurer les marges et le remplissage, appliquer des effets de mouvement, choisir l'arrière-plan, appliquer des bordures, etc.

Au fait, au lieu de modifier chaque colonne individuellement, vous dupliquez la conception entière du widget dans la colonne suivante. Cela vous fera gagner du temps et des efforts pour rendre ces colonnes identiques dans leur conception.

Ainsi, après quelques ajustements, votre tableau de comparaison de produits WordPress pourrait ressembler à ceci :
Exemple de widget de tableau de prix

PS Les utilisateurs de Stratum PRO peuvent profiter du widget Advanced Table. Voici à quoi peut ressembler le widget Stratum Table sur un site Web :
Plugin de tableau de comparaison Stratum WordPress
En savoir plus sur ce widget Advanced Table Elementor sur le lien.

Plugin gratuit de tableau de comparaison WordPress pour Gutenberg

Pour la partie Gutenberg, nous utiliserons Getwid - une bibliothèque gratuite de plus de 40 blocs polyvalents pour Gutenberg.

Par rapport aux blocs Gutenberg de base, les éléments Getwid sont plus avancés en termes de fonctionnalité et de style. Il existe de nombreux blocs uniques avec des fonctionnalités personnalisées :
Blocs Getwid
Faits saillants de Getwid :

  • Plus de 40 blocs polyvalents
  • Plus de 35 modèles prédéfinis
  • Blocs orientés métier
  • édition en ligne avec plusieurs paramètres dans chaque bloc
  • interaction parfaite avec n'importe quel thème WP
  • paramètres de configuration intelligents
  • tutoriels vidéo étape par étape

Voir la démo de Getwid.

Bloc de boîte de prix Getwid

Alternativement au widget Price Table, Getwid fournit un bloc Price Box presque identique pour afficher les tableaux de prix et de comparaison.

Les paramètres de bloc incluent les paramètres de contenu et de style pour les titres, etc. Vous pouvez modifier le bloc en mode réel :
boîte de prix pétotel

En savoir plus sur la boîte de prix pour Gutenberg ici.

Bloc de table avancé Getwid

Avec le prochain bloc Advanced Table, Getwid peut compléter un plugin de tableau personnalisé WordPress complet.

Pour insérer le bloc, allez dans l'éditeur Gutenberg et cliquez sur "+". Recherchez Advanced Table dans la liste des blocs Getwid et cliquez pour insérer.

Sélectionnez le nombre nécessaire de lignes et de colonnes.

Vous pouvez maintenir la touche Ctrl enfoncée pour sélectionner plusieurs cellules. Maintenez la touche Maj enfoncée pour sélectionner la plage :
Tableau comparatif des produits Getwid

Maintenant, accédez aux paramètres du tableau et personnalisez la mise en page et le contenu :

  1. Sélectionnez une disposition de tableau : par défaut, automatique ou fixe ;
  2. Laissez ou supprimez les bordures de tableau par défaut ;
  3. Insérer l'en-tête et le pied de page du tableau ;
  4. Configurez les couleurs globales d'arrière-plan et de texte (avec la possibilité d'appliquer une couleur personnalisée à chaque cellule);
  5. Choisissez l'alignement horizontal et vertical :
  6. Choisissez l'alignement du contenu ;
  7. Personnalisez les couleurs du texte et de l'arrière-plan ;
  8. Ajoutez et personnalisez des bordures de tableau (facultatif) ;
  9. Appliquer des rembourrages pour les cellules choisies.

Complet!

Voici l'un des nombreux exemples de tableaux de comparaison de produits que Getwid peut répliquer :
Tableau comparatif des produits Getwid

Dernier mot sur les plugins de tableau de comparaison WordPress

Vous savez maintenant comment créer gratuitement un tableau de comparaison dans WordPress. Comme vous pouvez le constater, Stratum et Getwid vous offrent des fonctionnalités de qualité supérieure sans frais. Les plugins ont la courbe d'apprentissage et l'interface visuelle les plus simples pour assurer une personnalisation en temps réel.