Tableau de comparaison

Les gens créent des tableaux de comparaison pour comparer et contraster facilement différents produits, services ou options. C'est possible sans codage, vous pouvez choisir un plugin efficace et créer le tableau de comparaison souhaité pour un site WordPress.

ElementsKit est un plugin tellement efficace qui vous offre un Widget de tableau de comparaison. Voyons comment utiliser le widget de tableau de comparaison ElementsKit pour créer un tableau de comparaison rapide.

Utilisation du widget de tableau de comparaison d'ElementsKit #

Installez le plugin ElementsKit pro et commencez à organiser n’importe quel tableau de comparaison selon vos préférences.

👉👉👉 Installer maintenant!

À partir du tableau de bord WordPress, vous devez ouvrir n’importe quelle ancienne page ou publication pour afficher le tableau de comparaison. Vous pouvez également créer une nouvelle page ou une nouvelle publication.

Commencez à modifier la page/la publication souhaitée avec Elementor -> Rechercher le widget Tableau de comparaison -> Faites-le glisser et déposez-le

Tableau de comparaison Elementskit

En-tête du tableau #

Dans le section de contenu, il existe une option de réglage de l'en-tête du tableau.

Définir l'en-tête du tableau avec le tableau de comparaison Elementskit

Si vous développez le nom d'un titre, vous obtiendrez ces options de réglage :

  • Largeur de cellule – Option de réglage de la largeur des cellules.
  • Nom de la cellule – Ici, vous pouvez donner un nom à la cellule, styliser le texte, ajouter une image, etc.
  • Ajouter une URL ? – Si besoin vous pouvez joindre une URL à la rubrique
  • Taper – Cela peut être une icône, une image ou rien.
  • Position – Option de réglage de la position de l’icône/image. Les options sont – Avant, Après, Haut et Bas.
  • Bouton – Ajoutez un bouton au titre si vous le souhaitez.
  • Alignement – Il s’agit du système d’alignement du texte de titre.
Le tableau de comparaison ElementsKit offre diverses options de personnalisation

Corps du tableau #

C'est la partie du corps de la table.

Définir le corps du tableau avec le tableau de comparaison Elementskit

Si vous développez chaque nom de corps, vous verrez les mêmes options que la section de titre. Cependant, vous obtiendrez ici une option supplémentaire, nommée Nouvelle ligne. En utilisant cette option, vous pouvez convertir les lignes en colonnes.

Convertit une colonne en ligne.

Bouton Tableau #

Parfois, l'ajout de boutons à un tableau de comparaison, comme un bouton CTA attrayant, rend le tableau plus utile.

Utilisez cette option pour ajouter autant de boutons que nécessaire. Développer un bouton vous donnera des options appelées Titre et lien.

Bouton Définir le tableau de comparaison

Bouton Comparer #

Dans cette section, vous avez la possibilité d'ajouter un bouton de comparaison au tableau.

  • Style de bouton – Il existe deux options de style : le style Tab et le style Inline.
  • Bouton de différence – Vous pouvez modifier le texte du bouton ici.
  • Position - Vous pouvez modifier la position du bouton ici.

Voir les fonctionnalités de personnalisation ci-dessous –

Choisissez le style, le texte et la position du bouton de comparaison

Style #

  • Emballage – En utilisant cette option de style, vous pouvez modifier le type d'arrière-plan des cellules, l'ombre de la bordure, le rayon de la bordure, etc.
  • Contenu du tableau – Pour le contenu du tableau, vous trouverez des options de conception telles que le type d'arrière-plan, le type de bordure, le remplissage, la marge, etc.
  • Titre du tableau – Vous pouvez personnaliser la taille de la police de l'icône, le rayon de la bordure, l'en-tête du tableau, etc. pour le titre.
  • Corps du tableau – Vous pouvez styliser le corps en ajustant la taille de la police de l'icône, l'arrière-plan de la ligne impaire, la ligne du corps du tableau, etc. dans cette option.
  • Bouton de cellule d’en-tête de tableau – Cette section vous fournira des options de réglage de la couleur du texte, de l'ombre de la boîte, du remplissage, de la marge, etc.
  • Bouton de cellule du corps du tableau – Concevez les boutons des cellules du corps en modifiant la couleur du texte, l'ombre de la boîte, l'alignement, etc.
  • Bouton Tableau – Si vous souhaitez rendre le bouton attrayant, personnalisez la typographie, la couleur du texte, la couleur de l'arrière-plan, etc.
  • Bouton Comparer – Les options de style sont les mêmes que celles du bouton de tableau ici.
Stylisez votre tableau de comparaison avec les multiples options de style d'EleemntsKit

Vérifiez votre tableau de comparaison #

Après avoir créé un tableau comparatif selon vos besoins, vous devez mettre à jour la page/la publication.

Vous avez terminé!

Votre tableau comparatif est prêt

Vous pouvez désormais créer votre tableau comparatif en présentant les informations de manière claire et organisée.

Quels sont tes sentiments
Mis à jour le 8 octobre 2023