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.
Hol dir 39 gratis Elementor Templates für deine Website!
Meld dich jetzt für den Toolkiste Newsletter an – du erhältst ca. 2 bis 3 Mal im Monat eine E-Mail mit allen neuen Tutorials, exklusiven Rabattcodes sowie Updates rund um Elementor und weitere Tools.
Als Dankeschön für deine Anmeldung erhältst du 39 Template-Blöcke für Elementor direkt nach der Anmeldung zugeschickt!
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!
Hallo
Vielen Dank für diesen tollen Beitrag und die Anleitung! Genau das suchte ich.
Grüsse aus der Schweiz
Silvester
Super, das freut mich! 🙂
Hallo Lea,
ich bin durch Zufall auf Deinen Blog gestoßen. Eine wahre Goldgrube!!!
Super!
Ich habe da mal eine Frage / ein Problem, vielleicht hast Du die zündende Idee.
Ich bin gerade dabei, meine Homepage aufzubauen, die noch nicht online ist 🙂
Ich benutze Elementor Pro in einem Theme (Bard von http://www.wp-royal.com).
Ich möchte alle H4 Überschriften im Inhaltsverzeichnis anzeigen lassen.
So weit, so gut. Das funktioniert auch.
Aber die Nummerierung ist nicht
1.
2.
3.
sondern
1.1.
2.2.
3.3.
Ich habe echt keine Ahnung wie ich das in den Griff bekommen soll.
Ich freue mich schon auf weitere Videos von Dir!
Gruß
Jörg
Ich weiß leider nicht genau, ob ich dich richtig verstehe – bei den Unterüberschriften wird immer diese Hierarchie angezeigt. Das müsstest du im Widget aber auch ausstellen können.
Hallo, Lea,
ich bin über YouTube auf deine Blog aufmerksam geworden. Vielen Dank für Deine vielen Tipps und Tricks.
Das „Table of Content“-Widget treibt mich jedoch gerade in den Wahnsinn. Meine Überschriften sind zu lang und das Widget schreibt bei einer langen Überschrift einfach wieder in der gleichen Zeile am Anfang weiter. Das ist natürlich nicht lesbar.
Klar, kein Problem, dafür gibt es doch den „Wordwrap“-Schalter, oder?
Tja, der lässt aber bei mir die Überschriften gleich ganz verschwinden.
Hast du vielleicht eine Idee, wie man das in den Griff bekommt?
Viele Grüße aus dem Sauerland
Ralph
Hmm, leider nicht – schreib am besten mal direkt an den Elementor Support, die können dir da sicher eher weiterhelfen als ich 🙂
Hallo Lea,
Du hast das Plugin sehr gut erklärt. Bravo.
Ich habe aber noch Fragen dazu:
Wie kann [show/hide] ändern dh.
1. Text anpassen
2. Grösse
3 .Farbe anpassen
Lieben Dank für deine Rückmeldung
Gruss Kerstin
Ich weiß leider nicht genau, was du meinst – im „Table of Content“ Widget von Elementor wird bei mir show bzw. hide angezeigt. Benutzt du vielleicht ein anderes Plugin für dein Inhaltsverzeichnis?
Hallo Lea,
ich habe schon viel von deinen Videos gelernt. Ich habe gerade das Problem, dass meine Exzerpte ganz am Anfang nicht den eigentlichen Text nehmen, sondern die Überschriften aus dem „Table of content“ Widget. Hast du eine Idee, wie ich das auschließen kann?
Liebe Grüße
Guido
Was meinst du denn mit ganz am Anfang? In der Übersicht auf der Blogseite? Das kannst du lösen, indem du einen sog. Textauszug für jeden Beitrag festlegst. Das machst du nicht in Elementor, sondern in WordPress selbst, wenn du einen Beitrag öffnest.