Comment créer une table Elementor dans WordPress

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 de 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 à plusieurs widgets de table. De plus, il existe de nombreux plugins de table Elementor qui ajoutent de nouveaux widgets au constructeur de pages populaire.

Dans cet article, nous parlerons du fonctionnement des tableaux WordPress et de leur comparaison avec les widgets Elementor. Ensuite, nous vous montrerons comment créer manuellement des tables Elementor et vous présenterons quelques plugins qui ajoutent de nouveaux widgets de table à l'éditeur. Allons-y !

Quand utiliser les tableaux WordPress

Une fois que vous aurez commencé à 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 service ou d'abonnement qui n'utilise pas de tableaux pour vous aider à comparer les options :

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 :

En plus de vous aider à partager des informations, les tableaux peuvent également aider à rompre la monotonie des longs paragraphes dans un article de blog ou une page. En règle générale, nous vous recommandons d'éviter les longs murs de texte car ils peuvent être difficiles à parcourir.

L'éditeur de blocs vous offre la possibilité d'ajouter facilement des tableaux à votre site Web. Le bloc Table vous permet de définir le nombre de lignes et de colonnes dont vous avez besoin :

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

Ce qu'une table Elementor peut faire

Si vous souhaitez aller au-delà des tableaux WordPress de base, Elementor vous donne accès à un widget Tableau des 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 fonctionnalités, de modifier les appels à l'action (CTA), etc. :

N'oubliez pas qu'avec Elementor, vous pouvez créer n'importe quel type de mise en page que vous souhaitez pour n'importe quelle page ou publication. Cela signifie que vous pouvez configurer des conceptions à plusieurs colonnes afin d'avoir plusieurs widgets Price Table côte à côte :

Elementor est également livré avec un widget Table des matières . Cela facilite grandement la navigation dans le contenu long pour vos lecteurs.

Comment créer une table Elementor (manuellement)

La création d'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 :

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

Gardez à l'esprit que si vous utilisez plusieurs colonnes, vous devrez ajouter un widget Price Table distinct dans chacune d'elles. Bien que chaque tableau soit un élément unique, les utilisateurs les verront côte à côte (ou en dessous les uns des autres sur mobile) dans le cadre d'une section :

Nous vous recommandons d'ajouter un module Price Table et de le styliser en premier. Ensuite, vous pouvez dupliquer ou copier cet élément dans les colonnes restantes et ajouter un texte unique à chacune.

Pour personnaliser le tableau, sélectionnez l'élément et accédez à l'onglet Style sous les paramètres du widget. Elementor vous offre de nombreuses options de style. Ceux-ci incluent la sélection des couleurs, les paramètres de typographie et des configurations uniques pour chaque section du tableau :

Une fois que vous êtes satisfait du style du tableau des prix, faites un clic droit sur l'élément et sélectionnez l'option Dupliquer . Une copie du tableau apparaîtra sous l'élément d'origine et vous pourrez la faire glisser dans l'une des colonnes vides :

Vous voudrez répéter ce processus pour autant de colonnes que vous avez. Gardez à l'esprit que chaque tableau peut avoir un style unique si vous préférez ne pas réutiliser les paramètres. Dans ce cas, assurez-vous que les styles sont suffisamment similaires pour que les visiteurs comprennent qu'ils regardent une comparaison.

Lors de la personnalisation de votre tableau, n'oubliez pas qu'Elementor vous permet d'ajouter du CSS personnalisé à n'importe quel module. Pour cela, rendez-vous dans les Paramètres avancés du widget et sélectionnez l'onglet CSS personnalisé :

L'ajout de CSS personnalisé via Elementor est beaucoup plus simple que la modification manuelle du code WordPress. De même, l'édition de CSS dans WordPress vous oblige à accéder aux fichiers de 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 semble intimidant, ne vous inquiétez pas. Apprendre CSS ne vous oblige pas à être un développeur Web. Cependant, c'est une compétence précieuse qui vous aidera à personnaliser vos sites Web 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 nécessaire pour chaque entrée. Vous pouvez le faire en sélectionnant un tableau et en accédant à l'onglet Contenu sous les paramètres du widget :

La modification du contenu de vos tableaux de prix est facile. Vous pouvez cliquer sur n'importe quel élément du widget pour commencer à le modifier. Une fois que vous êtes satisfait des résultats, vos tableaux de prix seront prêts à partir.

Principaux plugins de table Elementor (12 options)

Bien qu'Elementor contienne de nombreux outils pour vous aider à créer des tableaux, vous pouvez toujours ajouter plus de widgets à la liste. Dans cette section, nous examinerons 12 plugins Elementor que vous pouvez utiliser pour ajouter de nouveaux types de tableaux à vos publications et pages. Même si beaucoup de ces addons sont conçus pour Elementor, vous pouvez les installer en tant que plugins réguliers.

Comme toujours, nous ne recommandons que les meilleurs plugins WordPress qui offrent d'excellentes performances et qui reçoivent des mises à jour régulières. L'utilisation de plugins bien optimisés vous aidera à faire évoluer votre site Web sans rencontrer de problèmes de performances.

1. Modules complémentaires ElementsKit pour Elementor

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

La version professionnelle d'ElementsKit comprend également un widget de tableaux avancé. Cela vous permet d'ajouter des fonctionnalités de recherche et de filtrage aux tables. De plus, vous pouvez inclure la pagination afin que les utilisateurs puissent naviguer dans les entrées sans avoir de tables massives sur votre site Web.

Principales caractéristiques:

• 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 incorporer des tableaux

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

2. Générateur de tableaux WP

Si vous êtes un fan des éditeurs par glisser-déposer (ce que vous devriez être si vous utilisez Elementor), vous apprécierez d'utiliser WP Table Builder. Ce plugin vous permet de créer des tableaux à l'aide d'éléments préconfigurés tels que des boutons, des sections de révision, des évaluations de produits, etc.

En plus des éléments avancés, vous avez accès à des modules de base, tels que du texte et des images. Le plugin est également livré avec des modèles de tableau, ce qui rendra votre travail encore plus simple.

Vous pouvez ajouter des tables WP Table Builder à votre site Web à l'aide de l'éditeur de blocs. Le plugin s'intègre également à Elementor, ce qui facilite le placement de tableaux n'importe où sur votre site Web.

Principales caractéristiques:

• Utiliser un générateur de tableau par glisser-déposer
• Accédez à des éléments prédéfinis tels que des boutons, des sections d'avis et des évaluations de produits
• Personnalisez le style de chaque élément de vos tableaux
• Utiliser des modèles de page prédéfinis

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

3. TablePress

TablePress est un plugin gratuit qui est à peu près aussi proche que possible de l'ajout de fonctionnalités de feuille de calcul à WordPress. Le plug-in peut importer des données dans plusieurs formats, notamment des fichiers Excel, CSV et JSON. Vous pouvez même exporter des données de table pour d'autres programmes.

Avec TablePress, vous pouvez créer des tableaux qui incluent la fonctionnalité de recherche. Les utilisateurs peuvent choisir le nombre d'entrées à afficher et passer d'une page à l'autre si vous affichez des ensembles de données volumineux.

L'intégration de tables TablePress avec Elementor est simple. Le plugin crée des codes abrégés uniques pour chaque table. Le widget Elementor Shortcode vous aidera à ajouter ces codes n'importe où sur votre site Web.

Principales caractéristiques:

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

Prix ​​: TablePress est un plugin gratuit mais vous pouvez trouver des extensions premium pour cela.

4. Addons essentiels pour Elementor

Essential Addons for Elementor ajoute plus de 80 nouveaux widgets au constructeur de pages. Vous disposez d'options pour les tableaux de tarification, les tableaux de données, les tables des matières, etc.

Essential Addons for Elementor est disponible en deux versions. Le plugin gratuit ajoute une meilleure version du widget de tableau de prix fourni avec Elementor. Si vous souhaitez accéder aux tableaux de données (qui incluent le filtrage, la recherche et plusieurs styles), vous devrez payer une licence premium.

Principales caractéristiques:

• Ajouter des widgets de prix, de données et de tableau de contenu
• Activer 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 pour Elementor

PowerPack pour Elementor ajoute plus de 70 widgets au constructeur de pages. Le plugin 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 configurer des tableaux de données triables et consultables. Vous pouvez importer des données dans des tableaux à l'aide de fichiers CSV. Le plugin comprend également plusieurs options de modèle de tableau.

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

Principales caractéristiques:

• Créer des tableaux de données triables et consultables
• Importer des tableaux de données au format CSV
• Ajouter des widgets de tarification et de tableau d'informations

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

6. Addons exclusifs pour Elementor

Les addons exclusifs pour Elementor sont disponibles en versions gratuite et premium. Le plugin gratuit ajoute 39 nouveaux widgets à Elementor, tandis qu'une licence premium vous rapportera plus de 69 nouveaux éléments.

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

Principales caractéristiques:

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

Prix ​​: Il existe une version gratuite des extensions exclusives pour Elementor. Les licences Premium commencent à 29 $ par an.

7. JetElements

JetElements ajoute 45 nouveaux widgets à Elementor. La plupart d'entre eux sont orientés vers les sites de commerce électronique et d'abonnement. Cependant, JetElements inclut également plusieurs widgets de table intéressants dans sa liste.

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

Principales caractéristiques:

• Ajouter des tarifs et des tableaux réactifs à Elementor
• Personnalisez les tableaux à l'aide de nouveaux effets visuels, tels que la parallaxe

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

8. Modules Premium pour Elementor

Les modules complémentaires Premium pour Elementor sont disponibles en versions gratuite et premium. Cependant, seul le plugin premium ajoute de nouveaux widgets de table à 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 graphique et de graphique si vous souhaitez afficher plus d'informations pour vos visiteurs.

Principales caractéristiques:

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

Prix ​​: Les licences pour les modules complémentaires Premium pour Elementor commencent à 39 $ par an.

9. Mentor de données

DataMentor est un plugin qui ajoute un widget de table unique à Elementor. Cependant, ce widget contient beaucoup plus de fonctionnalités que la plupart des modules complémentaires que nous avons vus jusqu'à présent.

Les tables DataMentor sont incroyablement polyvalentes. 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 tableau si vous souhaitez lancer le processus de conception.

Principales caractéristiques:

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

Prix ​​: DataMentor est un plugin gratuit.

10. Addons heureux pour Elementor

Happy Addons for Elementor est l'un des plugins les plus complets 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 tables, Happy Addons comprend des widgets de table 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 table pré-conçues. En plus de ces options, Happy Addons comprend également des éléments de tarification et de tableau de comparaison.

Principales caractéristiques:

• Accès aux widgets de table de base et avancés
• Importer des données pour des capacités avancées
• Utiliser des mises en page de table préconçues
• Ajouter des tableaux de prix et de comparaison

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

11. Suppléments Royal Elementor

Royal Elementor Addons ajoute plus de 40 nouveaux widgets à Elementor. Ceux-ci sont tous gratuits, mais le plugin est également disponible dans une version premium qui déverrouille 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 inclut plusieurs nouvelles options de style. De plus, il est livré avec une option de basculement que les visiteurs peuvent utiliser pour basculer entre les prix mensuels et annuels (ou d'autres options).

Principales caractéristiques:

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

Prix ​​: Royal Elementor Addons est gratuit. Les licences Premium coûtent 29 $ par site Web (c'est une redevance unique).

12. Eléments complémentaires Elementor

Elementor Addon Elements est un plugin gratuit 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 incluent de nombreuses options de personnalisation supplémentaires que le widget Elementor par défaut ne propose pas. En ce qui concerne les tableaux de données, vous pouvez choisir entre créer des éléments interrogeables ou filtrables. De plus, les tableaux prennent en charge les animations, ce qui peut les rendre beaucoup plus attrayants visuellement.

Principales caractéristiques:

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

Prix ​​: Elementor Addon Elements est gratuit.

Sommaire

Elementor vous fournit une large gamme d'outils pour créer des tableaux WordPress élégants et complexes. De nombreux plugins de tableaux WordPress 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 sur 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 tables, nous vous recommandons d'utiliser les plugins de table Elementor tels 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 alimenté par notre intégration Cloudflare gratuite et diffuse automatiquement votre contenu à partir de plus de 200 points de présence à travers le monde. Si vous avez des questions sur Kinsta CDN, n'hésitez pas à contacter notre équipe d'assistance 24h/24 et 7j/7 pour obtenir de l'aide !