Lange Beiträge sind leichter zu lesen, wenn Besucher die ganze Form vorne sehen und direkt zu dem gewünschten Teil springen können Das Gratis Inhaltsverzeichnis-Widget In Master-Addons für Elementor Liest die Überschriften auf Ihrer Seite und verwandelt sie in einen verknüpften Index Keine manuelle Liste zum Erstellen und keine, die Sie später synchron halten sollten.
Sie lassen das Widget hinein, wählen aus, welche Überschriftenebenen einbezogen werden sollen, und es füllt sich von selbst Von dort aus können Sie es zusammenklappbar machen, eine Scroll-to-Top-Taste hinzufügen und das Ganze stylen Diese Anleitung deckt jede Einstellung im Widget ab.
Was das Inhaltsverzeichnis-Widget bewirkt #
Das Widget scannt die Seite nach Überschriften und baut daraus eine verschachtelte Liste von Links auf, jedes Element zeigt auf seine Überschrift, so springt ein Klick zu diesem Abschnitt herunter, füge später eine Überschrift hinzu und die Liste nimmt sie von selbst auf, was der Teil ist, der am meisten Zeit spart.
Zwei Tabs führen es aus. Inhalt Besitzt den Titel, die Überschriftenebenen, die zusammenklappbare Option und das Bildlaufverhalten. Stil Steuert die Containerauffüllung, den Titel, das Trennzeichen, und die Listenelemente Die üblichen Elementor Advanced Optionen sitzen daneben.
Bevor Sie beginnen #
- Wordpress Mit Elementer Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
- Eine Seite oder ein Beitrag mit echten Überschriften (H2, H3 usw.), die das Widget lesen kann.
So fügen Sie das Inhaltsverzeichnis-Widget hinzu #
Öffnen Sie im Elementor-Editor die Elemente Panel und suchen nach Inhaltsverzeichnis, oder scrollen Sie in den Abschnitt Master Addons (die Widgets tragen ein lila MA-Abzeichen) Ziehen Sie es an den oberen Rand Ihres Inhalts, oder in eine Seitenleiste, und es füllt sich sofort aus den Überschriften der Seite.
Legen Sie den Titel und die einzuschließenden Überschriften fest #
Öffnen Sie die Inhalt Tab und die Inhaltsverzeichnis Abschnitt. Hier benennen Sie das Kästchen, wählen den Listenstil und wählen aus, welche Überschriftenebenen angezeigt werden.
- Titeltext eingeben: Die Überschrift über der Liste, wie Inhaltsverzeichnis oder TOC.
- Listenstil: Standard (keine Markierung), Kugeln oder Zahlen.
- Einschließen / Ausschließen: Auf der Registerkarte Einschließen werden Überschriftentaschen angezeigt, und auf der Registerkarte Ausschließen wird erläutert, wie einzelne Überschriften weggelassen werden.
- Überschrift Schlagworte: Wählen Sie die einzusetzenden Level aus, z. B. H2 und H3. Fügen Sie Tags hinzu oder entfernen Sie sie, um zu steuern, wie tief die Liste reicht.
Eine einzelne Überschrift überspringen? die hinzufügen jltma-toc-hide-heading Klasse auf die Registerkarte Erweitert dieser Überschrift, im Feld CSS-Klassen, und das Widget lässt es wegHandy, wenn eine Abschnittsüberschrift die Liste nur überladen würde.
Machen Sie die Liste zusammenklappbar #
Die Zusammenklappbar Optionen können Besucher die Liste bis auf nur den Titel herunterklappen Das hilft auf dem Handy, oder in einer Seitenleiste, wo der Platz knapp ist.
- Machen Sie Inhalte zusammenklappbar: Fügen Sie einen Umschalter hinzu, damit sich die Liste öffnet und schließt.
- Bleiben Sie zunächst zusammengebrochen: Laden Sie es geschlossen, sodass der Titel nur angezeigt wird, bis er angeklickt wird.
- Symbolgröße und Farbe: Das Aussehen des Einsturzes Knebel.
Richten Sie das Bildlaufverhalten ein #
Öffnen Sie die Scrollen Abschnitt, wie sich die Seite bewegt, wenn jemand den Index verwendet Sie können eine Back-to-Top-Taste hinzufügen und das reibungslose Scrollen einschalten.
- Scrollen Sie nach oben: Fügen Sie einen festen Pfeil in der rechten unteren Ecke hinzu, er erscheint, sobald ein Besucher nach unten scrollt und ihn zurück zum Inhaltsverzeichnis bringt.
- Scrollen Sie zum oberen Offset: Eine Scrollposition, an die Leser anstelle des Inhaltsverzeichnisses gesendet werden können.
- Scroll-Animationsverzögerung und reibungsloses Scrollen: Die Verzögerung legt fest, wie lange die Bildlaufrolle dauert (standardmäßig 500 ms).Einschalten von Smooth Scroll fügt Smooth Scroll Offset (px) hinzu, das kurz vor der Überschrift anhält, sodass ein fester Header sie nicht abdeckt.
Stylen Sie den Behälter und den Titel #
Öffnen Sie die Stil Tab. Die Container Abschnitt stellt die Polsterung um die gesamte Box und die Titel Abschnitt styles die Überschrift über der Liste.
- Behälter: Polsterung für die Box Fügen Sie einen Hintergrund, einen Rand oder einen Radius von der Registerkarte Erweitert hinzu.
- Titel: Ausrichtung, Farbe, Typografie und Unterabstand für die Überschrift.
- Trenner: Stil, Farbe, Dicke und unterer Abstand für die Linie unter dem Titel Die Schriftrolle zum oberen Pfeil ist im Abschnitt Schriftrolle gestylt.
Stil der Listenelemente #
Die Inhalt Abschnitt im Register Stil behandelt die Links selbst Sie erhalten Typografie, Abstände zwischen den Elementen und separate Farben für den Normal, Hover - und Aktivzustand.
- Typografie und Abstand: Die Schriftart und die Lücke zwischen den Zeilen.
- Normal / Hover / Aktiv: Eine Farbe für jeden Zustand Aktiv gilt für den Gegenstand, auf den ein Leser zuletzt geklickt hat.
- Textfarbe: Die Linkfarbe für den von Ihnen ausgewählten Zustand.
Häufige Anwendungsfälle #
- Lange Tutorials und Ratgeber Leser eine Karte und schnelle Sprünge zu geben.
- Dokumentationsseiten Wo jede Überschrift eine Rubrik ist, nach der die Leute suchen.
- Seitenleisten Mit einem zusammenklappbaren Index neben dem Artikel.
- Runderneuerungen und Listicles So können Besucher zu dem gewünschten Eintrag springen.
- Rechts - und Richtlinienseiten Das erfordert klare Verankerungen an jeder Klausel.
Tipps für die Arbeit mit dem Inhaltsverzeichnis-Widget #
- Verwenden Sie eine saubere Überschriftenstruktur. Die Liste ist nur so gut wie deine H2 s und H3 s, also schreib Überschriften, die sich von alleine gut lesen.
- Beinhaltet nur zwei Ebenen. H2 und H3 machen meist einen ordentlichen Index Ziehen Sie in H4 und darüber hinaus und es fängt an, laut zu werden.
- Fallen Sie es mobil ein. Keep Collapsed Spart zunächst viel Scrollen auf kleinen Bildschirmen.
- Schalten Sie die glatte Schriftrolle ein. Ein Gleitflug zum Abschnitt liest sich besser als ein harter Sprung, und der Versatz hält die Überschriften frei von einem klebrigen Header.
- Streunende Überschriften überspringen. Verwenden Sie die Überschriftenklasse jltma-toc-hide-heading auf Überschriften, die Sie nicht in der Liste haben möchten, wie z. B. einem CTA- oder einem Seitenleistentitel.
Häufig gestellte Fragen #
Was ist das Table of Contents Widget in Master Addons?
Es ist ein kostenloses Elementor-Widget, das die Überschriften auf Ihrer Seite liest und automatisch einen verknüpften Index daraus erstellt. Jedes Element springt auf Klick zu seinem Abschnitt, und Sie steuern, welche Überschriftsebenen angezeigt werden, ob die Liste zusammenbricht und wie sie aussieht, alles aus dem Elementor-Panel.
Woher weiß das Widget, welche Überschriften es auflisten soll?
Sie wählen die Überschriften-Tags in der Registerkarte Inhalt aus, wie H2 und H3, und das Widget listet jede passende Überschrift auf der Seite auf Um eine ganze Ebene zu überspringen, lassen Sie diese Markierung weg Um eine bestimmte Überschrift zu verwerfen, fügen Sie ihr die jltma-toc-hide-heading-Klasse in der Registerkarte Erweitert hinzu.
Kann ich das Inhaltsverzeichnis zusammenklappbar machen?
Ja. Die Optionen zum Einklappen fügen einen Umschalter hinzu, damit Besucher die Liste nur auf den Titel falten können Schalten Sie die Option Einklappen Ein Zunächst um, um sie geschlossen zu laden, was gut in einer Seitenleiste oder auf Mobilgeräten funktioniert, wo Sie vertikalen Platz sparen möchten.
Wird es aktualisiert, wenn ich neue Überschriften hinzufüge?
Ja. Die Liste wird aus den Überschriften der Seite generiert, wenn Sie also eine Überschrift hinzufügen, entfernen oder umbenennen, spiegelt das Inhaltsverzeichnis die Änderung wider. Es gibt keine manuelle Liste, die synchron gehalten werden muss, was der Hauptgrund ist, das Widget über einem handgefertigten zu verwenden.
Kann ich einen glatten Scroll und einen Back-to-Top-Button hinzufügen?
Ja. Ein Klick auf ein Element scrollt zu seinem Abschnitt, und Scroll Animation Delay legt fest, wie lange das dauert Smooth Scroll fügt einen Offset für feste Header hinzu Scroll to Top fügt einen Pfeil in der unteren rechten Ecke mit eigenem Offset, eigener Größe und eigenen Farben hinzu.
Einwickelnd #
Das Table of Contents Widget verwandelt Ihre Überschriften in einen verknüpften Index ohne manuelle Pflege: Drop it in, Pick the heading levels, make it collapsible, set the scroll behavior, then style it to match Für eine Übersicht und einen Vergleich mit Elementor Pro, siehe die Elementortabelle-Inhalts-Widget Seite. Zu verwandten Widgets siehe Zeitleiste und Nav-menüDurchsuchen Sie das Ganze Master Addons Widgets und Erweiterungen& überprüfen Sie die Preisseite Für das, was jeder Plan beinhaltet.
