So verwenden Sie das Post-Content-Modul im Divi Theme Builder

Das Post-Content-Modul ist ein spezielles Modul, das beim Erstellen eines Body-Bereich-Layouts für eine Vorlage im Divi Theme Builder verfügbar ist. Zu verstehen, was das Post-Content-Modul ist und wie es verwendet wird, ist beim Entwerfen benutzerdefinierter Vorlagen mit dem Divi Theme Builder äußerst hilfreich.

In diesem Tutorial erfahren Sie, wie das Post-Content-Modul funktioniert und wie Sie es am besten beim Entwerfen von Vorlagen in Divi verwenden.

Tauchen wir ein!

Abonnieren Sie unseren Youtube-Kanal

Über das Post-Content-Modul von Divi

Die Hauptfunktion des Beitragsinhaltsmoduls besteht darin, Beitrags- oder Seiteninhalte innerhalb einer bestimmten Beitrags- oder Seitenvorlage anzuzeigen (und zu gestalten). Das Modul wurde ausschließlich für die Arbeit mit dem Theme Builder entwickelt, daher ist es nicht verfügbar, wenn der Divi Builder verwendet wird, um eine normale Seite oder einen Beitrag zu bearbeiten.

Im Theme Builder erstellt das Post Content Module einen Bereich für den Divi Builder, der innerhalb des Body-Bereichs einer Theme Builder-Vorlage verwendet wird. Es kann auch verwendet werden, um Post- oder Seiteninhalte anzuzeigen und zu gestalten, die auch mit dem Standard-WordPress-Editor erstellt wurden. Dies macht es besonders gut zum Erstellen von Blog-Post-Vorlagen.

Das Modul kann dem Textbereich-Layout einer beliebigen Vorlage hinzugefügt werden, indem Sie den normalen Vorgang zum Hinzufügen eines neuen Moduls in Divi verwenden. Klicken Sie einfach auf das Symbol zum Hinzufügen eines Moduls und wählen Sie das Post-Content-Modul aus der Liste aus.

Dadurch wird das Modal für die Post-Inhaltseinstellungen angezeigt, das alle verfügbaren Designoptionen enthält, um Standardstilelemente hinzuzufügen, die von Posts oder Seiten vererbt werden, die der Vorlage zugewiesen sind.

Der simulierte Inhalt ist dazu da, uns ein hilfreiches Bild zu geben, wie diese Elemente auf einer Live-Seite oder einem Beitrag aussehen werden.

Nachdem wir nun eine kurze Einführung in das Post-Content-Modul haben, wollen wir uns ansehen, wie wir es auf unserer eigenen Divi-Site verwenden können.

Verwenden des Post-Content-Moduls für Post-Vorlagen

Verwenden des Post-Content-Moduls zum Anzeigen von Post-Inhalten, die mit dem klassischen oder Standard-Editor (nicht Divi) erstellt wurden

Eine sehr praktische Anwendung des Post-Content-Moduls besteht darin, das Modul zu verwenden, um dem Post-Inhalt auf der Vorlage Styling hinzuzufügen, um Inhalt zu posten, der mit dem Standard-Post-Editor von WordPress erstellt wurde (ohne den Divi Builder zu verwenden).

Zum Beispiel könnten wir eine neue Vorlage erstellen, die allen Beiträgen auf unserer Divi-Site zugewiesen ist.

Verwenden Sie dann den Vorlagen-Layout-Editor, um die Blog-Post-Vorlage mit statischen Designelementen und dynamischen Inhalten zu gestalten.

Identifizieren Sie den Bereich der Vorlage, in dem der tatsächliche Beitragsinhalt eines einzelnen Beitrags angezeigt werden soll. Fügen Sie dann das Modul Post Content zum Vorlagenlayout hinzu.

Öffnen Sie als Nächstes die Einstellungen für das Post-Content-Modul, um das Styling hinzuzufügen, das Sie auf alle Post-Inhalte anwenden möchten, die einem neuen oder vorhandenen Post auf Ihrer Website hinzugefügt werden. Das Post-Content-Modul verfügt über eingebaute Scheininhalte mit verschiedenen Elementen, die gestaltet werden können. Dieser Scheininhalt wird durch den tatsächlichen Beitragsinhalt ersetzt, wenn ein Beitrag auf der Website angezeigt wird.

Nachdem das Beitragsinhaltsmodul der Vorlage mit den Stilen zu den Beitragsmoduleinstellungen hinzugefügt wurde, kann die Beitragsvorlage von unseren Blogbeiträgen auf der Live-Site verwendet werden.

Wir können einen neuen Beitrag erstellen oder einen bestehenden Beitrag mit dem Standard-Editor oder dem klassischen Editor in WordPress bearbeiten.

Wenn wir den klassischen Editor verwenden, füllt jeder Inhalt, der mit dem Wysiwyg-Editor zum Inhaltsfeld hinzugefügt wird, den vom Post Content Module gestalteten Bereich der Vorlage.

Wenn wir den Standard-WordPress-Editor (oder Block-Editor) verwenden, wird jeder Inhalt, den wir mit dem Block-Editor erstellen, den Bereich des Post-Content-Moduls der Vorlage füllen (und das Styling davon erben).

Blogger, die den standardmäßigen/klassischen Editor bevorzugen, müssen sich nicht um die Gestaltung des Inhalts kümmern, da er die Gestaltung übernimmt, die im Modul für den Beitragsinhalt der Vorlage festgelegt wurde. So können sich Autoren mehr auf den eigentlichen Inhalt konzentrieren. Außerdem verfügt die Beitragsvorlage über zusätzliches Design und dynamische Inhalte, die den Beitragsinhalt umgeben, um das Gesamtdesign des Beitrags zu vervollständigen.

Hier ist ein Blick auf das Backend eines Mock-Posts, der mit dem Standard-/Klassiker-Editor erstellt wurde.

Hier ist der gleiche Beitrag, wenn er am Frontend angezeigt wird.

Beachten Sie neben dem Design und den dynamischen Inhalten, die in der Vorlage vorhanden sind, das Styling des Beitragsinhalts mit der Vorlage

Verwenden des Post-Content-Moduls, um mit Divi erstellte Post-Inhalte anzuzeigen.

Wenn wir eine Beitragsvorlage für Blogbeiträge verwenden, entscheiden wir uns möglicherweise, den Divi-Builder zu verwenden, um einen oder mehrere unserer Blogbeiträge zu entwerfen, anstatt den Standardeditor zu verwenden. Dies gibt uns eine größere Kontrolle über das Design jedes Elements des Post-Inhalts, anstatt uns einfach auf den Standard-Editor und das Post-Content-Modul-Styling innerhalb der Vorlage zu verlassen.

Denken Sie daran, dass, obwohl wir den Divi Builder zum Entwerfen des Beitrags verwenden, der gesamte Platz des Beitragsinhaltsdesigns in dem vom Beitragsinhaltsmodul innerhalb der Beitragsvorlage festgelegten Bereich enthalten ist.

Weitere Informationen finden Sie in unserer Dokumentation zum Erstellen einer Website-weiten Blogpost-Vorlage.

Verwenden des Post-Content-Moduls für Seitenvorlagen

Trotz des Namens kann das Post Content Module für Posts und Seiten gleichermaßen verwendet werden. Wenn wir also ein Body-Template für eine oder mehrere Seiten unserer Website erstellen möchten, müssen wir das Post-Content-Modul verwenden, um sicherzustellen, dass der Seiteninhalt angezeigt wird.

In den meisten Fällen ist das Erstellen einer Body-Vorlage für eine oder mehrere Seiten unnötig, da jede Seite normalerweise aus eindeutigem statischen Inhalt besteht, der Seite für Seite erstellt wird. Es kann jedoch vorkommen, dass eine Körpervorlage auch für Seiten nützlich ist. Dies kann hilfreich sein, um Design und Inhalte auf Vorlagenebene hinzuzufügen, die automatisch auf Seiten angezeigt werden sollen.

Beispielsweise möchten wir möglicherweise das gleiche Seitentiteldesign für alle Seiten unserer Website verwenden. Oder wir möchten möglicherweise einen CTA wie eine E-Mail-Option am Ende aller (oder einiger) unserer Seiten einfügen.

Hier ist ein Beispiel dafür, wie dies auf einer Website funktionieren würde.

Gehen Sie zuerst zum Divi Theme Builder und erstellen Sie eine neue Vorlage. Weisen Sie dann die Vorlage allen Seiten zu und fügen Sie der Vorlage einen benutzerdefinierten Textbereich hinzu. Klicken Sie anschließend auf , um den benutzerdefinierten Körperbereich zu bearbeiten.

Verwenden Sie im Vorlagenlayout-Editor den Divi Builder, um einen Seitentitelabschnitt mit dynamischem Inhalt zu entwerfen. Wir empfehlen die Verwendung eines Textmoduls und ziehen das dynamische Inhaltselement Post/Archivtitel für den Hauptinhalt des Textmoduls ein. Der Beitrags-/Archivtitel zeigt auch Seitentitel an.

Erstellen Sie dann einen neuen Abschnitt für das Post-Content-Modul. Auch dies ist notwendig, da die Vorlage ohne das Post-Content-Modul keine individuellen Seiteninhalte oder -designs anzeigt.

Da dieses Post-Content-Modul der übergeordnete Container für unseren Seiteninhalt ist, ist es eine gute Idee, dem Post-Content-Modul die volle Breite der Seite zu ermöglichen. Die Abstände können wir bei der Gestaltung der einzelnen Seiteninhalte bei Verwendung des Divi Builders jederzeit anpassen.

Als Nächstes können wir am unteren Rand der Vorlage einen Abschnitt hinzufügen, der auf allen Seiten angezeigt wird. Da wir möchten, dass der Inhalt unter dem eigentlichen Post-/Seiteninhalt angezeigt wird, müssen wir ihn unter dem Abschnitt hinzufügen, der das Post-Content-Modul enthält.

Hier ist ein Beispiel für einen Abschnitt, der unterhalb des Post-Inhalts erstellt wurde und soziale Symbole und ein E-Mail-Optin enthält.

Hinweis: Da wir den Divi Builder verwenden werden, um tatsächliche Seiten in Divi zu entwerfen, müssen wir dem Post-Content-Modul nicht wirklich ein Styling hinzufügen.

Jetzt können wir mit unserer Seitenvorlage eine neue Seite in Divi erstellen, indem wir zu Seiten > Neu hinzufügen gehen. Fügen Sie dann einen Titel hinzu und stellen Sie den Divi Builder bereit.

Klicken Sie dann auf , um auf dem Frontend zu bauen.

Mit Divi können Sie den Seiteninhalt im Frontend gestalten. Beachten Sie jedoch, wie der (visuelle) Frontend-Builder im Bereich des Post-Content-Moduls der der Seite zugewiesenen Seitenvorlage enthalten ist. Beim Bearbeiten eines Posts oder einer Seite im Divi Builder wird die gesamte Divi Builder-Benutzeroberfläche in der Spalte angezeigt, in der sich das Post-Inhaltsmodul befindet. Alles andere außerhalb dieses Moduls ist statisch und kann außerhalb des Theme Builder nicht geändert werden.

Für dieses Beispiel besteht die Seite also aus den folgenden Bereichen:

1. Globaler Header (Hinzugefügt zum benutzerdefinierten Header-Bereich der Seitenvorlage)
2. Titelabschnitt (Hinzugefügt zum benutzerdefinierten Textbereich-Layout der Seitenvorlage über dem Seiteninhalt)
3. Abschnitt "Post-Inhalt" (Zum benutzerdefinierten Body-Bereich-Layout der Seitenvorlage hinzugefügt; besteht aus dem Post-Content-Modul, das den Bauraum für den Divi Builder bestimmt)
4. CTA-Abschnitt (Hinzugefügt zum benutzerdefinierten Textbereich-Layout der Seitenvorlage unter dem Seiteninhalt)
5. Globale Fußzeile (Hinzugefügt zum benutzerdefinierten Fußzeilenbereich der Seitenvorlage)

So sieht es aus, wenn Sie die Seite im Frontend mit dem Divi Builder bearbeiten.

Das Post Content Module eignet sich gut zum Entwerfen von WooCommerce-Seiten, die von Shortcodes generiert werden.

Das Post Content Module kommt auch immer dann ins Spiel, wenn wir Seitenvorlagen für WooCommerce-Seiten erstellen. WooCommerce-Seiten generieren Seiteninhalte mit Shortcodes. Diese Shortcodes befinden sich im Inhaltsfeld der WooCommerce-Seite.

So sieht eine Kontoseite standardmäßig aus, wenn die Seite in Divi bearbeitet wird.

Um eine Vorlage für diese WooCommerce-Seite zu entwerfen, müssen wir den Divi Builder nicht im Seiteneditor bereitstellen. Wir können im Divi Theme Builder eine Vorlage erstellen und das Design des vom Shortcode generierten Seiteninhalts (zumindest einen Teil davon) mithilfe des Post-Content-Moduls gezielt gestalten.

Stellen Sie beim Erstellen der Vorlage sicher, dass Sie die Vorlage der/den WooCommerce-Seite(n) zuweisen.

Wichtig: Das Post-Content-Modul zeigt den Inhalt von Archiv-/Kategorieseiten nicht an. Stellen Sie sicher, dass Sie die Shop-Seite nicht einer Vorlage zuordnen, die vom Beitrags-Content-Modul zur Anzeige von Inhalten abhängt. Auf der Shopseite werden keine Inhalte angezeigt. Da wir also planen, das Post-Content-Modul in der Vorlage zu verwenden, müssen wir unsere Vorlagenzuweisung auf die Seiten Warenkorb, Kasse und/oder Mein Konto beschränken.

Jetzt können wir der Vorlage einen benutzerdefinierten Textbereich hinzufügen und ihn mit dem Vorlagenlayout-Editor erstellen.

Passen Sie dann die Seitenvorlage mit dem Divi Builder an. Wenn Sie das Post-Content-Modul hinzufügen, stellen Sie sicher, dass Sie die Designeinstellungen aktualisieren, um das Design der vom Shortcode generierten WooCommerce-Seitenelemente zu berücksichtigen.

Und so würde die Mein Konto-Seite im Frontend mit dem Post-Content-Modul-Styling aussehen.

Leider kann das Post-Content-Modul nicht jedes Element des von der WooCommerce-Seite generierten Inhalts direkt gestalten. Dies bietet jedoch einen schönen Bonus beim Entwerfen von Woocommerce-Seitenvorlagen.

Nicht für Index-/Archiv-/Kategorieseitenvorlagen

Da das Post-Content-Modul dazu gedacht ist, den Inhalt einer bestimmten Seite oder eines in Divi erstellten Posts anzuzeigen, funktioniert es nicht mit Index-(Archiv-)Seitenvorlagen. Wird die Vorlage auf einer Index-(Archiv-)Seite verwendet), wird das Modul im Frontend nicht gerendert und somit auch kein Inhalt angezeigt.

Wenn dieses Modul in einem Body-Bereich vorhanden ist, aber kein Beitragsinhalt vorhanden ist (oder wenn die Vorlage auf einer Index-(Archiv-)Seite verwendet wird), wird das Modul nicht im Frontend gerendert.

Kurz gesagt, verwenden Sie den Inhalt des Postmoduls nicht, um den Inhalt für Archivseiten anzuzeigen, einschließlich der Suchergebnisseite und der 404-Seite.

Verwenden Sie das Blog-Modul für Archivseitenvorlagen.

Wenn wir eine Vorlage für Archivseiten erstellen möchten, bietet das Blog-Modul von Divi die Möglichkeit, den Inhalt der aktuellen Seite anzuzeigen. Dadurch wird der Inhalt generiert, der mit der Kategorie- oder Archivseite verknüpft ist.

Weitere Informationen finden Sie in diesem Beitrag zum Erstellen einer Kategorieseitenvorlage für Ihr Blog.

Nicht für Produktseitenvorlagen

Beim Erstellen einer Produktseitenvorlage für WooCommerce-Produkte in Divi ist es am besten, sich nicht auf das Post-Content-Modul zu verlassen, um Produktinformationen im Hauptbereich der Vorlage anzuzeigen. Divi verfügt über alle Woo-Module, die wir benötigen, um Produktinformationen dynamisch auf Vorlagenebene einzugeben. Wenn Sie das Post-Content-Modul auf einer einer Produktseite zugewiesenen Vorlage verwenden, wird nur der Inhalt angezeigt, der im Inhaltsfeld enthalten ist (was standardmäßig nur die Produktbeschreibung ist).

Weitere Informationen finden Sie unter Erstellen einer Produktseitenvorlage.

Warnung, wenn das Post-Content-Modul fehlt

Wenn das Beitragsinhaltsmodul nicht im Hauptteil der Theme Builder-Vorlage enthalten ist und wir „Verwenden Sie den Divi Builder“ wählen, um einen Beitrag mit dieser Vorlage zu bearbeiten, wird uns ein Warn-Popup-Fenster angezeigt, das uns mitteilt, dass wir das fehlende Inhaltsmodul auf der verwendeten Vorlage posten. Es gibt auch eine Schaltfläche, die uns direkt zum Theme-Builder führt, um die erforderlichen Änderungen an der Vorlage vorzunehmen.

Abschließende Gedanken

Beim Entwerfen neuer Vorlagen für eine Divi-Site ist es wichtig zu verstehen, wie das Post-Content-Modul verwendet wird. Das Modul wird vielleicht am besten in Verbindung mit dynamischen Inhaltselementen verwendet, um eine Vorlage für Blogposts zu erstellen, die den Erstellungsworkflow zum Erstellen von Blogposts optimieren kann, ohne den Divi Builder bereitstellen zu müssen. Aber das Post-Content-Modul kann auch für Seitenvorlagen nützlich sein, sogar für WooCommerce-Seiten.

Welche Erfahrungen haben Sie bisher mit dem Post Content Module gemacht?

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

Danke schön!