Comment créer un tableau de comparaison de produits dans WordPress

Les tableaux de comparaison de produits sont omniprésents lorsque vous faites des achats en ligne. Qu'il s'agisse d'un site de commerce électronique ou d'un blog, les tableaux comparatifs vous aident à comprendre ce qu'offrent les différents produits. Ils vous aident également à prendre des décisions d'achat plus éclairées. 

Si vous utilisez un blog affiliéVous comprenez particulièrement bien l'importance des tableaux de comparaison de produits. Grâce à ces tableaux, vous pouvez comparer les différents produits sur votre page et obtenir davantage de commissions d'affiliation. 

Creating a table to attractively compare products is quite simple and doesn’t take a whole lot of time. But it’s important that the comparison table you create is engaging to the reader. Your comparison table should inspire the user to take action – whether it’s to purchase a product or just click on the purchase link. 

In this article, we’ll show you how to create an awesome product comparison table in WordPress. Let’s get started! 

Comment créer un tableau de comparaison de produits en utilisant WP Table Builder

Nous allons créer l'exemple de tableau suivant dans ce tutoriel :

Though relatively bare-bones for our purposes, this table has every element that comparison tables usually have. We’ll explain each section in detail to help you create the exact table as shown above. 

La première étape de ce tutoriel commence par l'installation d'un plugin. 

Étape #1 : Installer le plugin WP Table Builder 

Nous utiliserons le WP Table Builder Plugin. Il s'agit d'un constructeur de tableaux gratuit par glisser-déposer. Ce constructeur est parfait pour créer des tableaux de comparaison et dispose d'un grand nombre d'options de personnalisation, y compris les éléments suivants :

• Texte
• Image
• Bouton
• Classement par étoiles
• Liste

Pour installer le plugin, rendez-vous sur votre site WordPress tableau de bord > plugins. Cliquez sur Ajouter un nouveauet rechercher WP Table Builder. Cliquez sur installer et activer pour installer le plugin sur votre site web :

Vous pouvez également télécharger le plugin à partir de l'adresse suivante Dépôt WordPress et le télécharger sur votre site web. 

Étape #2 : Créer un nouveau tableau

Pour créer un nouveau tableau dans le plugin WP Table Builder, allez d'abord sur Constructeur de tableau > Ajouter un nouveau. 

Vous verrez le constructeur de tableau par glisser-déposer comme indiqué ci-dessous : 

Vous pouvez donner un nom à votre tableau et définir le nombre de lignes et de colonnes. Une fois cela fait, cliquez sur le bouton générer . Vous obtiendrez ainsi le tableau illustré ci-dessous : 

Étape #3 : Ajouter du contenu à votre tableau

Now it’s time to add content to your table. WP Table Builder lets you drag and drop elements to the cells of your table. You can select the elements from the left sidebar and drag them to your table. Here’s how our table looks after adding content: 

We’ve used just the texte, imageet bouton pour créer le tableau. Comme vous pouvez le constater, le résultat est propre et beau. 

Now we’re going to show you how you can make your table even more attractive using this plugin. 

Étape #4 : Faites en sorte que votre tableau soit beau et réactif

There are many ways you can make your table look gorgeous in WP Table Builder. This plugin also has tons of customization options to help you make your table more engaging. Let’s get started. 

Configuration de la bordure du tableau

WP Table Builder vous permet d'ajouter une bordure à votre tableau. Vous pouvez trouver cette option dans les paramètres du tableau sur la gauche. Vous pouvez définir la taille de la bordure, changer sa couleur, et également appliquer une bordure intérieure à votre tableau :

Rembourrage des cellules

L'option de remplissage des cellules modifie le remplissage de chaque cellule de votre tableau :

Fond d'en-tête 

Vous pouvez également personnaliser la couleur d'arrière-plan de l'en-tête de votre tableau pour lui donner un peu plus de style :

Pour ce tableau, j'ai réglé l'arrière-plan de l'en-tête sur blanc afin que les logos se fondent bien. 

Arrière-plan des rangs pairs/impairs

Les couleurs alternatives pour les lignes sont très populaires dans les tableaux de comparaison de produits, et vous pouvez les appliquer facilement avec le plugin WP Table Builder :

Maintenant que votre tableau est magnifique sur un ordinateur de bureau, vous devez également veiller à ce qu'il soit parfait sur les appareils mobiles. 

Ce qui est génial, c'est que vous n'avez pas besoin de faire beaucoup de démarches. Tout ce que vous avez à faire est de cliquer sur le bouton Rendre le tableau réactif toggle. Votre tableau sera ainsi plus attractif et plus attrayant sur les appareils mobiles :

Enfin, activez la fonction Rangée supérieure comme en-tête pour que la ligne supérieure devienne l'en-tête du tableau. 

Votre table est enfin prête à être utilisée ! 

Étape #5 : Insérer le tableau via un code court

Maintenant que votre tableau est prêt, vous devez l'insérer dans votre contenu. Vous pouvez le faire facilement en insérant le shortcode du plugin. 

To find the table’s shortcode, click on the Embarquer en haut du générateur de tableaux. Cela ouvrira une fenêtre contextuelle contenant le shortcode :

Vous pouvez maintenant copier et coller ce shortcode n'importe où dans votre contenu. 

Une autre façon de trouver le shortcode du tableau est d'aller sur Constructeur de tableaux > Tous les tableaux. Vous y trouverez tous les tableaux que vous avez créés :

As you can see, you can copy the table’s shortcode right from this page. 

Conclusion

Si vous vous demandiez auparavant comment créer un tableau de comparaison de produits dans WordPress, vous voyez maintenant à quel point le processus est facile. Avec le plugin WP Table Builder, tout le processus de création d'un tableau engageant est simplifié et peut être réalisé en quelques minutes. 

Il existe de nombreuses options de personnalisation qui vous permettent de concevoir l'aspect et la convivialité de la table que vous créez.

If you have any questions about this tutorial, please ask them in the comments section below. We’re happy to help!

Si vous avez aimé cet article, n'oubliez pas de nous suivre sur Twitter, Instagram, Facebook, Pinterestet LinkedIn! And don’t forget to subscribe in the box below.

Divulgation des liens d'affiliation