Der Inhaltsverzeichnis-Block generiert automatisch ein klickbares Navigationsmenü basierend auf den Überschriften, die auf Ihrer SeedProd-Seite gefunden wurden. Besucher können alle Ihre Abschnitte auf einen Blick scannen und direkt zu den benötigten Inhalten springen – ohne die gesamte Seite scrollen zu müssen.
Dieser Block ist besonders nützlich für Langform-Inhalte wie detaillierte Anleitungen, Tutorials, Produktdokumentationen und mehrteilige Landingpages. Sie steuern, welche Überschriftenebenen einbezogen werden, ob eine Nummerierung angezeigt wird, wie verschachtelte Elemente eingerückt werden und ob die Box von Besuchern einklappbar ist. Das Design ist vollständig anpassbar mit separaten Typografie-, Farb- und Rahmensteuerungen für den Titel, die Links und den Container.
Hinzufügen des Inhaltsverzeichnis-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Inhaltsverzeichnis-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke den Inhaltsverzeichnis-Block per Drag & Drop in den gewünschten Bereich Ihrer Seite. Dieser Block wird normalerweise am Anfang Ihres Inhalts platziert, nach einer kurzen Einleitung, aber bevor die Hauptabschnitte beginnen.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Inhaltsverzeichnis-Block, um seine Einstellungen zu öffnen. Im Tab Inhalt sind die Einstellungen in zwei Gruppen unterteilt.
Allgemein:
- Titel anzeigen: Schalten Sie um, ob über dem Inhaltsverzeichnis ein Titel angezeigt wird. Stellen Sie auf Ja, um eine Überschriftenbeschriftung anzuzeigen, oder auf Nein, um nur Links anzuzeigen.
- Titeltext: Geben Sie den Text ein, der als Überschrift des Inhaltsverzeichnisses angezeigt wird, wenn Titel anzeigen aktiviert ist (Standard: „Inhaltsverzeichnis“).
- Titel-Tag: Wählen Sie das HTML-Überschriften-Tag, das zum Rendern des Titels verwendet wird – H2, H3, H4 oder DIV.
- Überschriften einschließen: Geben Sie eine durch Kommas getrennte Liste von Überschriftenebenen ein, nach denen gesucht werden soll (z. B. h2,h3,h4). Nur Überschriften, die diesen Tags entsprechen, werden in der generierten Navigation angezeigt.
- Inhaltscontainer: Geben Sie einen CSS-Selektor ein, um die Suche nach Überschriften auf einen bestimmten Bereich der Seite zu beschränken. Lassen Sie das Feld leer, um die gesamte Seite zu durchsuchen.
- Selektoren ausschließen: Geben Sie durch Kommas getrennte CSS-Selektoren für alle Überschriften ein, die vom Inhaltsverzeichnis ausgeschlossen werden sollen.
- Nummern anzeigen: Schalten Sie die automatische Nummerierung für Inhaltsverzeichniselemente um (Ja/Nein).
- Hierarchische Nummerierung: Verwenden Sie verschachtelte Nummerierungen für Unterüberschriften, wenn Nummern anzeigen aktiviert ist (z. B. 1.1, 1.2, 2.1).
- Sanftes Scrollen: Aktivieren Sie eine sanfte Scroll-Animation, wenn Besucher auf einen Link im Inhaltsverzeichnis klicken (Ja/Nein).
- Scroll-Offset (px): Legen Sie die Anzahl der Pixel fest, um das Scrollziel zu versetzen – nützlich, wenn Ihre Seite einen festen Header hat, der sonst die Zielüberschrift verdecken würde.
- Listenstil: Wählen Sie den Aufzählungsstil für Inhaltsverzeichniselemente: Keine, Kreis, Quadrat oder Dezimal.
Zusätzliche Optionen:
- Minimieren: Ermöglicht Besuchern, die gesamte Inhaltsübersicht mit einer Umschalt-Schaltfläche ein- und auszublenden (Ja/Nein).
- Erweitern-Symbol: Wählen Sie das Symbol, das auf der Umschalt-Schaltfläche angezeigt wird, wenn die Inhaltsübersicht minimiert ist.
- Minimieren-Symbol: Wählen Sie das Symbol, das auf der Umschalt-Schaltfläche angezeigt wird, wenn die Inhaltsübersicht erweitert ist.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie das visuelle Erscheinungsbild und das Verhalten Ihres Inhaltsübersicht-Blocks anpassen.
Titelstile (nur sichtbar, wenn Titel anzeigen aktiviert ist):
- Titel-Typografie: Legen Sie Schriftfamilie, Größe, Schriftschnitt, Stil, Zeilenhöhe, Buchstabenabstand und Groß-/Kleinschreibung für die Überschrift der Inhaltsübersicht fest.
- Titel-Farbe: Wählen Sie die Textfarbe für die Überschrift.
- Titel-Abstand: Passen Sie den unteren Rand zwischen dem Titel und der Linkliste an (0–50px).
Link-Stile:
- Link-Typografie: Legen Sie Schriftfamilie, Größe, Schriftschnitt, Stil und andere typografische Eigenschaften für die Navigationslinks fest.
- Link-Farbe: Legen Sie die Standardfarbe für Links in der Inhaltsübersicht fest.
- Link-Hover-Farbe: Legen Sie die Farbe fest, die Links anzeigen, wenn Besucher mit der Maus darüber fahren.
- Element-Abstand: Steuern Sie den vertikalen Abstand zwischen jedem Element in der Liste (0–30px).
- Listen-Einzug: Legen Sie den horizontalen Einzug fest, der auf verschachtelte Überschriftenebenen angewendet wird (0–100px).
Container-Stile:
- Hintergrundfarbe: Legen Sie die Hintergrundfarbe für den gesamten Container der Inhaltsübersicht fest.
- Container-Breite: Passen Sie die Breite des Containers mit einem Schieberegler an, mit einem Einheitenumschalter zum Wechseln zwischen Pixeln (0–1200) und Prozent (0–100).
- Container-Innenabstand: Legen Sie den inneren Abstand zwischen den Container-Rändern und dem Inhalt fest (1–100px).
- Rahmen: Fügen Sie einen Rahmen um den Container hinzu und konfigurieren Sie ihn – wählen Sie den Rahmenstil, legen Sie einzelne Breiten für jede Seite fest (Oben, Rechts, Unten, Links) und wählen Sie eine Rahmenfarbe.
- Rahmenradius: Runden Sie die Ecken des Containers ab (0–50px).
Abstand:
- Abstand: Legen Sie den äußeren Abstand um den Block auf allen vier Seiten fest, mit unabhängigen Steuerelementen für Desktop, Tablet und Mobilgerät.
- Innenabstand: Legen Sie den inneren Abstand innerhalb des Block-Wrappers auf allen vier Seiten fest, mit geräteabhängigen Steuerelementen.
Attribute:
- Benutzerdefinierte Klasse: Fügen Sie dem Block-Wrapper eine oder mehrere benutzerdefinierte CSS-Klassen für gezieltes Styling hinzu.
- CSS-ID: SeedProd generiert automatisch eine eindeutige CSS-ID für diesen Block. Sie können diese verwenden, um den Block in benutzerdefiniertem CSS oder JavaScript zu referenzieren.
- Benutzerdefinierte Attribute: Fügen Sie dem Block-Wrapper-Element benutzerdefinierte HTML-Attribute hinzu. Geben Sie jedes Attribut in einer neuen Zeile im Schlüssel|Wert-Format ein.
Position:
- Position: Legen Sie die CSS-Positionierung des Blocks fest – Statisch, Relativ, Fest, Absolut oder Klebend – mit unabhängigen Werten für Desktop, Tablet und Mobilgerät.
- Abstand: Bei Verwendung der Fest-, Absolut- oder Klebend-Positionierung legen Sie die Abstände Oben, Rechts, Unten und Links pro Gerät fest.
- Z-Index: Legen Sie die Stapelreihenfolge des Blocks relativ zu anderen Elementen auf der Seite fest, mit Werten pro Gerät.
- Überlauf: Steuern Sie, wie Inhalte behandelt werden, die über die Blockgrenzen hinausgehen – Sichtbar, Versteckt, Scrollen oder Automatisch – pro Gerät.
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Umschalten, um den Block auf Desktop-Bildschirmen auszublenden.
- Auf Tablet ausblenden: Umschalten, um den Block auf Tablet-Bildschirmen auszublenden.
- Auf Mobilgeräten ausblenden: Umschalten, um den Block auf Mobilgeräten auszublenden.
Animationseffekte:
- Scrolleffekt: Wenden Sie eine scrollgesteuerte Animation auf den Block an, einschließlich Optionen für vertikales und horizontales Scrollen mit Steuerelementen für Richtung, Geschwindigkeit und Ansichtsfensterversatz.
- Mauseffekt: Wenden Sie einen Parallax-Effekt auf den Block an, der durch Mausbewegungen gesteuert wird.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie mit der Konfiguration des Inhaltsübersicht-Blocks und der Anpassung seines Erscheinungsbilds fertig sind, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Inhaltsverzeichnis-Block zu Ihrer Seite hinzugefügt! Dieses Navigationswerkzeug hilft Besuchern, die Struktur Ihrer Seite sofort zu verstehen und die für sie relevantesten Abschnitte zu erreichen. Experimentieren Sie mit Überschriftenebenen, Listenstilen und Container-Stilen, um ein Inhaltsverzeichnis zu erstellen, das sich natürlich in Ihr Seitendesign einfügt und Ihr Publikum fesselt.