So erstellen Sie eine dynamische Post-Infoleiste für Ihre Divi-Blog-Post-Vorlage

Das Hinzufügen von dynamischem Inhalt zu Ihrer Blog-Post-Vorlage ist wichtig, um Dinge wie den Post-Titel, die Metadaten, das vorgestellte Bild usw. bereitzustellen. Normalerweise werden diese dynamischen Elemente als normale statische Elemente im Layout des Layouts platziert. Es kann jedoch hilfreich sein, einige dieser dynamischen Elemente für Ihre Leser im Vordergrund zu behalten. Hier kommt eine dynamische Post-Info-Leiste zum Einsatz. Eine dynamische Post-Infoleiste bleibt oben im Browser fixiert (wie ein fester Header) und enthält hilfreiche dynamische Inhalte und andere CTAs. Sie können diese Leiste beispielsweise verwenden, um die Leser an den Beitrag zu erinnern, den sie gerade lesen, einen Link zum Hinterlassen eines Kommentars oder einen Link zu einer verwandten Kategorie.

In diesem Tutorial zeigen wir Ihnen, wie Sie mit dem Divi Theme Builder eine dynamische Post-Infoleiste erstellen und zu Ihrer Blog-Post-Vorlage hinzufügen. Sobald dies erledigt ist, funktioniert diese Leiste nahtlos für alle Blog-Posts auf der gesamten Website.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden. Beachten Sie, wie die Ankerlinks („Kommentar hinterlassen“ und „Abonnieren“) die Benutzer zum entsprechenden Bereich des Beitrags leiten.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es 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!

Um das Abschnittslayout in Ihren Divi Theme Builder zu importieren, navigieren Sie zum Divi Theme Builder.

Klicken Sie auf das Portabilitätssymbol.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird die Abschnittsvorlage im Divi Theme Builder angezeigt.

Kommen wir zum Tutorial, ja?

Teil 1: Importieren der vorgefertigten Vorlagen

Für dieses Tutorial verwenden wir einige vorgefertigte Vorlagen aus unserem sechsten Theme-Builder-Paket. Wir werden die Standard-Website-Vorlage importieren, die uns einen funktionierenden globalen Header gibt, in dem wir die Post-Info-Leiste hinzufügen. Und wir werden die Blog-Post-Vorlage importieren, um unsere Ergebnisse in einem Live-Post zu testen.

WICHTIG: Es wäre am besten, diese Vorlagen auf einer Test-Site zu importieren, damit Sie eine Live-Site nicht durcheinander bringen.

Importieren Sie die Standard-Website-Vorlage

Zuerst müssen Sie das sechste KOSTENLOSE Theme Builder Pack für Divi herunterladen. Entpacken Sie dann die Datei.

Navigieren Sie im WordPress-Dashboard zu Divi > Theme Builder. Klicken Sie dann oben rechts auf das Portabilitätssymbol. Wählen Sie im Portabilitäts-Popup die Registerkarte Import aus. Wählen Sie dann die Standard-JSON-Datei für die Website-Vorlage aus dem heruntergeladenen Ordner und klicken Sie auf die Schaltfläche Importieren. Dadurch wird eine neue Standard-Website-Vorlage mit einer globalen Kopf- und Fußzeile importiert.

Importieren Sie die Beitragsvorlage

Wiederholen Sie diesen Vorgang, um die Beitragsvorlage aus demselben heruntergeladenen Ordner zu importieren. Öffnen Sie das Portabilitäts-Popup, wählen Sie die JSON-Datei der Post-Vorlage aus und klicken Sie auf die Schaltfläche Importieren. Dadurch erhalten Sie eine Beitragsvorlage, die allen Beiträgen auf Ihrer Website zugewiesen ist, zusammen mit der Standardkopfzeile und Fußzeile.

Global in der Kopfzeile der Beitragsvorlage deaktivieren

Wir werden unsere dynamische Post-Infoleiste zum Header der Post-Vorlage hinzufügen. Da wir die Post-Info-Leiste jedoch nur in der Post-Vorlage haben möchten, müssen wir global in der Kopfzeile deaktivieren, damit unsere Leiste nicht allen Kopfzeilen der gesamten Site hinzugefügt wird. Um Global auf der globalen Kopfzeile zu deaktivieren, öffnen Sie das Einstellungsmenü auf der globalen Kopfzeile und wählen Sie „Global deaktivieren“.

Jetzt sollte der Header grau mit der Aufschrift „Custom Header“ sein. Wenn Sie fertig sind, klicken Sie auf das Bearbeitungssymbol, um die Kopfzeilen-Layout-Vorlage zu bearbeiten.

Erstellen der dynamischen Post-Infoleiste

Abschnitt und Zeile hinzufügen

Erstellen Sie im Kopfzeilen-Layout-Editor einen neuen regulären Abschnitt unter dem aktuellen Abschnitt, der die Kopfzeile enthält.

Fügen Sie dann dem Abschnitt eine halbe, viertel, viertel Spalte hinzu.

Abschnittseinstellungen

Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

• Hintergrundfarbe: #eceffe
• Polsterung: 10px oben, 10px unten

Zeileneinstellungen

Nachdem die Abschnittseinstellungen hinzugefügt wurden, öffnen Sie die Einstellungen für die Zeile und aktualisieren Sie Folgendes:

• Dachrinnenbreite: 1
• Padding: 0px oben, 0px unten

Fügen Sie auf der Registerkarte "Erweitert" das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

display:flex !important;
flex-wrap: nowrap;
align-items: center;

Dadurch wird sichergestellt, dass die Spalten auf dem Handy nach unten gestapelt werden.

Dynamischen Inhalt des Beitragstitels hinzufügen

Der erste dynamische Inhalt, den wir der Leiste hinzufügen werden, ist der Beitragstitel. Dies dient dem Leser als hilfreiche Erinnerung daran, welchen Beitragstitel er gerade liest.

Textmodul hinzufügen

Um den Beitragstitel als dynamischen Inhalt zu erstellen, erstellen Sie ein neues Textmodul in der Spalte ganz links.

Beitrags-/Archivtitel als dynamischen Inhalt hinzufügen

Klicken Sie als Nächstes auf das Symbol "Dynamische Inhalte verwenden", während Sie mit der Maus über den Textbereich der Texteinstellungen fahren. Wählen Sie aus der Liste „Post/Archiv-Titel“ aus.

Öffnen Sie die dynamischen Inhaltseinstellungen für den Beitrags-/Archivtitel und fügen Sie Folgendes in das vorherige Eingabefeld ein:

You're Reading: 

Speichern Sie dann die Änderungen.

Designeinstellungen

Passen Sie auf der Registerkarte Design den Stil des dynamischen Titels wie folgt an:

• Textschriftart: Ubuntu
• Schriftstärke des Textes: Mittel
• Text Textfarbe: #121212
• Text Textgröße: 14px (Desktop), 12px (Tablet), 11px (Telefon)

Informationen zu dynamischen Beitragskategorien hinzufügen

Um die Informationen zu den Beitragskategorien zu erstellen, duplizieren Sie das Textmodul mit dem Beitragstitel.

Öffnen Sie dann die Einstellungen des duplizierten Textbausteins und fügen Sie die Beitragskategorien als dynamischen Inhalt zum Textkörper hinzu.

Öffnen Sie die dynamischen Inhaltseinstellungen für Postkategorien und aktualisieren Sie Folgendes:

• Vorher: In
• Kategorientrennzeichen: &

Linkfarbe aktualisieren

Aktualisieren Sie auf der Registerkarte "Design" die Linkfarbe wie folgt:

• Linktextfarbe: #4160fd

Hinzufügen der dynamischen Kommentaranzahl-Info

Eine weitere hilfreiche Information, die wir der Post-Infoleiste hinzufügen werden, ist die Kommentaranzahl, die den Benutzer daran erinnert, sich mit seinen eigenen Kommentaren zu beschäftigen, wenn er möchte. Die Kommentaranzahl enthält auch einen Link zu den Kommentaren des Beitrags.

Um die dynamische Kommentaranzahl zu erstellen, duplizieren Sie das Textmodul mit den Kategorien und ziehen Sie es in die mittlere Spalte.

Fügen Sie dann die Beitragskommentarzählung als dynamischen Inhalt zum Textkörper hinzu.

Öffnen Sie die Einstellungen für die Anzahl der Post-Kommentare und fügen Sie Folgendes hinzu:

• Nachher: ​​Kommentar(e)

Hinzufügen des Call-to-Action „Hinterlasse einen Kommentar“

Zusätzlich zur Anzahl der Kommentare werden wir einen einfachen Call-to-Action hinzufügen, um einen Kommentar zu hinterlassen. Der Link ist ein Ankerlink, der zum Kommentarbereich am Ende des Beitrags scrollt.

Um den CTA zu erstellen, duplizieren Sie das Textmodul in Spalte 2, das die Kommentaranzahl enthält.

Öffnen Sie dann die Texteinstellungen für das Duplikat und fügen Sie den folgenden Link html zum Textkörper hinzu:

<a href="#respond">Leave a Comment</a>

Hinzufügen des Abonnieren-Buttons

Das letzte, was wir der Post-Info-Leiste hinzufügen werden, ist eine Schaltfläche zum Abonnieren. Dies ist auch ein Ankerlink, der den Benutzer zu dem Abschnitt der Beitragsvorlage führt, der ein E-Mail-Anmeldeformular enthält.

Fügen Sie dazu in der Spalte ganz rechts ein Tastenmodul hinzu.

Aktualisieren Sie auf der Registerkarte Design die Schaltflächenstile wie folgt:

• Schaltflächentextgröße: 14px (Desktop), 12px (Tablet), 11px (Telefon)
• Schaltflächentextfarbe: #ffffff
• Schaltfläche Hintergrund Farbverlauf links: #7e5ce6
• Button Hintergrund Farbverlauf rechts: #25b8ee
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 100px
• Tastenabstand : 2px
• Schaltflächenschriftart: Ubuntu
• Schriftstärke der Schaltfläche: Fett
• Schaltflächenschriftart: TT
• Polsterung (Desktop): 10 Pixel oben, 10 Pixel unten, 20 Pixel links, 20 Pixel rechts
• Polsterung (Tablet): 6 Pixel oben, 6 Pixel unten, 14 Pixel links, 14 Pixel rechts

Um den Anker-Link zur Schaltfläche hinzuzufügen, gehen Sie zum Inhalts-Tab und fügen Sie die folgende Schaltflächen-Link-URL hinzu:

• Link-URL der Schaltfläche: #subscribe

Dieser Link funktioniert erst, wenn wir dem Abschnitt mit dem E-Mail-Anmeldeformular im Hauptteil der Beitragsvorlage eine entsprechende CSS-ID hinzugefügt haben.

Spalte 1 auf Mobilgeräten deaktivieren

Auf dem Handy ist nur so viel Platz für eine feste Bar. Aus diesem Grund müssen wir entscheiden, welche Informationen aufgenommen werden sollen. In diesem Beispiel belassen wir die beiden Spalten mit den CTAs auf Mobilgeräten und deaktivieren die Spalte mit dem Beitragstitel und den Kategorien.

Öffnen Sie dazu die Einstellungen für Spalte 1. Deaktivieren Sie auf der Registerkarte Erweitert die Sichtbarkeit auf Telefon und Tablet.

Der Sektion eine feste Position und einen hohen Z-Index geben

Sobald das Design fertig ist, können wir dem Abschnitt nun eine feste Position geben. Die Idee ist, die Leiste zunächst hinter dem Abschnitt mit der Kopfzeile auszublenden. Wenn der Benutzer dann scrollt, wird die Infoleiste für feste Beiträge unter der Kopfzeile angezeigt.

Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

• Position: Behoben
• Z-Index: 998

Beachten Sie, dass der Z-Index 998 ist, weil ich möchte, dass die feste Leiste über dem Rest des Inhalts des Beitrags liegt.

Abschnittsüberschrift Z-Index aktualisieren

Da der Abschnitt der Post-Info-Leiste einen höheren Z-Index hat, wird er über dem Abschnitt mit der Kopfzeile angezeigt. Um dies zu beheben, öffnen Sie die Abschnittseinstellungen für den Abschnitt mit der Überschrift und fügen Sie Folgendes hinzu:

• Z-Index: 999 (einer mehr als der Abschnitt mit dem Balken)

Speichern Sie die Änderungen im Layout-Editor.

CSS-ID zur E-Mail-Anmeldezeile in der Textvorlage hinzufügen

Der Abonnieren-Button-CTA, den wir der Leiste hinzufügen, benötigt noch einen Anker oder eine Stelle, zu der er in der Beitragsvorlage „springen“ kann. Da der CTA „abonnieren“ soll, benötigen wir ihn, um zum E-Mail-Opi-In-Formular zu springen.

Öffnen Sie dazu den Bereich „Custom Body“ der Beitragsvorlage im Theme Builder.

Suchen Sie die Zeile mit dem E-Mail-Anmeldeformular unten im Layout und fügen Sie die folgende CSS-ID hinzu:

• CSS-ID: abonnieren

Dadurch kann der Ankerlink der Schaltfläche zum Abonnieren zu diesem bestimmten Bereich der Vorlage scrollen.

Wenn Sie fertig sind, speichern Sie die Änderungen am Layout und am Theme Builder.

Endergebnis

Um das Endergebnis zu sehen, öffnen Sie einfach einen Live-Beitrag auf der Website. Beachten Sie, wie die Ankerlinks („Kommentar hinterlassen“ und „Abonnieren“) die Benutzer zum entsprechenden Bereich des Beitrags leiten.

Abschließende Gedanken

Hoffentlich wird sich diese dynamische Post-Infoleiste als nützlich erweisen, um die UX Ihrer Divi-Blog-Posts zu steigern. Fühlen Sie sich frei, auch mit anderen Informationen zu experimentieren. Ich bin mir sicher, dass es eine Möglichkeit gibt, einen verwandten Beitrag mit einem Blog-Modul zu veröffentlichen.

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

Danke schön!