Suchen Sie nach einer klassischen, aber kreativen Möglichkeit, Blog-Posts auf Ihrer Website anzuzeigen? Wenn ja, werden Sie dieses Divi-Werbegeschenk lieben. Wir haben eine klassische, von Schreibmaschinen inspirierte Blog-Post-Vorlage entworfen, die automatisch für alle Blog-Posts auf Ihrer Website gilt! In diesem Beitrag zeigen wir auch Schritt für Schritt, wie Sie das Design im Theme Builder von Grund auf neu erstellen können.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie die schreibmaschineninspirierte Blog-Post-Vorlage KOSTENLOS herunter

Um die kostenlose, von Schreibmaschinen inspirierte Blog-Post-Vorlage 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!

1. Gehen Sie zu Divi Theme Builder und fügen Sie eine neue Vorlage hinzu

Gehen Sie zu Divi Theme Builder und fügen Sie eine neue Vorlage hinzu

Beginnen Sie mit dem Divi Theme Builder. Dort angekommen, fügen Sie eine neue Vorlage hinzu.

Vorlage für alle Beiträge verwenden

Verwenden Sie diese neue Vorlage für alle Ihre Beiträge.

• Verwenden auf: Alle Beiträge

Beginnen Sie mit dem Erstellen des Vorlagenkörpers

Und beginnen Sie mit dem Aufbau des neuen Templates.

2. Beginnen Sie mit dem Aufbau des Blog-Post-Texts

Abschnittseinstellungen

Hintergrundfarbe

Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #fff4d8

Abstand

Fügen Sie als nächstes eine benutzerdefinierte obere und untere Polsterung hinzu.

• Obere Polsterung: 200px
• Untere Polsterung: 200px

Grenze

Und vervollständigen Sie die Abschnittseinstellungen, indem Sie einen Rahmen hinzufügen.

• Rahmenbreite: 100px (Desktop), 20px (Tablet & Telefon)
• Rahmenfarbe: #ffffff

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Abstand

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und entfernen Sie alle standardmäßigen oberen und unteren Abstände.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Bildmodul zur Spalte hinzufügen

Bild hochladen

Fügen Sie dann ein Bildmodul zur Spalte der Zeile hinzu und laden Sie eine Illustration Ihrer Wahl hoch. Die Abbildung, die wir in diesem Tutorial verwenden, finden Sie im herunterladbaren Ordner am Anfang dieses Tutorials.

Abstand

Wechseln Sie zur Design-Registerkarte des Moduls und ändern Sie die Abstandswerte wie folgt:

• Oberer Rand: -150px
• Linker Rand: -12vw (Desktop), 0px (Tablet & Telefon)

Zeile 2 hinzufügen

Spaltenstruktur

Auf in die nächste Reihe. Verwenden Sie die folgende Spaltenstruktur:

Textmodul zu Spalte 1 hinzufügen

Dynamischer Inhalt

Fügen Sie der ersten Spalte der Zeile ein Textmodul hinzu und verwenden Sie den folgenden dynamischen Inhalt:

• Text: Datum der Veröffentlichung

• Datumsformat: 08.06.1999 m/d/J

Texteinstellungen

Ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Special Elite
• Schriftstärke des Textes: Fett
• Textfarbe: #000000
• Textgröße: 1.4rem

Textmodul dreimal klonen

Nachdem Sie die Einstellungen des Textmoduls abgeschlossen haben, können Sie das gesamte Modul dreimal klonen.

Dynamischen Inhalt ändern

Ändern Sie den dynamischen Inhalt der duplizierten Module wie folgt:

• Duplikat Nr. 1: Beitragskategorien
• Duplikat Nr. 2: Autor des Beitrags
• Duplikat Nr. 3: Anzahl der Post-Kommentare
  • Nachher: ​​Kommentare
  • Link zum Kommentarbereich: Ja

Platzieren Sie zwei Textmodule in Spalte 2

Fahren Sie fort, indem Sie die beiden letzten Textbausteine ​​in der zweiten Spalte der Zeile platzieren,

Ändern Sie die Linktextfarbe der Kategorie & Kommentaranzahl

Ändern Sie bei Bedarf auch die Linktextfarbe.

• Linktextfarbe: #000000

Textausrichtung von Modulen in Spalte 2 ändern

Und vervollständigen Sie die Textmodule in Spalte 2, indem Sie ihre Textausrichtung über verschiedene Bildschirmgrößen hinweg ändern.

• Textausrichtung: Rechts (Desktop), Links (Tablet & Telefon)

Zeile 3 hinzufügen

Spaltenstruktur

Auf in die nächste Reihe! Verwenden Sie die folgende Spaltenstruktur:

Textmodul zur Spalte hinzufügen

Dynamischer Inhalt

Fügen Sie der Spalte der Zeile ein Textmodul hinzu und verwenden Sie den folgenden dynamischen Inhalt:

• Text: Titel des Beitrags/Archivs

• Vor:

• Nach:

H1-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die H1-Texteinstellungen wie folgt:

• Überschrift Schriftart: Special Elite
• Überschriftstextfarbe: #000000
• Überschrift Textgröße: 3.5rem (Desktop), 2.5rem (Tablet), 2rem (Telefon)
• Höhe der Überschriftslinie: 1,5 em

Abstand

Fügen Sie auch einen benutzerdefinierten oberen und unteren Rand hinzu.

• Oberer Rand: 150px
• Unterer Rand: 150px

Modul für Post-Inhalte zur Spalte hinzufügen

Texteinstellungen

Weiter zum nächsten Modul, dem Post-Content-Modul. Ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Special Elite
• Textgröße: 1.2rem
• Textzeilenhöhe: 2.5em

Überschriftstexteinstellungen

Ändern Sie auch die verschiedenen Überschriftentexteinstellungen.

• Überschrift Schriftart: Special Elite
• Überschriftstextfarbe: #000000
• Überschrift 2 Textgröße: 2rem (H2), 1,9rem (H3), 1,8rem (H4), 1,7rem (H5), 1,6rem (H6)

CSS-ID

Und weisen Sie dem Modul eine CSS-ID zu.

• CSS-ID: post-content-module

Codemodul zur Spalte hinzufügen

CSS-Code für Überschrift hinzufügen

Um nun den verschiedenen Überschriften einen benutzerdefinierten Rand hinzuzufügen, fügen wir das folgende benutzerdefinierte CSS zu einem Codemodul hinzu:

<style>
#post-content-module h2, h3, h4, h5, h6 {
margin-top: 70px;
margin-bottom: 70px;
}
</style>

Abschnitt 2 hinzufügen

Hintergrundfarbe

Fügen Sie der Beitragsvorlage einen weiteren Abschnitt hinzu, öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe des Abschnitts.

• Hintergrundfarbe: #fff4d8

Grenze

Fügen Sie auch einen Rahmen hinzu.

• Rahmenbreite: 100px (Desktop), 20px (Tablet & Telefon)
• Breite des oberen Rands: 0px
• Rahmenfarbe: #ffffff

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Kommentarmodul zur Spalte hinzufügen

Feldeinstellungen

Das einzige Modul, das wir in dieser Zeile benötigen, ist ein Kommentarmodul. Ändern Sie die Feldeinstellungen entsprechend:

• Feldhintergrundfarbe: rgba(0,0,0,0)
• Feldtextfarbe: #000000
• Felder untere Polsterung: 50px
• Felder Schriftart: Special Elite
• Feldtextgröße: 1.2rem

• Breite des unteren Rands der Felder: 1px
• Farbe des unteren Rands der Felder: #000000

Einstellungen für Kommentaranzahl-Text

Zusammen mit den Texteinstellungen für die Kommentaranzahl.

• Überschriftsebene der Kommentaranzahl: H2
• Kommentaranzahl Schriftart: Special Elite
• Kommentaranzahl Textfarbe: #000000
• Kommentaranzahl Textgröße: 2rem

Texteinstellungen für Formulartitel

Nehmen Sie auch einige Änderungen an den Texteinstellungen für den Formulartitel vor.

• Überschriftsebene des Formulartitels: H3
• Formulartitelschrift: Special Elite
• Textfarbe des Formulartitels: #000000
• Textgröße des Formulartitels: 1.5rem

Metatext-Einstellungen

Ändern Sie dann die Metatexteinstellungen.

• Meta-Schriftart: Special Elite
• Metatextfarbe: #000000
• Metatextgröße: 1.5rem

Einstellungen für Kommentartext

Wir werden auch einige Änderungen an den Kommentartexteinstellungen vornehmen.

• Kommentarschriftart: Special Elite
• Kommentartextgröße: 1.2rem
• Kommentarzeilenhöhe: 2.5em

Tasteneinstellungen

Fahren Sie fort, indem Sie die Schaltfläche wie folgt gestalten:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 1.2rem
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrund: #000000
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px

• Tastenschrift: Special Elite

Kommentartext CSS

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie dem Kommentartext auf der Registerkarte "Erweitert" einen oberen Rand hinzufügen.

margin-top: 100px;

3. Alle Theme Builder-Änderungen speichern und das Ergebnis anzeigen

Nachdem Sie den benutzerdefinierten Blog-Post-Text Ihrer Vorlage erstellt haben, können Sie alle Änderungen speichern und das Ergebnis in Ihren Blog-Posts anzeigen!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir eine klassische, von Schreibmaschinen inspirierte Blog-Post-Vorlage geteilt, die Sie kostenlos herunterladen und für Ihr nächstes Divi-Projekt verwenden konnten! Wir haben auch das Post-Template-Design von Grund auf neu erstellt. Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.