Inhaltsverzeichnis

Erzeugt automatisch eine verlinkte Sprungmarken-Übersicht aus den Überschriften der aktuellen Seite.

Das Element Inhaltsverzeichnis durchsucht die aktuelle Seite nach Überschriften und baut daraus automatisch eine klickbare Sprungmarken-Liste. Ein Klick auf einen Eintrag scrollt sanft zur passenden Stelle und hebt den Abschnitt kurz hervor – ideal für lange Ratgeber, ausführliche Produktbeschreibungen oder umfangreiche Erlebniswelten.

Du legst selbst fest, welche Überschriften berücksichtigt werden – über die Überschriften-Ebene (h1 bis h6) und/oder eigene CSS-Selektoren – und welche Bereiche ausgeschlossen bleiben. Die Verschachtelung der Ebenen wird dabei automatisch übernommen, sodass Unterüberschriften eingerückt unter ihrer Hauptüberschrift erscheinen.

Beispiel im Storefront: Das Inhaltsverzeichnis verlinkt automatisch auf die Überschriften der Seite und bildet deren Hierarchie ab.

Tipp für eine gute Orientierung

Platziere das Element möglichst weit oben auf einer langen Seite. So erhalten deine Besucher sofort einen Überblick über alle Inhalte und springen mit einem Klick direkt zum gewünschten Abschnitt.

Allgemein

Im Reiter Allgemein legst du die Überschrift des Verzeichnisses fest und steuerst, welche Inhalte als Sprungmarken übernommen werden. Die beiden Unterreiter Einbeziehen und Ausschließen bündeln dabei die jeweiligen Quellen.

Funktion	Beschreibung
Überschrift des Inhaltsverzeichnisses (1)	Optionale Überschrift, die über der Verlinkungsliste angezeigt wird. Bleibt das Feld leer, erscheint nur die Liste. Den Überschrift-Typ (h1–h6) und das Verhalten bestimmst du im Reiter SEO.
Überschriften (2)	Wähle die Überschriften-Ebenen (h1 bis h6), die automatisch als Sprungmarken übernommen werden. Die Reihenfolge und Verschachtelung auf der Seite bildet das Inhaltsverzeichnis hierarchisch ab.
CSS Selektoren – Einbeziehen (3)	Zusätzlich zu den Überschriften kannst du einzelne Sektionen, Blöcke oder Elemente per CSS-Selektor (z. B. .meine-klasse oder #meine-id) aufnehmen. Bestätige jeden Selektor einzeln mit Enter.

Einbeziehen & Ausschließen

Über die beiden Schalter Einbeziehen und Ausschließen trennst du die Quellen sauber: Links bestimmst du, was im Verzeichnis landet, rechts schließt du gezielt einzelne Bereiche wieder aus.

Ausschließen

Im Unterreiter Ausschließen blendest du einzelne Bereiche gezielt aus dem Inhaltsverzeichnis aus – auch wenn ihre Überschriften eigentlich zur gewählten Ebene passen.

Funktion	Beschreibung
CSS Selektoren – Ausschließen (1)	Lege per CSS-Selektor fest, welche Bereiche nicht im Inhaltsverzeichnis erscheinen sollen – etwa wiederkehrende Banner, Teaser oder das Inhaltsverzeichnis selbst. Bestätige auch hier jeden Selektor einzeln mit Enter.

SEO - Einstellungen

Über den Reiter SEO bestimmst du, als welcher Überschriften-Typ die optionale Verzeichnis-Überschrift ausgegeben wird.

SEO