Nous allons voir dans ce tutoriel comment, créer, paramétrer et styliser une table des matières (Table of contents) avec le widget fournis par Elementor Pro.
Une table des matières va créer une liste de liens reliant les différents chapitres (titres) qui composent votre page ou article.
Une table des matières offre de nombreux bénéfices :
Améliore la lisibilité et la navigation d’une publication.
Améliore le référencement en aidant les moteurs de recherche à comprendre la structure de votre article.
Aide à être répertorié dans Google avec des extraits enrichis (rich snippet).
Les principaux avantages d’utiliser le widget d’Elementor plutôt qu’un plugin tiers :
- Facilité d’intégration.
- Nombreuses options de paramétrage et de customisation.
- Possibilité de placer des tables aux styles différents d’une page à l’autre.
Créer une table des matières avec le widget d’Elementor Pro
Pour créer la table des matières, il suffit de sélectionner le widget Table of content et le glisser à l’endroit voulu sur notre page.
La table des matières qui apparaît affiche tous les titres de notre page.
Configurer la table des matières d’Elementor
Pour configurer une table des matières, on clique sur l’élément pour ouvrir son panneau d’options et l’on sélectionne l’onglet Contenu
Table of content
Plusieurs champs nous permettent de changer un certain nombre de paramètres :
- Title
- Le champ Title permet de changer le titre par défaut qui est Table of Contents.
- HTML Tag
- Ici, vous allez pouvoir changer la balise du titre selon l’importance que vous voulez lui donner.
- Include / exclude
- Pour choisir quel titre vous voulez inclure ou exclure de votre table des matières.
- Container
- Ce champ permet d’inclure dans la table des matières uniquement les titres contenus dans un conteneur spécifique.
- Marker View
- Permet de sélectionner des chiffres, des bulles ou des icônes pour départager les différents liens (titres) contenus dans la table des matières.
Additional Options
- Word Wrap
- Si un lien est trop long et dépasse la largeur de la table des matières, on peut déterminer un retour à la ligne (choix par défaut) ou choisir de remplacer la partie trop longue par des points de suspension.
- Minimize Box
- Très pratique, l’activation de cette option va permettre de réduire la table des matières sur les tablettes ou smartphones. Cela va éviter qu’elle ne prenne trop de place sur des écrans de petite taille. Pour l’étendre et faire apparaître les liens, vos visiteurs devront cliquer sur une petite icône.
- Hierarchical View
- Permet de déterminer si l’on souhaite que les liens offrent une vue hiérarchique ou pas.
Styliser la table des matières d’Elementor
Pour styliser la table des matières, on se rend sur l’onglet Style.
Box
- Background Color : pour choisir une couleur de fond pour la table des matières.
- Border color: pour changer la couleur de la bordure.
- Border Width: pour définir la largeur de la bordure.
- Border radius: pour définir l’arrondi des coins de la bordure.
- Padding : pour définir les marges internes.
- Min Height : pour un définir la hauteur minimale du widget
- Ombre de la boîte: pour créer un effet d’ombre sur la table des matières.
Header
L’onglet header concerne tout ce qui touche l’en-tête de la table des matières. Vous pourrez changer :
- La couleur de fond.
- La couleur du texte.
- La typographie
- La couleur de l’icône.
- L’épaisseur du séparateur.
List
L’onglet liste focalise sur la liste des liens. Vous pourrez y changer :
- La hauteur de boîte maximale contenant la liste.
- La typographie des liens.
- Le positionnement des liens (retrait).
- Changer la couleur des liens, choisir de les souligner ou pas et choisir des styles différents lorsqu’on passe la souris au-dessus d’un lien (Hover).
- Changer la couleur et la taille du Marker.
Les paramètres avancés de la table des matières d’Elementor
Dans cet onglet, vous allez retrouver une multitude d’options pour affiner au maximum la customisation de votre table des matières.
Vous pourrez entre autres :
Choisir de ne pas afficher la table des matières sur les tablettes ou smartphones en vous rendant dans l’onglet Responsive.
Créer une animation d’accueil dans l’onglet Effets de mouvement.
Parmi les autres paramètres disponibles, il y a la possibilité de créer une table des matières fixé, c’est-à-dire qui reste apparente lorsqu’on fait défiler. Voyons ça plus en détail.
Fixer une table des matières en haut de page avec Elementor
Pour fixer une table des matières en haut de page avec Elementor on se rend dans l’onglet Effets de mouvement puis dans le champ Stycky où l’on sélectionne top.
Deux choix possibles :
- Ajouter une couleur de fond et un z-index élevé a la table des matières pour qu’elle soit parfaitement visible lorsqu’elle couvre les autres éléments au moment du défilement de la page.
- Changer la structure de la page pour créer une section qui s’étend jusqu’en bas de l’article et ne contient que la table des matières.
