Les tableaux sont un élément clé de la plupart des sites web. Vous pouvez les utiliser pour partager toutes sortes d’informations, des prix aux listes de fonctionnalités et aux liens. WordPress vous permet de configurer des tableaux de base pour votre site web, mais vous recherchez peut-être davantage d’options de personnalisation.

Avec Elementor, vous avez accès à de multiples widgets de tableaux. De plus, il existe de nombreuses extensions Elementor de tableaux qui ajoutent de nouveaux widgets au populaire constructeur de pages.

Dans cet article, nous allons parler du fonctionnement des tableaux WordPress et de leur comparaison avec les widgets Elementor. Ensuite, nous vous montrerons comment créer des tableaux Elementor manuellement, et nous vous présenterons quelques extensions qui ajoutent de nouveaux widgets de tableau à l’éditeur. C’est parti !

Quand utiliser les tableaux WordPress

Dès que vous commencerez à les chercher, vous remarquerez que les tableaux sont partout sur le web. C’est parce qu’ils font partie des éléments les plus polyvalents que vous pouvez utiliser dans un site web.

Prenez les tableaux de prix, par exemple. Il est difficile de trouver un site web de services ou d’abonnements qui n’utilise pas de tableaux pour vous aider à comparer les options :

Tableaux de prix sur Kinsta
Tableaux de prix sur Kinsta

Les tableaux vous permettent de présenter de grandes quantités d’informations d’une manière facile à digérer pour les lecteurs. Mieux encore, les tableaux permettent aux utilisateurs de comparer plus facilement plusieurs ensembles de données entre eux :

Comparaison de plusieurs ensembles de données
Comparaison de plusieurs ensembles de données

En plus de vous aider à partager des informations, les tableaux peuvent également contribuer à rompre la monotonie des longs paragraphes d’un article de blog ou d’une page. En général, nous vous recommandons d’éviter les longs murs de texte, car il peut être difficile d’y naviguer.

L’éditeur de blocs vous offre la possibilité d’ajouter des tableaux à votre site web en toute simplicité. Le module Tableau vous permet de définir le nombre de lignes et de colonnes dont vous avez besoin :

Tableaux de l'éditeur de blocs WordPress
Tableaux de l’éditeur de blocs WordPress

Bien que l’ajout de tableaux dans WordPress soit facile, vous êtes quelque peu limité quant aux options de personnalisation. Vous pouvez changer les couleurs d’arrière-plan, personnaliser les styles de boutons et modifier la taille des polices, mais c’est à peu près tout. Si vous voulez créer des tableaux plus élégants et plus complexes, vous devrez utiliser un constructeur de pages tel qu’Elementor (ou même Divi).

Ce qu’un tableau Elementor peut faire

Si vous souhaitez aller au-delà des tableaux WordPress de base, Elementor vous donne accès à un widget de tableau de prix hautement personnalisable. Cela vous permet de modifier les titres des tableaux, de définir des balises d’en-tête, d’ajouter des listes de caractéristiques, de peaufiner les appels à l’action (CTA), et plus encore :

Widget Elementor de tableau des prix
Widget Elementor de tableau des prix

N’oubliez pas qu’avec Elementor, vous pouvez créer tout type de mise en page que vous souhaitez pour n’importe quelle page ou article. Cela signifie que vous pouvez mettre en place des conceptions multi-colonnes afin d’avoir plusieurs widgets de tableau des prix côte à côte :

Widgets de tableau de prix côte à côte dans Elementor
Widgets de tableau de prix côte à côte dans Elementor

Elementor est également livré avec un widget de table des matières. Cela permet de faciliter la navigation dans le contenu long format pour vos lecteurs.

Comment créer un tableau Elementor (manuellement)

Créer un tableau de prix à l’aide d’Elementor est simple. Pour commencer, ouvrez l’éditeur Elementor. À partir de là, vous pouvez choisir de commencer avec une page vierge ou d’importer un modèle de la bibliothèque Elementor :

Choisissez une page ou un modèle dans la bibliothèque Elementor
Choisissez une page ou un modèle dans la bibliothèque Elementor

Lorsque vous êtes prêt à ajouter l’élément, vous voudrez sélectionner le nombre de colonnes que vous voulez que le tableau ait. Cliquez sur le signe plus d’Elementor en bas de l’éditeur et sélectionnez la structure de colonnes que vous souhaitez utiliser pour la section des prix :

Sélectionnez le nombre de colonnes que vous souhaitez
Sélectionnez le nombre de colonnes que vous souhaitez

N’oubliez pas que si vous utilisez plusieurs colonnes, vous devrez ajouter un widget Tableau des prix distinct dans chacune d’elles. Bien que chaque tableau soit un élément unique, les utilisateurs les verront côte à côte (ou l’un en dessous de l’autre sur mobile) comme faisant partie d’une seule section :

Ajoutez plusieurs widgets de tableau si nécessaire
Ajoutez plusieurs widgets de tableau si nécessaire

Nous vous recommandons d’ajouter un seul module Tableau des prix et de le styliser en premier. Ensuite, vous pouvez dupliquer ou copier cet élément dans les autres colonnes, et ajouter un texte unique à chacune d’elles.

Pour personnaliser le tableau, sélectionnez l’élément et passez à l’onglet Style sous les réglages du widget. Elementor vous offre de nombreuses options de style. Celles-ci comprennent la sélection des couleurs, les réglages de typographie et des configurations uniques pour chaque section du tableau :

Personnalisez le tableau à l'aide des options de style d'Elementor
Personnalisez le tableau à l’aide des options de style d’Elementor

Une fois que vous êtes satisfait du style du tableau des prix, cliquez avec le bouton droit de la souris sur l’élément et sélectionnez l’option Dupliquer. Une copie du tableau apparaîtra sous l’élément original, et vous pourrez la faire glisser dans l’une des colonnes vides :

Dupliquez votre tableau pour gagner du temps
Dupliquez votre tableau pour gagner du temps

Vous voudrez répéter ce processus pour autant de colonnes que vous avez. N’oubliez pas que chaque tableau peut avoir un style unique si vous préférez ne pas réutiliser les réglages. Dans ce cas, assurez-vous que les styles sont suffisamment similaires pour que les visiteurs comprennent qu’ils sont en train de regarder une comparaison.

Pendant la personnalisation de votre tableau, n’oubliez pas qu’Elementor vous permet d’ajouter des CSS personnalisés à n’importe quel module. Pour ce faire, allez dans les réglages avancés du widget et sélectionnez l’onglet CSS personnalisé :

Ajouter un CSS personnalisé
Ajouter un CSS personnalisé

L’ajout de CSS personnalisé par le biais d’Elementor est beaucoup plus facile que l’édition manuelle du code WordPress. De même, la modification du CSS dans WordPress vous oblige à accéder aux fichiers du thème et à optimiser le code pour des performances optimales. Avec Elementor, il vous suffit d’ajouter le code CSS dans le champ correspondant pour chaque module.

Si l’ajout manuel de CSS vous semble intimidant, ne vous inquiétez pas. Apprendre le CSS ne vous oblige pas à être un développeur web. Cependant, il s’agit d’une compétence précieuse qui vous aidera à personnaliser vos sites WordPress (et peut-être même à trouver une carrière dans le développement web).

Une fois que tous vos tableaux sont définis, il est temps de modifier leur texte et d’ajouter autant de fonctionnalités que vous le souhaitez pour chaque entrée. Vous pouvez le faire en sélectionnant un tableau et en passant à l’onglet Contenu sous les réglages du widget :

Modifier le texte du tableau et les autres contenus du tableau
Modifier le texte du tableau et les autres contenus du tableau

Il est facile de modifier le contenu de vos tableaux de prix. Vous pouvez cliquer sur n’importe quel élément du widget pour commencer à le modifier. Une fois que vous êtes satisfait du résultat, vos tableaux de prix sont prêts à être utilisés.

Les meilleurs plugins de tableaux Elementor (12 options)

Bien qu’Elementor contienne de nombreux outils pour vous aider à créer des tableaux, vous pouvez toujours ajouter d’autres widgets à la liste. Dans cette section, nous allons examiner 12 extensions Elementor que vous pouvez utiliser pour ajouter de nouveaux types de tableaux à vos articles et pages. Même si un grand nombre de ces modules complémentaires sont conçus pour Elementor, vous pouvez les installer comme des extensions ordinaires.

Comme toujours, nous ne recommandons que les meilleures extensions WordPress de leur catégorie, qui offrent d’excellentes performances et qui sont régulièrement mis à jour. L’utilisation d’extensions bien optimisées vous aidera à faire évoluer votre site web sans rencontrer de problèmes de performance.

1.ElementsKit Add-Ons for Elementor

ElementsKit
ElementsKit

ElementsKit ajoute plus de 85 widgets à Elementor. Vous disposez d’options pour les tableaux de base, les tableaux de prix, la prise en charge de l’intégration d’éléments TablePress, et plus encore.

La version professionnelle d’ElementsKit comprend également un widget de tableaux avancés. Celui-ci vous permet d’ajouter des fonctions de recherche et de filtre aux tableaux. De plus, vous pouvez inclure la pagination afin que les utilisateurs puissent naviguer dans les entrées sans avoir des tableaux massifs sur votre site web.

Caractéristiques principales :

  • Trois types de widgets de tableau
  • Prise en charge du filtrage, de la recherche et de la pagination des tableaux
  • Intégration avec TablePress pour l’incorporation de tableaux

Prix : Les licences d’ElementsKit commencent à 39 $ par an.

2. WP Table Builder

WP Table Builder
WP Table Builder

Si vous êtes un fan des éditeurs de type glisser-déposer (ce que vous devriez être si vous utilisez Elementor), vous apprécierez d’utiliser WP Table Builder. Cette extension vous permet de construire des tableaux à l’aide d’éléments pré-configurés tels que des boutons, des sections d’avis, des évaluations de produits, et plus encore.

En plus des éléments avancés, vous avez accès aux modules de base, comme le texte et les images. L’extension est également livrée avec des modèles de tableaux, qui vous simplifieront encore plus le travail.

Vous pouvez ajouter des tableaux WP Table Builder à votre site web à l’aide de l’éditeur de blocs. L’extension s’intègre également à Elementor, ce qui vous permet de placer facilement des tableaux n’importe où dans votre site Web.

Caractéristiques principales :

  • Utilisation d’un constructeur de tableau par glisser-déposer
  • Accédez à des éléments pré-construits tels que des boutons, des sections d’évaluation et des évaluations de produits
  • Personnalisez le style de chaque élément de vos tableaux
  • Utilisez des modèles de page pré-établis

Prix : Les licences de WP Table Builder commencent à 39 $ par an.

3. TablePress

TablePress
TablePress

TablePress est une extension gratuite qui se rapproche le plus de l’ajout d’une fonctionnalité de feuille de calcul à WordPress. L’extension peut importer des données dans plusieurs formats, y compris Excel, CSV, et les fichiers JSON. Vous pouvez même exporter des données de tableau pour d’autres programmes.

Avec TablePress, vous pouvez créer des tableaux qui incluent une fonctionnalité de recherche. Les utilisateurs peuvent choisir le nombre d’entrées à afficher et se déplacer de page en page si vous affichez des ensembles de données massifs.

Intégrer des tableaux TablePress avec Elementor est simple. L’extension crée des codes courts uniques pour chaque tableau. Le widget Code court d’Elementor vous aidera à ajouter ces codes n’importe où sur votre site web.

Caractéristiques principales :

  • Importez et exportez des ensembles de données aux formats Excel, CSV, JSON et HTML
  • Ajoutez des tableaux interrogeables à WordPress
  • Activez la pagination pour les tableaux

Prix : TablePress est une extension gratuite mais vous pouvez trouver des extensions premium pour lui.

4. Essential Addons for Elementor

Essential Addons for Elementor
Essential Addons for Elementor

Essential Addons pour Elementor ajoute plus de 80 nouveaux widgets au constructeur de pages. Vous avez des options pour les tableaux de prix, les tableaux de données, les tables des matières, et plus encore.

Essential Addons for Elementor existe en deux versions. L’extension gratuite ajoute une meilleure version du widget de tableau de prix livré avec Elementor. Si vous voulez accéder aux tableaux de données (qui incluent le filtrage, la recherche et des styles multiples), vous devrez payer une licence premium.

Caractéristiques principales :

  • Ajoutez des widgets de tableaux de prix, de données et de contenu
  • Activez la recherche et le filtrage dans les tableaux

Prix : Il existe une version gratuite d’Essential Addons for Elementor et les licences premium commencent à 39,97 $ par an.

5. PowerPack for Elementor

PowerPack for Elementor
PowerPack for Elementor

PowerPack for Elementor ajoute plus de 70 widgets au constructeur de pages. L’extension comprend également un grand nombre de nouveaux modèles que vous pouvez utiliser pour concevoir des sites web plus rapidement.

En ce qui concerne les tableaux, PowerPack vous permet de mettre en place des tableaux de données triables et consultables. Vous pouvez importer des données dans les tableaux en utilisant des fichiers CSV. L’extension comprend également plusieurs options de modèles de tableaux.

Au-delà des tableaux de données, PowerPack propose des widgets de tableaux d’informations et de prix. Les tableaux d’information sont parfaits si vous souhaitez fournir aux visiteurs une ventilation des services que vous proposez.

Caractéristiques principales :

  • Créez des tableaux de données triables et consultables
  • Importez des tableaux de données au format CSV
  • Ajouter des widgets de table de prix et d’information

Prix : Les licences PowerPack commencent à 44 $ par an.

6. Exclusive Addons for Elementor

Exclusive Addons for Elementor
Exclusive Addons for Elementor

Exclusive Addons for Elementor existe en version gratuite et premium. L’extension gratuite ajoute 39 nouveaux widgets à Elementor, tandis qu’une licence premium vous permettra d’obtenir plus de 69 nouveaux éléments.

En ce qui concerne les tableaux, la version gratuite ajoute un nouveau module de tableau de prix au mélange. Avec la version premium, vous avez accès à des tableaux de comparaison et de données. Les tableaux de comparaison fonctionnent de manière similaire aux éléments de tarification, mais vous pouvez utiliser de nouvelles mises en page et de nouveaux styles.

Caractéristiques principales :

  • Ajoutez un nouveau module de tableau des prix
  • Accédez aux tableaux de comparaison et de données
  • Accédez à plusieurs mises en page pour les widgets de tableau

Prix : Il existe une version gratuite d’Exclusive Addons for Elementor. Les licences premium commencent à 29 $ par an.

7. JetElements

JetElements
JetElements

JetElements ajoute 45 nouveaux widgets à Elementor. La plupart d’entre eux sont destinés aux sites web de commerce électronique et d’abonnement. Cependant, JetElements inclut également plusieurs widgets de tableau intéressants dans sa liste.

Parmi ces widgets, vous avez des tableaux de prix et des tableaux réactifs. Par rapport aux tableaux de tarification de base dans Elementor, la version JetElements vous donne beaucoup de nouvelles options de personnalisation. Par exemple, vous pouvez jouer avec de nombreux effets visuels tels que le parallaxe et les micro-animations pour les éléments de table.

Caractéristiques principales :

  • Ajoutez des tableaux de prix et des tableaux réactifs à Elementor
  • Personnalisez les tableaux en utilisant de nouveaux effets visuels, tels que le parallaxe

Prix : Les licences tout compris de JetElements commencent à 130 $ par an. Vous pouvez également créer des packs de widgets personnalisés, en choisissant uniquement les options que vous souhaitez utiliser.

8. Premium Addons for Elementor

Premium Addons for Elementor
Premium Addons for Elementor

Premium Addons for Elementor existe en version gratuite et premium. Cependant, seul l’extension premium ajoute de nouveaux widgets de tableau à Elementor.

Si vous payez pour une licence premium, vous aurez accès à de nouveaux widgets de tableaux de données et de prix. Vous pouvez accompagner les tableaux de données de widgets de diagrammes et de graphiques si vous souhaitez afficher plus d’informations pour vos visiteurs.

Caractéristiques principales :

  • Ajouter des widgets de tableaux de données et de prix à Elementor
  • Accompagnez les tableaux avec des widgets de tableau et de graphique

Prix : Les licences pour les Premium Addons for Elementor commencent à 39 $ par an.

9. DataMentor

DataMentor
DataMentor

DataMentor est une extension qui ajoute un widget de tableau unique à Elementor. Cependant, ce widget offre beaucoup plus de fonctionnalités que la plupart des modules que nous avons vus jusqu’à présent.

Les tableaux DataMentor sont incroyablement polyvalents. Vous pouvez ajouter des images, des boutons, des listes et des icônes dans chaque élément. Le widget vous permet de créer des tableaux avec des styles individuels pour chaque colonne ou ligne. Vous avez également accès à plusieurs modèles de tableaux si vous souhaitez donner un coup de pouce au processus de conception.

Caractéristiques principales :

  • Ajoutez un nouveau widget de tableau à Elementor
  • Accédez à plusieurs modèles de tableaux
  • Ajouter des images, du texte, des boutons, des listes et des icônes dans les tableaux

Prix : DataMentor est une extension gratuite.

10. Happy Addons for Elementor

Happy Addons for Elementor
Happy Addons for Elementor

Happy Addons for Elementor est l’une des extensions les plus complètes pour le constructeur de pages. Cet outil ajoute plus de 99 widgets à Elementor et une large collection de nouveaux modèles à sa bibliothèque.

En ce qui concerne les tableaux, Happy Addons comprend des widgets de tableau de base et avancés. La version avancée prend en charge les données importées dans plusieurs formats, ainsi que la recherche, le filtrage et la pagination. De plus, vous avez accès à plusieurs mises en page de tableaux pré-conçues. En plus de ces options, Happy Addons inclut également des éléments de tableau de prix et de comparaison.

Caractéristiques principales :

  • Accédez aux widgets de tableau de base et avancés
  • Importez des données pour les tableaux avancés
  • Utilisez des mises en page de tableau préconçues
  • Ajoutez des tableaux de prix et de comparaison

Prix : Il existe une version gratuite de Happy Addons. Les licences Premium commencent à 39 $ par an.

11. Royal Elementor Addons

Royal Elementor Addons
Royal Elementor Addons

Royal Elementor Addons ajoute plus de 40 nouveaux widgets à Elementor. Ceux-ci sont tous gratuits, mais l’extension existe également en version premium qui débloque des options de personnalisation supplémentaires pour chaque widget.

Avec Royal Elementor Addons, vous obtenez un nouveau tableau de prix à utiliser dans Elementor. Ce widget comprend plusieurs nouvelles options de style. De plus, il est doté d’une option à bascule que les visiteurs peuvent utiliser pour basculer entre les prix mensuels et annuels (ou d’autres options).

Caractéristiques principales :

  • Ajoutez un nouveau widget de tableau de prix à Elementor
  • Personnalisez les tableaux de prix avec de nouvelles options de style
  • Ajoutez une bascule de prix à vos tableaux

Prix : Royal Elementor Addons est gratuit. Les licences Premium coûtent 29 $ par site web (c’est un frais unique).

12. Elémentor Addon Elements

Elementor Addon Elements
Elementor Addon Elements

Elementor Addon Elements est une extension gratuite qui ajoute plus de 24 nouveaux widgets à Elementor. Parmi eux, vous avez des options pour les tableaux de prix, de comparaison et de données.

Les tableaux de prix comprennent de nombreuses options de personnalisation supplémentaires que le widget Elementor par défaut n’offre pas. En ce qui concerne les tableaux de données, vous pouvez choisir de créer des éléments consultables ou filtrables. De plus, les tableaux prennent en charge les animations, ce qui peut les rendre beaucoup plus attrayants visuellement.

Caractéristiques principales :

  • Ajoutez des tableaux de prix, de comparaison et de données à Elementor
  • Choisissez entre des tableaux de données filtrables et consultables
  • Ajoutez des animations aux tableaux de données

Prix : Elementor Addon Elements est gratuit.

Résumé

Elementor vous fournit une large gamme d’outils pour créer des tableaux WordPress élégants et complexes. Un grand nombre d’extensions WordPress de tableaux sont également compatibles avec Elementor, ce qui signifie que le constructeur de pages vous permet d’ajouter presque tous les types de tableaux que vous souhaitez à votre site web.

Le constructeur de pages Elementor est livré avec un widget de tableau de prix intuitif. Si vous souhaitez ajouter d’autres types de tableaux, nous vous recommandons d’utiliser les extensions Elementor de tableau telles que ElementsKit ou WP Table Builder.

Kinsta CDN est un CDN haute performance disponible pour tous les clients Kinsta sans frais supplémentaires. Il est propulsé par notre intégration Cloudflare gratuite et sert automatiquement votre contenu à partir de plus de 200 PoP à travers le monde. Si vous avez des questions sur le CDN Kinsta, n’hésitez pas à contacter notre équipe de support 24/7 pour plus d’aide !

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).