So verwenden Sie Divi zum Erstellen von Vorlagen für Ihre WordPress-Beiträge

Veröffentlicht: 2022-11-04

Wenn Sie Ihren WordPress-Beiträgen etwas Struktur hinzufügen möchten, dann ist eine Vorlage eine großartige Möglichkeit, dies zu tun. Divi ist ein beliebtes WordPress-Theme, das mit einem integrierten Vorlagensystem geliefert wird. In diesem Artikel zeigen wir Ihnen, wie Sie mit Divi Vorlagen für Ihre WordPress-Beiträge erstellen. Zunächst müssen Sie eine neue Seite in WordPress erstellen und die Vorlage „Divi Page Builder“ auswählen. Dadurch erhalten Sie eine leere Leinwand, mit der Sie arbeiten können. Als Nächstes möchten Sie Ihrer Seite einige Abschnitte hinzufügen. Für jeden Abschnitt können Sie aus einer Vielzahl vorgefertigter Layouts wählen oder Ihre eigenen erstellen. Sobald Sie Ihre Abschnitte eingerichtet haben, können Sie mit dem Hinzufügen von Inhalten beginnen. Sie können den Divi Builder verwenden, um Text, Bilder, Videos und mehr hinzuzufügen. Sobald Sie mit Ihrem Beitrag zufrieden sind, können Sie ihn auf Ihrer WordPress-Site veröffentlichen. Das ist alles dazu! Mit Divi können Sie Ihre WordPress-Beiträge ganz einfach mit Vorlagen versehen, um Struktur und Stil hinzuzufügen.

In diesem Artikel zeigen wir Ihnen, wie Sie mit dem Theme Builder von Divi eine Blog-Post-Vorlage entwerfen. Eine Blogpost-Vorlage ist eine websiteweite Vorlage, die Sie für alle (oder einen Teil der) Blogposts verwenden. Mit dem Divi Theme Builder können Sie auf einfache Weise Hunderte von optisch ansprechenden Designs erstellen (und die Kombination aus statischen und dynamischen Inhalten in Ihrer gesamten Vorlage ändern). Blog-Beitragsvorlagen sind vorgefertigte Vorlagen mit dynamischem Inhalt, sodass jeder neue oder vorhandene Beitrag automatisch sein Layout und Design übernimmt. Mithilfe der integrierten Funktionen für dynamische Inhalte des Divi Theme Builder können Blogs mithilfe von Blog-Post-Vorlagen erstellt werden. Bevor Sie mit der Arbeit an dem Projekt beginnen können, müssen Sie zunächst verstehen, welche Module Sie verwenden und wie Sie dynamische Inhalte in die Vorlage integrieren. Blogpost-Vorlagen werden mit dem Divi Theme Builder erstellt.

Indem Sie zu WordPress navigieren und Divi, Theme Builder auswählen, können Sie eine neue Vorlage erstellen. Durch Klicken auf die Schaltfläche Benutzerdefinierten Text hinzufügen können Sie einen neuen Bereich für den Text der Beitragsvorlage erstellen. Wenn Sie die Option Build From Scratch auswählen, können Sie mit dem Erstellen Ihrer eigenen Software beginnen. Klicken Sie in den Klappentext-Einstellungen auf das Symbol für dynamische Inhalte und dann auf das Eingabefeld Titel. Das dynamische Inhaltselement „Post-Autor“ kann dem Titelinhalt hinzugefügt werden. Im Folgenden finden Sie Anweisungen zum Ändern der Designeinstellungen. Hinzufügen von Kommentarzahlen zum Blurb-Modul als Funktion für dynamische Inhalte.

Als dynamischer Inhalt können Sie das Profilbild des Postautors als Bild des Moduls einfügen. Das Beitragsinhaltsmodul enthält den Hauptinhalt des Beitrags. Es ist möglich, die Einstellungen des Post-Content-Moduls auf die gleiche Weise wie bei jedem anderen Modul zu aktualisieren. Diese Funktion ist wichtig, da sie bestimmt, auf welche Kategorie sie angewendet werden soll. Dadurch können alle vorherigen Beiträge in derselben Kategorie aus der Beitragsvorlage abgerufen werden. Die Kommentare werden im letzten Abschnitt dieser Blogbeitragsvorlage hinzugefügt. Das Kommentarmodul kann sich im Kommentarfeld einer einzelnen Spaltenzeile befinden.

Wenn Sie Änderungen am Layout oder Theme Builder speichern möchten, aktualisieren Sie bitte deren Designeinstellungen. Denken Sie beim Entwerfen einer Beitragsvorlage an all die großartigen Optionen, die Ihnen zur Verfügung stehen. Wie Sie sehen können, hoffe ich, dass dieses Tutorial ein guter Anfang ist, wenn Sie Ihre eigene Blog-Post-Vorlage mit Divi Builder erstellen. Es ist wichtig zu verstehen, wie die Beitragsvorlage strukturiert wird, sowie die verschiedenen verfügbaren Tools. Während eine schöne Vorlage es dem Blogger ermöglicht, sich auf die Erstellung von Inhalten zu konzentrieren, ermöglicht sie es der Vorlage auch, die gesamte Arbeit für den Blogger zu erledigen.

Wie zeige ich Blogbeiträge in Divi an?

Bild von: elegantthemes.com

Eine Möglichkeit, Blogbeiträge in Divi anzuzeigen, besteht darin, eine Blogseitenvorlage zu erstellen. Erstellen Sie dazu eine neue Seite und wählen Sie die Blogseitenvorlage aus dem Seitenattributmenü aus. Sobald die Vorlage angewendet wurde, werden die Blogbeiträge im Hauptinhaltsbereich der Seite angezeigt.

Blogs findet man im Modul Divi Builder , das für die Anzeige von Blogbeiträgen gedacht ist. Ein Blog-Modul kann so gestaltet werden, dass es interessanter wird, wenn es einer Seite hinzugefügt wird. Das Blog-Modul von Divi Builder bietet eine begrenzte Anzahl von Gestaltungsoptionen. Wenn Sie beispielsweise möchten, dass Ihre Blogbeiträge als Liste angezeigt werden, müssen Sie das Modul deaktivieren. Wählen Sie die Option „Volle Breite“ aus dem Design-Block im Bereich „Blog-Einstellungen“. Die CSS-ID wird unter dem Klassenblock angezeigt. Verwenden Sie das CSS-Klassenfeld left-blog-image, um die CSS-ID des linken Blogs zu kopieren. Sie können den obigen Code nach Bedarf ändern.


Benötige ich den Gutenberg-Editor, wenn ich Divi verwende?

Bild von: brandelemental.com

Wenn Sie das Divi-Theme verwenden, benötigen Sie den Gutenberg-Editor nicht. Divi ist ein WordPress-Theme, das ein Seitenerstellungstool enthält, mit dem Sie benutzerdefinierte Seiten und Beiträge erstellen können, ohne Code verwenden zu müssen.

WordPress 5.0 führt einen völlig neuen Block-Editor (alias Gutenberg) in die Plattform ein. Unsere neue Divi Builder Experience verbessert nicht nur das Designerlebnis, sondern enthält auch neue Funktionen. In diesem Tutorial erfahren Sie mehr über die WordPress-Optionen, die Schritte, die erforderlich sind, um das neue Divi Builder-Erlebnis erfolgreich zu integrieren, und wie Sie es in Ihrer WordPress-Site verwenden. Sie können auf die Themenoptionen im Divi-Menü zugreifen, indem Sie zu Ihrem WordPress-Dashboard gehen. Der klassische (WordPress) Editor kann aktiviert werden, indem Sie zur Registerkarte Builder-Optionen gehen und die Registerkarte Erweitert auswählen. Wählen Sie als Nächstes aus den drei verfügbaren Optionen aus, wie Sie mit der Gestaltung Ihrer Seite beginnen möchten. Der Build-on-the-Frontend-Button ersetzt die traditionelle Verwendung des Visual Builder-Buttons.

Im Frontend wird der Divi Builder verwendet, um ein visuell überzeugendes Designerlebnis zu schaffen. Der neue Divi Builder enthält alle seine Funktionen und den Visual Builder in seinem Backend. Die visuelle Builder-Erfahrung kann im Backend aktiviert werden, indem Sie die Ansichtsmodi oben im Builder auswählen. Wenn Sie eine Seite in der neuesten Version von Divi bearbeiten, können Sie ganz einfach zum klassischen Divi Builder zurückkehren. Divi Builder verfügt jetzt über alle leistungsstarken neuen Funktionen, die zuvor nur im Visual Builder verfügbar waren. Sie müssen sicherstellen, dass der Classic Divi Builder auch im Backend aktiviert ist. Außerdem muss WordPress 5.0 aktualisiert werden, ebenso wie die Kompatibilitätskorrekturen von Divi.

Es ist möglich, vom Seiteneditor mit dem neuen Divi Builder im WordPress-Backend zum klassischen Divi-Seitenersteller zurückzukehren. Beide können gleichzeitig verwendet werden, aber welches bevorzugt wird, muss bestimmt werden. Bald können Sie Ihre bevorzugten Divi-Module in Gutenberg verwenden oder Gutenberg-Blöcke in Divi Builder registrieren.

Verwendung von Divi und Gutenberg zusammen

Soll ich den Gutenberg-Editor verwenden? Wie verwenden Sie Divi?
Die Verwendung von Gutenberg und Divi als Editoren erfordert nicht mehr die Verwendung des zu verwendenden Editors. Sowohl Divi als auch Elementor sind benutzerfreundlich und bieten vielfältige Gestaltungsmöglichkeiten. Elementor kann eine gute Alternative zu Gutenberg sein, wenn Sie die Funktionsweise bevorzugen, aber mehr Flexibilität wünschen. Mit Divi können Sie die optimalsten Optionen und Designoptionen auswählen.
Wie verwenden Sie den Gutenberg-Editor?
Gehen Sie nach der Installation und Aktivierung zu den Einstellungen und klicken Sie auf Ja bei der Option „Benutzern erlauben, Editoren zu wechseln“. Nachdem Sie sich zwischen Classic und Gutenberg entschieden haben, können Sie zwischen diesen wechseln.

Vorlagen für Divi-Blogbeiträge

Bild von: diviextended.com

Es gibt viele verschiedene Möglichkeiten, wie Sie eine Vorlage für Blogbeiträge erstellen können. Eine Möglichkeit besteht darin, einfach eine neue Datei in Ihrem WordPress-Theme-Ordner zu erstellen und ihr einen Namen wie „blog-post.php“ zu geben. Dann können Sie den Code aus der „single.php“-Datei Ihres bestehenden WordPress-Themes in diese neue Datei kopieren und einfügen. Dadurch erhalten Sie eine grundlegende Vorlage, mit der Sie arbeiten können. Eine andere Möglichkeit, eine Vorlage für Blogbeiträge zu erstellen, ist die Verwendung eines Plugins wie WordPress Customizer. Mit diesem Plugin können Sie eine neue Vorlagendatei erstellen und diese dann aus einem Dropdown-Menü auswählen, wenn Sie einen neuen Beitrag erstellen. Sobald Sie Ihre Vorlage erstellt haben, können Sie ihr Ihren eigenen Code hinzufügen, um sie nach Ihren Wünschen anzupassen. Beispielsweise möchten Sie möglicherweise ein vorgestelltes Bild zu Ihrer Blog-Beitragsvorlage hinzufügen. Dazu fügen Sie Ihrer Vorlagendatei den folgenden Code hinzu: Dieser Code prüft, ob der aktuelle Beitrag einen Featured-Image-Satz enthält. Wenn dies der Fall ist, wird das vorgestellte Bild oben im Beitrag angezeigt. Sie können Ihrer Vorlage auch anderen Code hinzufügen, um sie weiter anzupassen. Beispielsweise möchten Sie möglicherweise einen „Weiterlesen“-Link zu Ihrer Blog-Beitragsvorlage hinzufügen. php the_content( 'Weiterlesen' ); ? > Dieser Code zeigt den vollständigen Inhalt Ihres Beitrags an, gefolgt von einem „Weiterlesen“-Link. Es gibt endlose Möglichkeiten, wenn es darum geht, Ihre Blog-Post-Vorlage anzupassen. Dies sind nur einige Beispiele dafür, was Sie tun können. Experimentieren Sie und sehen Sie, was Sie sich einfallen lassen können!

Wir verschenken diese Woche im Rahmen unserer wöchentlichen Divi-Design-Initiative eine kostenlose Blog-Post-Vorlage . Sie können die Vorlage herunterladen, indem Sie im Backend Ihrer WordPress-Site zum Divi Theme Builder gehen. Wenn Sie eine neue Vorlage hochladen, wird in der Vorlage ein neuer Textbereich namens „Alle Beiträge“ angezeigt. Bevor Sie beginnen, die Elemente der Vorlage zu ändern, sollten Sie sie zuerst öffnen. Diese Blogpost-Vorlage ist vollgepackt mit dynamischen Elementen, die mit Ihren Blogposts funktionieren, sobald Sie sie installieren. Um die E-Mail-Optionsmodule in Ihr Design aufzunehmen, müssen Sie ein E-Mail-Konto verknüpfen. Machen Sie es einfach, Ihre eigenen Inhalte zur Seitenleiste hinzuzufügen, z. B. Text, Link-URLs für Schaltflächen und eine Opt-in-E-Mail-Adresse.

Divi: Die leistungsstärkste Blog-Lösung

Divi, eine leistungsstarke Blog-Plattform, ist eine ausgezeichnete Wahl für diejenigen, die nach einer Blog-Lösung suchen. Mit dem leistungsstarken Blog-Modul können Sie Ihre Inhalte auf einer Vielzahl von Seiten anzeigen. Mit der Archivfunktion können Sie Beiträge zu bestimmten Seiten hinzufügen und sie in einzelnen Beiträgen oder mehreren Beiträgen anzeigen. Darüber hinaus verfügt Divi über eine Vielzahl zusätzlicher Funktionen, die es zu einer fantastischen Blogging-Plattform machen.

Divi Single-Post-Layout

Mit dem visuellen Editor von Divi Builder können Sie schnell einen einzelnen Beitrag erstellen, der per Drag-and-Drop erstellt werden kann. Es ist nicht erforderlich, mit einer einzigen HTML- oder CSS-Zeile zu interagieren. Unabhängig davon, ob Sie ein einzelnes Post-Layout für Ihre gesamte Website oder bestimmte Posts/Seiten basierend auf Kriterien wie Tag oder Kategorie erstellen, wird es angezeigt.