Elementor Tables Complete Tutorial : Construire des tableaux de données beaux et utilisables à partir de zéro !

Lorsque vous utilisez Elementor pour faire une page, pour montrer une comparaison de prix, une liste de fonctionnalités, une configuration de paramètres, un catalogue de cours et ainsi de suite, vous utiliserez souvent "Elementor table". Beaucoup de gens utilisent simplement la disposition texte + colonne empilée ensemble, soit pas beau, ou terminal mobile directement la version de la bombe. Dans cet article, nous allons partir de zéro, comment faire un tableau Elementor, comment le rendre beau, comment prendre en compte les PC et les mobiles, étape par étape pour que ce soit clair.

Un,Ce que l'on peut faire avec les tables Elementor? Choisir d'abord le bon programme

Les tableaux ne sont pas un widget séparé dans Elementor, mais sont mis en œuvre de différentes manières, avec trois scénarios communs :

1. Tableau de simulation de la disposition des colonnes
   • Construire des lignes et des colonnes avec Section + Colonnes
   • Chaque cellule est remplie de composants de type éditeur de texte, icône et bouton.
   • Idéal pour les petites quantités de données, les comparaisons de prix, les pages de comparaison de caractéristiques
2. Third Party Forms Plugin + Elementor Shortcode
   • Créez des tableaux avec des plugins tels que TablePress, WP Data Tables, etc.
   • Insérer des appels de Widget Shortcode dans Elementor
   • Pour les "tableaux de données réelles" contenant de grandes quantités de données qui doivent être triées, recherchées ou paginées.
3. Modèle + Répétiteur (jeu avancé)
   • Utilisation d'Elementor Pro + champs personnalisés (par exemple ACF)
   • Générer des formulaires dynamiques avec Loop / Repeater
   • Idéal pour les listes de produits fréquemment mises à jour, les statistiques d'articles, les plans de cours, etc.

Les deux ensembles les plus pratiques seront présentés plus loin :

• Pure Elementor Column Layout pour de beaux tableaux légers
• Plugin de formulaires tiers avec Elementor pour les formulaires de données fonctionnels

Réfléchissez avant de commencer : à quoi sert ce formulaire Elementor ?

Réfléchissez à ces questions avant de commencer à faire glisser des composants :

1. Quel type de données est affiché ?
   • Informations comparatives (paquets, caractéristiques, versions)
   • Liste des paramètres (configuration, spécifications, dimensions)
   • Calendrier/progrès (calendrier des cours, programme des activités)
2. Où les utilisateurs concentrent-ils leur lecture ?
   • S'agit-il d'une comparaison rapide côte à côte ?
   • Ou naviguez-vous ligne par ligne ?
   • Doit-il être trié et recherché ?
3. Quel est le pourcentage d'appareils accédés ?
   • Les formulaires Elementor doivent donner la priorité à l'adaptation si le mobile est une priorité absolue
   • Pour les tableaux complexes à plusieurs colonnes, il est recommandé d'utiliser un plug-in de tableau tiers directement plus économique.

En bref :

• Peu de données, mais un sens du design est important → Elementor Column Layout pour les "tableaux visuels".
• Plus de données, accent sur l'opérabilité → utilisation de plug-ins pour créer des "formes fonctionnelles", Elementor est responsable de la mise en page et de l'emballage.

III. utilisation de Mise en page des colonnes Elementor pour les tableaux de base(convient pour de petites quantités de données)

1. créer des sections et des colonnes

1. Créez une nouvelle section dans la page d'édition d'Elementor.
2. Choisissez le nombre de colonnes selon vos besoins, par exemple :
   • 3 Colonnes : Comparaison des paquets convenant à trois grades
   • 4 colonnes : convient pour les comparaisons de caractéristiques entre plusieurs versions
3. Elle est définie dans la mise en page de la section :
   • Largeur du contenu : encadrée ou pleine largeur, en fonction de la conception générale
   • Espacement des colonnes : régler sur "étroit" ou personnalisé pour éviter que les colonnes ne soient entassées les unes sur les autres.

2) Mise en place des lignes d'en-tête

1. Ajoutez une section intérieure en haut de chaque colonne ou placez simplement un titre.
2. comme "en-tête" de la colonne, par exemple :
   • Nom du programme (Basique / Standard / Avancé)
   • Nom de la catégorie (paramètre, fonction, description)
3. Unifié dans le style :
   • couleur de fond
   • Taille de la police, poids de la police
   • rembourrage en haut et en bas (pour donner à l'en-tête un aspect plus "bloc")

En rendant la couleur de l'en-tête légèrement plus foncée et le contraste plus prononcé, le formulaire Elementor dans son ensemble aura immédiatement un sens de la structure.

3. ajouter des lignes de contenu

Chaque rangée peut être construite comme telle :

1. Ajouter un éditeur de texte ou Liste des icônes
2. Veillez à ce que le contenu d'une même ligne soit homogène sur le plan stylistique, par exemple :
   • Utilisez une liste d'icônes avec de petites icônes pour chacun d'entre eux.
   • Ou tout en texte clair avec une brève description
3. Utilisez la fonction de copier-coller de style d'Elementor :
   • Définir le style d'une colonne en premier
   • Cliquez ensuite avec le bouton droit de la souris sur "Copier le style" et collez-le dans les composants des autres colonnes.

Cela permettra de conserver plus rapidement un style visuel uniforme pour le formulaire.

4. mettre l'accent et donner des conseils

L'une des utilisations courantes des formulaires Elementor est de "mettre en évidence une option recommandée" :

• Ajouter à la colonne du milieu :
  • Différentes couleurs d'arrière-plan
  • Des ombres plus grandes
  • Boutons plus visibles (par exemple, "les plus populaires", "programmes recommandés")
• Utilisez la description textuelle du badge / de la petite étiquette :
  • "Convient aux novices.
  • "Meilleur rapport qualité-prix

Ils peuvent être réalisés à l'aide de Heading + petites polices ou d'Icon Box, qui ressemble à une page de comparaison mais qui est en fait un tableau Elementor flexible.

Quatrièmement, l'utilisation d'un plug-in de formulaire tiers + Elementor pour créer des formulaires de données fonctionnels.

Si le tri, la recherche et la pagination sont nécessaires, il est recommandé d'envisager :

• TablePress
• Tableaux de données WP
• Tables Ninja

Ces plugins sont dédiés aux formulaires de données, qui sont ensuite appelés via un Shortcode dans Elementor.

1. utiliser des plug-ins pour créer des tableaux

1. Nouveau formulaire dans le backend du plugin
2. Ajouter des colonnes, des lignes et des champs
3. Activer : boîte de recherche, tri, pagination, etc.
4. Enregistrez le code court généré par le plugin (par ex. [table id=1 /])

2) Insertion de tableaux dans Elementor

1. existent Ajouter des Widgets Shortcode à Elementor
2. Collez le Shortcode ci-dessus.
3. Définit la section périphérique :
   • largeur maximale
   • marge intérieure
   • Couleur d'arrière-plan (par exemple, gris clair)
4. Vous pouvez ajouter des titres, un texte explicatif et un paragraphe complet pour accompagner le tableau.

Les avantages de cette démarche :

• Gestion centralisée des données des formulaires et révision d'une mise à jour complète du site
• Recherche Ajax, expérience de tri plus forte que la mise en page en colonnes d'Elementor
• Convient pour la documentation technique, les listes de prix, les listes de paramètres, les programmes de cours, etc.

V. Laissez Les formulaires Elementor sont beaux et faciles à utiliser.compétences en matière de conception

1. contrôler la largeur des colonnes pour éviter l'encombrement

• Réduire au minimum l'utilisation de mises en page comportant plus de 5 colonnes
• Utilisez moins de longues phrases pour le contenu textuel, mais plutôt des phrases ou des sous-paragraphes.
• Utiliser des caractères gras et des icônes pour les informations importantes afin de réduire le recours à l'empilement de textes.

2. le contraste des couleurs et de l'espacement

• Couleur d'arrière-plan légèrement plus foncée dans l'en-tête du tableau, zone de données simple et propre
• Les rangées peuvent être alternées avec des couleurs plus claires (l'effet de pseudo "passage zébré" peut être simulé avec Section + Section intérieure).
• Veillez à ce que chaque cellule soit suffisamment remplie pour que le tableau ait l'air de "respirer".

3. attention à l'expérience mobile

1. Basculer vers l'affichage mobile dans les paramètres Responsive d'Elementor
2. Vérifier :
   • Le texte est-il trop dense ?
   • Les boutons sont-ils trop petits pour être facilement cliqués ?
   • Si un trop grand nombre de colonnes entraîne une mauvaise expérience de défilement horizontal
3. Si nécessaire :
   • Modifier la disposition des colonnes pour qu'elles soient empilées verticalement sur les téléphones portables
   • Vous pouvez également utiliser deux structures : un "tableau comparatif côte à côte" pour les PC et une "liste de cartes" pour les téléphones portables.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.