Le bloc Table des matières génère automatiquement un menu de navigation cliquable basé sur les titres du contenu de votre page. Ce bloc aide les visiteurs à parcourir rapidement votre page et à accéder à des sections spécifiques, améliorant ainsi l'expérience utilisateur et rendant les contenus longs plus accessibles.
Les blocs Table des matières sont particulièrement utiles pour les guides détaillés, les tutoriels, la documentation produit, les articles de blog et toute page comportant plusieurs sections vers lesquelles les utilisateurs peuvent vouloir accéder directement.
Ajouter le bloc Table des matières à vos pages
Suivez ces étapes pour ajouter un bloc Table des matières à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser et déposez le bloc Table des matières dans la section souhaitée de votre page. Ce bloc est généralement placé en haut de votre page, après l'introduction mais avant le début des sections principales.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Table des matières pour ouvrir ses paramètres. Dans l'onglet Contenu, vous trouverez plusieurs options pour personnaliser le fonctionnement de votre table des matières :
Paramètres généraux :
- Afficher le titre : activez ou désactivez l'affichage d'un titre au-dessus de votre table des matières (par exemple, « Table des matières » ou « Sur cette page »).
- Texte du titre : Personnalisez le texte qui apparaît comme titre.
- Balise de titre : choisissez la balise HTML pour le titre (H2, H3, H4 ou DIV).
- Inclure les titres : spécifiez les niveaux de titres à inclure dans votre table des matières à l'aide d'une liste séparée par des virgules (par exemple, h2, h3, h4). Cela détermine quels titres de votre page apparaîtront sous forme de liens.
- Conteneur de contenu : entrez le sélecteur CSS du conteneur dans lequel SeedProd doit rechercher les titres. Laissez ce champ vide pour analyser l'intégralité de la page.
- Sélecteurs à exclure : ajoutez les sélecteurs CSS pour tous les titres que vous souhaitez exclure de la table des matières (séparés par des virgules).
Options d'affichage :
- Afficher les numéros : ajoutez une numérotation automatique aux éléments de votre table des matières (par exemple, 1, 2, 3).
- Numérotation hiérarchique : utilisez une numérotation imbriquée pour les sous-titres (par exemple, 1.1, 1.2, 2.1).
- Défilement fluide : activez l'animation de défilement fluide lorsque les utilisateurs cliquent sur les liens de la table des matières.
- Décalage du défilement : définissez le nombre de pixels pour décaler la position de défilement, utile lorsque vous avez un en-tête fixe.
- Style de liste : choisissez le style de puces pour votre table des matières (Aucun, Disque, Cercle, Carré ou Décimal).
Options supplémentaires :
- Réduire la boîte : permet aux utilisateurs de réduire et d'agrandir la table des matières à l'aide d'un bouton bascule.
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle de votre table des matières :
Styles de titre :
- Typographie du titre : ajustez la police, la taille, l'épaisseur et l'interligne du titre.
- Couleur du titre : définissez la couleur du texte du titre.
- Espacement du titre : contrôlez l'espacement autour du titre.
Styles de lien :
- Typographie des liens : personnalisez les paramètres de police pour les liens du sommaire.
- Couleur des liens : définissez la couleur par défaut des liens.
- Couleur au survol des liens : choisissez la couleur qui s'affiche lorsque les utilisateurs survolent les liens.
- Espacement des éléments : ajustez l'espace entre chaque élément du sommaire.
- Retrait de liste : contrôlez le retrait des niveaux de titres imbriqués.
Styles de conteneurs :
- Couleur d'arrière-plan : définissez la couleur d'arrière-plan du conteneur de la table des matières.
- Largeur du conteneur : ajustez la largeur en pixels ou en pourcentage.
- Remplissage du conteneur : ajoutez un espacement interne dans le conteneur.
- Bordure : ajoutez et personnalisez les bordures autour de la table des matières.
- Rayon de bordure : créez des coins arrondis pour le conteneur.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Table des matières et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Table des matières à votre page ! Cet outil de navigation puissant aide les visiteurs à trouver exactement ce qu'ils recherchent, améliorant ainsi l'engagement et l'expérience utilisateur. Testez différents styles et paramètres pour créer une table des matières qui correspond à votre marque et répond aux besoins de votre public.