5 Tipps zum Organisieren von Blogseiteninhalten in Divi

Der Inhalt Ihrer Blog-Seite kann auf viele Arten organisiert werden. Da es sich um eine Blog-Seite handelt, besteht der größte Teil des Inhalts aus einem Feed mit aktuellen Blog-Posts. Zu wissen, wie man diesen Inhalt organisiert, kann eine großartige Möglichkeit sein, die Monotonie zu durchbrechen und die Tür für einzigartigere Blog-Seitendesigns zu öffnen.

In diesem Tutorial geben wir Ihnen 5 hilfreiche Tipps zum Organisieren von Blog-Seiteninhalten in Divi, die Ihnen dabei helfen, Folgendes zu lernen:

1. So erstellen Sie ein zweispaltiges Layout
2. So verwenden Sie Sticky Posts
3. So verwenden Sie Post-Offsets
4. So verwenden Sie mehrere Blog-Module, um ein benutzerdefiniertes Layout für Blog-Posts zu erstellen
5. So zeigen Sie aktuelle Beiträge nach Kategorie an

Vorgeschmack

Hier sehen Sie, wie wir den Inhalt von Blog-Seiten in Divi organisieren.

Verwenden eines zweispaltigen Layouts

Ein Abschnitt mit empfohlenen Beiträgen über dem Haupt-Blog-Feed

Ein Post-Slider in voller Breite über dem Haupt-Blog-Feed

Verwenden mehrerer Blog-Module für ein einzigartiges Layout und Design

Mit den neuesten Beiträgen nach Kategorie

Was Sie brauchen, um loszulegen

Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.

Für dieses Tutorial verwende ich die Kategorieseitenvorlage für das zweite Theme Builder Pack. Wenn Sie es verwenden möchten, laden Sie das Paket herunter und importieren Sie die Datei divi-theme-builder-pack-2-category-page-template.json mithilfe der Portabilitätsoptionen in den Theme-Builder.

Standardmäßig wird die importierte Vorlage „Alle Kategorieseiten“ zugewiesen. Öffnen Sie die Vorlageneinstellungen und weisen Sie sie dem Blog zu.

Jetzt können Sie mit dem Organisieren von Blogseiteninhalten innerhalb der Vorlage beginnen. Um zu beginnen, klicken Sie auf das Bearbeitungssymbol im Textbereich der Vorlage.

Jetzt können Sie das Layout mit dem Layout-Editor ändern.

5 Tipps zum Organisieren von Blogseitenvorlagen in Divi

In dieser Vorlage haben wir ein Blog-Modul, das sich in einer einspaltigen Zeile befindet und die Beiträge (in drei Spalten auf dem Desktop) für die aktuelle Seite anzeigt. Dies ist ein Standard-Setup für Blog- und Archivseitenvorlagen. Wir müssen dieses Standardlayout jedoch nicht für die Anzeige von Beiträgen beibehalten. Hier sind einige hilfreiche Tipps zum Organisieren von Blogseiteninhalten in Divi.

#1 Erstellen Sie ein zweispaltiges Layout

Das Blog-Modul (sofern auf Grid-Layout eingestellt) zeigt die Beiträge in einer dreispaltigen Struktur an, wenn das Modul zu einer einspaltigen Zeile hinzugefügt wird (genau wie in unserer Vorlage).

Wenn Sie das Layout ändern möchten, um Beiträge in einem zweispaltigen Layout anzuzeigen, können Sie Folgendes tun.

Ändern Sie zunächst das Spaltenlayout der Zeile in ein Zweidrittel-Ein-Drittel-Layout. Dadurch werden die Blogbeiträge in zwei Spalten in der linken Spalte der Zeile angezeigt.

Öffnen Sie als Nächstes die Einstellungen für Spalte 1 (die das Blog-Modul enthält) und fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

width: 100% !important;

Dadurch erstreckt sich die Spalte über die gesamte Breite der Zeile.

Jetzt müssen wir nur noch die Spalte rechts ausblenden. Öffnen Sie die Einstellungen für Spalte 2 (die leere) und deaktivieren Sie die Sichtbarkeit der Spalte auf allen Geräten.

Jetzt können Sie den Inhalt von Blog-Seiten mit zwei statt drei Spalten auf dem Desktop organisieren, wenn Sie möchten.

#2 Sticky Posts verwenden

Wenn Sie mit WordPress vertraut sind, kennen Sie dieses möglicherweise bereits. Jeder in Divi (oder WordPress) erstellte Beitrag kann klebend gemacht werden. Wenn Sie einen Beitrag als Sticky markieren, wird der Beitrag automatisch ganz vorne im Blog-Feed auf der Blog-Seite angezeigt, noch vor dem zuletzt veröffentlichten Beitrag. Dies ist eine großartige Möglichkeit, Beiträge zu präsentieren, von denen Sie wissen, dass Ihr Publikum es sehen möchte (oder muss).

Um einen Beitrag zu verkleben, bearbeiten Sie einfach einen Beitrag in Divi und aktivieren Sie die Option „An den Anfang des Blogs halten“ in der rechten Seitenleiste.

Jeder Beitrag, den Sie festhalten, wird als "Sticky" gekennzeichnet, wenn Sie alle Beiträge im Backend anzeigen.

Wenn Sie jetzt die Blog-Seite besuchen, können Sie sehen, dass die Sticky Posts an den Anfang des Blog-Post-Feeds gesprungen sind.

Hinweis: Sticky Posts funktionieren möglicherweise nicht wie erwartet, wenn Post-Offsets im Blog-Modul verwendet werden. Wenn Sie beispielsweise das Blog-Modul so einstellen, dass 3 Posts mit einem Post-Offset von 3 angezeigt werden, werden Ihre Sticky Posts weiterhin vor (und zusätzlich zu) den 3 Posts angezeigt.

Bevor Sie zum nächsten Tipp übergehen, schlage ich vor, dass Sie die klebrigen Posts loswerden.

#3 Verwenden Sie Post-Offsets, um den Inhalt von Blog-Seiten in separate Abschnitte zu gliedern

Jedes Blog-Modul bietet die Möglichkeit, eine Post-Offfest-Nummer einzugeben. Dadurch wird das Blog-Modul angewiesen, eine bestimmte Anzahl neuer Blog-Posts zu überspringen, bevor der Blog-Feed angezeigt wird. Diese Option ist praktisch, wenn Sie das Layout Ihrer Blog-Seite etwas durcheinander bringen möchten, indem Sie mehrere Blog-Module verwenden, um Ihre Beiträge anzuzeigen. Dies gibt Ihnen mehr Flexibilität bei der Gestaltung des Layouts, da Sie jedes Blogmodul anders gestalten können.

Mit den neuesten Posts mit einem separaten Blog-Modul mit Post Offset

Eine Möglichkeit, den Inhalt von Blog-Seiten in Ihrem Vorlagen-Layout zu organisieren, besteht darin, oben auf der Seite einen Abschnitt mit vorgestellten Blog-Beiträgen hinzuzufügen. Auf diese Weise können Sie die drei neuesten Beiträge auf einzigartige Weise hervorheben. Hier ist jetzt, um es zu tun.

Fügen Sie dem Layout einen neuen regulären Abschnitt hinzu.

Fügen Sie dann eine einspaltige Zeile hinzu.

Kopieren Sie das mit der Vorlage gelieferte Blogmodul und fügen Sie es in die neue Zeile ein.

Aktualisieren Sie die Blog-Einstellungen wie folgt:

• Beitragsanzahl: 3
• Weiterlesen-Button anzeigen: NEIN
• Kategorien anzeigen: NO
• Kommentaranzahl anzeigen: NEIN
• Auszug anzeigen: NEIN
• Paginierung anzeigen: NEIN

Die drei neuesten Beiträge werden im oberen Bereich der Seite angezeigt.

Jetzt müssen wir dem ursprünglichen Blog-Modul eine Post-Offset-Nummer hinzufügen, damit es die ersten drei Posts überspringt, die bereits oben angezeigt werden.

Öffnen Sie die Blog-Einstellungen für das ursprüngliche Blog-Modul und aktualisieren Sie Folgendes:

• Post-Offset-Nummer: 3

Nun beginnt der Blog-Feed mit Post #4.

Um den hervorgehobenen Abschnitt oben auf der Seite hervorzuheben, können Sie einen Hintergrundverlauf hinzufügen.

Hier ist ein Beispiel, wie das aussehen würde.

Hinzufügen eines Post-Sliders in voller Breite über dem Haupt-Blog-Feed

Ähnlich wie im obigen Abschnitt können wir auch Blog-Post-Inhalte organisieren, indem wir oben auf der Blog-Seite einen Post-Slider in voller Breite hinzufügen. Dies ist ein beliebtes Design für Blog-Seiten und Sie können es in Kombination mit einem Blog-Modul mit Post-Offset verwenden.

So geht's.

Fügen Sie dem Layout zunächst einen Abschnitt mit voller Breite hinzu.

Fügen Sie dann dem Abschnitt ein Post-Slider-Modul in voller Breite hinzu.

Aktualisieren Sie dann die folgenden Einstellungen:

• Beiträge für aktuelle Seite: JA
• Beitragsanzahl: 3

Aktualisieren Sie dann das Design des Post-Sliders wie folgt, damit es dem Layout entspricht:

• Titelschriftart: Lato
• Schriftstärke des Titels: Fett
• Titeltextgröße: 40px
• Körpertextgröße: 16px
• Schaltflächentextgröße: 14px
• Schaltflächentextfarbe: #ff0071
• Hintergrundfarbe der Schaltfläche: #ffffff
• Breite des Tastenrahmens: 0px
• Schaltflächenschrift: Lato
• Schriftstärke der Schaltfläche: Fett
• Schaltflächenschriftart: TT

Stellen Sie sicher, dass die Anzeige des Hauptfeeds des Blogmoduls eine Post-Offset-Nummer hat, die immer noch auf 3 gesetzt ist, um die 3 Posts des Post-Schiebereglers zu berücksichtigen.

Dann schau dir das Ergebnis an.

Sieht soweit gut aus.

Lassen Sie uns nun die Idee, ein separates Blog-Modul zu verwenden, mit diesem nächsten Tipp einen Schritt weitergehen.

#4 Mehrere Blog-Module mit jeweils einem einzigen Beitrag hinzufügen

Wir müssen nicht damit aufhören, einem Vorlagenlayout nur ein zusätzliches Blog-Modul hinzuzufügen. Tatsächlich können wir so viele Blog-Module verwenden, wie wir benötigen. Wir können sogar wählen, nur einen Beitrag pro Blogmodul anzuzeigen, um einer einzelnen Blogpostkarte ein einzigartiges Design zu verleihen. Dann können wir mithilfe von Post-Offsets ein völlig einzigartiges Layout von dynamisch angezeigten Blog-Posts erstellen.

So geht's.

Fügen Sie zunächst eine neue Zeile mit einer halben halben Spalte über der Zeile mit dem Haupt-Blog-Modul hinzu.

Kopieren Sie das ursprüngliche Blog-Modul unten und fügen Sie es in die linke Spalte der neuen Zeile ein. Aktualisieren Sie dann Folgendes:

• Beitragsanzahl: 1
• Post-Offset-Nummer: 0
• Paginierung anzeigen: NEIN

Kopieren Sie als Nächstes das gerade erstellte Blog-Modul und fügen Sie ein Duplikat in die rechte Spalte ein.

Aktualisieren Sie dann Folgendes:

• Post-Offset-Nummer: 1
• Ausgewähltes Bild anzeigen: NEIN
• Kommentaranzahl anzeigen: NEIN
• Auszug anzeigen: NEIN

Stellen Sie sicher, dass Sie die Post-Offset-Nummer auf 1 setzen, um den ersten in der linken Spalte zu überspringen.

Setzen Sie diesen Vorgang nun fort, indem Sie ein weiteres Blog-Modul erstellen und die Post-Offset-Nummer jedes Mal um 1 erhöhen.

Duplizieren Sie das Blog-Modul in der rechten Spalte.

Ändern Sie dann die Post-Offset-Nummer auf 2.

Duplizieren Sie das Blog-Modul noch einmal und ändern Sie die Post-Offset-Nummer auf 3.

Jetzt haben Sie die Freiheit, das Design jedes der Blog-Module individuell anzupassen. Sie können beispielsweise jedem eine andere Hintergrundfarbe hinzufügen.

Hier ist das Ergebnis.

Wenn Sie den Haupt-Blog-Feed unten beibehalten möchten, stellen Sie sicher, dass die Post-Offset-Nummer auf 4 aktualisiert wird, um die 4 Posts in der oberen Zeile unterzubringen.

Dieselbe Technik wird auch bei einigen unserer Theme Builder-Kategorieseitenvorlagen verwendet. Sehen Sie sich unser Tutorial zum Erstellen einer Kategorieseitenvorlage mit demselben Konzept an.

#5 Aktuelle Beiträge nach Kategorie auf der Blog-Seite anzeigen

Zusätzlich zum Haupt-Blog-Feed in der Blog-Seitenvorlage können Sie Ihre letzten Beiträge auch nach Kategorie anzeigen. Dies ist eine großartige Möglichkeit, den Inhalt von Blog-Seiten zu organisieren, indem Sie das Layout etwas aufbrechen und gleichzeitig verschiedene Kategorien hervorheben.

So geht's.

Fügen Sie zunächst eine neue einspaltige Zeile unter der Zeile hinzu, die das Haupt-Blog-Modul enthält.

Aktualisieren Sie dann die Blog-Einstellungen wie folgt:

• Beiträge für aktuelle Seite: NEIN
• Beitragstyp: Beiträge
• Beitragsanzahl: 3
• Enthaltene Kategorien: Business (oder eine Ihrer eigenen)

Dadurch werden die drei neuesten Beiträge aus der Kategorie Business angezeigt.

Fügen Sie dann oberhalb des Blog-Moduls ein Textmodul mit einem entsprechenden Kategorietitel hinzu.

Und ganz einfach haben Sie auf Ihrer Blog-Seite einen Abschnitt mit vorgestellten Kategorien – eine großartige Möglichkeit, den Inhalt von Blog-Seiten zu organisieren!

Sie können sogar mehrere vorgestellte Kategorieabschnitte hinzufügen, die jeweils ein einzigartiges Design haben.

Diese vorgestellten Kategorieabschnitte passen gut zum unteren Rand der Blogseitenvorlage.

Abschließende Gedanken

Diese Tipps sollen Ihnen dabei helfen, den Inhalt von Blog-Seiten auf verschiedene Weise zu organisieren. Dieselben Tipps würden auch für viele andere Arten von Vorlagen (wie Kategorie-/Archivseitenvorlagen) funktionieren, die das Blog-Modul zum Anzeigen von Inhalten verwenden. Fühlen Sie sich frei, diese Tipps zu erkunden und sie in Ihrem nächsten Projekt zu verwenden.

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

Danke schön!