So erstellen Sie dynamisch eine einfache UX-freundliche Blog-Post-Vorlage mit Divi

Beim Teilen neuer Blog-Posts auf Ihrer Website ist es wichtig, Ihren Besuchern das Leseerlebnis so einfach wie möglich zu machen. Das bedeutet, dass Sie so viele Ablenkungen wie möglich beseitigen und gleichzeitig das Branding Ihrer Website anpassen. Es ist auch wichtig, dass Besucher die Textgröße über ihren Browser steuern können. Hier kommt die relative Schrifteinheit rem zum Einsatz. Es ermöglicht Benutzern, die Größe der Schriftart anzupassen, die in ihrem Browser angezeigt wird. In diesem Tutorial erstellen wir eine schöne und einfache Blogpost-Vorlage, die die Benutzererfahrung stark berücksichtigt. Sie können die JSON-Datei auch kostenlos herunterladen!

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 einfache UX-freundliche Blog-Post-Vorlage KOSTENLOS herunter

Um die kostenlose, einfache UX-freundliche 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!

Abonnieren Sie unseren Youtube-Kanal

1. Gehen Sie zu Divi Theme Builder und erstellen Sie eine neue Vorlage

Gehe zum Divi Theme Builder

Beginnen Sie mit dem Divi Theme Builder.

Neue Vorlage erstellen

Erstellen Sie eine neue Vorlage und verwenden Sie sie für alle Ihre Beiträge.

• Verwenden auf: Alle Beiträge

2. Beginnen Sie mit dem Erstellen des Blogpost-Textkörpers

Beginnen Sie dann mit dem Erstellen des benutzerdefinierten Hauptteils Ihrer Beitragsvorlage.

Zeile 1 zu vorhandenem Abschnitt hinzufügen

Spaltenstruktur

Fügen Sie im Vorlageneditor eine neue Zeile zu dem bereits vorhandenen Abschnitt hinzu, indem Sie die folgende Spaltenstruktur verwenden:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Spalte 1 & 2 Rahmen

Fügen Sie als nächstes einen rechten Rahmen zur ersten und zweiten Spalte hinzu.

• Breite des rechten Rands: 1 Pixel (Desktop), 0 Pixel (Tablet und Telefon)
• Farbe des rechten Rands: #333333

Textmodul zu jeder Spalte hinzufügen

Dynamischer Inhalt

Fahren Sie fort, indem Sie jeder Spalte ein Textmodul hinzufügen und einige dynamische Inhalte für jedes Modul einzeln auswählen.

• Textmodul in Spalte 1: Beitragskategorien

• Textmodul in Spalte 2: Post-Veröffentlichungsdatum

• Textmodul in Spalte 3: Anzahl der Post-Kommentare
• Nachher: ​​Kommentare

Texteinstellungen

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

• Textschriftart: Lato
• Textgröße: 1.1rem
• Text Buchstabenabstand: 1px
• Textzeilenhöhe: 2em

Zeile 2 hinzufügen

Spaltenstruktur

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

Textmodul Nr. 1 zur Spalte hinzufügen

Dynamischer Inhalt

Fügen Sie ein Textmodul hinzu und wählen Sie den dynamischen Inhalt des Posttitels aus.

• Dynamischer Inhalt: Beitragstitel

• Vorher: <H1>
• Nachher: ​​</H1>

H1-Texteinstellungen

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

• Überschrift Schriftart: Playfair Display
• Ausrichtung des Überschriftentextes: Mitte
• Überschriftstextgröße: 6.2rem (Desktop), 3.2rem (Tablet), 2.3rem (Telefon)

Abstand

Fügen Sie als nächstes einen benutzerdefinierten oberen und unteren Rand hinzu.

• Oberer Rand: 50px
• Unterer Rand: 100px

Textmodul #2 zur Spalte hinzufügen

Dynamischer Inhalt

Fügen Sie ein weiteres Textmodul direkt unter dem vorherigen hinzu und wählen Sie den dynamischen Inhalt des Postauszugs aus.

• Dynamischer Inhalt: Beitragsauszug

Texteinstellungen

Ändern Sie die Texteinstellungen des Moduls wie folgt:

• Textschriftart: Lato
• Textgröße: 1.1rem
• Text Buchstabenabstand: 1px
• Textzeilenhöhe: 2em
• Textausrichtung: Mitte

Zeile 3 hinzufügen

Spaltenstruktur

Fügen Sie dem Abschnitt eine weitere Zeile mit der folgenden Spaltenstruktur hinzu:

Anzeige

Stellen Sie sicher, dass die Spalten nebeneinander bleiben, indem Sie dem Hauptelement der Zeile eine Zeile CSS-Code hinzufügen.

display: flex;

Bildmodul zu Spalte 1 hinzufügen

Dynamischer Inhalt

Fahren Sie fort, indem Sie ein Bildmodul zu Spalte 1 hinzufügen und den dynamischen Inhalt des Profilbilds des Autors auswählen.

• Dynamischer Inhalt: Profilbild des Autors

Ausrichtung

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Bildausrichtung.

• Bildausrichtung: Rechts

Größe

Ändern Sie als nächstes die Breite.

• Breite: 50px

Abstand

Fügen Sie auf Tablet und Telefon etwas rechten Rand hinzu.

• Rechter Rand: 20px (Tablet & Telefon)

Grenze

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie den Randeinstellungen einen Randradius hinzufügen.

• Alle Ecken: 100px

Textmodul zu Spalte 2 hinzufügen

Dynamischer Inhalt

In der zweiten Spalte benötigen wir ein Textmodul. Wählen Sie den dynamischen Inhalt des Postautors aus.

• Dynamischer Inhalt: Beitragsautor

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Lato
• Textgröße: 1.1rem
• Text Buchstabenabstand: 1px

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Randwerte hinzu.

• Oberer Rand: 15px
• Linker Rand: 20px (Tablet & Telefon)

Zeile 4 hinzufügen

Spaltenstruktur

Fügen Sie dem Abschnitt eine weitere Zeile mit der folgenden Spaltenstruktur hinzu:

Textmodul zur Spalte hinzufügen

Inhaltsbox leer lassen

Fügen Sie der Spalte ein Textmodul hinzu und lassen Sie das Inhaltsfeld leer.

Dynamisches Hintergrundbild

Fügen Sie als Nächstes den dynamischen Inhalt des vorgestellten Bilds zum Hintergrundbild des Moduls hinzu.

• Dynamischer Inhalt: Ausgewähltes Bild

Größe

Fahren Sie fort, indem Sie die Größeneinstellungen des Moduls für verschiedene Bildschirmgrößen ändern.

• Breite: 800px (Desktop), 500px (Tablet), 300px (Telefon)
• Modulausrichtung: Mitte

Abstand

Fügen Sie auch benutzerdefinierte obere und untere Polsterung für verschiedene Bildschirmgrößen hinzu.

• Obere Polsterung: 400px (Desktop), 250px (Tablet), 150px (Telefon)
• Untere Polsterung: 400px (Desktop), 250px (Tablet), 150px (Telefon)

Grenze

Fügen Sie den Randeinstellungen einen Randradius hinzu, um das Modul in einen Kreis zu verwandeln.

• Alle Ecken: 500px

Neuen Abschnitt hinzufügen

Weiter zum nächsten regulären Abschnitt.

Zeile 1 hinzufügen

Spaltenstruktur

Fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

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

Texteinstellungen

Fügen Sie das Post-Content-Modul zur Spalte hinzu, gehen Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Lato
• Textgröße: 1.1rem
• Text Buchstabenabstand: 1px
• Textzeilenhöhe: 2.3em

Überschriftstexteinstellungen

Ändern Sie auch die Einstellungen für den Überschriftentext.

• Überschrift Schriftart: Playfair Display
• H2 Textgröße: 3.5rem (Desktop), 2rem (Tablet & Telefon)
• H3-Textgröße: 2.5rem (Desktop), 1.5rem (Tablet & Telefon)
• H4 Textgröße: 2.3rem (Desktop), 1.3rem (Tablet & Telefon)
• H5 & H6 Textgröße: 2rem (Desktop), 1rem (Tablet & Telefon)

Zeile 2 hinzufügen

Spaltenstruktur

Fügen Sie dem Abschnitt eine weitere Zeile mit der folgenden Spaltenstruktur hinzu:

Abstand

Fügen Sie der Zeile einen benutzerdefinierten oberen Rand hinzu.

• Oberer Rand: 100px

Kommentarmodul zur Spalte hinzufügen

Feldeinstellungen

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

• Feldhintergrundfarbe: #ffffff
• Felder Schriftart: Lato
• Feldtextgröße: 1.1rem

• Alle Ecken: 0px
• Feldrandbreite: 1px
• Feldrandfarbe: #000000

Bildeinstellungen

Ändern Sie auch die Bildeinstellungen.

• Alle Ecken: 100px

Einstellungen für Titeltext

Ändern Sie dann die Einstellungen für den Titeltext.

• Titelüberschriftsebene: H2
• Titelschrift: Playfair Display
• Titeltextgröße: 3rem (Desktop), 2rem (Tablet & Telefon)
• Höhe der Titelzeile: 1,4 em

Metatext-Einstellungen

Stylen Sie auch den Metatext.

• Meta-Schriftart: Playfair Display
• Metatextgröße: 1.4rem

Einstellungen für Kommentartext

Wir verwenden die folgenden Einstellungen für die Kommentartexteinstellungen:

• Kommentarschriftart: Lato
• Kommentartextgröße: 1.1rem
• Abstand der Kommentarbuchstaben: 1px
• Höhe der Kommentarzeile: 2em

Einstellungen für Schaltflächentext

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie die Schaltfläche wie folgt gestalten:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 1.1rem
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #000000
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px
• Tastenabstand der Buchstaben: 1px
• Schaltflächenschrift: Lato

• Obere Polsterung: 20px
• Untere Polsterung: 20px

3. Änderungen im Template- und Theme-Builder speichern

Sobald Sie das Vorlagendesign abgeschlossen haben, speichern Sie alle Änderungen im Divi Theme Builder und sehen Sie sich das Ergebnis in Ihren Beiträgen an!

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 Ihnen gezeigt, wie Sie eine schöne und einfache Blog-Post-Vorlage erstellen, die sich auf die Benutzererfahrung Ihrer Besucher beim Lesen konzentriert. Ändern Sie diese Beitragsvorlage mithilfe der integrierten Optionen von Divi, um sie mit dem Branding Ihrer Website abzugleichen. Sie konnten die JSON-Vorlagendatei auch kostenlos herunterladen! 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.