So teilen Sie den Bildschirm Ihrer Blog-Post-Vorlage mit Divis Theme Builder

Wenn Sie eine Website erstellen, ist die Wahrscheinlichkeit hoch, dass Sie eine Blog-Seite und Blog-Beiträge hinzufügen. Natürlich ist der wichtigste Teil einer Blog-Strategie die Erstellung hochwertiger Blog-Post-Inhalte, aber auch der Design-Teil spielt eine große Rolle für den Erfolg Ihrer Strategie. Wenn Sie eine Website mit Divi erstellen, können Sie die Darstellung Ihrer Blog-Posts im Divi Theme Builder optimieren, indem Sie eine Post-Vorlage mit dynamischem Inhalt erstellen. Wir haben regelmäßig Blog-Post-Vorlagen in unserem Blog geteilt, die Ihnen helfen, den Prozess zu beschleunigen, aber wenn Sie speziell einen Blog-Post mit geteiltem Bildschirm erstellen möchten, werden Sie diesen Post lieben. Wir zeigen Ihnen Schritt für Schritt, wie es geht und Sie können die JSON-Vorlagendatei 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 Blogpost-Vorlage mit geteiltem Bildschirm KOSTENLOS herunter

Um die kostenlose Blogpost-Vorlage mit geteiltem Bildschirm 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 Beitragsvorlage 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 die 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 Erstellen des Vorlagenkörpers.

2. Erstellen Sie den Vorlagenkörper für Blog-Beiträge

Abschnittseinstellungen

Abstand

Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie die Einstellungen, gehen Sie zur Registerkarte Design und entfernen Sie alle standardmäßigen oberen und unteren Polster.

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

Neue Zeile hinzufügen

Spaltenstruktur

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

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
• Spaltenhöhen ausgleichen: Ja
• Breite: 100%
• Maximale Breite: 100%
• Mindesthöhe: 100 Vh (Desktop), Auto (Tablet & Telefon)
• Maximale Höhe: 100 Vh (Desktop), Keine (Tablet & Telefon)

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

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

Überläufe

Und setzen Sie die Überläufe der Zeile auf ausgeblendet.

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Spalte 1 Einstellungen

Hintergrund mit Farbverlauf

Öffnen Sie dann die Einstellungen von Spalte 1 und fügen Sie einen Verlaufshintergrund hinzu.

• Farbe 1: rgba(255,255,255,0)
• Farbe 2: #000000
• Verlaufstyp: Linear
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Hintergrundbild

Wir verwenden das dynamische vorgestellte Bild als Hintergrundbild für die nächste Spalte.

• Hintergrundbild: Ausgewähltes Bild

Spalte 2 Einstellungen

Abstand

Dann öffnen wir die Einstellungen von Spalte 2 und fügen den Abstandseinstellungen einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 8%
• Untere Polsterung: 8%
• Linke Polsterung: 8%
• Rechte Polsterung: 8%

Überläufe

Damit die Leute durch die zweite Spalte scrollen können, in der der Beitragsinhalt und das Kommentarfeld erscheinen, werden wir den vertikalen Überlauf in den Sichtbarkeitseinstellungen ändern.

• Vertikaler Überlauf: Scrollen (Desktop), Sichtbar (Tablet & Telefon)

Beitragstitelmodul zu Spalte 1 hinzufügen

Elemente

Zeit zum Hinzufügen von Modulen, beginnend mit einem Beitragstitel-Modul in Spalte 1. Deaktivieren Sie die Option für vorgestellte Bilder in den Elementeinstellungen.

• Ausgewähltes Bild anzeigen: Nein

Einstellungen für Titeltext

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

• Titelüberschriftsebene: H1
• Titelschriftart: Work Sans
• Schriftstärke des Titels: Fett
• Titeltextfarbe: #ffffff
• Titeltextgröße: 60px (Desktop), 45px (Tablet), 35px (Telefon)
• Abstand der Titelbuchstaben: -1px
• Höhe der Titelzeile: 1.2em

Metatext-Einstellungen

Ändern Sie als nächstes die Metatext-Einstellungen.

• Meta-Schriftart: Work Sans
• Meta-Schriftstil: Großbuchstaben
• Meta-Textfarbe: #eaeaea
• Meta-Buchstabenabstand: 2px

Größe

Ändern Sie dann die Breite über verschiedene Bildschirmgrößen.

• Breite: 81 % (Desktop), 100 % (Tablet & Telefon)

Abstand

Fügen Sie als Nächstes einige Responsive-Padding-Werte hinzu.

• Obere Polsterung: 8% (nur Tablet und Telefon)
• Untere Polsterung: 8% (nur Tablet und Telefon)
• Linke Polsterung: 7 % (Tablet), 8 % (Telefon)
• Rechte Polsterung: 7 % (Tablet), 8 % (Telefon)

Position

Und vervollständigen Sie die Moduleinstellungen, indem Sie die Positionseinstellungen wie folgt ändern:

• Position: Absolut (Desktop), Standard (Tablet & Telefon)
• Ort: Unten Mitte
• Vertikaler Versatz: 10%

Fügen Sie das Post-Content-Modul zu Spalte 2 hinzu

Weiter zur nächsten Spalte. Dort brauchen wir als erstes Modul ein Post-Content-Modul. Dieses Modul zeigt Ihren Beitragsinhalt dynamisch an.

Überschriftstexteinstellungen

Nehmen Sie einige Änderungen an den Überschriftentexteinstellungen des Moduls vor.

• Überschrift Schriftart: Work Sans
• Schriftstärke der Überschrift: Halbfett
• Textgröße der Überschrift:
  • H2: 40px
  • H3: 30px
  • H4: 25px
  • H5: 16px
  • H6: 14px
• Abstand der Überschriftsbuchstaben: -1px (H2, H3 & H4)

CSS-Klasse

Und fügen Sie eine CSS-Klasse hinzu. Im nächsten Schritt dieses Tutorials verwenden wir diese CSS-Klasse, um etwas Abstand zwischen Überschriften und Absätzen zu erzeugen.

• CSS-Klasse: blog-post-content

Codemodul zu Spalte 2 hinzufügen

CSS-Code für Leerzeichen zwischen Absätzen und Überschriften hinzufügen

Fügen Sie ein Code-Modul direkt unter dem Post-Content-Modul hinzu und fügen Sie die folgenden Zeilen CSS-Code hinzu, um Platz zwischen Überschriften und Absätzen zu schaffen:

<style>
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-post-content h6
{
margin-top: 20px;
margin-bottom: 20px;
}
</style>

Kommentarmodul zu Spalte 2 hinzufügen

Feldeinstellungen

Das nächste und letzte Modul, das wir in Spalte 2 benötigen, um dieses Tutorial abzuschließen, ist ein Kommentarmodul. Ändern Sie die Feldeinstellungen des Moduls entsprechend:

• Feldhintergrundfarbe: #ffffff
• Feldtextfarbe: #000000
• Felder oben auffüllen: 30px
• Felder untere Polsterung: 30px
• Felder links auffüllen: 30px
• Felder rechts auffüllen: 30px
• Fields-Schriftart: Work Sans

• Schriftstil für Felder: Großbuchstaben
• Feldtextgröße: 15px
• Felder Buchstabenabstand: 3px
• Felder abgerundete Ecken: 10px (alle Ecken)

• Feldfeld-Schattenunschärfe-Stärke: 30px
• Feld-Schattenfarbe: rgba(0,0,0,0.06)

Einstellungen für Kommentaranzahl-Text

Ändern Sie dann die Texteinstellungen für die Kommentaranzahl.

• Kommentar-Zählschrift: Work Sans
• Kommentaranzahl Schriftstärke: Fett

Texteinstellungen für Formulartitel

Ändern Sie auch die Texteinstellungen für den Formulartitel.

• Überschriftsebene des Formulartitels: H3
• Schriftart des Formulartitels: Work Sans
• Schriftstärke des Formulartitels: Semi Bold

Metatext-Einstellungen

Als nächstes nehmen wir einige Änderungen an den Metatext-Einstellungen vor.

• Meta-Schriftart: Work Sans
• Metaschriftstärke: Halbfett
• Metatextfarbe: #000000

Tasteneinstellungen

Dann gestalten wir die Schaltfläche entsprechend:

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

• Tastenabstand der Buchstaben: 2px
• Button-Schriftart: Work Sans
• Schaltflächenschriftart: Großbuchstaben

• Knopfpolsterung: 2%
• Knopfpolsterung unten: 2%
• Polsterung unten links: 5%
• Knopfpolsterung rechts: 5%

Abstand

Wir werden auch etwas obere Marge hinzufügen.

• Höchste Marge: 15%

Kommentartext CSS

Und wir vervollständigen die Moduleinstellungen, indem wir dem Kommentartext des Moduls auf der Registerkarte "Erweitert" eine Zeile CSS-Code hinzufügen.

margin-top: 50px

3. Theme Builder-Änderungen speichern und Ergebnis anzeigen

Nachdem wir die Blog-Post-Vorlage fertiggestellt haben, müssen Sie nur noch alle Änderungen im Divi Theme Builder speichern und das Ergebnis in unseren 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 Ihnen einen anderen Ansatz zum Erstellen einer Blogbeitragsvorlage für Ihre Divi-Website gezeigt. Genauer gesagt haben wir Ihnen gezeigt, wie Sie mit Divis Theme Builder und dynamischem Inhalt ein Blogpost-Vorlagendesign mit geteiltem Bildschirm erstellen. Wir haben Sie Schritt für Schritt durch den Prozess geführt und eine JSON-Datei hinzugefügt, die Sie ebenfalls kostenlos herunterladen konnten! 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.