Widget de table des matières d'élémenteur gratuit
Le propre widget Table des matières d'Elementor est livré avec Elementor Pro. Le widget Table des matières dans Master Addons est gratuit Déposez-le sur une publication ou une page et il y lit les titres, puis construit une liste chaînée à partir d'eux 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 Vous pouvez laisser les lecteurs replier la boîte et ajouter une flèche vers le haut, et le titre, le séparateur et les liens ont chacun leurs propres commandes de style.
Comment ajouter une table des matières dans Elementor
Vous avez besoin d'Elementor et du plugin gratuit Master Addons, rien d'autre La page a également besoin de vraies balises de titre (H2, H3 et ainsi de suite), car la liste est construite à partir d'elles.
- 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, la flèche de retour en haut et un décalage de défilement pour votre en-tête.
- 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.
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 de paramètre collant propre Pour garder la boîte en vue pendant que les gens lisent, rendez sa colonne collante avec votre thème ou avec Elementor Pro Motion Effects.
Sauts lisses et flèche dos à haut
Cliquer sur un élément fait défiler la page jusqu'à son en-tête. Délai d'animation par défilement (ms) définit la durée de ce défilement, 500 par défaut et jusqu'à 2000. avec Rouleau lisse sur vous aussi obtenir Décalage de défilement fluide (px)(en), qui s'arrête avant le titre pour qu'un en-tête fixe ne le couvre pas Vous pouvez définir un décalage différent pour le bureau, la tablette et le mobile.
- 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é.
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 gratuitement et ajoute une flèche de retour en haut.
| Caractéristique | Élémenteur Pro | Additions maîtres |
|---|---|---|
| Prix | Besoins d'Elementor Pro | Gratuit avec Master Addons |
| 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élai d'animation par défilement et décalage de défilement fluide par appareil |
| 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 gratuite avec une boîte pliable et une flèche de retour en haut, utilisez celle-ci. Connexes : Barre de progression de lecture, Accordéon avancé et Contenu hors toile (Pro).
Foire aux questions pour la table des matières
Le widget Table des matières est-il gratuit ?
Oui. Il fait partie du plugin gratuit Master Addons sur WordPress.org, et chaque paramètre décrit sur cette page est dans la version gratuite Le widget Table des matières d'Elementor 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.
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.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
Duplicateur de messages/pages
