Elementortabelle Widget, nicht erforderlich
Elementors eigenes Table of Contents Widget kommt mit Elementor Pro. Das Table of Contents Widget in Master Addons läuft auf Elementor ohne Pro. Lass es auf einen Beitrag oder eine Seite fallen und es liest dort die Überschriften, dann baut es eine verlinkte Liste daraus in Überschriftenreihenfolge auf Ein Klick auf ein beliebiges Element scrollt den Leser zu diesem Abschnitt, Du wählst aus, welche Überschriften-Tags aufgenommen werden sollen und ob die Liste Aufzählungen oder Zahlen zeigt Leser können das Kästchen wegklappen, ein Pfeil von hinten nach oben bringt sie wieder nach oben, und eine kurze CSS-Regel hält das Kästchen in einer Seitenleiste im Blick.
So fügen Sie ein Inhaltsverzeichnis in Elementor hinzu
Sie benötigen Elementor - und Master-Addons Elementor Pro ist nicht erforderlich Die Seite benötigt auch echte Überschriften-Tags (H2, H3 und so weiter), denn die Liste ist daraus aufgebaut.
- Installieren und aktivieren Master Addons von WordPress.org, und überprüfen Sie, ob das Inhaltsverzeichnis im Master Addons-Dashboard aktiviert ist.
- Öffnen Sie Ihren Beitrag oder Ihre Seite mit Elementor und durchsuchen Sie das Widgets-Panel nach Inhaltsverzeichnis.
- Ziehen Sie es dorthin, wo die Liste sitzen soll, normalerweise über den ersten Abschnitt oder in eine Seitenleistenspalte.
- in InhaltLegen Sie den Titel fest, wählen Sie einen Listenstil aus und wählen Sie die einzuschließenden Überschriftstags aus.
- Offen Zusammenklappbar und Scrollen Knebel und den Pfeil von hinten nach oben hinzuzufügen.
- Stylen Sie Titel, Trennzeichen und Links im Register Stil, sehen Sie sich dann die Seite in der Vorschau an und klicken Sie auf einige Elemente, um die Sprünge zu testen.
Jede Einstellung wird in der Inhaltsverzeichnis Widget-Einstellungen Führung.
Inhaltsverzeichnis auf einen Blick
Was das Widget macht, lesen Sie aus Master Addons 3.2.3.
| Artikel | Inhaltsverzeichnis-Widget |
|---|---|
| Wo es Überschriften findet | Im Inneren zunächst.entry-content, dann.page-content, dann der Elementor-Content-Bereich |
| Überschriftenebenen | Von H1 bis H6, wobei H2, H3 und H4 standardmäßig ausgewählt sind |
| Eine Überschrift weglassen | Fügen Sie dieser Überschrift die Überschrift der CSS-Klasse jltma-toc-hide hinzu |
| Listenstil | Standard (kein Marker), Kugeln oder Zahlen |
| Nistend | Immer nach Überschriftenebene verschachtelt |
| Zusammenklappbare Box | Schalten Sie neben dem Titel um, wobei Keep Collapsed Initial |
| Scrollend | Glatte Schriftrolle, die etwa 30 px über der Überschrift stoppt |
| Zurück nach oben | Pfeil in der unteren rechten Ecke nach 250 px Scrollen |
| Aktives Element | Das Element, auf das der Leser zuletzt geklickt hat (kein Scroll-Spion) |
| Klebrig | Kein Schalter; Position: klebrig durch benutzerdefiniertes CSS oder Elementor Pro Motion Effects |
| Bedürfnisse | Elementor- und Master-Addons, kein Elementor Pro |
Erstellt die Liste aus Ihren Überschriften
Wählen Sie die Ebenen in Überschriften-tags. H2, H3 und H4 sind standardmäßig ausgewählt, und es kann jedes von H1 bis H6 hinzugefügt werden, wenn die Seite geladen wird, findet das Widget diese Überschriften, gibt jedem eine ID, wenn es keine hat, und nistet die Liste nach Überschriftenebene, benenne oder füge eine Überschrift hinzu und die Liste nimmt sie bei der nächsten Ladung auf, sodass es keine Ankerlinks gibt, um von Hand mitzuhalten.
- Listenstil: Standard (kein Marker), Kugeln oder Zahlen.
- Überspringen Sie eine Überschrift: CSS-Klasse hinzufügen
jltma-toc-hide-headingAuf der Registerkarte Erweitert dieser Überschrift. - Separator anzeigen: Eine optionale Linie unter dem Titel mit eigenem Stil, Farbe, Dicke und Abstand.
- Überschriften-IDs werden aus dem Überschriftstext erstellt, sodass Sie auch direkt auf einen Abschnitt von anderswo verlinken können.
Zusammenklappbare Box für Seitenleisten und Mobilgeräte
Einschalten Machen Sie Inhalte zusammenklappbar Und neben dem Titel erscheint ein Kippsymbol Leser klicken darauf, um die Liste zu öffnen oder zu schließen, und sie rutscht, anstatt zu springen Einschalten Bleiben Sie zunächst zusammengebrochen Wenn Sie möchten, dass das Feld geladen wird und nur der Titel angezeigt wird, was auf langen Seiten mit Rechtsform und in schmalen Seitenleistenspalten hilfreich ist.
- Symbolgröße und Symbolfarbsteuerelemente für den Kippschalter.
- Der Trenner lässt sich mit der Liste wegklappen.
- Das Widget hat keinen eigenen Sticky-Switch. Damit die Box während des Lesens im Blick bleibt, siehe unten Inhaltsverzeichnis klebrig machen.
Glatte Sprünge und ein Pfeil von hinten nach oben
Ein Klick auf ein Element scrollt die Seite sanft bis zu ihrer Überschrift und stoppt etwa 30 px darüber, so dass die Überschrift nicht bündig an der Oberseite des Bildschirms anliegt Wenn Ihre Seite einen hohen festen Header hat, gibt es in den FAQ unten einen zweizeiligen CSS-Fix, der Überschriften davon fernhält.
- Nach oben scrollen Fügt einen kleinen Pfeil in der unteren rechten Ecke hinzu, der anzeigt, sobald ein Besucher nach unten scrollt.
- Der Pfeil bringt die Leser zurück zum Inhaltsverzeichnis oder zu der Position, die Sie in Scroll to Top Offset eingestellt haben.
- Größen-, Symbolfarben- und Hintergrundfarbsteuerelemente für den Pfeil.
- Das Element, auf das ein Leser geklickt hat, behält die aktive Farbe aus dem Abschnitt Inhaltstil, damit er sehen kann, wohin er gesprungen ist.
Machen Sie das Inhaltsverzeichnis klebrig
Das Widget hat keinen eigenen Sticky-Switch. Sie pinnen es, indem Sie das Widget in einer Seitenleistenspalte klebrig machen, und Elementor ohne Pro kann das über die Master-Add-ons tun Benutzerdefinierte CSS-Erweiterung.
- Setzen Sie den Artikel und das Inhaltsverzeichnis in eine Zeile: eine breite Spalte für den Inhalt und eine schmale Spalte für das Inhaltsverzeichnis-Widget Lassen Sie die schmale Spalte auf ihrer Standardhöhe, damit sie sich bis zur Höhe der Zeile erstreckt.
- Wählen Sie das Widget Inhaltsverzeichnis aus, öffnen Sie FortgeschrittenDann die Master-Addons Benutzerdefiniertes CSS Abschnitt und Einfügen
selector { position: sticky; top: 32px; } - Erhöhen Sie den obersten Wert, wenn Ihre Website einen festen Header hat, zum Beispiel 110 px unter einem 80 px Header.
- Vorschau der Seite und scrollen Das Kästchen bleibt bis zum Ende der Zeile im Blickfeld.
Mit Elementor Pro können Sie Fortgeschritten, Bewegungseffekte, Klebrig: Top Stattdessen mit eingeschaltetem Stay In Column.
Zwei Dinge verhindern, dass Sticky funktioniert: ein übergeordneter Container mit Überlauf auf ausgeblendet gesetzt, und eine Seitenleistensäule, die nicht höher als die Box ist Bei Telefonen fällt die Seitenleiste unter den Artikel, also schalten Sie dort Make Content Collapsible ein, oder verstecken Sie diese Kopie auf Mobilgeräten und legen Sie ein zusammengeklapptes Inhaltsverzeichnis über den Artikel.
Die Sticky Sidebar Demo Auf halber Seite bleibt das Kästchen oben in der Spalte, während der Artikel scrollt.
Die Sticky-Regel im Abschnitt Master Addons Custom CSS des Widgets.
Inhaltsverzeichnis von Elementor Pro vs. Inhaltsverzeichnis von Master Addons
Das Table of Contents-Widget von Elementor benötigt eine Elementor Pro-Lizenz und gibt Ihnen mehr Kontrolle darüber, welche Überschriften angezeigt werden und wie sich die Liste beim Scrollen verhält. Master Addons erledigt den alltäglichen Job ohne Pro und fügt einen Pfeil nach hinten zum oberen Pfeil hinzu.
| Merkmal | Elementor Pro | Master-Addons |
|---|---|---|
| Preis | Benötigt Elementor Pro | In Master Addons enthalten, kein Elementor Pro |
| Welche Überschriften | Anchors By Tags (H1 bis H6) plus eine Containerauswahl zur Begrenzung des Suchbereichs | Überschriften-Tags (H1 bis H6) aus dem Hauptbeitrag oder Seiteninhalt |
| Überschriften auslassend | Anker nach Selektor, jeder CSS-Selektor | CSS-Klasse jltma-toc-ausblenden-Überschrift auf jeder Überschrift |
| Markierungen | Zahlen oder Kugeln mit einem von Ihnen gewählten Symbol | Standard, Kugeln oder Zahlen |
| Nistend | Hierarchische Ansicht Unterpunkte umschalten und einklappen | Immer nach Überschriftenebene verschachtelt |
| Kollaps | Minimieren Sie Box mit Erweiterungs- und Einklappungssymbolen und einem Haltepunkt, an dem es minimiert beginnt | Machen Sie Inhalte kollabierbar und bleiben Sie zunächst kollabiert |
| Aktives Element | Folgt dem angezeigten Abschnitt, während der Leser scrollt | Markiert den Artikel, auf den der Leser geklickt hat |
| Einstellungen scrollen | Keine Geschwindigkeits - oder Offset-Steuerelemente im Widget | Glatte Schriftrolle, die etwa 30 px über der Überschrift stoppt |
| Klebrig | Keine Einstellung im Widget; Verwenden Sie Motion Effects Sticky für das Widget oder seine Spalte | Keine Einstellung im Widget; Position hinzufügen: klebrig mit benutzerdefiniertem CSS oder verwenden Sie Motion Effects Sticky mit Pro |
| Zurück zum oberen Pfeil | Keine | Scrollen Sie mit Größen- und Farbsteuerelementen nach oben |
Wenn Sie bereits für Elementor Pro bezahlen und möchten, dass die Liste den Leser beim Scrollen verfolgt, verwenden Sie dessen Widget. Wenn Sie ein Inhaltsverzeichnis ohne Elementor Pro mit einem zusammenklappbaren Feld und einem Pfeil von hinten nach oben wünschen, verwenden Sie dieses.
Passt gut zu: Fortschrittsanzeige lesen Für eine Bar, die sich füllt, während die Leute lesen Erweiterte Akkordeon und Tabs Lange Abschnitte zu falten Off-Canvas-Inhalt (Pro) für ein Slide-Out-Menü und Blog Für den Beitrag listet diese langen Artikel auf.
Inhaltsverzeichnis Plugin oder ein Elementor-Widget?
WordPress hat zwei Arten von Inhaltsverzeichnis: Plugins, die auf dem Post-Inhalt funktionieren, und Widgets, die Sie im Elementor-Editor platzieren Das richtige hängt davon ab, wie die Seite aufgebaut ist.
| Option | Wo es funktioniert | Am besten für |
|---|---|---|
| Master Addons Inhaltsverzeichnis | Überall dort, wo Sie es in Elementor platzieren, einschließlich Vorlagen | Elementorseiten, die die Box mit dem Design und einem Pfeil von hinten nach oben gestalten möchten |
| Inhaltsverzeichnis von Elementor Pro | Überall in Elementor, mit einer Elementor Pro-Lizenz | Websites, die bereits auf Pro verfügbar sind und möchten, dass das aktive Element dem Bildlauf folgt |
| Einfaches Inhaltsverzeichnis, LuckyWP | Post-Inhalte, automatisch oder mit einem Shortcode eingefügt | Blogs, die im Block-Editor oder im Classic-Editor geschrieben wurden |
| Rang Mathe Inhaltsverzeichnis Block | Blockeditorbeiträge auf Websites, die Rank Math verwenden | Gutenberg-Beiträge, die nur eine einfache Liste benötigen |
Unser Zusammenfassung der besten Inhaltsverzeichnis-Plugins für WordPress Vergleicht acht davon mit Installationszahlen, Shortcodes und Sticky-Optionen.
Inhaltsverzeichnis Beispiele
Vier Live-Demos, die mit dem Widget erstellt wurden Öffnen Sie eines und importieren Sie dann dasselbe Layout aus dem Template Viewer unten.
- Klebebügel: eine nummerierte Liste in einer schmalen Spalte, die im Blick bleibt, während der Artikel scrollt, H3 s unter ihren H2 s verschachtelt und eine Überschrift mit jltma-toc-hide-heading weggelassen.
- Listenstile: Standard, Kugeln und Zahlen nebeneinander, aus den gleichen Überschriften aufgebaut.
- Seite AGB: das Kästchen in einer rechten Seitenleiste, in dem jeder Abschnitt einer langen juristischen Seite aufgeführt ist.
- Seite Datenschutzrichtlinie: das Feld links, mit dem angeklickten Element in der Farbe Aktiv.
Die drei Listenstile auf denselben Überschriften.
Häufig gestellte Fragen zum Inhaltsverzeichnis
Benötige ich Elementor Pro für dieses Inhaltsverzeichnis?
Nr. Das Table of Contents Widget ist Teil von Master Addons und läuft auf Elementor ohne Pro Jede Einstellung auf dieser Seite ist enthalten Das Elementor eigene Table of Contents Widget ist das, das Elementor Pro benötigt.
Wie schließe ich eine Überschrift aus dem Inhaltsverzeichnis aus?
Um eine ganze Ebene fallen zu lassen, entfernen Sie dieses Tag aus Überschriften Tags, zum Beispiel H4. Um eine Überschrift auszublenden, wählen Sie sie in Elementor aus, öffnen Sie die Registerkarte Erweitert und fügen Sie hinzu jltma-toc-hide-heading Zum Feld CSS-Klassen Es bleibt auf der Seite, wird aber aus der Liste herausgelassen.
Ändert sich das aktive Element, wenn der Leser scrollt?
Nein. Die aktive Farbe im Stil, Inhalt styles den Gegenstand, auf den ein Leser klickt, und er bewegt sich, wenn er auf einen anderen Gegenstand klickt Die Liste verfolgt den Abschnitt auf dem Bildschirm beim Scrollen nicht Das Inhaltsverzeichnis-Widget von Elementor Pro macht das.
Kann ich das Inhaltsverzeichnis klebrig machen?
Ja, allerdings nicht von einem Schalter im Widget. Legen Sie es in eine Seitenleistenspalte und fügen Sie es dann hinzu selector { position: sticky; top: 32px; } In Advanced, Custom CSS. mit Elementor Pro können Sie Motion Effects verwenden, Sticky stattdessen Erhöhen Sie den Top-Wert, wenn ein fester Header darüber sitzt.
Wie halte ich das Inhaltsverzeichnis erweitert oder zusammengebrochen, wenn die Seite geladen wird?
Schalten Sie Content Collapsible einBei Keep Collapsed Zunächst aus, lädt sich die Box auf und die Leser können sie falten, bei eingeschaltetem lädt die Box nur ihren Titel anzeigt Es gibt keine Einstellung pro Gerät, also für eine geschlossene Box auf Telefonen und eine geöffnete auf dem Desktop, verwenden Sie zwei Kopien und verstecken Sie jede in Advanced, Responsive.
Wird der Pfeil von Scroll nach Top auf jeder Seite angezeigt?
Nur auf Seiten, die dieses Widget mit Scroll to Top eingeschaltet enthalten Der Pfeil sitzt in der rechten unteren Ecke und zeigt an, nachdem der Besucher die Seite ca. 250 px runter gescrollt hat.
Kann ich benutzerdefinierte Symbole für die Listenmarkierungen verwenden?
Nicht aus dem Widget-Panel List Style bietet Standard, Bullets und Zahlen, und der Abschnitt Content Style legt die Schriftart und Farben fest Benutzerdefinierte Markierungssymbole würden ein eigenes CSS benötigen Das Widget von Elementor Pro verfügt über einen Symbolwähler für Kugeln.
Warum ist mein Inhaltsverzeichnis leer oder listet falsche Überschriften auf?
Das Widget sucht nach Überschriften innerhalb von.entry-content first, dann .page-content, dann dem Elementor-Content-Bereich und nur nach den in Heading Tags ausgewählten Tags. Ein leeres Feld zeigt “Add a header to beginn generation the table of content” und bedeutet normalerweise, dass die Überschriften ein Tag verwenden, das Sie nicht ausgewählt haben, oder außerhalb dieses Bereichs sitzen. Wenn ein Caching-Plugin JavaScript bis zum ersten Scrollen oder Klicken verzögert, bleibt die Liste bis dahin leer, schließen Sie also die Master Addons-Skripte von der Verzögerung aus.
Ein fester Header deckt die Überschrift nach einem Sprung ab Wie behebe ich sie?
Der Sprung stoppt etwa 30 px über der Überschrift, was unter einem hohen festen Header nicht ausreicht, Fügen Sie dies in Aussehen, Anpassen, Zusätzliches CSS: hinzu .elementor-heading-title[id] { padding-top: 90px; margin-top: -90px; } Jede Überschrift landet dann 90 px tiefer und sieht auf der Seite gleich aus Nutze deine Kopfhöhe plus ein wenig Raum.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
