What is the Table of Contents widget in Master Addons?

It is a free Elementor widget that reads the headings on your page and builds a linked index from them automatically. Each item jumps to its section on click, and you control which heading levels appear, whether the list collapses, and how it looks, all from the Elementor panel.

How does the widget know which headings to list?

You pick the heading tags in the Content tab, like H2 and H3, and the widget lists every matching heading on the page. To skip a whole level, leave that tag out. To drop one specific heading, add the jltma-toc-hide-heading class to it in the Advanced tab.

Can I make the table of contents collapsible?

Yes. The Collapsible options add a toggle so visitors can fold the list to just the title. Turn on Keep Collapsed Initially to load it closed, which works well in a sidebar or on mobile where you want to save vertical space.

Does it update when I add new headings?

Yes. The list is generated from the page's headings, so when you add, remove, or rename a heading, the table of contents reflects the change. There is no manual list to keep in sync, which is the main reason to use the widget over a hand-built one.

Can I add a smooth scroll and a back-to-top button?

Yes. Clicking an item scrolls to its section, and Scroll Animation Delay sets how long that takes. Smooth Scroll adds an offset for fixed headers. Scroll to Top adds an arrow in the bottom right corner with its own offset, size, and colors.

Table des matières Paramètres du widget

Les longs messages sont plus faciles à lire lorsque les visiteurs peuvent voir toute la forme devant et sauter directement vers la partie qu'ils veulent Le libre Widget Table des matières dans Modules complémentaires principaux pour Elementor lit les titres sur votre page et les transforme en index lié Aucune liste manuelle à construire, et aucune à garder synchronisée plus tard.

Vous déposez le widget, choisissez quels niveaux de cap inclure et il se remplit. À partir de là, vous pouvez le rendre pliable, ajouter un bouton de défilement vers le haut et styliser le tout. Ce guide couvre chaque paramètre du widget.

Widget de la Table des matières des éléments sur une page, montrant une liste numérotée de onze titres sous le titre TOC

Ce que fait le widget Table des matières #

Le widget scanne la page à la recherche de titres et construit une liste imbriquée de liens à partir d'eux Chaque élément pointe à son en-tête, donc un clic saute vers cette section Ajouter un en-tête plus tard et la liste le ramasse tout seul, qui est la partie qui fait gagner le plus de temps.

Deux onglets l'exécutent. Contenu contient le titre, les niveaux de titre, l'option pliable et le comportement de défilement. Style contrôle le remplissage du conteneur, le titre, le séparateur et les éléments de la liste. Les options Elementor Advanced habituelles se trouvent à côté d'elles.

Avant de commencer #

WordPress avec Élémenteur installé et actif.
Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
Une page ou un message avec de vrais titres (H2, H3, etc.) à lire pour le widget.

Comment ajouter le widget Table des matières #

Dans l'éditeur Elementor, ouvrez le Éléments panneau et recherche pour Table des matières(en anglais), ou faites défiler vers la section Addons principaux (les widgets portent un badge MA violet).Drag it to the top of your content, or into a sidebar, and it fills himself from the page's heads immediately.

Widget Table des matières dans le panneau Éléments élémentaires glissé sur la page

Définissez le titre et les titres à inclure #

Ouvrir le Contenu tab et le Table des matières section. C'est ici que vous nommez la boîte, choisissez le style de liste et choisissez les niveaux de titre qui apparaissent.

Table des matières Onglet Contenu avec Entrée Texte du titre, Style de liste, Inclure et Exclure des onglets, et Balises de titre définies sur H2, H3 et H4

Entrez le texte du titre : l'en-tête au-dessus de la liste, comme Table des matières ou COT.
Style de liste : Par défaut (pas de marqueur), de puces ou de chiffres.
Inclure /Exclure : l'onglet Inclure contient les balises d'en-tête et l'onglet Exclure explique comment laisser les titres uniques de côté.
Étiquettes de titre : choisissez les niveaux à saisir, tels que H2 et H3. Ajouter ou supprimer des balises pour contrôler la profondeur de la liste.

Vous voulez sauter un seul titre ? ajouter le jltma-toc-hide-heading classez dans l'onglet Avancé de cet en-tête, dans le champ Classes CSS, et le widget le laisse de côté. Pratique lorsqu'un en-tête de section encombrerait simplement la liste.

Rendre la liste pliable #

Le Répressible les options permettent aux visiteurs de replier la liste jusqu'au titre. Cela aide sur mobile ou dans une barre latérale où l'espace est restreint.

Table des matières avec Rendre le contenu pliable et maintenir plié Initialement défini sur Oui, montrant la liste réduite à trois éléments avec une icône à basculer

Rendre le contenu pliable : ajoutez une bascule pour que la liste s'ouvre et se ferme.
Restez effondré au départ : chargez-le fermé pour qu'il n'affiche le titre que jusqu'à ce qu'il clique.
Taille et couleur de l'icône : l'apparence de l'effondrement bascule.

Configurez le comportement de défilement #

Ouvrir le Défilement section pour la façon dont la page se déplace lorsque quelqu'un utilise l'index Vous pouvez ajouter un bouton de retour en haut et activer le défilement en douceur.

Table des matières Section de défilement avec défilement vers le haut réglé pour afficher, décaler, dimensionner, icône et couleur d'arrière-plan, défilement fluide et délai d'animation par défilement

Faites défiler vers le haut : ajouter une flèche fixe dans le coin en bas à droite Elle apparaît une fois qu'un visiteur descend et les ramène à la table des matières.
Faites défiler jusqu'au décalage supérieur : une position de défilement à laquelle envoyer les lecteurs au lieu de la table des matières.
Délai d'animation par défilement et défilement fluide : le délai définit le temps que prend le défilement (500 ms par défaut).Tourner sur Smooth Scroll ajoute un décalage de défilement fluide (px), qui s'arrête avant le cap afin qu'un en-tête fixe ne le couvre pas.

Stylez le conteneur et le titre #

Ouvrir le Style onglet. Le Conteneur la section définit le rembourrage autour de toute la boîte et du Titre la section stylise le titre au-dessus de la liste.

Table des matières Onglet Style avec la section Conteneur ouverte, montrant un remplissage réglé sur 40 pixels de tous les côtés, à côté de la liste numérotée

Conteneur: remplissage pour la boîte Ajouter un arrière-plan, une bordure ou un rayon à partir de l'onglet Avancé.
Titre: alignement, couleur, typographie et espacement inférieur pour le titre.
Séparateur : style, couleur, épaisseur et espacement du bas pour la ligne sous le titre La flèche de défilement vers le haut est stylisée dans la section Défilement.

Stylez les éléments de la liste #

Le Contenu la section de l'onglet Style gère les liens eux-mêmes. Vous obtenez la typographie, l'espacement entre les éléments et des couleurs distinctes pour les états Normal, Survoler et Actif.

Table des matières Section de style de contenu avec un sélecteur de couleur de texte ouvert, montrant les liens de la liste devenus bleus

Typographie et espacement : la police et l'écart entre les lignes.
Normal /Volez /Actif : une couleur pour chaque état Active s'applique à l'élément sur lequel un lecteur a cliqué en dernier.
Couleur du texte : la couleur du lien pour l'état que vous avez sélectionné.

Cas d'utilisation courants #

Longs tutoriels et guides donner aux lecteurs une carte et des sauts rapides.
Pages de documentation où chaque titre est une section que les gens recherchent.
Barres latérales avec un index pliable à côté de l'article.
Rondes et listes les visiteurs peuvent donc passer à l’entrée qu’ils souhaitent.
Pages juridiques et politiques cela nécessite des ancrages clairs à chaque clause.

Conseils pour travailler avec le widget Table des matières #

Utilisez une structure de cap propre. La liste est aussi bonne que vos H2 et H3, alors écrivez des titres qui se lisent bien par eux-mêmes.
Incluez seulement deux niveaux. H2 et H3 font généralement un index bien rangé Tirez dans H4 et au-delà et il commence à devenir bruyant.
Répondez-le sur mobile. Keep Collapsed Initialement permet d'économiser beaucoup de défilement sur les petits écrans.
Activez le défilement en douceur. Un glissement vers la section se lit mieux qu'un saut en dur, et le décalage maintient les caps dégagés d'un en-tête collant.
Sauter les titres égarés. Utilisez la classe jltma-toc-hide-heading sur les titres dont vous ne voulez pas dans la liste, comme un CTA ou un titre de barre latérale.

Foire aux questions #

Qu'est-ce que le widget Table des matières dans Master Addons ?

Il s'agit d'un widget Elementor gratuit qui lit les titres sur votre page et construit un index lié à partir d'eux automatiquement Chaque élément passe à sa section en cliquant, et vous contrôlez quels niveaux de titre apparaissent, si la liste s'effondre et à quoi elle ressemble, le tout depuis le panneau Elementor.

Comment le widget sait-il quels titres lister ?

Vous choisissez les balises de titre dans l'onglet Contenu, comme H2 et H3, et le widget répertorie chaque titre correspondant de la page Pour sauter un niveau entier, laissez cette balise de côté Pour supprimer un titre spécifique, ajoutez-y la classe jltma-toc-hide-heading dans l'onglet Avancé.

Puis-je rendre la table des matières pliable ?

Oui. Les options pliables ajoutent une bascule afin que les visiteurs puissent plier la liste uniquement au titre. Allumez Keep Collapsed Initialement pour le charger fermé, ce qui fonctionne bien dans une barre latérale ou sur un mobile où vous souhaitez économiser de l'espace vertical.

Est-ce qu'il se met à jour lorsque j'ajoute de nouveaux titres ?

Oui. La liste est générée à partir des titres de la page, donc lorsque vous ajoutez, supprimez ou renommez un titre, la table des matières reflète le changement. Il n'y a pas de liste manuelle à synchroniser, ce qui est la principale raison d'utiliser le widget plutôt qu'un widget construit à la main.

Puis-je ajouter un défilement fluide et un bouton de retour en haut ?

Oui. Cliquer sur un élément défile vers sa section, et Scroll Animation Delay définit le temps que cela prend. Smooth Scroll ajoute un décalage pour les en-têtes fixes. Scroll to Top ajoute une flèche dans le coin inférieur droit avec son propre décalage, sa taille et ses couleurs.

Envelopper #

Le widget Table des matières transforme vos titres en un index lié sans aucun entretien manuel : déposez-le, choisissez les niveaux de titre, rendez-le pliable, définissez le comportement de défilement, puis stylisez-le pour qu'il corresponde. Pour un aperçu et une comparaison avec Elementor Pro, voir le Widget de table des matières Elementor page. Pour les widgets associés, voir Chronologie et Menu Nav: parcourez le tableau complet Widgets et extensions Master Addons&, et vérifiez le page de tarification pour ce que chaque plan comprend.

Constructeur de thèmes

Créateur Popup

Constructeur de widgets

Mega Menu Builder

Css personnalisé

Balises dynamiques

Conditions d'affichage

Bibliothèque d'icônes

Animation

Kits de modèles

Sections Prêtes

Popups prêtes

Pages Prêtes

En-tête prêt

Pied Prêt

WP Adminifier

Éditeur de barre d'administration

Connectez-vous

Suite Rolemaster

Blocs maîtres

Pleins feux WP