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.
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.
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.
- 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.
- 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.
- 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.
- 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.
- 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.
