Widget de table des matières d'élémenteur, aucun professionnel n'est nécessaire
Le propre widget Table des matières d'Elementor est livré avec Elementor Pro. Le widget Table des matières dans Master Addons fonctionne sur Elementor sans Pro. Déposez-le sur une publication ou une page et il y lit les titres, puis en construit une liste chaînée dans l'ordre des titres Un clic sur n'importe quel élément fait défiler le lecteur vers cette section Vous choisissez quelles balises d'en-tête inclure et si la liste affiche des puces ou des chiffres Les lecteurs peuvent replier la boîte, une flèche de retour en haut les ramène à nouveau, et une courte règle CSS garde la boîte en vue dans une barre latérale.
Comment ajouter une table des matières dans Elementor
Vous avez besoin d'Elementor et de Master Addons Elementor Pro n'est pas requis La page a également besoin de véritables balises de titre (H2, H3 et ainsi de suite), car la liste est construite à partir d'eux.
- Installer et activer Modules complémentaires principaux de WordPress.org(en anglais), et vérifiez que la Table des matières est activée dans le tableau de bord Master Addons.
- Ouvrez votre message ou votre page avec Elementor et recherchez dans le panneau des widgets Table des matières.
- Faites-le glisser là où la liste doit se trouver, généralement au-dessus de la première section ou dans une colonne de la barre latérale.
- Dans Contenu(en anglais), définissez le titre, choisissez un style de liste et choisissez les balises d'en-tête à inclure.
- Ouvrir Répressible et Défilement pour ajouter la bascule et la flèche vers le bas en haut.
- Stylez le titre, le séparateur et les liens dans l'onglet Style, puis prévisualisez la page et cliquez sur quelques éléments pour tester les sauts.
Chaque paramètre est couvert dans le Paramètres du widget Table des matières guide.
Table des matières en un coup d'œil
Ce que fait le widget, lire à partir de Master Addons 3.2.3.
| Article | Widget Table des matières |
|---|---|
| Où il trouve des titres | À l'intérieur de.entry-content d'abord, puis de.page-content, puis de la zone de contenu Elementor |
| Niveaux de cap | N'importe lequel de H1 à H6, avec H2, H3 et H4 sélectionnés par défaut |
| Laissez de côté un titre | Ajoutez le titre de la classe CSS jltma-toc-hide à ce titre |
| Style de liste | Par défaut (pas de marqueur), Bullets ou Numéros |
| Nicher | Toujours imbriqué par niveau de cap |
| Boîte pliable | Basculez à côté du titre, avec Keep Collapsed Initialement |
| Défilement | Défilement lisse qui s'arrête à environ 30 px au-dessus du cap |
| Retour en haut | Flèche dans le coin inférieur droit après 250 px de défilement |
| Article actif | L'élément sur lequel le lecteur a cliqué en dernier (pas d'espion de défilement) |
| Collant | Pas de commutateur ; position : collant via CSS personnalisé ou effets de mouvement Elementor Pro |
| Besoins | Elementor et Master Addons, pas d'Elementor Pro |
Construit la liste à partir de vos titres
Choisissez les niveaux en Balises de titre. H2, H3 et H4 sont sélectionnés par défaut, et n'importe lequel de H1 à H6 peut être ajouté Lorsque la page se charge, le widget trouve ces titres, donne à chacun un ID s'il n'en a pas, et niche la liste par niveau de titre Renommez ou ajoutez un titre et la liste le reprend lors du chargement suivant, il n'y a donc pas de liens d'ancrage à garder à la main.
- Style de liste : Par défaut (pas de marqueur), Bullets ou Numéros.
- Sauter un titre : ajouter la classe CSS
jltma-toc-hide-headingdans l'onglet Avancé de cet en-tête. - Afficher le séparateur : une ligne optionnelle sous le titre avec son propre style, couleur, épaisseur et espacement.
- Les identifiants de titre sont faits à partir du texte de titre, vous pouvez donc également créer un lien directement vers une section provenant d'ailleurs.
Boîte pliable pour barres latérales et mobile
Allumez Rendre le contenu pliable et une icône à bascule apparaît à côté du titre Les lecteurs le cliquent pour ouvrir ou fermer la liste, et elle glisse plutôt que de sauter Allumez Gardez Collapsed Initialement si vous souhaitez que la boîte soit chargée en affichant uniquement son titre, ce qui est utile sur les longues pages juridiques et dans les colonnes étroites de la barre latérale.
- Contrôles de taille d'icône et de couleur d'icône pour la bascule.
- Le séparateur se replie avec la liste.
- Le widget n'a pas d'interrupteur collant propre Pour garder la case en vue pendant que les gens lisent, voir Rendre la table des matières collante ci-dessous.
Sauts lisses et flèche dos à haut
Cliquer sur un élément fait défiler la page en douceur jusqu'à son en-tête et s'arrête à environ 30 px au-dessus, de sorte que le titre ne repose pas contre le haut de l'écran Si votre site a un en-tête fixe haut, la FAQ ci-dessous a un correctif CSS à deux lignes qui garde les en-têtes hors de lui.
- Faites défiler vers le haut ajoute une petite flèche dans le coin inférieur droit qui s'affiche une fois qu'un visiteur descend.
- La flèche ramène les lecteurs à la table des matières ou à la position que vous définissez dans Défilement vers le décalage supérieur.
- Taille, couleur de l'icône et arrière-plan Contrôles de couleur pour la flèche.
- L'élément sur lequel un lecteur a cliqué conserve la couleur Active de la section Style de contenu, afin qu'il puisse voir où il a sauté.
Rendre la Table des Matières Collante
Le widget n'a pas de commutateur collant à lui seul Vous l'épinglez en rendant le widget collant à l'intérieur d'une colonne de barre latérale, et Elementor sans Pro peut le faire via les modules complémentaires principaux Extension CSS personnalisée.
- Mettez l'article et la table des matières dans une ligne : une colonne large pour le contenu et une colonne étroite pour le widget Table des matières Laissez la colonne étroite à sa hauteur par défaut pour qu'elle s'étire à la hauteur de la ligne.
- Sélectionnez le widget Table des matières, ouvrez Avancé, puis le Maître Addons Css personnalisé sectionner et coller
selector { position: sticky; top: 32px; } - Augmentez la valeur maximale si votre site a un en-tête fixe, par exemple 110 px sous un en-tête 80 px.
- Prévisualisez la page et faites défiler La boîte reste visible jusqu'à la fin de la ligne.
Avec Elementor Pro, vous pouvez utiliser Avancé, Effets de mouvement, Collant : Haut au lieu de cela, avec Stay In Column activé.
Deux choses s'arrêtent de fonctionner : un conteneur parent avec débordement réglé sur caché, et une colonne de barre latérale qui n'est pas plus haute que la boîte Sur les téléphones, la barre latérale tombe sous l'article, alors activez Make Content Collapsible là-bas, ou cachez cette copie sur mobile et placez une table des matières effondrée au-dessus de l'article.
Le démo de la barre latérale collante a mi-chemin de la page La boîte reste en haut de la colonne pendant que l'article défile.
La règle collante dans la section Master Addons Custom CSS du widget.
Table des matières Elementor Pro vs addons principaux Table des matières
Le widget Table des matières d'Elementor a besoin d'une licence Elementor Pro, et il vous donne plus de contrôle sur les titres qui apparaissent et sur la façon dont la liste se comporte lors du défilement Master Addons gère le travail quotidien sans Pro et ajoute une flèche de retour en haut.
| Caractéristique | Élémenteur Pro | Additions maîtres |
|---|---|---|
| Prix | Besoins d'Elementor Pro | Inclus dans Master Addons, pas d'Elementor Pro |
| Quelles rubriques | Ancrages par balises (H1 à H6) plus un sélecteur de conteneur pour limiter la zone de recherche | Balises de titre (H1 à H6) à partir du contenu principal de la publication ou de la page |
| Laissant les rubriques | Ancrages Par sélecteur, tout sélecteur CSS | Classe CSS jltma-toc-masquer le titre sur chaque titre |
| Marqueurs | Numéros ou puces avec une icône que vous choisissez | Par défaut, puces ou chiffres |
| Nicher | Vue hiérarchique bascule et réduit les sous-éléments | Toujours imbriqué par niveau de cap |
| Effondrement | Minimisez Box avec des icônes d'extension et d'effondrement et un point d'arrêt où il commence minimisé | Rendre le contenu pliable et rester effondré dans un premier temps |
| Article actif | Suit la section en vue pendant que le lecteur défile | Marque l'élément sur lequel le lecteur a cliqué |
| Paramètres de défilement | Pas de contrôle de vitesse ou de décalage dans le widget | Défilement lisse qui s'arrête à environ 30 px au-dessus du cap |
| Collant | Aucun paramètre dans le widget ; utilisez Motion Effects Sticky sur le widget ou sa colonne | Aucun paramètre dans le widget ; ajoutez la position : collant avec CSS personnalisé ou utilisez Motion Effects Sticky avec Pro |
| Retour à la flèche supérieure | Aucun | Faites défiler vers le haut avec des contrôles de taille et de couleur |
Si vous payez déjà pour Elementor Pro et que vous souhaitez que la liste suive le lecteur pendant son défilement, utilisez son widget Si vous voulez une table des matières sans Elementor Pro, avec une boîte pliable et une flèche dos à haut, utilisez celle-ci.
Se marie bien avec: Barre de progression de lecture pour un bar qui se remplit au fur et à mesure que les gens lisent, Accordéon avancé et Onglets pour plier de longues sections, Contenu hors toile (Pro) pour un menu coulissant, et blog pour les listes de messages, ces longs articles sont présents.
Plugin Table des matières ou un widget Élémenteur ?
WordPress a deux sortes de table des matières : les plugins qui fonctionnent sur le contenu de la publication, et les widgets que vous placez dans l'éditeur Elementor La bonne dépend de la façon dont la page est construite.
| choix | Où ça marche | Meilleur pour |
|---|---|---|
| Table des matières Master Addons | Partout où vous le placez dans Elementor, y compris les modèles | Sites d'éléments qui veulent que la boîte soit stylisée avec le design et une flèche dos à haut |
| Table des matières Elementor Pro | N'importe où dans Elementor, avec une licence Elementor Pro | Sites déjà sur Pro qui souhaitent que l'élément actif suive le défilement |
| Table des matières facile, LuckyWP | Publier du contenu, inséré automatiquement ou avec un shortcode | Blogs écrits dans l'éditeur de blocs ou l'éditeur classique |
| Bloc de table des matières Rank Math | Bloquez les publications des éditeurs sur les sites qui utilisent Rank Math | Gutenberg publie une liste simple |
Notre tour d'horizon des meilleurs plugins de table des matières pour WordPress compare huit d'entre eux, avec le nombre d'installations, les codes courts et les options collantes.
Table des matières Exemples
Quatre démos live construites avec le widget Ouvrez-en une, puis importez la même mise en page depuis la Visionneuse de modèles ci-dessous.
- Barre latérale collante: une liste numérotée dans une colonne étroite qui reste en vue pendant que l'article défile, les H3 imbriqués sous leurs H2, et un cap laissé de côté avec jltma-toc-masque-titre.
- Styles de liste: Par défaut, puces et chiffres côte à côte, construits à partir des mêmes titres.
- Page Termes et Conditions: la boîte dans une barre latérale droite répertoriant chaque section d'une longue page légale.
- Page de la politique de confidentialité: la boîte à gauche, avec l'élément cliqué dans la couleur Active.
Les trois styles de liste sur les mêmes titres.
Foire aux questions pour la table des matières
Ai-je besoin d'Elementor Pro pour cette table des matières ?
N° Le widget Table des matières fait partie de Master Addons et fonctionne sur Elementor sans Pro. Chaque paramètre de cette page est inclus Le widget Table des matières d'Elementor est celui qui a besoin d'Elementor Pro.
Comment puis-je exclure un titre de la table des matières ?
Pour supprimer un niveau entier, supprimez cette balise des balises d'en-tête, par exemple H4. Pour masquer un en-tête, sélectionnez-le dans Elementor, ouvrez l'onglet Avancé et ajoutez jltma-toc-hide-heading au champ Classes CSS. Il reste sur la page mais est laissé en dehors de la liste.
L'élément actif change-t-il au fur et à mesure que le lecteur défile ?
Non. La couleur active dans Style, Contenu stylise l'élément qu'un lecteur clique, et il se déplace lorsqu'il clique sur un autre élément La liste ne suit pas la section à l'écran pendant le défilement Le widget Table des matières d'Elementor Pro fait cela.
Puis-je rendre la table des matières collante ?
Oui, mais pas depuis un commutateur du widget. Mettez-le dans une colonne de la barre latérale, puis ajoutez selector { position: sticky; top: 32px; } dans Advanced, CSS personnalisé. Avec Elementor Pro, vous pouvez utiliser Motion Effects, Sticky à la place Augmentez la valeur maximale si un en-tête fixe se trouve dessus.
Comment puis-je maintenir la table des matières développée ou réduite lorsque la page se charge ?
Activer Rendre le contenu pliable Avec Keep Collapsed Initialement désactivé, la boîte se charge et les lecteurs peuvent la plier Avec elle allumée, la boîte se charge en affichant uniquement son titre Il n'y a pas de paramètre par appareil, donc pour une boîte fermée sur les téléphones et une ouverte sur le bureau, utilisez deux copies et masquez chacune dans Avancé, Réactif.
La flèche Faire défiler vers le haut apparaîtra-t-elle sur chaque page ?
Uniquement sur les pages qui contiennent ce widget avec Scroll to Top activé La flèche se trouve dans le coin inférieur droit et s'affiche après que le visiteur a fait défiler environ 250 px sur la page.
Puis-je utiliser des icônes personnalisées pour les marqueurs de liste ?
Pas du panneau du widget Le style de liste offre les valeurs par défaut, les puces et les numéros, et la section de style de contenu définit la police et les couleurs Les icônes de marqueurs personnalisées auraient besoin de votre propre CSS. Le widget d'Elementor Pro dispose d'un sélecteur d'icônes pour les puces.
Pourquoi ma table des matières est-elle vide ou indique-t-elle les mauvais titres ?
Le widget recherche d'abord les titres à l'intérieur de .entry-content, puis .page-content, puis la zone de contenu Elementor, et uniquement les balises sélectionnées dans les balises d'en-tête Une case vide affiche “Ajouter un en-tête pour commencer à générer la table des matières” et signifie généralement que les en-têtes utilisent une balise que vous n'avez pas sélectionnée ou que vous êtes assis en dehors de cette zone Si un plugin de mise en cache retarde JavaScript jusqu'au premier défilement ou clic, la liste reste vide jusque-là, alors excluez les scripts des addons principaux du délai.
Un en-tête fixe couvre le cap après un saut Comment le réparer ?
Le saut s'arrête à environ 30 px au-dessus du cap, ce qui ne suffit pas sous un en-tête fixe haut Ajoutez ceci dans Apparence, Personnaliser, CSS supplémentaire : .elementor-heading-title[id] { padding-top: 90px; margin-top: -90px; } Chaque en-tête atterrit ensuite 90 px plus bas et se ressemble sur la page Utilisez votre hauteur d'en-tête plus un peu de place.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
