So verwenden Sie die Dynamic Content-Funktion von Divi zum Entwerfen eines dynamischen Post-Layouts

Divis neue Funktion für dynamische Inhalte gibt uns die Möglichkeit, dynamische Layouts für Blog-Posts (und vieles mehr) zu erstellen. Und es gibt gute Gründe, warum Sie dies in Betracht ziehen können. Ein Grund ist das Design. Sie können mit Divi mit dem Visual Builder einige erstaunliche Post-Layouts entwerfen, insbesondere wenn Sie die verfügbaren vorgefertigten Layouts als Ausgangspunkt verwenden. Ein weiterer Grund ist die Bequemlichkeit. Sobald das Post-Layout mit allen dynamischen Inhaltselementen (wie Kategorien, vorgestellten Bildern, Post-Tags, benutzerdefinierten Feldern usw.) erstellt wurde, wird der Prozess zum Erstellen und Aktualisieren von Blog-Posts erheblich vereinfacht. Abgesehen vom eigentlichen Beitragsinhalt können alle anderen Beitragsdaten aktualisiert werden, ohne dass der Visual Builder jemals bereitgestellt werden muss.

In diesem Tutorial zeige ich Ihnen, wie Sie in Divi ein dynamisches Post-Layout erstellen. Ich beginne mit einem vorgefertigten Layout und führe Sie durch den Prozess des Hinzufügens dynamischer Inhalte im gesamten Layout und der anschließenden Gestaltung dieser Inhalte. Ich werde sogar eine einfache Möglichkeit vorstellen, benutzerdefinierte Felder als dynamischen Inhalt zu verwenden.

Lass uns anfangen.

Vorgeschmack

Was Sie brauchen, um loszulegen

Für dieses Tutorial benötigen Sie Folgendes:

• Divi-Thema
• Personal Trainer Layout-Paket. Dieses Layout-Paket ist über den Divi Builder zugänglich. Wir werden das Personal Trainer Service-Seitenlayout verwenden, um das Design unseres Post-Layouts zu starten.

Ich zeige Ihnen auch, wie Sie benutzerdefinierte Felder nutzen können, um einen empfohlenen Trainingsabschnitt mit benutzerdefinierten Posttyp-Funktionen zu erstellen. Benutzerdefinierte Felder sind in WordPress integriert und erfordern keine zusätzlichen Plugins oder ähnliches. Sie haben also schon, was Sie brauchen.

Teil 1: Hinzufügen des vorgefertigten Layouts zum Beitrag

Um loszulegen, erstellen Sie einen neuen Beitrag (keine Seite), geben Sie Ihrem Beitrag einen Titel und klicken Sie dann auf die Schaltfläche Divi Builder verwenden. Stellen Sie den Visual Builder noch nicht bereit, da wir zuerst unsere Post-Einstellungen über den Standardbildschirm des WordPress-Editors anpassen müssen.

Da wir unser vorgefertigtes Layout hinzufügen möchten, um unsere Bilder aus dem Layout zu ziehen (wir brauchen es für unser vorgestelltes Bild). Klicken Sie im Divi Builder-Menü auf die Schaltfläche Layout laden.

Wählen Sie im Popup „Aus Bibliothek laden“ das Seitenlayout für den Personal Trainer Service aus und stellen Sie es in Ihrem Beitrag bereit, indem Sie auf die Schaltfläche „Dieses Layout verwenden“ klicken.

Veröffentlichen Sie dann Ihren Beitrag, um Ihre Einstellungen zu speichern.

Teil 2: Aktualisieren der Divi-Seiteneinstellungen, der Post-Metadaten und des vorgestellten Bildes

Divi-Seiteneinstellungen

Es ist wichtig, dass wir die Divi-Seiteneinstellungen aktualisieren, damit unser neues Layout zum Design passt. Wir müssen auch die Standardanzeige des Beitragstitels ausblenden, da wir stattdessen das Beitragstitelmodul verwenden.

Suchen Sie oben rechts auf der Seite das Feld Divi-Seiteneinstellungen und aktualisieren Sie Folgendes:

Seitenlayout: Volle Breite
Beitragstitel anzeigen: Ausblenden

Wenn Sie die Divi-Seiteneinstellungen nicht sehen, haben Sie wahrscheinlich den Divi Builder nicht aktiviert, also stellen Sie sicher, dass Sie dies zuerst tun.

Kategorien hinzufügen

Fügen Sie unter dem Kategorienfeld eine neue Kategorie namens "Krafttraining" hinzu und stellen Sie sicher, dass dies die einzige ausgewählte Kategorie ist.

Tags hinzufügen

Fügen Sie im Feld Tags die folgenden drei Tags hinzu: Geschwindigkeit, Training und Workouts.

Ausgewähltes Bild

Fügen Sie als Nächstes ein vorgestelltes Bild hinzu, das dem im Header des Layouts verwendeten Hintergrundbild entspricht, wie im Screenshot unten gezeigt.

Teil 3: Hinzufügen von benutzerdefinierten Feldern für den dynamischen Trainingsinhalt

Benutzerdefinierte Felder sind in WordPress integriert. Sie ermöglichen es Postautoren, einem Post zusätzliche Informationen (so genannte Metadaten) zusätzlich zu den Standard-Metadaten wie Kategorien, Postautor, Postdatum usw. hinzuzufügen. Grundsätzlich können benutzerdefinierte Felder verwendet werden, um das Wetter anzuzeigen oder die Stimmung des Autors beim Schreiben eines Beitrags. Es gibt jedoch viele verschiedene Möglichkeiten, benutzerdefinierte Felder zu verwenden, um dynamische Inhalte für Ihre Website zu erstellen. Lesen Sie gerne mehr darüber, wie Sie benutzerdefinierte Felder zu Ihrer Website hinzufügen. Aber für diesen Anwendungsfall denke ich, dass Sie das Grundkonzept benutzerdefinierter Felder verstehen, indem Sie einige für sich selbst erstellen.

In diesem Beispiel zeige ich Ihnen, wie Sie einige benutzerdefinierte Felder hinzufügen, mit denen Sie Ihrem Beitrag dynamischen Inhalt hinzufügen können. Der dynamische Inhalt für dieses Beispiel ist ein vorgestelltes Training. Sobald die benutzerdefinierten Felder vorhanden sind, muss der Beitragsautor lediglich die benutzerdefinierten Feldwerte ausfüllen, und der Inhalt wird (dynamisch) für den Beitrag aktualisiert, ohne dass der Visual Builder jemals geladen werden muss.

Scrollen Sie dazu bis zum Ende des Beitrags und suchen Sie das Feld Benutzerdefinierte Felder. Wenn es aus irgendeinem Grund nicht angezeigt wird, stellen Sie sicher, dass Sie es aus den Bildschirmoptionen oben auf der Seite auswählen.

Klicken Sie dann auf das Dropdown-Menü Benutzerdefinierte Felder (sofern ausgeblendet), um ein neues benutzerdefiniertes Feld hinzuzufügen, und geben Sie Folgendes ein:

Name: Trainingstitel
Wert: Empfohlenes Training

Klicken Sie dann auf die Schaltfläche Benutzerdefiniertes Feld hinzufügen.

Mit dem Namen identifizieren Sie das benutzerdefinierte Feld in Divi. Der Wert ist der Inhalt, der der Seite mithilfe der dynamischen Inhaltsfunktion von Divi dynamisch hinzugefügt wird (dazu später mehr).

Fahren Sie mit diesem Vorgang fort, um Ihrer Website die folgenden benutzerdefinierten Felder hinzuzufügen.

Name: Aufwärmen
Wert: 800m Lauf

Name: Dauer
Wert: 30min

Name: Gewichtheben
Wert:

<ul>
<li>Squats: 10 reps at 60% max (4 sets)</li>
<li>Bench: 6 reps at 70% max (3 sets)</li>
</ul>

Name: abkühlen
Wert: 400m Lauf

Hinweis: Diese benutzerdefinierten Felder werden dem Divi-Design hinzugefügt und sind in jedem neuen Beitrag verfügbar, den Sie in Zukunft erstellen. Mit anderen Worten, es ist nicht auf diesen einzigen Beitrag beschränkt.

Vergessen Sie nicht, Ihren Beitrag zu aktualisieren!

Teil 4: Hinzufügen von dynamischem Inhalt zum Post-Layout mit dem Visual Builder

Nachdem wir nun unsere Post-Einstellungen und Metadaten eingerichtet haben, ist es an der Zeit, unserem Post dynamische Inhalte hinzuzufügen. Stellen Sie dazu den Visual Builder bereit.

Um das Auffinden und Bearbeiten dieses erweiterten Layoutdesigns zu erleichtern, öffnen Sie das Einstellungsmenü und setzen Sie den Builder-Standardinteraktionsmodus auf Klickmodus.

Löschen Sie im Kopfbereich das Schaltflächenmodul (wir brauchen es nicht).

Ersetzen des Hintergrundbilds durch den dynamischen Inhalt des empfohlenen Bilds

Für unseren ersten dynamischen Inhalt ersetzen wir das Hintergrundbild, das in Spalte 1 unserer oberen Kopfzeilenzeile verwendet wird, durch das für den Beitrag verwendete Bild. Öffnen Sie dazu die Zeileneinstellungen und suchen Sie die Hintergrundeinstellungen für Spalte 1 und klicken Sie auf die Registerkarte Hintergrundbild. Löschen Sie dann das aktuell vorhandene Bild und bewegen Sie den Mauszeiger über das Vorschaufeld für das Hintergrundbild. Sie sehen das Symbol für dynamische Inhalte oben rechts im Feld. Klicken Sie darauf, um die dynamischen Inhaltsoptionen zu öffnen. Wählen Sie dann aus der Liste die Option Dynamischer Inhalt des empfohlenen Bildes aus.

Ihr Layout wird genau gleich aussehen, da wir das gleiche Bild verwenden. Der einzige Unterschied besteht jetzt darin, dass das Hintergrundbild aus dem Bild gezogen wird, das als Ihr vorgestelltes Bild des Beitrags festgelegt ist. Das ist das Schöne an dynamischen Inhalten!

Lass uns weitermachen.

Hinzufügen des Beitragstitels mit einem Beitragstitelmodul

Fügen Sie unter dem Textmodul, das derzeit den Titel der Seite enthält, ein Beitragstitel-Modul hinzu. Es gibt auch eine Option, den Beitragstitel mit dynamischem Inhalt zu einem Modul hinzuzufügen, aber da das Beitragstitelmodul bereits wie dynamischer Inhalt funktioniert und das h1-Heading-Tag für SEO beibehält, ist es perfekt, es für Ihr benutzerdefiniertes Beitragslayout zu verwenden .

Aktualisieren Sie dann die Einstellungen des Beitragstitelmoduls wie folgt:

Meta anzeigen: NEIN
Ausgewähltes Bild anzeigen: NEIN

Gehen Sie nun zum obigen Textmodul und kopieren Sie die h2-Überschriftenstile, indem Sie mit der rechten Maustaste auf die Registerkarte h2 klicken und die Option aus dieser Liste auswählen.

Fügen Sie dann die h2-Überschriftenstile in das Beitragstitelmodul ein, indem Sie mit der rechten Maustaste auf das Modul klicken und die Option aus der Liste auswählen.

Gehen Sie danach wieder zum obigen Textmodul zurück, kopieren Sie die Abstandsstile und fügen Sie sie in das Beitragstitelmodul ein. Ändern Sie dann die Textfarbe des Beitragstitels auf hell, um die weiße Farbe zu erhalten.

Jetzt sollte Ihr Beitragstitel dem Design des ursprünglichen Layouttitels entsprechen.

Jetzt können Sie den Textbaustein mit der ursprünglichen Überschrift löschen.

Verwenden von dynamischem Inhalt zum Erstellen einer Reihe von Metadaten

Fahren Sie mit dem zweiten Abschnitt des Layouts fort. Entfernen Sie dann die obere Auffüllung des Abschnitts, indem Sie sie im Visual Builder wegziehen oder in den Abschnittseinstellungen auf 0px setzen.

In der ersten Zeile des zweiten Abschnitts des Layouts sehen Sie einen Textbaustein (er hat den Inhalt „Über Personal Training“) mit einer Trennlinie darunter. Hier werden wir unsere benutzerdefinierte Reihe von Metadaten mit dynamischem Inhalt erstellen.

Wir möchten, dass die Größe dieser Zeile der Größe der Zeile im oberen Abschnitt entspricht. Öffnen Sie dazu die Zeileneinstellungen der Zeile im oberen Bereich und kopieren Sie die Größenstile. Fügen Sie sie dann in die erste Zeile des zweiten Abschnitts ein. Aktualisieren Sie dann den Zeilensteg mit auf 2. Die neue Dimensionierung sollte wie im folgenden Screenshot aussehen.

Sie müssen auch wie folgt benutzerdefinierte Abstände hinzufügen:

Benutzerdefinierte Polsterung: 1% links, 1% rechts

Speichern Sie dann die Zeileneinstellungen.

Aktualisieren Sie nun die Zeilenspaltenstruktur auf ein vierspaltiges Layout.

Jetzt können wir unseren dynamischen Inhalt hinzufügen. Öffnen Sie dazu nun die Einstellungen des Textbausteins in der Spalte ganz links und fahren Sie mit der Maus über das Inhaltsfeld. Sie sehen das Symbol für dynamische Inhalte oben rechts im Feld. Klicken Sie darauf, um die dynamischen Inhaltsoptionen zu öffnen.

Wählen Sie dann die Option: Post-Veröffentlichungsdatum.

Ändern Sie dann das Datumsformat entsprechend.

Dadurch wird das Veröffentlichungsdatum des Beitrags als dynamischer Inhalt hinzugefügt.

Um den Textbaustein mit dem dynamischen Datumsinhalt zu stylen, kopieren Sie die Bausteinstile des Textbausteins in die linke Spalte der Zeile direkt darunter.

Fügen Sie dann die Modulstile in das Textmodul mit dem dynamischen Datumsinhalt ein und ändern Sie die Texttextfarbe in Weiß.

Als nächstes kopieren Sie das Textmodul und die Trennlinie darunter und fügen es in Spalte 2 ein. Ändern Sie dann den dynamischen Inhalt in Post-Kategorien.

Sie müssen die Linktextfarbe auf Weiß aktualisieren, damit sie dem Design des Layouts entspricht.

Kopieren Sie nun das Textmodul Post-Kategorien mit der Trennlinie in Spalte 3. Ändern Sie dann den dynamischen Inhalt in Post Comment Count. Geben Sie im Popup-Fenster "Anzahl von Kommentaren" Folgendes in das Eingabefeld Vorher ein:

Vorher: Kommentare:

Die in den Popups für dynamische Inhalte verfügbaren Vorher- und Nachher-Eingabefelder sind eine bequeme Option, um Text vor und/oder nach dem dynamischen Inhalt hinzuzufügen. Dies ist hilfreich, um bei Bedarf Beschriftungen, Preissymbole und andere Elemente hinzuzufügen.

Lassen Sie uns nun unseren dynamischen Inhalt hinzufügen. Kopieren Sie das Textmodul und die Trennlinie in Spalte 3 und fügen Sie sie in Spalte 4 ein. Diese letzte Spalte enthält das Miniaturbild des Beitragsautors und den Autorennamen. Ändern Sie also den dynamischen Inhalt des Textmoduls in Beitragsautor. Aktualisieren Sie im Popup-Fenster des Beitragsautors Folgendes:

Vorher: von:
Namensformat: Vor- und Nachname

Fügen Sie über dem Textmodul mit dem Inhalt des Beitragsautors ein neues Bildmodul hinzu. Öffnen Sie die Bildmoduleinstellungen und löschen Sie das Standardbild. Klicken Sie wie bisher auf das Symbol für dynamische Inhalte im Vorschaufeld und fügen Sie das Profilbild des Beitragsautors als dynamischen Inhalt hinzu.

Passen Sie dann die Designeinstellungen an, um das Bild nach oben zu ziehen und ihm eine benutzerdefinierte Breite wie folgt zuzuweisen:

Breite: 80px
Benutzerdefinierter Rand (Desktop): -82px Top
Benutzerdefinierter Rand (Tablet): 0px Oben

Hinweis: Der Name des Beitragsautors zeigt den Autor an, der dem aktuellen Beitrag zugewiesen wurde. Und das Profilbild des Beitragsautors ist das, was für das Benutzerprofil im WordPress-Dashboard unter Benutzer > Ihr Profil eingestellt wurde.

Teil 5: Hinzufügen der benutzerdefinierten Felder als dynamischen Inhalt, um dem Beitrag ein empfohlenes Training hinzuzufügen

Erinnern Sie sich daran, wie wir diese benutzerdefinierten Felder früher im Tutorial hinzugefügt haben? Jetzt werden wir diese benutzerdefinierten Felder als Inhalt für ein vorgestelltes Training in unserem Beitrag verwenden.

Um unsere vorgestellten dynamischen Trainingsinhalte hinzuzufügen, duplizieren Sie zuerst die zweispaltige Zeile direkt unter der vierspaltigen Zeile mit all unseren dynamischen Metadaten. Löschen Sie dann die Module in beiden Spalten und fügen Sie in der linken Spalte ein Klappenmodul hinzu.

Wir werden Blurb-Module verwenden, um die dynamischen Inhalte für den Trainingsabschnitt hinzuzufügen. Fügen Sie zunächst ein neues Klappenmodul in die linke Spalte ein.

Fügen Sie für den Titel das benutzerdefinierte Feld mit dem Namen "Workout Title" als dynamischen Inhalt hinzu. Fügen Sie dann für den Klappentext das benutzerdefinierte Feld mit dem Namen "Dauer" als dynamischen Inhalt hinzu.

Um die Dinge am Laufen zu halten, werde ich nicht im Detail auf das Styling dieser Module eingehen. Sie müssen jedoch links neben dem Titel ein Klappensymbol hinzufügen und das Design aktualisieren, damit es dem Layout entspricht.

Als nächstes fügen Sie unten ein zweites Klappenmodul hinzu. Geben Sie als Titel den Text „Warmup“ ein. Fügen Sie dann das benutzerdefinierte Feld mit dem Namen "Warmup" als dynamischen Inhalt hinzu.

Fügen Sie darunter ein drittes Klappenmodul hinzu, mit „Weight Lifting“ als Titel und dem benutzerdefinierten Feld „Weight Lifting“ als dynamischem Inhalt. Da wir für diesen benutzerdefinierten Feldwert HTML verwenden, müssen Sie Roh-HTML im Gewichtheber-Popup aktivieren.

Fügen Sie ein letztes Klappenmodul mit „Cool Down“ als Titel und dem benutzerdefinierten Feld „Cool Down“ als dynamischem Inhalt hinzu.

Jetzt haben Sie einen dynamischen Abschnitt zum Hinzufügen von Workouts zu Ihrem Beitrag!

Alles, was Sie tun müssen, ist, die benutzerdefinierten Feldwerte aus dem Standardseiteneditor in WordPress zu aktualisieren, und dieser Inhalt wird Ihrem Post-Layout automatisch hinzugefügt, ohne dass Sie in den Divi-Builder gehen müssen.

Teil 6: Entwerfen eines Abschnitts „Verwandte Themen“ mit dynamischen Inhalten von Post-Tags

Sie können dynamische Inhalte verwenden, um die Post-Tags anzuzeigen und einen cool aussehenden Abschnitt mit "verwandten Themen" für Ihren Beitrag zu erstellen. Erstellen Sie dazu eine neue einspaltige Zeile und fügen Sie der Zeile einen Textbaustein hinzu.

Fügen Sie dann für das Inhaltsfeld Post-Tags als dynamischen Inhalt hinzu. Aktualisieren Sie dann die folgenden Post-Tags-Optionen:

Vorher: Verwandte Themen:
Tag-Trennzeichen: //

Hinweis: Sie können fast jeden gewünschten Satz von Zeichen für das Tag-Trennzeichen verwenden. Experimentieren Sie also mit verschiedenen Zeichen für kreative Designs.

Um den Inhalt zu gestalten, aktualisieren Sie die folgenden Designeinstellungen:

Textschriftart: Oswald
Schriftstärke des Textes: Halbfett
Text Textfarbe: #ff4c00
Text Textgröße: 30px
Link-Schriftart: Oswald
Link-Schriftstärke: Halbfett
Linktextfarbe: #262d3f
Linktextgröße: 50px
Link-Buchstaben-Abstand: 2px
Höhe der Verbindungslinie: 1,6em

Hier ist das endgültige Design.

Teil 7: Hinzufügen einer Autorenbiografie und eines Kommentarbereichs

An dieser Stelle sind Sie gut gerüstet, um dynamische Inhalte hinzuzufügen und das Design Ihres Post-Layouts mit einiger Leichtigkeit anzupassen, sodass ich auf die letzten beiden Elemente nicht näher eingehen werde.

Hinzufügen eines Abschnitts zur Autorenbiografie mit dynamischem Inhalt

Um eine Autorenbiografie am Ende Ihres Beitragsinhalts hinzuzufügen, können Sie die dynamischen Inhalte des Beitragsautors, des Profilbilds des Beitragsautors und der Biografie des Autors verwenden. Wie Sie im Screenshot unten sehen können, habe ich eine 1/4 3/4 Spaltenreihe erstellt. Dann habe ich das Profilbild des Beitragsautors in die linke Spalte eingefügt. In der rechten Spalte habe ich den Beitragsautor mit der Autorenbiografie darunter hinzugefügt. Ich habe auch den dynamischen Inhalt des vorgestellten Bildes als Hintergrundbild für den Abschnitt (und eine Verlaufsüberlagerung) hinzugefügt. Hier ist ein Beispiel, wie das aussehen würde.

Hinzufügen eines Kommentarbereichs mithilfe des Kommentarmoduls

Da wir ein benutzerdefiniertes Post-Layout verwenden, ist es sinnvoll, ein Kommentarmodul zu verwenden, damit wir das Design des Kommentarbereichs mit dem Layout abgleichen können. Fügen Sie einfach das Kommentarmodul zu einer neuen Abschnittszeile hinzu und passen Sie die Schaltflächenstile und Schriftarten an das aktuelle Layout an. Hier ist ein Beispiel, wie das aussehen würde.

Das endgültige Design

Hier ist das endgültige Design des gesamten Beitrags, nachdem das gesamte Design angepasst wurde.

Aktualisieren von Beitragsinhalten und Speichern des Layouts für zukünftige Beiträge

Da wir den Divi Builder verwenden, um das Post-Layout zu erstellen, müssen Sie den tatsächlichen Post-Inhalt für Ihren Post noch mit Divi-Modulen aktualisieren. Aber da alles andere jetzt dynamisch ist, macht dies den Prozess für die Zukunft viel einfacher. Sie müssen das Beitragslayout in Ihrer Bibliothek speichern, damit Sie beim Erstellen eines neuen Beitrags nur das gespeicherte Layout zu Ihrem Beitrag hinzufügen und den Beitragsinhalt aktualisieren müssen.

Abschließende Gedanken

Der dynamische Inhalt von Divi ist eine leistungsstarke Funktion, die das Hinzufügen und Aktualisieren von Beitragsdaten erheblich erleichtert. Wenn Sie also mit dem Divi Builder ein benutzerdefiniertes Layout für Ihre Blog-Posts (oder andere benutzerdefinierte Post-Typen wie Projekte) entwerfen möchten, ist dynamischer Inhalt der richtige Weg. Natürlich sind dynamische Inhalte nicht auf Beiträge beschränkt. Sie können dynamische Inhalte und benutzerdefinierte Felder auf Ihrer gesamten Website nutzen. Ich hoffe, dieser Beitrag hilft Ihnen dabei, einige der Möglichkeiten zu verstehen und inspiriert Sie dazu, dynamische Inhalte auf großartige neue Weise zu verwenden.

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

Danke schön!