WordPress Inhaltsverzeichnis mit Elementor erstellen

So erstellst du ein Inhaltsverzeichnis für Seiten und Beiträge mit Elementor

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!

 data-lazy-src=

Hi, ich bin Lea! 2017 habe ich mein erstes Online-Projekt Punktkariert an den Start gebracht und neben meiner Liebe für's Schreiben vor allem auch meine Liebe für Tools entdeckt.

Ja, es klingt komisch... aber ich könnte mich stundenlang darin verlieren, neue Tools zu entdecken. (Könnte? Okay, es passiert regelmäßig. #nerd)

Die eigene Website, das Marketing drumherum, Produkte online erstellen und verkaufen - all das ist einfacher mit den richtigen Tools. Und genau diese Tools lernst du hier kennen!

8 Kommentare zu „So erstellst du ein Inhaltsverzeichnis für Seiten und Beiträge mit Elementor“

  1. 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

    1. 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.

  2. 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

    1. Hmm, leider nicht – schreib am besten mal direkt an den Elementor Support, die können dir da sicher eher weiterhelfen als ich 🙂

  3. 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

    1. 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?

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht.

Scroll to Top
WordPress Cookie Hinweis von Real Cookie Banner