Réponse rapide
Dans Elementor, recherchez le Code court Widget (disponible dans la version gratuite), glissez-le sur votre page et collez votre WP Table Builder shortcode (par exemple, [wptb id="123" not found ]) dans le champ « Contenu ». Cliquez Aperçu Pour voir le tableau entièrement rendue.
Règles #
| Article | Détails |
|---|---|
| Plan | Gratuit ou Pro |
| Greffon | WP Table Builder installé et activé (Guide d'installation) |
| Page Builder | Elementor Free ou Elementor Pro |
| Temps nécessaire | Environ 2 minutes |
Avant de commencer : installez votre shortcode tableau #
Vous aurez besoin du shortcode du tableau que vous souhaitez intégrer. La façon la plus rapide d’y accéder est la suivante :
- Aller à Constructeur de tableaux WP dans votre tableau de bord WordPress.
- Ouvrez le tableau dans l’éditeur.
- Cliquez sur Contenu embarqué Le bouton en haut — cela copie automatiquement le shortcode dans votre presse-papier.
Le shortcode ressemblera à [wptb id="123" not found ]. Conservez-le copié — vous le collerez dans la prochaine étape.
Si vous n’avez pas encore construit un tableau, consultez Comment créer votre premier tableau WP Table Builder Tout d'abord.
Méthode 1 : En utilisant le widget Shortcode (recommandé) #
C’est la méthode standard pour ajouter du contenu basé sur un shortcode dans Elementor.
Étape 1 : Ouvrez votre page dans Elementor #
Accédez à la page ou au message où vous souhaitez ajouter le tableau et cliquez sur Modifier avec Elementor.
Étape 2 : Ajouter le widget Shortcode #
Dans le panneau Elementor sur la gauche, recherchez “ Shortcode ” dans la zone de recherche du widget. Faites glisser Code court Créez un widget et insérez-le dans la section où vous souhaitez que le tableau apparaisse.
Étape 3 : Insérer le shortcode #
Dans le panneau de réglages de gauche, collez votre WP Table Builder shortcode dans le champ Entrez votre shortcode champ.
Remarque : Le tableau peut apparaître dans un style simplifié à l’intérieur de l’éditeur Elementor — c’est normal. Cliquez sur l’icône déroulante située à côté du bouton ‘ Publier ’ et cliquez sur Consulter la page Pour voir le tableau entièrement rendu, exactement comme il apparaîtra à vos visiteurs.
Étape 4 : Prévisualisation et publication #
Le cadre de travail d’Elementor peut afficher une prévisualisation simplifiée du tableau. Cliquez Preview des modifications ou Publier/Mettre à jour Pour voir le tableau entièrement rendue sur le frontend.
Pourquoi l'aperçu d'Elementor ressemble-t-il à celui du frontend ? #
C’est un comportement attendu et non un bug. Le cadre d’affichage d’Elementor utilise un environnement de rendu simplifié qui ne peut pas appliquer tous les styles de frontend de votre thème. Le tableau réel s’affichera correctement sur la page publiée.
Pour voir le résultat exact du frontend sans publication, cliquez sur l’icône déroulant à côté du bouton ‘ Publier ’ et cliquez sur Consulter la page — cela ouvre une prévisualisation en direct dans une nouvelle fenêtre avec les styles de frontend complets appliqués.
Troubleshooting #
Le shortcode apparaît sous forme de texte brut au lieu d'un tableau. Assurez-vous de coller le shortcode dans le Entrez votre shortcode le champ situé à l’intérieur du panneau de configuration du widget Shortcode — pas dans un widget Texte ou Titre. Si vous l’avez entré manuellement, vérifiez le format : [wptb id="123" not found ] où 123 Correspond à l'ID de tableau réel.
Le tableau ne s’affiche pas du tout dans le frontend. Confirmez que cela WP Table Builder est installé et activé. Vérifiez ensuite que l’ID du tableau dans le shortcode correspond à un tableau existant dans WP Table Builder → Toutes les Tableaux.
Le tableau semble dérangée ou mal stylisée dans Elementor. Vérifiez d’abord l’aperçu de la page. Si le tableau apparaît déformé dans l’aperçu, votre thème Elementor ou une règle CSS personnalisée pourrait masquer WP Table Builder les styles du tableau. Essayez d’ajouter une règle CSS personnalisée pour corriger le conflit. Voir Comment ajouter un CSS personnalisé dans WP Table Builder.
Le tableau déborde dans Elementor. C’est généralement un problème de réactivité. Vérifiez les paramètres de réactivité de votre tableau dans WP Table Builder. Voir Comment rendre un tableau responsive.
Je utilise Elementor Pro — y a-t-il un meilleur moyen d’intégrer des tableaux ? Il n'existe pas de widget native d'Elementor Pro pour WP Table Builder, donc le shortcode est la méthode correcte pour toutes les versions d'Elementor.
Foire aux questions #
Il WP Table Builder fonctionne-t-il avec Elementor Free et Elementor Pro ?
Oui. Le widget Shortcode est disponible dans les versions Free et Pro d’Elementor, donc la méthode est la même quelle que soit la version que vous utilisez.
Est-il possible d’ajouter plusieurs tableaux sur la même page Elementor ?
Oui. Ajoutez un widget Shortcode séparé pour chaque tableau, chacun avec son propre shortcode. Il n’y a pas de limite quant au nombre de tableaux que vous pouvez intégrer sur une seule page.
Mon tableau sera-t-il mis à jour automatiquement si je le modifie dans WP Table Builder?
Oui. Le shortcode extrait toujours la dernière version enregistrée du tableau. Vous n’avez pas besoin de mettre à jour votre page Elementor après avoir modifié un tableau — il suffit de sauvegarder le tableau WP Table Builder et les modifications apparaîtront immédiatement dans le frontend.
Puis-je l’utiliser à l’ WP Table Builder intérieur d’un popup Elementor ?
Oui. Ajoutez un widget Shortcode à l’intérieur de votre template Popup Elementor et collez le shortcode. Le tableau apparaîtra correctement lors de l’ouverture du Popup.
Le tableau fonctionne-t-il dans le cadre du Grid Loop d’Elementor ou dans les templates dynamiques ?
Le widget Shortcode peut être ajouté aux templates de Loop Grid, mais l’ID du tableau dans le Shortcode sera statique — il ne changera pas dynamiquement par publication. Pour le contenu du tableau dynamique, vous aurez besoin d’un développement personnalisé.
Documents connexes #
- Comment créer votre premier tableau WP Table Builder — créez votre premier tableau étape par étape
- Comment ajouter une WP Table Builder tableau dans l’éditeur de blocs de Gutenberg — Guide d’intégration de Gutenberg
- Comment l’utiliser WP Table Builder avec Divi — Guide d’intégration de Divi
- Comment rendre un tableau responsive — réglages adaptés aux appareils mobiles
- Comment ajouter un CSS personnalisé dans WP Table Builder — personnaliser les styles de tableau
