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 faire défiler toute la page.
Ce bloc est particulièrement utile pour le contenu long, tel que les guides détaillés, les tutoriels, la documentation produit et les pages de destination à plusieurs sections. Vous contrôlez les niveaux de titres inclus, si la numérotation est affichée, comment les éléments imbriqués sont indentés et si la boîte peut être réduite par les visiteurs. La conception est entièrement personnalisable avec des contrôles de typographie, de couleur et de bordure distincts pour le titre, les liens et le 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, faites glisser le bloc Table des matières dans la section souhaitée de votre page. Ce bloc est généralement placé près du 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éral :
- Afficher le titre : Activez ou désactivez l'affichage d'un titre au-dessus de la table des matières. Réglez sur Oui pour afficher une étiquette de titre, ou sur Non pour afficher uniquement les liens.
- Texte du titre : Saisissez le texte qui apparaît comme titre de la table des matières lorsque Afficher le titre est activé (par défaut : « Table des matières »).
- Balise de titre : Choisissez la balise de titre HTML utilisée pour afficher le titre — H2, H3, H4 ou DIV.
- Inclure les titres : Saisissez une liste de niveaux de titres séparés par des virgules à analyser pour trouver des liens (par exemple, h2,h3,h4). Seuls les titres correspondant à ces balises apparaissent dans la navigation générée.
- Conteneur de contenu : Saisissez un sélecteur CSS pour limiter l'analyse des titres à une zone spécifique de la page. Laissez vide pour analyser toute la page.
- Exclure les sélecteurs : Saisissez des 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 : Activez ou désactivez 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 Afficher les numéros est activé (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 de défilement (px) : Définissez le nombre de pixels de décalage pour la destination du défilement — utile lorsque votre page a un en-tête fixe qui masquerait autrement le titre cible.
- Style de liste : Choisissez le style de puce 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 de la table des matières à l'aide d'un bouton basculant (Oui/Non).
- Icône d'extension : Choisissez l'icône affichée sur le bouton basculant lorsque la table des matières est réduite.
- Icône de réduction : Choisissez l'icône affichée sur le bouton basculant lorsque la table des matières est agrandie.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle et le comportement de votre bloc de table des matières.
Styles de titre (visible uniquement lorsque Afficher le titre est activé) :
- Typographie du titre : Définissez la famille de polices, la taille, le poids, le style, la hauteur de ligne, l'espacement des lettres et la casse des lettres pour l'en-tête de la table des matières.
- Couleur du titre : Choisissez la couleur du texte de l'en-tête.
- Espacement du titre : Ajustez la marge inférieure entre le titre et la liste des liens (0–50 px).
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 des liens : Définissez la couleur par défaut des liens de la table des matières.
- Couleur au survol des liens : Définissez la couleur que les liens affichent lorsque les visiteurs les survolent.
- Espacement des éléments : Contrôlez l'espace vertical entre chaque élément de la liste (0–30 px).
- Retrait de la liste : Définissez l'indentation horizontale appliquée aux niveaux de titre imbriqués (0–100 px).
Styles du conteneur :
- Couleur d'arrière-plan : Définissez la couleur d'arrière-plan de 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 sélecteur d'unité pour basculer entre les pixels (0–1200) et le pourcentage (0–100).
- Rembourrage du conteneur : Définissez l'espacement intérieur entre les bords du conteneur et le contenu à l'intérieur (1–100 px).
- Bordure : Ajoutez et configurez une bordure autour du conteneur — choisissez le style de bordure, définissez des largeurs individuelles pour chaque côté (Haut, Droite, Bas, Gauche) et choisissez une couleur de bordure.
- Rayon de la bordure : Arrondissez 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 contrôles indépendants pour ordinateur, tablette et mobile.
- Rembourrage : Définissez l'espacement intérieur à l'intérieur du wrapper du bloc sur les quatre côtés, avec des contrôles par appareil.
Attributs :
- Classe personnalisée : Ajoutez une ou plusieurs classes CSS personnalisées au wrapper du bloc pour un style ciblé.
- ID CSS : SeedProd génère automatiquement un ID CSS unique pour ce bloc. Vous pouvez l'utiliser pour référencer le bloc dans du CSS ou JavaScript personnalisé.
- Attributs personnalisés : Ajoutez des attributs HTML personnalisés à l'élément wrapper du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format clé|valeur.
Position :
- Position : Définissez le positionnement CSS du bloc — Statique, Relatif, Fixe, Absolu ou Ancré — avec des valeurs indépendantes pour ordinateur, tablette et mobile.
- Décalage : Lors de l'utilisation du positionnement Fixe, Absolu ou Ancré, définissez les distances de décalage Haut, Droite, Bas et Gauche par appareil.
- Z-Index : Définissez l'ordre d'empilement du bloc par rapport aux autres éléments de la page, avec des valeurs par appareil.
- Dépassement : Contrôlez la manière dont le contenu qui dépasse les limites du bloc est géré — Visible, Masqué, Défilement ou Automatique — par appareil.
Visibilité de l'appareil :
- Masquer sur ordinateur : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans d'ordinateur.
- Masquer sur tablette : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans de tablette.
- Masquer sur mobile : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans mobiles.
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 contrôles de direction, de vitesse et de décalage de la fenêtre d'affichage.
- Effet de souris : Appliquez un effet de parallaxe piloté par le mouvement de la souris au bloc.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc de table des matières et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc de table des matières à votre page ! Cet outil de navigation aide les visiteurs à comprendre immédiatement la structure de votre page et à atteindre les sections les plus pertinentes pour eux. Expérimentez avec les niveaux de titres, les styles de liste et le style du conteneur pour créer une table des matières qui s'intègre naturellement à la conception de votre page et maintient l'engagement de votre public.