So geben Sie Ihren Divi-Archivseiten ein Mauerwerk-Layout

Um Ihren Archivseiten ein benutzerdefiniertes Mauerwerk-Layout zu geben, können wir den Divi-Theme-Builder verwenden, um eine benutzerdefinierte dynamische Archivseitenvorlage zu entwerfen. In Divi mussten sich die Entwickler vor den Tagen des Divi Theme Builders darauf verlassen, den PHP-Code in einer Theme-Datei für eine Archivseitenvorlage manuell anzupassen und dann die Seitenvorlage rein mit externem CSS zu gestalten. Dies erschwerte die Erstellung eines Mauerwerkslayouts erheblich. Aber jetzt, mit dem Divi Theme Builder, ist dieser Prozess einfach und angenehm geworden!

In diesem Tutorial zeigen wir Ihnen, wie Sie eine Archivseitenvorlage erstellen, die den Titel, den Untertitel und die Blogbeiträge der Archivseite dynamisch anzeigt. Und mit dem Blog-Post-Modul können wir unser Post-Archiv einfach in einem Mauerraster-Layout anzeigen.

Lass uns anfangen!

Vorgeschmack

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

Laden Sie die Archivseitenvorlage KOSTENLOS herunter

Um die Vorlage aus diesem Tutorial in die Hände zu bekommen, müssen Sie sie 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 Archivseitenvorlage erstellen, müssen Sie auf Ihrer Website bereits einige Blog-Posts mit Autoren, Kategorien und/oder Tags erstellt haben, wenn Sie die Ergebnisse sehen möchten.

Danach sind Sie bereit zu gehen.

Grundlegendes zu den Modulen und dynamischen Inhalten, die für Archivseitenvorlagen verfügbar sind

Beim Erstellen einer Archivseitenvorlage für eine Divi-Site 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 Archivseitenvorlage sind wir am meisten daran interessiert, die Beiträge der aktuellen Seite anzuzeigen, wenn ein Benutzer eine Archivseite 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 verfügen über integrierte Optionen, um die Anzeige dynamischer Inhalte in einer Vorlage zu vereinfachen.

Das Blog-Modul

Das Blog-Modul ist das primäre Modul, das zum Anzeigen von Archivseitenvorlagen 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 also die Option "Beiträge für die aktuelle Seite" angezeigt wird, kann der Benutzer eine Archivseite anzeigen und die Beiträge für diese aktuelle Seite korrekt anzeigen.

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 Archivseitenvorlage erforderlich sind, lassen Sie uns gleich loslegen und gemeinsam eine erstellen.

So erstellen Sie eine Divi-Archivseitenvorlage mit einem Mauerwerk-Layout

Um eine Archivseitenvorlage mit einem Mauerwerk-Layout zu erstellen, müssen Sie nur mit dem Theme Builder eine neue Vorlage für alle Archivseiten entwerfen.

Erstellen und Zuweisen einer benutzerdefinierten Vorlage für alle Archivseiten

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 Archivseiten 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

Aktualisieren Sie im Vorlagenlayout-Editor die standardmäßigen Abschnittseinstellungen mit einer Hintergrundfarbe.

• Hintergrundfarbe: #eeeeee

Erstellen Sie dann 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:

</h1>

Wir müssen den Titel für SEO-Zwecke in ein H1-Tag einschließen.

Stil dynamischer Archivtitel

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

• Überschrift Schriftart: Mulish
• Überschrift Schriftart: Gewicht: Schwer
• Ausrichtung des Überschriftentextes: Mitte
• Textfarbe der Überschrift: #3a405a
• Überschriftstextgröße: 70px (Desktop), 40px (Tablet und Telefon)

Dynamischen Untertiteltext des Archivs hinzufügen

Da wir unseren dynamischen Archivseitentitel mit benutzerdefiniertem HTML umschließen können, können wir einen Untertitel hinzufügen, der den dynamischen Archivseitentitel in den Untertiteltext zieht.

Legen Sie dazu unter dem vorherigen Textbaustein mit dem Titel einen neuen Textbaustein an.

Löschen Sie den Standardtextkörper und fügen Sie den dynamischen Inhalt des Post-/Archivtitels zum Textkörper hinzu (genau wie wir es zuvor getan haben).

Öffnen Sie die Einstellungen für den Post-/Archivtitel und fügen Sie die folgenden Vorher- und Nachher-Inhalte hinzu.

Vor:

<h3>Here are the articles on 

Nach:

 </h3>

Nun wird der Titel im Einklang mit der vorhergehenden Textzeile angezeigt.

Stil dynamischer Archivtitel

Sobald der dynamische Inhalt vorhanden ist, können wir durch Aktualisieren der folgenden H3-Einstellungen formatieren:

• Überschrift 3 Schriftart: Mulish
• Überschrift 3 Textausrichtung: Mitte

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

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

Neuen Abschnitt hinzufügen

Bevor wir das Blog-Modul hinzufügen, fügen wir der Seite einen neuen Abschnitt hinzu.

Neue einspaltige Zeile hinzufügen

Fügen Sie dann dem neuen Abschnitt eine neue einspaltige Zeile hinzu.

Öffnen Sie dann die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Benutzerdefinierte Dachrinnenbreite verwenden: JA
• Dachrinnenbreite: 2;
• Breite: 95%

Blog-Modul hinzufügen, um Beiträge für die aktuelle Seite dynamisch anzuzeigen

Jetzt müssen wir der Zeile ein Blog-Modul hinzufügen.

Denken Sie daran, dass wir sicherstellen müssen, dass die Beiträge für die aktuelle Seite aktiviert sind, damit die Archivseite das richtige Beitragsarchiv abrufen kann. Aktualisieren Sie die Inhaltsoptionen wie folgt:

• Beiträge für aktuelle Seite: JA

Design-Blog-Modul

Nachdem die Inhaltseinstellungen vorgenommen wurden, nehmen wir einige Änderungen am Design vor. Aktualisieren Sie das Layout auf der Registerkarte Design wie folgt:

• Layout: Gitter

Gehen Sie nun zurück zum Inhalts-Tab und fügen Sie den Rasterelementen die folgende Hintergrundfarbe hinzu:

• Hintergrundfarbe: #3a405a

Titeltextstile aktualisieren

• Titelschriftart: Mulish
• Schriftstärke des Titels: Fett
• Titeltextfarbe: #eee
• Titeltextgröße: 34px
• Höhe der Titelzeile: 1,3 em

Textkörperstile aktualisieren

• Körperschriftart: Montserrat
• Textkörperfarbe: #ffffff
• Körperlinienhöhe: 2em

Metatextstile aktualisieren

• Meta-Schriftart: Montserrat
• Meta-Textfarbe: #ffb100

Paginierungsstile aktualisieren

• Paginierung Schriftstärke: Fett
• Paginierungstextfarbe: #3a405a

An dieser Stelle haben wir unsere Archivseitenvorlage in Betrieb genommen, komplett mit dem Seitentitel und den Blogbeiträgen (in einem Mauerwerk-Layout), die die Beiträge für die aktuelle Archivseite dynamisch anzeigen.

Endergebnis

Um die Ergebnisse zu testen, besuchen Sie die verschiedenen Arten von Archivseiten auf Ihrer Website.

Hier ist ein Beispiel für eine Kategoriearchivseitenvorlage, die alle Beiträge für die Kategorie „WordPress“ zeigt.

Hier ist eine Vorlage für eine Autorenarchivseite, die alle Beiträge eines bestimmten Autors anzeigt.

Hier ist eine Tag-Archivseite, auf der alle Beiträge mit dem Tag „News“ angezeigt werden.

Und hier ist eine Vorlage für eine Datumsarchivseite, die alle Beiträge für den Monat Oktober 2019 anzeigt.

Abschließende Gedanken

Sobald Sie wissen, wie Sie mit Divis Theme Builder eine neue Archivvorlage erstellen, ist das Hinzufügen eines Mauerwerks-Layouts für die Beiträge ganz einfach. Der Trick besteht darin, die eingebauten Optionen von Divi zu verwenden, um den Titel der Archivseite als dynamischen Inhalt anzuzeigen und dann das Blog-Modul zu verwenden, um den Beitrag für die aktuelle Seite dynamisch in einem Mauerwerksraster-Layout anzuzeigen. Hoffentlich wird dies dazu beitragen, das Gesamtdesign Ihrer Website zu verbessern, indem Sie auf Archivseiten abzielen, die leicht übersehen werden können.

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

Danke schön!