Der Block „Inhaltsverzeichnis“ generiert automatisch ein anklickbares Navigationsmenü, das auf den Überschriften Ihrer SeedProd-Seite basiert. Besucher können alle Ihre Abschnitte auf einen Blick überfliegen und direkt zu den gewünschten Inhalten springen – ohne die gesamte Seite durchblättern zu müssen.
Dieser Block eignet sich besonders für längere Inhalte wie detaillierte Anleitungen, Tutorials, Produktdokumentationen und mehrteilige Landingpages. Sie können festlegen, welche Überschriftenebenen enthalten sind, ob eine Nummerierung angezeigt wird, wie verschachtelte Elemente eingerückt werden und ob die Box von Besuchern ausgeblendet werden kann. Das Design ist vollständig anpassbar, mit separaten Einstellungen für Schriftart, Farbe und Rahmen für den Titel, die Links und den Container.
Hinzufügen des Inhaltsverzeichnisses 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 Block „Inhaltsverzeichnis“ per Drag & Drop in den gewünschten Abschnitt Ihrer Seite. Dieser Block wird in der Regel oben in Ihrem Inhalt platziert, nach einer kurzen Einleitung, aber vor den Hauptabschnitten.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Block „Inhaltsverzeichnis“, um dessen Einstellungen zu öffnen. Auf der Registerkarte „Inhalt“ sind die Einstellungen in zwei Gruppen unterteilt.
Allgemein:
- Titel anzeigen: Legt fest, ob über dem Inhaltsverzeichnis ein Titel angezeigt wird. Setzen Sie diese Option auf „Ja“, um eine Überschrift 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 einbeziehen: Geben Sie eine durch Kommas getrennte Liste der Ü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 das Scannen von Überschriften auf einen bestimmten Bereich der Seite zu beschränken. Lassen Sie das Feld leer, um die gesamte Seite zu scannen.
- Selektoren ausschließen: Geben Sie durch Kommas getrennte CSS-Selektoren für alle Überschriften ein, die Sie aus dem Inhaltsverzeichnis auslassen möchten.
- Nummern anzeigen: Automatische Nummerierung für Inhaltsverzeichniselemente aktivieren/deaktivieren (Ja/Nein).
- Hierarchische Nummerierung: Verwenden Sie verschachtelte Nummerierung für Unterüberschriften, wenn „Nummern anzeigen“ aktiviert ist (z. B. 1.1, 1.2, 2.1).
- Reibungsloses Scrollen: Aktivieren Sie eine reibungslose Scroll-Animation, wenn Besucher auf einen Link im Inhaltsverzeichnis klicken (Ja/Nein).
- Bildlaufversatz (px): Legen Sie die Anzahl der Pixel fest, um die das Bildlaufziel versetzt werden soll – dies ist nützlich, wenn Ihre Seite eine feste Kopfzeile hat, die sonst die Zielüberschrift verdecken würde.
- Listenstil: Wählen Sie den Aufzählungsstil für die Elemente im Inhaltsverzeichnis: Keine, Scheibe, Kreis, Quadrat oder Dezimal.
Zusätzliche Optionen:
- Minimieren-Box: Besuchern ermöglichen, das gesamte Inhaltsverzeichnis mithilfe einer Umschaltfläche (Ja/Nein) ein- und auszublenden.
- Symbol erweitern: Wählen Sie das Symbol aus, das auf der Umschalttaste angezeigt wird, wenn das Inhaltsverzeichnis ausgeblendet ist.
- Symbol ausblenden: Wählen Sie das Symbol aus, das auf der Umschalttaste angezeigt wird, wenn das Inhaltsverzeichnis erweitert ist.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie das Erscheinungsbild und das Verhalten Ihres Inhaltsverzeichnisses anpassen.
Titelstile (nur sichtbar, wenn „Titel anzeigen“ aktiviert ist):
- Titeltypografie: Legen Sie die Schriftfamilie, Größe, Stärke, den Stil, die Zeilenhöhe, den Buchstabenabstand und die Groß-/Kleinschreibung für die Überschrift des Inhaltsverzeichnisses fest.
- Titel Farbe: Wählen Sie die Textfarbe für die Überschrift.
- Titelabstand: Passen Sie den unteren Rand zwischen dem Titel und der Liste der Links an (0–50 px).
Link-Stile:
- Link-Typografie: Legen Sie die Schriftart, Größe, Stärke, den Stil und andere typografische Eigenschaften für die Navigationslinks fest.
- Linkfarbe: Legen Sie die Standardfarbe für Links im Inhaltsverzeichnis fest.
- Farbe beim Überfahren mit der Maus: Legen Sie die Farbe fest, in der Links angezeigt werden, wenn Besucher mit der Maus darüber fahren.
- Elementabstand: Steuert den vertikalen Abstand zwischen den einzelnen Elementen in der Liste (0–30 px).
- Listen-Einzug: Legen Sie den horizontalen Einzug fest, der auf verschachtelte Überschriftenebenen angewendet wird (0–100 px).
Container-Stile:
- Hintergrundfarbe: Legen Sie die Hintergrundfarbe für den gesamten Inhaltsverzeichnis-Container fest.
- Containerbreite: Passen Sie die Breite des Containers mithilfe eines Schiebereglers an, wobei Sie mit einer Einheitenumschaltung zwischen Pixeln (0–1200) und Prozentangaben (0–100) wechseln können.
- Container-Abstand: Legt den inneren Abstand zwischen den Containerkanten 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 individuelle Breiten für jede Seite fest (oben, rechts, unten, links) und wählen Sie eine Rahmenfarbe aus.
- Border Radius: Die Ecken des Containers abrunden (0–50px).
Abstand:
- Rand: Legen Sie den äußeren Abstand um den Block herum auf allen vier Seiten fest, mit unabhängigen Steuerelementen für Desktop, Tablet und Mobilgeräte.
- Abstand: Legen Sie den inneren Abstand innerhalb des Block-Wrappers an allen vier Seiten fest, mit gerätespezifischen Steuerelementen.
Attribute:
- Benutzerdefinierte Klasse: Fügen Sie dem Block-Wrapper eine oder mehrere benutzerdefinierte CSS-Klassen hinzu, um ein gezieltes Styling zu erzielen.
- CSS-ID: SeedProd generiert automatisch eine eindeutige CSS-ID für diesen Block. Sie können diese ID 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 Format Schlüssel|Wert 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äte.
- Versatz: Bei Verwendung der Positionierung „Fest“, „Absolut“ oder „Fixiert“ legen Sie die Versatzabstände oben, rechts, unten und links pro Gerät fest.
- Z-Index: Legt die Stapelreihenfolge des Blocks relativ zu anderen Elementen auf der Seite fest, mit gerätespezifischen Werten.
- Überlauf: Legen Sie fest, wie Inhalte, die über die Blockgrenzen hinausragen, behandelt werden sollen – sichtbar, ausgeblendet, scrollbar oder automatisch – je nach Gerät.
Geräte-Sichtbarkeit:
- Auf dem Desktop ausblenden: Umschalten, um den Block bei der Anzeige auf Desktop-Bildschirmen auszublenden.
- Auf Tablet ausblenden: Umschalten, um den Block bei der Anzeige auf Tablet-Bildschirmen auszublenden.
- Auf Mobilgeräten ausblenden: Schalten Sie diese Option ein, um den Block auf Mobilgeräten auszublenden.
Animationseffekte:
- Scroll-Effekt: Wende eine scroll-gesteuerte Animation auf den Block an, einschließlich Optionen für vertikales und horizontales Scrollen mit Steuerelementen für Richtung, Geschwindigkeit und Viewport-Offset.
- Mouse Effect: Wende einen durch Mausbewegungen gesteuerten Parallax-Effekt auf den Block an.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Inhaltsverzeichnisses abgeschlossen und dessen Darstellung angepasst haben, speichern Sie Ihre Arbeit.
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 finden. Experimentieren Sie mit Überschriftenebenen, Listenstilen und Container-Stilen, um ein Inhaltsverzeichnis zu erstellen, das sich natürlich in Ihr Seitendesign einfügt und das Interesse Ihrer Zielgruppe weckt.