So erstellen Sie ein anklickbares Inhaltsverzeichnis für einen Blog-Post mit dem Divi-Layout-Block

Das Hinzufügen eines anklickbaren Inhaltsverzeichnisses zu einem Blogbeitrag ist eine großartige Möglichkeit, die Benutzererfahrung zu verbessern. In vielen Fällen verwendet ein Inhaltsverzeichnis eines Blogbeitrags Ankerlinks, um Benutzern bei der Navigation durch den Inhalt zu helfen. Und ein Inhaltsverzeichnis (mit Ankerlinks) ist mit einfachem HTML wirklich einfach zu erstellen. Das Hinzufügen von benutzerdefiniertem Design/CSS zur Anpassung kann jedoch eine Herausforderung darstellen. Hier kommt der Divi-Layout-Block zum Einsatz.

In diesem Tutorial werden wir ein anklickbares Inhaltsverzeichnis für einen einzelnen Blogbeitrag (in Gutenburg) entwerfen, das Ankerlinks verwendet, um Benutzer zu bestimmten Überschriften im gesamten Beitrag zu führen. Dazu verwenden wir den Divi-Layout-Block, um das Inhaltsverzeichnis mit allen leistungsstarken Designwerkzeugen des Divi-Builders zu erstellen, die uns zur Verfügung stehen.

Lass uns anfangen!

Vorgeschmack

Laden Sie den wiederverwendbaren Inhaltsverzeichnis-Layoutblock KOSTENLOS herunter

Um den Inhaltsverzeichnis-Layoutblock aus diesem Tutorial in die Hände zu bekommen, müssen Sie ihn zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

So verwenden Sie den Download, um diesen Layoutblock auf Ihrer Site zu importieren

Um diese wiederverwendbaren Divi Image Layout Blocks auf Ihre Site zu importieren, müssen Sie zuerst die Download-Datei entpacken. Dort finden Sie die drei JSON-Dateien, die Sie auf Ihre Site importieren müssen.

Gehen Sie, um einen Beitrag mit dem Standardeditor (Gutenberg) zu bearbeiten. Öffnen Sie das Menü „Weitere Tools & Optionen“ oben rechts auf der Seite und wählen Sie „Alle wiederverwendbaren Blöcke verwalten“.

Klicken Sie dann auf die Schaltfläche Aus JSON importieren. Wählen Sie eine der JSON-Dateien aus dem Download-Ordner aus und klicken Sie auf die Schaltfläche Importieren.

Wenn Sie fertig sind, fügen Sie einen neuen Block in Gutenberg hinzu. Wir finden die importierten wiederverwendbaren Layoutblöcke unter dem Schalter der Option Wiederverwendbar. Klicken Sie einfach auf das "Inhaltsverzeichnis", um es Ihrem Beitrag hinzuzufügen.

Das ist es!

Kommen wir zum Tutorial, ja?

Was wir brauchen, um loszulegen

Um zu beginnen, müssen wir Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie einen neuen Beitrag in WordPress und verwenden Sie den Standardeditor (Gutenberg), um einige simulierte Inhalte (Titel, Überschriften, Absätze, vorgestelltes Bild usw.) hinzuzufügen. Stellen Sie sicher, dass Sie mindestens drei Überschriftenblöcke mit Inhalten darunter erstellen. Da wir Ankerlinks zum Inhaltsverzeichnis hinzufügen werden, benötigen wir drei Überschriften, um weiter unten im Beitrag zu verlinken.

Danach sind wir startklar.

Erstellen eines anklickbaren Inhaltsverzeichnisses für einen Blog-Post mit dem Divi-Layout-Block

Divi-Layout-Block hinzufügen

Fügen Sie zuerst einen neuen Divi-Layout-Block oben in Ihrem Blog-Post-Inhalt hinzu.

Klicken Sie dann auf die Schaltfläche Neues Layout erstellen. Dadurch wird der Layout-Editor bereitgestellt, der der Divi-Builder für einen Layoutblock ist.

Zeile hinzufügen

Starten Sie das Design im Layout-Editor, indem Sie eine einspaltige Zeile hinzufügen.

Oberen Teiler hinzufügen

Fügen Sie innerhalb der Spalte ein Trennmodul hinzu. Dies ist einer von zwei Trennwänden, die wir verwenden werden, um das Inhaltsverzeichnis einzurahmen.

Teilereinstellungen

Als nächstes aktualisieren Sie die Teilereinstellungen wie folgt:

• Linienfarbe: #eeeeee
• Linienposition: Vertikal zentriert
• Teilergewicht: 3px
• Breite: 25%
• Polsterung: 30px oben, 30px unten

Unterteiler hinzufügen

Um den zweiten Teiler zu erstellen, duplizieren Sie den vorherigen Teiler.

Erstellen Sie die Überschrift des Inhaltsverzeichnisses mit einem Blurb-Modul

Sobald die Trennwände vorhanden sind, erstellen wir unsere Überschrift für das Inhaltsverzeichnis.

Fügen Sie zwischen den beiden Trennwänden ein neues Klappenmodul hinzu.

Inhalt anzeigen

Öffnen Sie die Klappeneinstellungen und aktualisieren Sie den Inhalt wie folgt:

• Titel: „Inhaltsverzeichnis“
• Symbol verwenden: JA
• Symbol: siehe Screenshot

Blurb-Designeinstellungen

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Symbolfarbe: #eeeeee
• Bild-/Symbolplatzierung: Links
• Symbolschriftgröße verwenden: JA
• Symbolschriftgröße: 100px
• Titelüberschriftsebene: H2
• Inhaltsbreite: 100%
• Höhe: 38px

Beachten Sie, dass die Höhe des Klappentextes geringer ist als die Höhe des Symbols. Dadurch kann sich das Symbol neben den Klappenelementen, die wir als nächstes hinzufügen werden, nach unten erstrecken.

Sobald der Titeltext vorhanden ist, können wir mit dem Hinzufügen der anklickbaren Elemente/Blurbs beginnen, die unser Inhaltsverzeichnis bilden. Dazu werden wir auch Klappenmodule verwenden.

Artikel Nr. 1 hinzufügen Klappentext

Fügen Sie unter dem Titeltext ein neues Klappenmodul hinzu.

Inhalt anzeigen

Öffnen Sie die Klappeneinstellungen und entfernen Sie den Standardinhalt, sodass nur der Titel sichtbar ist. Im Titel fügen Sie den Textblock hinzu, der dem Abschnitt/der Überschrift entspricht, auf den wir weiter unten im Beitrag verlinken möchten.

Aktualisieren Sie dann den Inhalt mit dem Pfeil nach rechts auf dem Desktop.

Stellen Sie die Hover-Option für das Symbol bereit und ändern Sie das Symbol beim Hover in den Abwärtspfeil. Dies wird eine nette Mikrointeraktion sein, die betont, dass der Link zu einer Stelle im Beitrag scrollt.

Klappendesign

Jetzt können wir das Klappenmodul nach Belieben gestalten. In diesem Beispiel aktualisieren wir die Klappentexteinstellungen wie folgt:

• Symbolfarbe: #b856c7
• Kreissymbol: JA
• Kreisfarbe: #ffffff
• Kreisrahmen anzeigen: JA
• Kreisrandfarbe: #b856c7
• Bild-/Symbolplatzierung: Links
• Symbolschriftgröße verwenden: JA
• Symbolschriftgröße: 16px
• Text Textgröße: 16px
• Höhe der Titelzeile: 2em
• Inhaltsbreite: 100%
• Rand: 118px übrig
• Polsterung: 10px oben
• Polsterung (Hover): 10px links

Doppelter Klappentext für weitere Artikel

Nachdem unser erster Klappentext nun fertig ist, können wir ihn je nach Anzahl der anklickbaren Links, die wir in den Beitrag aufnehmen möchten, beliebig oft duplizieren. Lassen Sie uns es vorerst einfach zweimal duplizieren, um insgesamt drei Elemente für unser Inhaltsverzeichnis zu erstellen.

Hinzufügen der Ankerlink-URLs

Im Moment sind unsere Klappentext-Elemente nicht anklickbar, daher müssen wir jedem von ihnen die erforderlichen Ankerlink-URLs hinzufügen. Die Ankerlink-URL beginnt immer mit einem Hashtag (#), gefolgt von der gewünschten ID.

Ankerlink #one

Der Einfachheit halber fügen wir dem ersten Klappentext in der Liste den Ankerlink „#one“ hinzu. Öffnen Sie dazu die Einstellungen für das erste Klappenmodul in der Liste (nicht das Titelblatt) und aktualisieren Sie Folgendes:

• Modul-Link-URL: #one

Ankerlink #zwei

Öffnen Sie dann die Einstellungen des zweiten Klappentextes und fügen Sie folgenden Link hinzu:

• Modul-Link-URL: #two

Ankerlink #drei

Fügen Sie schließlich den folgenden Link zum dritten Klappentext hinzu:

• Modul-Link-URL: #drei

Vergrößern des Abstands

Zeileneinstellungen

Im Moment ist zwischen den Elementen unserer Reihe etwas zu viel Platz. Um dies zu beheben, öffnen Sie die Zeileneinstellungen und aktualisieren Sie die Bundstegbreite und den Abstand wie folgt:

• Dachrinnenbreite: 1
• Breite: 100%
• Padding: 0px oben, 0px unten

Abschnittseinstellungen

Nehmen wir auch die Polsterung des Abschnitts heraus. Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

• Padding: 0px oben, 0px unten

Speichern Sie das Layout

Wir sind fertig mit unserem Inhaltsverzeichnis-Design. Stellen Sie sicher, dass Sie den Layout-Editor speichern und beenden.

Jetzt sollten Sie Ihr neues Inhaltsverzeichnis im Standardblockeditor sehen.

Hinzufügen der HTML-Anker zu den Post-Überschriften

Wir haben die Ankerlink-URLs zu jedem der Klappentexte hinzugefügt, aus denen die Elemente unseres Inhaltsverzeichnisses bestehen. Jetzt müssen wir die entsprechende CSS-ID (oder HTML-Anker) zu den Überschriftenblöcken weiter unten im Beitrag hinzufügen.

HTML-Anker eins

Klicken Sie auf den Block, der den ersten Header enthält, zu dem Sie verlinken/springen möchten. Öffnen Sie dann die Einstellungen für diesen Block. Fügen Sie unter dem Schalter "Erweiterte Optionen" "eins" zum HTML-Anker-Eingabefeld hinzu:

HTML-Anker: eins

Denken Sie daran, dass unser erster Klappentext die URL „#one“ hat, die auf diesen verlinkt. Fügen Sie diesem HTML-Anker jedoch keinen Hashtag hinzu. Es wird nicht benötigt.)

HTML-Anker zwei

Wählen Sie als Nächstes den zweiten Überschriftenblock aus und aktualisieren Sie Folgendes:

• HTML-Anker: zwei

HTML-Anker drei

Wählen Sie schließlich den dritten Überschriftenblock aus und fügen Sie den HTML-Anker wie folgt hinzu:

• HTML-Anker: drei

Endergebnis

Sehen wir uns das Endergebnis im Live-Beitrag an.

Und so funktionieren die Ankerlinks. Beachten Sie den Hover-Effekt auf den Symbolen und wie der Link reibungslos zum entsprechenden Anker unter der Seite scrollt.

Hinzufügen des Inhaltsverzeichnisses als wiederverwendbaren Layoutblock

Wenn Sie diesen Layoutblock weiterhin als Vorlage für zukünftige Beiträge verwenden möchten, ist es eine gute Idee, den Layoutblock als wiederverwendbaren Layoutblock zu speichern. Auf diese Weise können Sie ganz einfach einen "Inhaltsverzeichnis"-Block aus der integrierten Liste der Blöcke hinzufügen.

Klicken Sie dazu auf den Divi-Layout-Block mit dem Inhaltsverzeichnis und öffnen Sie das Menü Weitere Einstellungen. Wählen Sie dann „Zu wiederverwendbaren Layoutblöcken hinzufügen“.

Geben Sie einen Namen für den wiederverwendbaren Block ein („Inhaltsverzeichnis“) und klicken Sie auf Speichern.

Jetzt haben Sie den Block in der Liste Wiederverwendbare Blöcke verfügbar, wenn Sie dem Beitrag einen neuen Block hinzufügen.

Jetzt dient der Layoutblock als praktische Vorlage zum Erstellen eines Inhaltsverzeichnisses für Ihren Beitrag. Vergessen Sie nicht, den Block in einen regulären Layoutblock zu konvertieren, bevor Sie ihn für einen bestimmten Beitrag anpassen. Sie möchten den wiederverwendbaren Layoutblock nicht ändern.

Öffnen Sie dazu das Menü Weitere Einstellungen des wiederverwendbaren Layoutblocks und wählen Sie „In regulären Block konvertieren“.

Abschließende Gedanken

Ich hoffe, dass sich dieser Divi-Layoutblock für das Inhaltsverzeichnis als hilfreich für die Beiträge erweist, die lang genug sind, um sie zu benötigen. Wenn Sie daran interessiert sind, dies dynamisch für Sie erledigen zu lassen (z. B. das Inhaltsverzeichnis automatisch basierend auf den Überschriften eines Beitrags erstellen), gibt es Plugins wie Inhaltsverzeichnis Plus, die so etwas für Sie erledigen. Dieser Beitrag ist für diejenigen gedacht, die gerne mit Divi gestalten und das Inhaltsverzeichnis Post für Post erstellen.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!