So erstellen Sie eine Kategorieseitenvorlage für Ihr Blog mit dem Divi Theme Builder

Eine Kategorieseite kann für Benutzer äußerst hilfreich sein, indem sie ihnen eine ganze Seite mit Inhalten zur Verfügung stellt, an denen sie interessiert sind (oder nach denen sie suchen). Aber oft kann die Kategorieseite leiden, wenn es um Design geht. In Divi, vor den Tagen des Divi Theme Builder, mussten sich Entwickler darauf verlassen, den PHP-Code in einer Theme-Datei für eine Kategorieseitenvorlage manuell anzupassen und dann die Seitenvorlage rein mit externem CSS zu gestalten. Aber jetzt, mit dem Divi Theme Builder, ist dieser Prozess einfach und angenehm geworden!

In diesem Tutorial zeigen wir Ihnen, wie Sie mit dem Divi Theme Builder eine Kategorieseitenvorlage für Ihr Blog komplett neu erstellen. Wir zeigen Ihnen, wie Sie schnell eine neue Vorlage einrichten, die Beitragskategorien zugewiesen ist, und wie Sie die Vorlage mit den entsprechenden Modulen und dynamischen Inhalten mit dem Divi Builder entwerfen.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf die Kategorieseitenvorlage, die wir in diesem Tutorial gemeinsam entwerfen werden. In diesem Bild wird es verwendet, um alle Beiträge mit der Kategorie „Business“ anzuzeigen.

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 Vorlagenlayout in Ihre Website zu importieren, müssen Sie zum Divi Theme Builder gehen und die Portabilitätsoption verwenden, um die .json-Datei in den Theme Builder zu importieren.

Kommen wir zum Tutorial, sollen wir?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das installierte Divi Theme (oder das Divi Builder Plugin, wenn Sie das Divi Theme nicht verwenden).
2. Da wir eine Kategorieseitenvorlage für Blogbeiträge erstellen werden, müssen Sie auf Ihrer Website bereits Beiträge mit zugewiesenen Kategorien erstellt haben.

Danach sind Sie bereit zu gehen.

Verfügbare Module und dynamische Inhalte für Kategorieseitenvorlagen

Beim Erstellen einer Kategorieseitenvorlage für ein Divi-Blog ist es wichtig zu verstehen, welche Tools Ihnen zur Verfügung stehen, damit Sie effektiv eine Vorlage erstellen können, die dynamisch die richtigen Informationen anzeigt. Bei einer Kategorieseitenvorlage für Blogbeiträge sind wir am meisten daran interessiert, Beiträge nach der aktuellen Kategorie anzuzeigen, wenn ein Benutzer eine Kategorieseite besucht. Wenn ein Benutzer beispielsweise auf den Kategorielink „Business“ klickt, sollte er eine Archivseite sehen, die alle Beiträge mit der Kategorie „Business“ anzeigt. Einige Divi-Module haben eingebaute Optionen, um die Anzeige dynamischer Inhalte in einer Vorlage ziemlich einfach zu machen.

Das Blog-Modul

Das Blog-Modul ist das primäre Modul, das zum Anzeigen von Kategorieseitenvorlagen verwendet werden sollte. Dies liegt daran, dass die Option zum Anzeigen von Beiträgen für die aktuelle Seite integriert ist.

Dies weist Divi im Grunde an, die Beiträge anzuzeigen, die normalerweise generiert werden, wenn ein Benutzer die Seite besucht. Wenn die Option zum Anzeigen von "Posts für die aktuelle Seite" festgelegt ist, kann der Benutzer eine Kategorieseite anzeigen und die Posts nach Kategorie korrekt anzeigen.

Post Slider-Modul und Post-Titel-Modul

Sie können auch das Post Slider-Modul verwenden, um die Posts für die aktuelle Seite anzuzeigen. Dies ist hilfreich, um einen dynamischen Post-Slider zu erstellen, der die beim Besuch einer Kategorieseite generierten Posts anzeigt, ähnlich wie es das Blog-Modul tun kann.

Das Post Title Module kann ebenfalls verwendet werden, ist jedoch auf die Möglichkeit beschränkt, den Titel der Seite dynamisch anzuzeigen. Die meisten anderen Elemente, die im Beitragstitelmodul verfügbar sind, gelten nicht für eine Archivseite, sondern nur für bestimmte Beitragsvorlagen.

Titel des Beitrags/Archivs (dynamischer Inhalt)

Eine einfachere Möglichkeit, den Titel der Post/Archiv-Seite anzuzeigen, besteht darin, ein normales Divi-Modul zu verwenden und dann den Post/Archiv-Seitentitel mithilfe der dynamischen Inhaltsfunktion, die in allen Divi-Modulen verfügbar ist, einzufügen.

Sie können beispielsweise ein Textmodul verwenden und dann den Seitentitel Post/Archive als dynamischen Inhalt zum Hauptinhalt hinzufügen. Dann können Sie den Titel nach Belieben gestalten.

Nachdem Sie nun die Tools verstanden haben, die zum Erstellen einer Kategorieseitenvorlage erforderlich sind, lassen Sie uns gleich loslegen und gemeinsam eine erstellen.

So erstellen Sie eine Kategorieseitenvorlage für Ihr Blog

Für diese Kategorieseitenvorlage besteht das Ziel darin, einen benutzerdefinierten Textbereich für eine Vorlage zu erstellen, die allen Kategorieseiten für Blogbeiträge in Divi zugewiesen ist. Wir werden keinen benutzerdefinierten Kopf- oder Fußzeilenbereich für diese Vorlage erstellen. Sie können diese Vorlage jedoch problemlos auf Ihrer eigenen Website mit Ihrer eigenen Kopf- und Fußzeile verwenden.

Erstellen und Zuweisen einer benutzerdefinierten Vorlage für Beitragskategorien

Um zu beginnen, gehen Sie zu Ihrem WordPress-Dashboard und navigieren Sie zu Divi > Theme Builder. Klicken Sie dann auf den leeren grauen Kastenbereich, um eine neue Vorlage hinzuzufügen.

Weisen Sie als Nächstes die Vorlage allen Kategorieseiten zu.

Hinzufügen eines neuen benutzerdefinierten Textbereichs zur Vorlage

Um den benutzerdefinierten Körper für die Vorlage zu erstellen, klicken Sie auf den Bereich Benutzerdefinierten Körper hinzufügen und wählen Sie dann "Benutzerdefinierten Körper erstellen".

Wählen Sie dann die Option „Von Grund auf neu erstellen“.

Dynamischen Archivtitel hinzufügen

Erstellen Sie im Vorlagenlayout-Editor eine neue einspaltige Zeile innerhalb des regulären Abschnitts.

Fügen Sie dann der Zeile einen Textbaustein hinzu.

Löschen Sie den Standardtextkörperinhalt, klicken Sie auf das Symbol „Dynamische Inhalte verwenden“ und wählen Sie die Option „Titel posten/archivieren“.

Sobald das Element Post/Archiv-Titel vorhanden ist, öffnen Sie die Einstellungen, indem Sie auf das Zahnradsymbol klicken.

Aktualisieren Sie dann die Eingabebereiche Vorher und Nachher, um den Inhalt in ein H1-Tag einzuschließen, und fügen Sie nach dem dynamischen Titel wie folgt einen zusätzlichen statischen Inhalt hinzu:

Vor:

<h1>

Nach:

 Articles</h1>

Wir müssen den Titel für SEO-Zwecke in ein H1-Tag einschließen. Das statische Wort „Artikel“ wird nach dem Titel hinzugefügt, sodass, wenn ein Benutzer eine Kategorieseite „Geschäft“ besucht, der Titel „Geschäftsartikel“ lautet.

Stil dynamischer Archivtitel

Sobald der dynamische Inhalt vorhanden ist, können wir ihn wie folgt gestalten:

• Überschrift Schriftart: Ubuntu
• Überschrift Schriftart: Gewicht: Fett
• Überschrift Textfarbe: #192231
• Überschrift Textgröße: 48px (Desktop), 38px (Tablet), 28px (Telefon)
• Höhe der Überschriftslinie: 1.2em

Verwenden des Blog-Moduls zum dynamischen Anzeigen von Beiträgen für die aktuelle Kategorie

Wenn der dynamische Kategorieseitentitel vorhanden ist, müssen wir das Blogmodul hinzufügen, um die Beiträge für die aktuelle Kategorieseite anzuzeigen.

Neue Zeile hinzufügen

Fügen Sie unter der aktuellen obersten Zeile eine neue einspaltige Zeile hinzu.

Blog-Modul hinzufügen

Fügen Sie dann der Zeile ein Blog-Modul hinzu.

Aktualisieren Sie die Inhaltsoptionen wie folgt:

• Beiträge für aktuelle Seite: JA
• Beitragsanzahl: 9
• Weiterlesen-Button anzeigen: JA

Denken Sie daran, dass wir sicherstellen müssen, dass die Beiträge für die aktuelle Seite aktiviert sind, damit die Kategorieseite das richtige Beitragsarchiv abrufen kann.

Design-Blog-Modul

Nachdem die Inhaltseinstellungen vorgenommen wurden, nehmen wir wie folgt einige Änderungen am Design vor:

• Layout: Gitter

• Titelschriftart: Ubuntu
• Schriftstärke des Titels: Fett
• Titeltextfarbe: #192231
• Meta-Schriftart: Ubuntu
• Meta-Textfarbe: #985e6d
• Metatextgröße: 13px

• Mehr lesen Schriftart: Ubuntu
• Weiterlesen Schriftstärke: Fett
• Mehr lesen Schriftstil: Unterstreichen
• Lesen Sie mehr Textfarbe: #985e6d
• Paginierungsschrift: Ubuntu
• Paginierungstextfarbe: #985e6d
• Paginierungstextgröße: 18px
• Paginierungszeilenhöhe: 2em

• Rahmenbreite des Rasterlayouts: 0px
• Box Shadow: siehe Screenshot
• Stärke der Box-Schattenunschärfe: 70px
• Stärke der Box-Schattenausbreitung: -10px
• Schattenfarbe: rgba(25,34,49,0.3)

An dieser Stelle haben wir eine grundlegende Kategorieseite mit dem Seitentitel und den Blog-Beiträgen eingerichtet, die entsprechend der aktuellen Kategorieseite korrekt angezeigt werden. Wir können jedoch kreativer werden, indem wir ein zusätzliches Modul hinzufügen, um den Beitrag auf kreative Weise anzuzeigen.

Erstellen Sie einen Beitragsschieberegler, um die 4 neuesten Beiträge in der aktuellen Kategorie anzuzeigen.

Wir können ein Post-Slider-Modul verwenden, um die Posts der Kategorieseite auch dynamisch anzuzeigen. Hier ist, wie es geht.

Neue Zeile hinzufügen

Fügen Sie zunächst eine neue Zeile mit einem 1/3 2/3-Spaltenlayout unter der oberen Zeile hinzu.

Post-Slider-Modul hinzufügen

Fügen Sie in der linken Spalte ein Post-Slider-Modul hinzu.

Aktualisieren Sie dann die Inhaltsoptionen des Post-Sliders wie folgt:

• Beiträge für aktuelle Seite: JA
• Beitragsanzahl: 4
• Beitrags-Meta anzeigen: NO

Design Post Slider Modul

Nachdem der Inhalt des Post-Sliders vorhanden ist, aktualisieren Sie die Designeinstellungen wie folgt:

• Textausrichtung: Links
• Titelschriftart: Ubuntu
• Höhe der Titelzeile: 1,3 em
• Benutzerdefinierte Stile für Schaltfläche verwenden: JA
• Schaltflächentextgröße: 16px
• Schaltflächenhintergrundfarbe: #985e6d
• Breite des Tastenrahmens: 0px
• Schaltflächenschriftart: Ubuntu

• Box Shadow: siehe Screenshot
• Stärke der Box-Schattenunschärfe: 70px
• Stärke der Box-Schattenausbreitung: -10px
• Schattenfarbe: rgba(25,34,49,0.3)

Erstellen Sie ein Blog-Modul mit Layout in voller Breite

In der rechten Spalte können wir ein weiteres Blog-Modul mit einem Layout in voller Breite anstelle eines Rasterlayouts hinzufügen. Auf diese Weise können wir unseren Kategoriebeiträgen einen weiteren einzigartigen Anzeigebereich zur Verfügung stellen.

Blog-Modul hinzufügen

Um Zeit zu sparen, kopieren wir das vorhandene Blog-Modul in die untere Zeile und fügen es in die rechte Spalte neben dem Post-Slider ein.

Aktualisieren Sie die Einstellungen für das doppelte Blog-Modul

Öffnen Sie die doppelten Blog-Moduleinstellungen und aktualisieren Sie Folgendes:

• Beiträge für aktuelle Seite: JA
• Beitragsanzahl: 3
• Auszug Länge: 120
• Ausgewähltes Bild anzeigen: NEIN (zumindest vorerst)
• Paginierung anzeigen: NEIN

• Layout: Volle Breite:
• Boxschatten: keiner

Ergebnis bisher

Bisher ist das Ergebnis eine minimale Anzeige der drei Blogbeiträge.

Aber wenn wir noch einen Schritt weiter gehen wollen, können wir links von jedem der Beitragsausschnitte ein paar kleine vorgestellte Bilder hinzufügen.

Verwenden Sie benutzerdefiniertes CSS, um kleinere vorgestellte Bilder zu erstellen, die links vom Inhalt des Postauszugs schweben.

Um einige kleine vorgestellte Bilder links neben den Blogpost-Auszügen hinzuzufügen, müssen wir benutzerdefiniertes CSS hinzufügen.

Geben Sie dem Blog-Modul eine benutzerdefinierte CSS-Klasse

Zunächst müssen wir dem Blog-Modul eine benutzerdefinierte CSS-Klasse hinzufügen. Öffnen Sie die Blog-Einstellungen und geben Sie unter der Registerkarte Erweitert Folgendes ein:

• CSS-Klasse: left-blog-image

CSS-Code mit einem Code-Modul hinzufügen

Da wir dieser Vorlage nur ein kleines CSS-Snippet hinzufügen, können wir ein Codemodul verwenden. Fügen Sie unter dem Blogmodul ein Codemodul hinzu.

CSS-Code einfügen

Geben Sie dann das folgende CSS in den Codeinhaltsbereich ein:

<style>
@media (min-width: 981px) {
.left-blog-image .et_pb_post .entry-featured-image-url {
float: left;
width: 100%;
max-width: 150px;
margin: 0 20px 30px 0;
}
.left-blog-image .et_pb_post {
margin-bottom: 20px !important;
}
}
</style>

Aktualisieren Sie die Einstellungen des Blog-Moduls, um das angesagte Bild einzuschließen

Jetzt können wir das vorgestellte Bild wieder hinzufügen, sodass es dank des CSS-Snippets an der neuen Position links angezeigt wird.

Zusätzliches Styling für die Vorlage

Bevor wir die Dinge zum Abschluss bringen, lassen Sie uns ein paar kleine Nachbesserungen am Design vornehmen.

Fügen Sie einen Teiler unter dem Archivtitel hinzu und gestalten Sie ihn

Fügen Sie ein Trennmodul direkt unter dem Titel der Archivseite oben in der Vorlage hinzu.

Aktualisieren Sie dann die Teilereinstellungen wie folgt:

• Linienfarbe: #985e6d
• Teilergewicht: 3px
• Maximale Breite: 200px

Abschnittstrenner zum Layout hinzufügen

Öffnen Sie die Abschnittseinstellungen und fügen Sie wie folgt einen Abschnittsteiler hinzu:

• Top Divider Style: siehe Screenshot
• Farbe des oberen Teilers: rgba(73,78,107,0.07)
• Teilerhöhe: 90vw
• Teiler Flip: horizontal und vertikal

Verwenden Sie die Post-Offset-Nummer mit jedem Modul, um doppelte Post-Displays zu vermeiden

Im Moment ziehen alle unsere Module den gleichen Beitragsinhalt für die aktuelle Kategorieseite. Um zu verhindern, dass diese Module Duplikate anzeigen, können wir die Option Post Offset Number verwenden, um eine bestimmte Anzahl von Posts zu „überspringen“, die den Post-Feed anzeigen.

Blogmodul-Post-Offset in voller Breite

Da unser Beitrags-Slider bereits den ersten (aktuellsten) Beitrag für die aktuelle Kategorieseite anzeigt, können wir diesen Beitrag im angrenzenden Blog-Modul versetzen. Öffnen Sie die Einstellungen für das Blog-Modul rechts neben dem Post-Slider und aktualisieren Sie die Post-Offset-Nummer wie folgt:

• Post-Offset-Nummer: 1

Nun startet das Modul mit dem zweitletzten Beitrag für die aktuelle Kategorieseite.

Raster-Blog-Modul Post-Offset

Sobald das erste Blogmodul-Post-Offset vorhanden ist, müssen wir die Posts im Hauptblog-Modul am unteren Rand der Vorlage verschieben. Öffnen Sie dieses Blog-Modul und aktualisieren Sie die Post-Offset-Nummer wie folgt:

• Post-Offset-Nummer: 4

Wir müssen die Offset-Zahl auf 4 setzen, um die 4 Posts zu berücksichtigen, die bereits oben angezeigt werden. Das Modul knüpft nun dort an, wo die anderen Module aufgehört haben und beginnt mit dem fünftletzten Beitrag.

Endgültige Ergebnisse

Um das Endergebnis anzuzeigen, gehen Sie zum WordPress-Dashboard und navigieren Sie zu Beiträge > Kategorien. Klicken Sie dann auf , um eine der vorhandenen Kategorien anzuzeigen.

Hier ist das Endergebnis.

Und hier ist es auf dem Tablet- und Telefondisplay.

Abschließende Gedanken

Hoffentlich hilft Ihnen dieser Beitrag, ein wenig leichter durchzuatmen, wenn Sie vor der Herausforderung stehen, ein Kategorieseitendesign für Ihre Website zu erstellen. Der Divi Theme Builder macht es extrem einfach, insbesondere da das Blog-Modul jetzt die Möglichkeit hat, Beiträge der aktuellen Seite anzuzeigen. Und die Post-Offset-Option ermöglicht es Ihnen, mehrere Blog-Module (oder sogar Post-Slider-Module) zu kombinieren, ohne jemals doppelte Posts auf dem Display zu sehen.

Wie hat Ihnen der Divi Theme Builder beim Erstellen von Kategorieseiten geholfen?

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

Danke schön!