Elementor Inhaltsverzeichnis-Element im Gutenberg-Editor verwenden

Inhaltsverzeichnis über Elementor (Pro) in Gutenberg einsetzen

Besonders bei Long Form Content hat sich die Integration eines Inhaltsverzeichnisses etabliert.

Das Problem ist, dass der Gutenberg-Editor in der aktuellen Version keinen Inhaltsverzeichnis-Block anbietet. Und damit entfällt die naheliegendste Lösung.

Plugins für Inhaltsverzeichnisse gibt es im WordPress Repository einige. Der Suchbegriff dafür lautet TOC / Table of Contents.

Wenn du für deine Website mit Elementor (in der Premium-Version!) arbeitest, brauchst du das aber nicht. Du kannst dir die Installation eines solchen Monofunktions-Plugins sparen. Und du musst auch nicht mehr auf Gutenberg warten.

Denn Elementor besitzt in der Pro-Version ein recht gutes Inhaltsverzeichnis-Widget. Du findest es unter Elemente mit dem Namen „Table of Contents“.

Ich setze es auch für meinen eigenen Blog ein.

Im normalen Workflow erstellst du für deine Blog-Beiträge ein Template mit Elementor (Single Post) und speicherst es so ab, dass alle Beiträge deiner Website damit angezeigt werden.

Sobald du nun einen neuen Beitrag erstellst, wird das Template verwendet und mit den dynamischen Elementen (z.B. Blogtitel, Blogbild und Content) gefüllt. So sehen alle Blog-Beiträge perfekt und wie aus einem Guss aus.

Und natürlich kannst du auch das Table of Contents-Widget in das Blog-Template einbauen. Es zieht sich dann automatisch die Headlines aus dem Text und zeigt sie als Sprungmarken an. Smooth Scrolling inklusive. Nice!

Wie das abläuft und wie man das Inhaltsverzeichnis-Element richtig schön stylt, sieht man in diesem Elementor-YouTube-Video, gezeigt von niemand geringerem als dem Elementor-Team.

Bei meinem Kunden Wächter Pflanzencenter habe ich das Inhaltsverzeichnis ganz klassisch seitlich vom Blog-Text platziert. Das lässt sich ganz einfach über das Blog-Template von Elementor bewerkstelligen.

Du kannst das TOC-Widget prinzipiell überall platzieren – oberhalb des Textes, links oder rechts davon. Nur nicht mittendrin! Aber das möchte ich gern. Und darum geht es in diesem Blog-Beitrag.

Elementor TOC-Widget mitten im Gutenberg-Text platzieren

Warum du das TOC-Widget nicht mitten in den langen Fließtext platzieren kannst, liegt auf der Hand: Es gibt nur ein einziges Inhalts-Widget für das Blog-Template. Es heißt bei Elementor „Beitrag Inhalt“.

Sobald du es in das Blog-Template einsetzt, wird es komplett mit dem gesamten Text aus dem Gutenberg-Editor gefüllt. Es ist also ein großer Abschnitt. Unterbrechungen sind nicht möglich.

Umgehen könntest du das Problem, indem du dich damit begnügst, das Inhaltsverzeichnis direkt nach einem kurzen Intro zu platzieren.

Dieses Intro könnte der Textauszug sein, den du in der rechten Spalte unter Beitrag findest. Dieser steht ja als weitere Textmöglichkeit, neben dem Content-Bereich zur Verfügung.

Das wäre dann von der Reihenfolge: Blogtitel – Intro – Inhaltsverzeichnis – Blogtext.

Die Nachteile überwiegen allerdings: Es gibt keine Styling-Möglichkeiten. Und eventuell nutzt du den Textauszug bereits für deine Blog-Teaser – und dein Introtext soll sich davon unterscheiden.

Außerdem ist der Textauszug so abseits, dass du ihn häufig vergessen würdest.

Aber vor allem ist mein Ziel, das Inhaltsverzeichnis an eine beliebige Stelle im Text zu platzieren – so wie es auch mit jedem Gutenberg-Block möglich ist.

Und so klappt das noch nicht.

Welche Optionen gibt es noch? Sicher könntest du auch mit WordPress-Plugins wie ACF oder Pods arbeiten und weitere Text-Bestandteile erstellen, die dann wiederum mit Elementor im Blog-Template zu einem schönen Ganzen gebaut werden.

Ich mache das zum Beispiel bei meinem Kunden stadtteilMAKLER. Hier gibt es einen Custom Post Type „Objekte“, der aus vielen dynamischen Elementen zusammengestellt ist.

Allerdings würde ich dir das nur dann empfehlen, wenn du auch noch die anderen Möglichkeiten, die solche CPT-Plugins bieten, ausschöpfst. Der Lernaufwand ist außerdem recht hoch.

Elementor Templates mit dem Plugin „Elementor Blocks for Gutenberg“ integrieren

Es gibt einen viel einfacheren Workaround.

Auch diese Lösung funktioniert zwar über ein Plugin. Aber dieses Plugin ist so simpel, universell und praktisch, dass sich die Installation auf jeden Fall lohnt.

Gleichzeitig eröffnest du dir damit noch viele weitere Möglichkeiten. Denn das Plugin macht es möglich, Elementor-Templates direkt im Gutenberg-Editor auszugeben.

Das Plugin heißt Elementor Blocks for Gutenberg und ist kostenlos.

Mit diesem Plugin kannst du nun direkt im Gutenberg-Editor, an eine vollkommen beliebige Stelle, das Inhaltsverzeichnis-Widget von Elementor platzieren.

Cool, oder?

Das Plugin ist übrigens von den Machern von Elementor, was zumindest mir ein gutes Gefühl gibt.

Wer, wenn nicht das Elementor-Team selbst, sollte daran interessiert sein, ein hochwertiges und nahtlos mit dem Elementor-Pagebuilder verwobenes Plugin zu bieten?

Template in Elementor erstellen und stylen

Zunächst brauchst du ein Elementor-Template. Dazu erstellst du einfach einen Abschnitt und speicherst ihn unter einem sinnvollen Namen ab.

Ich hab das Template „Gutenberg TOC“ genannt.

Geh dazu in der Admin-Seitenleiste auf Templates -> Neu hinzufügen.

Nun kannst du das Template beliebig stylen. Ich hab einen Container verwendet, das Inhaltsverzeichnis per Drag & Drop reingezogen und die Schriften, Farben, Ränder und Icons gestaltet. So passt es zum Rest meiner Website.

In dem Elementor-Video, welches ich dir weiter oben verlinkt habe, kannst du dir den Prozess des Stylings in Ruhe anschauen.

Wenn du fertig bist, nur noch abspeichern. Jetzt steht dir das Template für Gutenberg zur Verfügung.

Ein Nachteil ist, dass im Vorschaumodus von Elementor keine Headlines angezeigt werden. Selbst, wenn du einen bestehenden Blogartikel auswählst. An dieser Stelle schwächelt das Modell leider.

Du siehst das Ergebnis also immer nur dann, wenn du im Vorschaumodus vom Gutenberg-Editor bist.

Das Elementor-Template einbinden in Gutenberg

Der Prozess des Einbindens ist ganz einfach.

Erst installierst und aktivierst du das Plugin. Das geht genauso wie bei jedem anderen WordPress-Plugin.

Damit steht dir direkt ein neuer Gutenberg-Block mit dem Namen „Elementor Library“ zur Verfügung. 

Nun platzierst du den neuen Elementor-Block an die Stelle, an der das Inhaltsverzeichnis erscheinen soll. Im Dropdown wählst du nur noch das Template aus, das du gerade erstellt hast.

Das war’s! Der Elementor-Block wird jetzt im Gutenberg-Editor angezeigt. Auch wenn die Ansicht nicht besonders viel mit dem echten Ergebnis zu tun hat.

Styling-Tipps für das Inhaltsverzeichnis

Von Vorteil kann es sein, wenn du das Inhaltsverzeichnis in einem zugeklappten Zustand anzeigst („Minimize Box“). Das spart Platz. Und nicht jeder Nutzer interessiert sich vielleicht dafür.

Bei Handys ist das besonders sinnvoll, gerade wenn das Inhaltsverzeichnis sehr lang ist.

Außerdem kannst du überlegen, bestimmte Überschriften auszuschließen.

Zum Beispiel möchte ich die erste H2-Überschrift aus meinem Text, die oberhalb des Inhaltsverzeichnisses liegt, nicht anzeigen.

Dazu gebe ich dieser Überschrift in Gutenberg eine CSS-Klasse (z.B. toc-ignore), die ich dann unter „Ausschließen“ (oder Exclude) im TOC-Widget eintrage.

Dann als .toc-ignore – Punkt nicht vergessen, sonst klappt es nicht.

Responsiveness des Inhaltsverzeichnisses checken

Bevor du deine Artikel veröffentlichst, schau einmal, was für alle Bildschirmgrößen daraus gemacht wird. Niemand will ein zerschossenes Layout sehen.

Wir arbeiten ja hier mit mehreren Verschachtelungen: Das Blog-Template gibt eine Breite vor. Darin ist dann der Text aus dem Gutenberg-Editor. Darin ist dann ein weiteres Elementor-Template mit dem Inhaltsverzeichnis.

Dann kann es gut zu Verzerrungen kommen. Zum Glück lassen sich die Responsive-Einstellungen mit Elementor sehr elegant vornehmen. Auf dieser Ebene solltest du die Anpassungen machen, denn nur hier hast du wirklich Einfluss.

Der Gutenberg-Editor hat da leider nicht viel zu bieten. Responsive-Einstellungen sind nicht zu finden. Daher muss Elementor diese Aufgabe übernehmen.

Verschiedene TOCs vorbereiten und individuell auswählen

Wer sagt denn, dass das Inhaltsverzeichnis immer gleich aussehen muss? Wer Spaß daran hat, kann sich verschiedene Templates vorbereiten und individuell einsetzen.

Das kann bei extrem langen Blogartikeln sinnvoll sein, bei denen du nur die H2-Überschriften ausgeben lassen möchtest. Andere Blogartikel benötigen vielleicht mehrere Hierarchieebenen.

Und noch eine tolle Möglichkeit, die du mit einem reinen Elementor-Blog-Template so nicht hättest: Bei sehr kurzen Blogartikeln, die kein Inhaltsverzeichnis brauchen, lässt du den Block einfach weg.

Weitere Templates mit dem Elementor Blocks-Plugin verwenden

Das Inhaltsverzeichnis ist sicher ein wichtiges Element für lange Blogartikel. Doch kannst du über das Plugin natürlich noch ganz andere Templates für deine Website einfügen.

Im Prinzip kannst du einfach Elementor in den Gutenberg-Editor bringen!

Das Plugin bietet viele tolle Möglichkeiten, einen vielleicht etwas drögen Artikel optisch aufzupeppen und mit weiteren Content-Bestandteilen zu erweitern.

Und das Gute daran: Es ist alles schon vorhanden. Du musst es dir nur mit Elementor bauen und als universelle Templates abspeichern.

Das erweitert die Möglichkeiten des Gutenberg-Editors ungemein, ohne dass du unzählige WordPress-Plugins benötigst, die dann wieder einen ganz anderen Look bringen und wenig flexibel sind.

Wozu überhaupt ein Inhaltsverzeichnis im Blog?

Ein Inhaltsverzeichnis für Blogartikel ist tatsächlich aktuell Best Practice. Es ist dazu da, elegant durch Long Form Content, also besonders lange und umfassende Blogartikel zu navigieren.

Die Besucher können immer direkt an die Stelle springen, die sie interessiert – es verbessert ganz klar die Nutzerfreundlichkeit.

Und für Suchmaschinen ist ein Inhaltsverzeichnis auch relevant, da es in Form von strukturierten Daten ausgegeben wird und das Suchergebnis für den Nutzer hilfreicher macht.

Allerdings ist darauf nicht immer Verlass. Google macht das nach Gutdünken. Und gern nur auf den vorderen Plätzen (der hier gezeigte Artikel über die Sundaville steht bei Google auf Platz 0).

Fazit

Ein Plugin für Inhaltsverzeichnisse eines Blogs einzusetzen, macht sehr viel Sinn.

Ob du meinem Vorschlag folgst oder für deine Website ein anderes Plugin aus dem WordPress-Repository verwendest, bleibt natürlich dir überlassen.

Das kann zum Beispiel der Fall sein, wenn du Elementor nicht in der Pro-Version oder auch gar nicht als Page Builder verwendest. Es gibt ja auch noch Beaver Builder, Thrive Architect und viele andere Page Builder, die einen guten Job machen.

Oder du entscheidest dich für eines der TOC-Plugins aus dem WordPress Repository. Mit Inhaltsverzeichnis-Plugins bereicherst du auf jeden Fall deinen Blog. Zudem sind sie ganz einfach zu implementieren.

Fragen & Antworten zum Plugin Elementor Blocks for Gutenberg

Wenn man das Template in Elementor verändert, ändert es sich dann überall?

Ja, es ändert sich überall, wo es eingesetzt wird. Es wird ja jeweils nur referenziert, also ähnlich wie ein Shortcode.

Erstellt und gestylt wird es immer über den Template-Builder von Elementor. Die „Urform“ dieses Templates gibt es nur ein einziges Mal.

Du musst also Änderungen immer im Template direkt machen. Aber dazu gibt es einen Button im Block, in der rechten Spalte von Gutenberg („Vorlage mit Elementor bearbeiten“).

Das ist übrigens auch gut so. Denn damit kannst du blitzschnell in ALLEN Blogartikeln, in denen das Template eingesetzt wird, Änderungen machen.

Und du kannst es sogar ganz verschwinden lassen, indem du zum Beispiel einen Abstandshalter einsetzt, den du auf ganz schmal stellst.

Angenommen, du hast ein Template bereits in Hunderten Blogartikeln verwendet und möchtest es nicht mehr anzeigen. Dann ist das die schnellste Möglichkeit, es „unsichtbar“ zu machen.

Was sind die Nachteile für diese Methode?

Die Nachteile sind ganz klar und wie immer: Es ist ein zusätzliches Plugin, von dem keiner weiß, wie lange es noch unterstützt wird.

Auch die Macher von Elementor können ein Plugin mal auslaufen lassen – oder sie integrieren die Funktionen in den Page Builder selbst. Oder, oder …

Bei einem Umzug oder Änderung des Systems (Page Builder, Theme) hast du mit Gutenberg den Vorteil, dass die Blogartikel perfekt in eine andere WordPress-Installation migrieren können.

Sobald dort „Fremdkörper“ drin sind, muss man manuell Artikel für Artikel durchgehen und säubern.

Aber das gilt für jede Block-Library, die eingesetzt wird.

Holt sich der Inhaltsverzeichnis-Block automatisch die Überschriften aus dem Text?

Genau so funktioniert es!

Du setzt es ein, und es zieht dynamisch die Überschriften aus dem Text raus und macht sie zu Sprungmarken (automatische HTML-Anker) mit Smooth Scrolling. Das heißt, dass man mit einem Klick ganz sanft an die Stelle gebracht will, zu der man hin möchte.

Die Überschriften werden übrigens sofort aktualisiert, sobald du sie änderst.

Die hierarchische Tiefe der angezeigten Überschriften (also H2, H3, H4, H5, H6) wählst du im Inhaltsverzeichnis-Element in Elementor selbst aus. Und kannst diese auch jederzeit anpassen.

Sie erscheinen dann als Überschriften-Block und lassen sich beliebig platzieren.

Was passiert, wenn man das Inhaltsverzeichnis unterhalb einer schon genannten Überschrift platziert?

Im Standardfall wird diese dann im Inhaltsverzeichnis trotzdem mit angegeben.

Das kannst du verhindern, indem du keine weiteren Überschriften oberhalb des TOC benutzt. Oder indem du sie explizit ausklammerst.

Hierzu kannst du jeder beliebigen Überschrift eine CSS-Klasse in Gutenberg geben und diese dann mit Exclude direkt im Widget (über Elementor) ausschließen.

Wie das im Detail funktioniert, habe ich weiter oben beschrieben.

Werden Überschriften, die nicht zum Content-Block gehören, sondern außerhalb platziert sind, ebenfalls ins Inhaltsverzeichnis aufgenommen?

Es werden alle Überschriften integriert, die zum Main Content, also zum eigentlichen Blogartikel, gehören.

Andere semantisch ausgezeichnete Abschnitte, zum Beispiel <header> und <footer> sind ausgenommen, es sei denn, du möchtest sie drin haben.

Dann nutzt du die Container-Funktion im Elementor-Widget und inkludierst sie.

Aus Suchmaschinen-Sicht ist es ohnehin nicht Best Practice, zum Beispiel Blog-Teasern, die häufig am Ende eines Blogartikels angezeigt werden, eine hierarchische Headline zu geben.

Genauso wenig, wie es sinnvoll ist, Navigationslinks und Footer-Links mit H2, H3 etc. auszuzeichnen. Hier arbeitest du besser mit <div>.

Und schwups, umgehst du auch das Problem mit den ungewollten Überschriften im Inhaltsverzeichnis.