Comment créer votre premier tableau WP Table Builder

Règles #

Ce que vous allez construire #

Dans ce tutoriel, vous allez créer un tableau de produits simple avec cinq types d’éléments : une légende de texte, une image du produit, une liste de caractéristiques, une note d’évaluation et un bouton d’appel à l’action. À la fin, vous saurez comment ajouter n’importe quel élément à n’importe quelle cellule et comment intégrer le tableau terminé n’importe où sur votre site WordPress.

Étape 1 : Ouvrez le constructeur de tableaux #

Une fois WP Table Builder l’application installée et activée, ouvrez votre tableau de bord WordPress. Vous verrez une nouvelle rubrique Constructeur de tableaux WP élément du menu dans la barre d’administration gauche.

Faites glisser le curseur sur Constructeur de tableaux WP menu, puis cliquez sur Ajouter un nouvel élément dans la fenêtre contextuelle.

Ou bien, cliquez sur Constructeur de tableaux WP élément du menu (1) puis Ajouter un nouvel élément (2) depuis la barre latérale secondaire.

Étape 2 : Définir les lignes et les colonnes #

Sur l'écran de configuration, entrez le nombre de colonnes (1) et colonnes (2) vous avez besoin de tableau, cliquez alors sur Créer un nouveau (3).

Vous pouvez ajouter ou supprimer des lignes et des colonnes plus tard, alors n’ayez pas peur de ne pas obtenir exactement ce résultat.

Étape 3 : Donnez un nom à votre tableau #

Vous verrez maintenant l’ WP Table Builder éditeur. Tapez un nom pour votre tableau dans le champ intitulé en haut (1). Un nom clair facilite la recherche ultérieure des tableaux, lorsque vous en aurez plusieurs.

Étape 4 : Comprendre les éléments (gratuit vs professionnel) #

WP Table Builder Il possède deux types d'éléments :

• Les éléments de base (Gratuit et Pro): Texte, Image, Liste, Note à étoiles, Bouton, HTML personnalisé, Shortcode
• Les éléments Pro: Icône, icône de texte, liste stylisée, notation en cercle, ruban, badge, barre de progression

Les éléments de base sont disponibles dans les versions Free et Pro. Les éléments Pro nécessitent un abonnement. WP Table Builder Pro licence.

Pour ajouter un élément, faites glisser l’élément depuis la barre latérale gauche et déposez-le dans une cellule de tableau.

Étape 5 : Ajouter du texte #

Le texte est l’élément le plus courant. Il existe deux façons de l’ajouter :

• Glisser-déplacer: Faites glisser Texte élément provenant de la barre latérale dans une cellule.
• Cliquez pour taperCliquez directement dans n’importe quelle cellule vide et commencez à taper.

Une fois un élément de texte sélectionné, la barre latérale gauche affiche les options d’édition :

1. Couleur de la police — couleur du texte
2. Couleur du lien — couleur des hyperliens dans le texte
3. Taille de la police — taille du texte en pixels
4. Épaississement — espace intérieur
5. Marque — espace extérieur

Une barre d'outils flottante apparaît également au-dessus du texte sélectionné avec Italique, gras, strikethrough, lien et alignement contrôles.

Étape 6 : Ajouter une image #

Faites glisser Image Insérez l’élément dans une cellule, puis cliquez Chargement Pour choisir une image à partir de votre bibliothèque de médias WordPress ou pour télécharger une nouvelle image.

Après avoir sélectionné l’image, utilisez la barre latérale gauche pour la configurer :

• onglet Général — ajuster l’alignement de l’image (1) et ajouter un texte alt (2) pour le référencement et l’accessibilité
• onglet Taille — modifier la largeur et l’altitude de l’image
• onglet « Liens » — rendre l’image clickable en ajoutant une URL, et éventuellement définir le lien à ouvrir dans une nouvelle fenêtre via Object cible → Blanc

Conseil : Ajoutez toujours du texte alt aux images de tableau. Cela améliore l’accessibilité et aide les moteurs de recherche à comprendre votre contenu.

Étape 7 : Ajouter une liste #

Faites glisser Liste Insérez un élément dans une cellule et modifiez les éléments en cours d’édition inline.

Configurer la liste à partir de trois onglets dans la barre latérale gauche :

• onglet Général — modification du type de liste (paragraphes ou numérotation), de la marge et de l’espacement
• onglet « Police de caractères » — ajuster la couleur et la taille de la police des éléments de la liste
• onglet « Disposition » — contrôle de l’espacement des éléments et de l’alignement de la liste

Étape 8 : Ajouter une note de notation #

Faites glisser Note d'étoiles Insérez l’élément dans une cellule et cliquez sur les étoiles pour définir le classement.

Depuis la barre latérale gauche, vous pouvez configurer :

1. Note maximale — nombre maximal d’étoiles (le paramètre par défaut est 5)
2. Valeur de notation — la cote actuelle à afficher
3. Dimensions — taille de l'étoile
4. Alignement — gauche, centre ou droite
5. Couleur — couleur de l'étoile
6. Afficher le nombre de commentaires — faites glisser le curseur pour afficher la valeur numérique à côté des étoiles

Étape 9 : Ajouter un bouton #

Faites glisser Bouton Insérez l’élément dans une cellule, puis cliquez dessus pour modifier le texte et le lien du bouton.

La barre latérale gauche vous permet de personnaliser la taille, le rayon de bordure, la couleur d’arrière-plan, la couleur de défilement, la couleur du texte, la couleur de défilement du texte, la taille du caractère, l’alignement des boutons, l’alignement du contenu et l’ID du bouton.

Votre tableau terminé devrait maintenant ressembler à ceci :

Étape 10 : enregistrez votre tableau #

Important : Vous devez sauvegarder votre tableau avant de pouvoir le consulter, l’intégrer ou y revenir plus tard. Cliquez sur Sauvegarde du tableau Un bouton en haut à droite de l’éditeur.

Si vous fermez l’éditeur sans enregistrer, vos modifications seront perdues.

Étape 11 : Intégrer le tableau dans un article ou une page #

Une fois sauvegardé, cliquez sur Contenu embarqué Un bouton dans la barre d’outils supérieure. Cela copie automatiquement le shortcode du tableau dans votre presse-papiers.

Ouvrez maintenant n’importe quel article ou page WordPress où vous souhaitez que le tableau apparaisse, puis collez le shortcode. Il ressemblera à ceci : [wptb id=123].

• Editeur de blocs (Gutenberg) : Ajouter un Bloc de shortcode et insérez le shortcode à l’intérieur. (Guide complet de Gutenberg →)
• Editeur classique : Insérez le shortcode directement dans la zone de contenu.
• Elementor : Utilisez le Widget Shortcode. (Guide complet d’Elementor →)
• Divi : Utilisez le Module de texte et collez le shortcode. (Guide complet de Divi →)

Publiez ou mettez à jour le post, et votre tableau apparaîtra sur le frontend.

Troubleshooting #

Mon tableau ne s’affiche pas dans le frontend.

Assurez-vous de cliquer Sauvegarde du tableau avant de copier le shortcode, et que l’ID du shortcode correspond au tableau enregistré. Si le shortcode reste en mode texte simple, consultez Les tableaux ne s’affichent pas dans le tableau de WP Table Builder bord.

Les éléments ne tomberont pas dans les cellules.

Assurez-vous que vous faites glisser dans une cellule vide, et non sur la bordure de celle-ci. Le redémarrage du navigateur résout généralement les problèmes de glissement.

Mon tableau semble déformée sur mobile.

WP Table Builder Les tableaux sont réactives, mais vous devrez peut-être activer le mode réactif. Voir Comment rendre un tableau responsive.

L'aspect de mon tableau diffère de celui affiché dans l'éditeur. Votre thème pourrait masquer les styles de WP Table Builder’s. Voir Comment désactiver les styles de thème pour un tableau.

Foire aux questions #

Documents connexes #

• Comment installer et activer le WP Table Builder plugin
• Comment rendre un tableau responsive
• Comment l’utiliser WP Table Builder avec le bloc-éditeur (Gutenberg)
• Comment ajouter un tableau dans Elementor
• Comment ajouter un CSS personnalisé dans WP Table Builder