Wenn du sehr lange Blogartikel schreibst oder auch längere Seiten auf deiner Website hast, kann es sinnvoll sein, zu Beginn ein Inhaltsverzeichnis einzufügen!
Das macht es für deine Leser:innen einfacher, sich durch den Artikel oder die Seite zu navigieren und genau das zu finden, was sie gerade suchen.
Es gibt verschiedene Möglichkeiten, wie du in WordPress ein Inhaltsverzeichnis erstellen kannst.
Ich zeige dir in diesem Artikel, wie du das mit dem "Table of Content" Widget von Elementor machen kannst - der Vorteil hierbei: Du brauchst kein extra Plugin nur für das Inhaltsverzeichnis, sondern hast es direkt in Elementor integriert!
Das Inhaltsverzeichnis Widget ist in Elementor Pro enthalten.
Inhaltsverzeichnis mit Elementor: So geht's
Wenn du Elementor Pro auf deiner Website installiert hast, kannst du auf der gewünschten Seite (die du dafür natürlich auch mit Elementor erstellt haben musst) in den Elementor Editor wechseln.
Such dann am besten nach "Table of Content" und ziehe das Widget an die gewünschte Stelle auf der Seite bzw. im Beitrag.
Wie jedes andere Elementor Widget auch ist das Inhaltsverzeichnis in die Bereiche Inhalt, Stil und Erweitert unterteilt. Alle wichtigen Einstellungen gehen wir jetzt der Reihe nach durch.
Inhalt
Unter Titel kannst du zunächst quasi die Überschrift deines Inhaltsverzeichnisses festlegen (bei mir hier "Überblick") und den HTML-Tag festlegen. Vorausgewählt ist H4.
Als nächstes legst du fest, welche Überschriften im Inhaltsverzeichnis angezeigt werden. Es ist daher wichtig, dass dein Text eine gute Struktur dieser HTML-Tags für Überschriften hat.
Du kannst einzelne HTML-Tags auswählen, so wie bei mir hier H2, oder du schließt einzelne Tags aus.
Bei Markier View legst du fest, ob die Punkte im Inhaltsverzeichnis mit Nummern angezeigt werden (1, 1.1, 1.2, 2, 2.1 usw.) oder mit Bullet Points.
Als nächstes hast du im Bereich Inhalt noch "Weitere Optionen". Hier legst du z.B. fest, ob die Unterüberschriften jeweils eingerückt werden. Das würde ich dir empfehlen - es macht dein Inhaltsverzeichnis definitiv übersichtlicher. Dafür aktivierst du den Punkt "Hierarchical View".
Außerdem kannst du hier entscheiden, ob das Inhaltsverzeichnis minimiert werden kann, ab welcher Bildschirmgröße das automatisch der Fall ist (auf Tablets oder erst auf Smartphones) und wie die Icons aussehen.
Insgesamt legst du also - wie gewohnt bei Elementor - unter Inhalt fest, was genau in deinem Inhaltsverzeichnis enthalten sein soll.
Besonders wichtig sind hier natürlich wie erwähnt die HTML-Tags der enthaltenen Überschriften!
Stil
Jetzt geht's ans Design deines Inhaltsverzeichnisses, wie gewohnt machst du das im Bereich Stil. Du kannst hier zum einen die gesamte Box bearbeiten, sowie jeweils separat die Kopfzeile und die Liste an sich.
Wie immer kannst du hier jetzt jeden Aspekt des Widgets so anpassen, wie du es gerne hättest: die Hintergrund- und Rahmenfarbe, Abstände, abgerundete Ecken oder nicht.
Bei den einzelnen Abschnitten Kopfzeile und Liste legst du dann die Schriftart, -größe und -farbe fest.
Am einfachsten ist es, wenn du dich einfach durch die einzelnen Optionen klickst und schaust, was dir gefällt und was zu deiner Seite passt!
Bonus: Sticky Inhaltsverzeichnis mit Elementor
Du kannst das Inhaltsverzeichnis mit Elementor ganz simpel zu Beginn deines Blogartikels oder deiner Seite einfügen, so wie ich dir gerade gezeigt habe.
Du hast aber auch die Option, ein sticky Inhaltsverzeichnis zu erstellen, das dann beim Scrollen z.B. dauerhaft an der linken Seite angezeigt wird!
Wie das funktioniert, zeige ich dir im Video-Tutorial. Vorher gehe ich auch nochmal die allgemeinen Einstellungsoptionen für das Widget durch.
Hast du noch Fragen dazu, wie du mit Elementor Pro dein Inhaltsverzeichnis erstellen kannst? Schreib sie gerne in die Kommentare!
______
Einige Links im Beitrag sind Affiliate Links. Wenn du dir darüber Elementor Pro kaufst, erhalte ich eine Vermittlungsprovision – für dich bleibt der Preis selbstverständlich gleich!
Kommentarfunktion geschlossen.