Le bloc Table des matières génère automatiquement un menu de navigation cliquable basé sur les titres trouvés sur votre page SeedProd. Les visiteurs peuvent parcourir toutes vos sections en un coup d'œil et accéder directement au contenu dont ils ont besoin, sans avoir à faire défiler toute la page.
Ce bloc est particulièrement utile pour les contenus longs tels que les guides détaillés, les tutoriels, la documentation produit et les pages d'accueil comportant plusieurs sections. Vous contrôlez les niveaux de titre à inclure, l'affichage ou non de la numérotation, l'indentation des éléments imbriqués et la possibilité pour les visiteurs de réduire la boîte. Le design est entièrement personnalisable grâce à des contrôles distincts pour la typographie, la couleur et les bordures du titre, des liens et du conteneur.
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, glissez-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 contenu, après une brève 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, les paramètres sont organisés en deux groupes.
Généralités :
- Afficher le titre : activez ou désactivez l'affichage du titre au-dessus de la table des matières. Sélectionnez Oui pour afficher le titre ou Non pour afficher uniquement les liens.
- Texte du titre : Entrez le texte qui apparaîtra comme titre de la table des matières lorsque l'option Afficher le titre est activée (par défaut : « Table des matières »).
- Balise de titre : choisissez la balise HTML utilisée pour afficher le titre : H2, H3, H4 ou DIV.
- Inclure les titres : entrez une liste séparée par des virgules des niveaux de titres à analyser pour les liens (par exemple, h2, h3, h4). Seuls les titres correspondant à ces balises apparaissent dans la navigation générée.
- Conteneur de contenu : entrez un sélecteur CSS pour limiter l'analyse des titres à une zone spécifique de la page. Laissez ce champ vide pour analyser la page entière.
- Sélecteurs à exclure : entrez les sélecteurs CSS séparés par des virgules pour tous les titres que vous souhaitez omettre de la table des matières.
- Afficher les numéros : Activer/désactiver la numérotation automatique des éléments de la table des matières (Oui/Non).
- Numérotation hiérarchique : utilisez une numérotation imbriquée pour les sous-titres lorsque l'option Afficher les numéros est activée (par exemple, 1.1, 1.2, 2.1).
- Défilement fluide : activez une animation de défilement fluide lorsque les visiteurs cliquent sur un lien de la table des matières (Oui/Non).
- Décalage du défilement (px) : définissez le nombre de pixels à décaler par rapport à la destination du défilement. Cette fonction est utile lorsque votre page comporte un en-tête fixe qui, autrement, masquerait l'en-tête cible.
- Style de liste : choisissez le style des puces pour les éléments de la table des matières : Aucun, Disque, Cercle, Carré ou Décimal.
Options supplémentaires :
- Réduire la boîte : permet aux visiteurs de réduire et d'agrandir l'ensemble du sommaire à l'aide d'un bouton bascule (Oui/Non).
- Icône d'agrandissement : choisissez l'icône affichée sur le bouton bascule lorsque la table des matières est réduite.
- Icône Réduire : choisissez l'icône affichée sur le bouton bascule lorsque la table des matières est développée.
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle et le comportement de votre bloc Table des matières.
Styles de titre (visibles uniquement lorsque l'option Afficher le titre est activée) :
- Typographie du titre : définissez la police, la taille, le poids, le style, l'interligne, l'espacement des lettres et la casse pour le titre de la table des matières.
- Couleur du titre : choisissez la couleur du texte pour le titre.
- Espacement du titre : ajustez la marge inférieure entre le titre et la liste des liens (0 à 50 pixels).
Styles de lien :
- Typographie des liens : définissez la famille de polices, la taille, le poids, le style et d'autres propriétés typographiques pour les liens de navigation.
- Couleur du lien : définissez la couleur par défaut des liens de la table des matières.
- Couleur des liens au survol : définissez la couleur affichée lorsque les visiteurs survolent les liens.
- Espacement des éléments : contrôlez l'espace vertical entre chaque élément de la liste (0 à 30 pixels).
- Retrait de liste : définit le retrait horizontal appliqué aux niveaux de titres imbriqués (0 à 100 px).
Styles de conteneurs :
- Couleur d'arrière-plan : définissez la couleur d'arrière-plan pour l'ensemble du conteneur de la table des matières.
- Largeur du conteneur : ajustez la largeur du conteneur à l'aide d'un curseur, avec un bouton permettant de basculer entre les pixels (0-1200) et le pourcentage (0-100).
- Remplissage du conteneur : définissez l'espacement intérieur entre les bords du conteneur et le contenu à l'intérieur (1 à 100 pixels).
- Bordure : ajoutez et configurez une bordure autour du conteneur — choisissez le style de bordure, définissez la largeur de chaque côté (haut, droite, bas, gauche) et sélectionnez une couleur de bordure.
- Rayon de bordure : arrondit les coins du conteneur (0 à 50 px).
Espacement :
- Marge : définissez l'espacement extérieur autour du bloc sur les quatre côtés, avec des commandes indépendantes pour les ordinateurs de bureau, les tablettes et les appareils mobiles.
- Remplissage : définissez l'espacement intérieur à l'intérieur du bloc wrapper sur les quatre côtés, avec des commandes par appareil.
Attributs :
- Classe personnalisée : ajoutez une ou plusieurs classes CSS personnalisées à l'enveloppe du bloc pour un style ciblé.
- Identifiant CSS : SeedProd génère automatiquement un identifiant CSS unique pour ce bloc. Vous pouvez l'utiliser pour référencer le bloc dans un CSS ou un JavaScript personnalisé.
- Attributs personnalisés : ajoutez des attributs HTML personnalisés à l'élément conteneur du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format clé|valeur.
Poste :
- Position : définissez le positionnement CSS du bloc (statique, relatif, fixe, absolu ou collant) avec des valeurs indépendantes pour les ordinateurs de bureau, les tablettes et les appareils mobiles.
- Décalage : lorsque vous utilisez le positionnement fixe, absolu ou adhésif, définissez les distances de décalage haut, droite, bas et gauche pour chaque appareil.
- Z-Index : définit l'ordre d'empilement du bloc par rapport aux autres éléments de la page, avec des valeurs spécifiques à chaque appareil.
- Débordement : contrôlez la manière dont le contenu qui dépasse les limites du bloc est géré (visible, masqué, défilement ou automatique) pour chaque appareil.
Visibilité des appareils :
- Masquer sur le bureau : activez cette option pour masquer le bloc lorsqu'il est affiché sur un écran d'ordinateur.
- Masquer sur tablette : activez cette option pour masquer le bloc lorsqu'il est affiché sur un écran de tablette.
- Masquer sur mobile : activez cette option pour masquer le bloc lorsqu'il est affiché sur un écran mobile.
Effets d'animation :
- Effet de défilement : appliquez une animation déclenchée par le défilement au bloc, y compris les options de défilement vertical et horizontal avec des commandes de direction, de vitesse et de décalage de la fenêtre d'affichage.
- Effet souris : appliquez un effet de parallaxe basé sur les mouvements de la souris au bloc.
É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 aide les visiteurs à comprendre immédiatement la structure de votre page et à accéder aux sections qui les intéressent le plus. Testez différents niveaux de titres, styles de listes et styles de conteneurs pour créer une table des matières qui s'intègre naturellement au design de votre page et captive votre audience.