Nous utilisons juste ce dont on a besoin pour le fonctionnement du site. Pour plus d'infos lire notre politique de confidentialité.
icon-cookie

Comment créer un sommaire [Webflow Blog Tutoriel]

Florian Bodelot
Florian Bodelot
August 28, 2022
Aperçu d'un sommaire (ToC) avec le logo Attributes de Finsweet Webflow

Optimiser le SEO de votre blog avec un sommaire !

Ajouter un sommaire à vos articles de blog améliore considérablement l'expérience utilisateur de vos lecteurs. (Et comme vous le savez depuis la lecture de cet article, l'UX compte dans le SEO).

Le sommaire permet à vos lecteurs ;

  • d'avoir une vue générale de votre contenu
  • d'accéder rapidement à une section en particulier grâce à des liens "anchor"

Comment intégrer un sommaire automatique grâce à l'attribut Finsweet ?

En suivant la doc, il est facile d'intégrer une table des matières à votre blog Webflow. Avec la solution Finsweet, le sommaire sera généré automatiquement sur la base de vos headings (h2, h3, h4, etc...)

⚠️ La balise heading H1 ne sera jamais prise en compte dans votre sommaire (ToC)

Découvrez les étapes à suivre !

1. Allez sur la page Fs attribut Table of Contents en cliquant sur ce lien

2. Copiez puis collez le code Javascript dans le <head> tag de votre page

<!-- [Attributes by Finsweet] Table of Contents --> <script defer="" src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-toc@1/toc.js"></script>

3. Ajoutez un attribut "contents" à l'élément <Rich Text> de votre article de blog

Ajout 'un attribut contents sur un Rich Text Block sur Webflow

4. Ajoutez les attributs liens sur les liens "template" de votre table des matières (il est nécessaire de créer et designer votre sommaire)

Ajout d'un attribut Link sur un lien d'un sommaire sur Webflow
Note : vous pouvez ajouter l'attribut sur le link blok ou bien le text block dans le link block. Les deux fonctionnent.

5. Publiez votre site 🎉

Optimisez encore plus votre sommaire !

Vous pouvez allez encore plus loin dans la personnalisation de votre sommaire sur Webflow avec les différentes Options des attributs

  • OFFSET TOP : pour décaler l'arrivé du lien, très utile lorsque votre barre de navigation vient mordre sur votre titre lors du clique
  • OFFSET BOTTOM : même avantages que le TOP, à l'inverse
  • HIDE URL HASH : vous permet de désactiver la génération automatique du #ID dans l'url
  • ANIMATIONS : vous pouvez aussi ajouter des animations natives Webflow sur vos liens (état actuel, hide/show, etc...)
Options supplémentaires pour l'attribut Table Of Content

Découvrez les toutes sur la page Table of Content de Finsweeet Attributes

Vous méritez un site Webflow qui fait l'effet " Wahouu " !

Prenez contact avec nous aujourd'hui. L'équipe fantastique de Digidop est prête pour vous aider à construire un site web qui répond à vos besoins 🚀

Site digidop.fr sur un écran d'ordinateur avec un badge de recommandations et des réactions