Ajouter

Lorem ipsum

Lorem ipsum

A
A
A
Design

2 vues

4 min

Comment créer un sommaire automatique depuis les titres d'un article Webflow ?

Apprenez à générer automatiquement un sommaire cliquable depuis les H2 et H3 de vos articles Webflow.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment générer automatiquement un sommaire cliquable depuis les titres H2 et H3 de votre article dans Webflow.

Exemple

Sommaire généré automatiquement depuis les titres

Sommaire

    Introduction

    Webflow est un outil de création web no-code qui génère du HTML, CSS et JavaScript propre.

    1. Configurer le projet

    Créez un nouveau projet dans Webflow et choisissez un template de départ.

    Connecter un domaine

    Dans les paramètres du projet, rendez-vous dans la section Hosting.

    Activer le CMS

    Le CMS Webflow permet de gérer du contenu dynamique sans code.

    2. Créer le design

    Utilisez le Designer pour créer votre mise en page visuellement.

    3. Publier le site

    Cliquez sur Publish pour mettre en ligne votre site sur votre domaine custom.

    ÉlémentID ou classeRôle
    Div conteneur du sommaireid='toc'Injecté par le script, caché par défaut
    Zone de contenu de l'articleclass='article-content'Source des H2/H3 analysés
    H2 et H3 de l'articleid auto-généréCibles des ancres du sommaire

    1. Ajoutez le conteneur du sommaire dans Webflow

    Créez un Div dans votre page à l'endroit où le sommaire doit apparaître (au-dessus de l'article, dans une sidebar...). Ajoutez-lui l'ID toc via un custom attribute. Mettez-le en display: none par défaut : le script le rendra visible uniquement si des titres sont trouvés.

    2. Ajoutez la classe sur votre zone article

    Sur le Div qui contient votre Rich Text ou votre contenu d'article, ajoutez la classe article-content. Le script cherche les H2 et H3 à l'intérieur de cet élément uniquement.

    3. Ajoutez le script dans Footer code

    (function() {
    var content = document.querySelector('.article-content');
    var tocContainer = document.getElementById('toc');
    if (!content || !tocContainer) return;

    var headings = content.querySelectorAll('h2, h3');
    if (headings.length < 2) return;

    var ul = document.createElement('ul');
    ul.style.cssText = 'list-style:none;padding:0;margin:0;';

    headings.forEach(function(h, i) {
    if (!h.id) h.id = 'heading-' + i;

    var li = document.createElement('li');
    li.style.cssText = 'margin-bottom:6px;' + (h.tagName === 'H3' ? 'padding-left:16px;' : '');

    var a = document.createElement('a');
    a.href = '#' + h.id;
    a.textContent = h.textContent;
    a.style.cssText = 'font-size:' + (h.tagName === 'H2' ? '14px' : '13px') + ';color:#6b7280;text-decoration:none;';
    a.addEventListener('mouseenter', function() { a.style.color = '#111'; });
    a.addEventListener('mouseleave', function() { a.style.color = '#6b7280'; });
    a.addEventListener('click', function(e) {
    e.preventDefault();
    document.getElementById(h.id).scrollIntoView({ behavior: 'smooth' });
    });

    li.appendChild(a);
    ul.appendChild(li);
    });

    tocContainer.appendChild(ul);
    tocContainer.style.display = 'block';
    })();

    bon à savoir

    Le script génère automatiquement des IDs sur les titres qui n'en ont pas (heading-0, heading-1...). Si vos titres ont déjà des IDs personnalisés dans Webflow (via custom attribute id=''), le script les respecte et les utilise comme cibles d'ancre. Idéal pour les articles longs avec des ancres nommées sémantiquement.

    Conclusion

    Un sommaire automatique améliore la navigation et le SEO de vos articles longs. Cas d'usage :

    • Articles de blog longs avec plusieurs sections
    • Pages de documentation technique
    • Guides et tutoriels avec étapes numérotées

    Sommaire généré depuis les titres de cet article

    bon à savoir

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

    Lorem ipsum dolor sit amet consectetur.

    Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    Publié le

    Ces tutoriels pourraient vous intéresser

    tutoriels similaires

    SEO / GEO

    5 min lecture

    5 vues

    Comment faire une redirection sur Webflow ? (2026) ?

    Mis à jour le 19.12.2025 par Sandro DA SILVA

    SEO / GEO

    5 min lecture

    5 vues

    Ajouter des données structurées à votre site Webflow ?

    Mis à jour le 21.08.2025 par Sandro DA SILVA

    No-code

    5 min lecture

    5 vues

    Comment obfusquer un lien dans Webflow ?

    Mis à jour le 23.04.2025 par Sandro DA SILVA

    Let’s f*****G GO !!

    Prêt à faire décoller
    votre activité  ?

    Alexandre

    Max

    Enora

    Bryan

    Cannelle

    Tiphaine

    Vous allez :heart: notre collaboration...