Laden Sie mit Divi . eine KOSTENLOSE Blogpost-Vorlage für zweiseitige Seitenleisten herunter

Obwohl es Seitenleisten schon lange gibt, werden sie immer noch häufig im Web verwendet. Sie helfen dabei, verschiedene Elemente anzuzeigen, die mit dem Beitrag verbunden sind, wie empfohlene Beiträge und E-Mail-Optin-Formulare, ohne den Hauptfokus, den eigentlichen Beitragsinhalt, zu vernachlässigen. Mit Divis Theme Builder gibt es jetzt unzählige Möglichkeiten, Ihre Blog-Post-Vorlage zu erstellen. In diesem Tutorial zeigen wir Ihnen, wie Sie Ihrer Beitragsvorlage eine zweiseitige Seitenleiste hinzufügen. 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

Abonnieren Sie unseren Youtube-Kanal

Laden Sie die Blog-Post-Vorlage KOSTENLOS herunter

Um die kostenlose 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, indem Sie zu Ihrem Divi Theme Builder gehen. Dort angekommen, fügen Sie eine neue Vorlage hinzu.

Vorlage für alle Beiträge verwenden

Wir verwenden diese neue Vorlage für alle Beiträge.

• Verwenden auf: Alle Beiträge

Beginnen Sie mit dem Erstellen des Vorlagenkörpers

Nun, dann beginnen Sie mit dem Erstellen des Vorlagenkörpers.

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

Neuen Abschnitt hinzufügen

Hintergrundfarbe

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

• Hintergrundfarbe: #f4f4f4

Abstand

Ändern Sie die Abstandswerte des Abschnitts auch für verschiedene Bildschirmgrößen.

• Obere Polsterung: 50 Pixel (Desktop), 20 Pixel (Tablet), 10 Pixel (Telefon)
• Untere Polsterung: 50 Pixel (Desktop), 20 Pixel (Tablet), 10 Pixel (Telefon)

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 entsprechend:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 2
• Breite: 100%
• Maximale Breite: 95%

Abstand

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

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

Spalte 2

Hintergrundfarbe

Öffnen Sie dann die Einstellungen von Spalte 2 und ändern Sie die Hintergrundfarbe in Weiß.

• Hintergrundfarbe: #ffffff

Box Schatten

Fügen Sie der Spalte auch einen Kastenschatten hinzu.

• Stärke der Box-Schattenunschärfe: 80px
• Stärke der Box-Schattenausbreitung: -21px
• Schattenfarbe: rgba(0,0,0,0.08)

Bildmodul zu Spalte 2 hinzufügen

Dynamischer Inhalt

Zeit, Module hinzuzufügen! In der zweiten Spalte platzieren wir alle Module, die für den Blogbeitrag selbst relevant sind, beginnend mit einem Image-Modul. Verwenden Sie den dynamischen Inhalt des vorgestellten Bildes.

• Bild: Ausgewähltes Bild

Größe

Wechseln Sie dann zur Design-Registerkarte des Moduls und erzwingen Sie die volle Breite des Bildmoduls.

• Volle Breite erzwingen: Ja

Beitragstitelmodul zu Spalte 2 hinzufügen

Elemente

Weiter zum zweiten Modul, dem Post Title Module. Deaktivieren Sie das vorgestellte Bild in den Elementeinstellungen.

• Ausgewähltes Bild anzeigen: Nein

Einstellungen für Titeltext

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Einstellungen für den Titeltext entsprechend:

• Titelschriftart: Oxygen
• Titeltextgröße: 2vw (Desktop), 4vw (Tablet), 6vw (Telefon)
• Höhe der Titelzeile: 1.2em

Metatext-Einstellungen

Nehmen Sie als nächstes einige Änderungen an den Metatext-Einstellungen vor.

• Meta-Schriftart: Open Sans
• Meta-Textfarbe: #ffc023
• Metatextgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)

Abstand

Ändern Sie auch die Abstandswerte.

• Oberer Rand: 100px
• Linker Rand: 4vw
• Rechter Rand: 4vw

Titel-CSS

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie dem CSS-Element des Titels auf der Registerkarte "Erweitert" einen unteren Rand hinzufügen.

margin-bottom: 20px;

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

Texteinstellungen

Weiter zum nächsten Modul, dem Post-Content-Modul, das alle Ihre dynamischen Blog-Post-Inhalte enthält. Ändern Sie die Texteinstellungen des Moduls entsprechend:

• Textschriftart: Open Sans
• Textgröße: 0,9 vw (Desktop), 1,8 vw (Tablet), 3 vw (Telefon)
• Textzeilenhöhe: 2.2em

Überschriftstexteinstellungen

Nehmen Sie dann auch einige Änderungen an den Einstellungen für den Überschriftentext vor.

• Überschrift Schriftart: Sauerstoff
• H2-Textgröße: 1,5 vw (Desktop), 3 vw (Tablet), 4 vw (Telefon)
• H3, H4, H5 & H6 Textgröße: 1,3 vw (Desktop), 2,5 vw (Tablet), 3,5 vw (Telefon)

Abstand

Wir verwenden auch einige benutzerdefinierte Margin- und Padding-Werte.

• Linker Rand: 4vw
• Rechter Rand: 4vw
• Obere Polsterung: 50px
• Untere Polsterung: 100px

CSS-Klasse

Vervollständigen Sie die Einstellungen des Moduls, indem Sie eine CSS-Klasse hinzufügen. Im nächsten Teil dieses Tutorials verwenden wir diese CSS-Klasse, um den Titeln und Absätzen etwas Abstand hinzuzufügen.

• Post-Content-Abstand

Codemodul zu Spalte 2 hinzufügen

CSS-Code einfügen

Wie im vorherigen Schritt dieses Beitrags erwähnt, verwenden wir benutzerdefiniertes CSS, um Platz zwischen Überschriften und Absätzen hinzuzufügen. Dazu verwenden wir ein Code-Modul in Spalte 2. Fügen Sie die folgenden Zeilen CSS-Code ein:

<style>

.post-content-spacing h2,
.post-content-spacing h3,
.post-content-spacing h4,
.post-content-spacing h5,
.post-content-spacing h6 {
margin-top: 50px;
margin-bottom: 50px;
}

.post-content-spacing p {
margin-top: 20px;
margin-bottom: 20px;
}

</style>

E-Mail-Optionsmodul zu Spalte 3 hinzufügen

Inhalt hinzufügen

Es ist Zeit, mit dem Hinzufügen der Seitenleistenelemente zu beginnen! Sie können jedes gewünschte Modul hinzufügen. Wir beginnen mit einem E-Mail-Optin-Modul in Spalte 3. Verwenden Sie eine Kopie Ihrer Wahl.

Email-Konto

Fahren Sie fort, indem Sie ein E-Mail-Konto mit dem Modul verknüpfen.

Felder

Deaktivieren Sie dann das Nachnamensfeld in den Feldeinstellungen.

• Feld Nachname anzeigen: Nein

Hintergrundfarbe

Ändern Sie die Hintergrundfarbe entsprechend:

• Hintergrundfarbe: #ffc023

Feldeinstellungen

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

• Fields-Schriftart: Open Sans
• Feldtextgröße: 0,8 vw (Desktop), 1,8 vw (Tablet), 3 vw (Telefon)

Einstellungen für Titeltext

Nehmen Sie auch einige Änderungen an den Einstellungen für den Titeltext vor.

• Titelschriftart: Oxygen
• Schriftstärke des Titels: Fett
• Titeltextgröße: 1vw (Desktop), 3vw (Tablet), 5vw (Telefon)
• Höhe der Titelzeile: 1,5 em

Tasteneinstellungen

Fahren Sie fort, indem Sie die Schaltfläche gestalten.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 0,9 vw (Desktop), 1,8 vw (Tablet), 3 vw (Telefon)
• Schaltflächentextfarbe: #ffc023
• Schaltflächenhintergrundfarbe: #f4f4f4
• Breite des Tastenrahmens: 0px

• Schaltflächenrandradius: 0px
• Schaltflächenschriftart: Sauerstoff

• Knopfpolsterung oben: 15px
• Knopfunterseite Polsterung: 15px

Box Schatten

Und vervollständigen Sie die Moduleinstellungen, indem Sie einen subtilen Kastenschatten hinzufügen.

• Stärke der Box-Schattenunschärfe: 80px
• Stärke der Box-Schattenausbreitung: -21px
• Schattenfarbe: rgba(0,0,0,0.08)

Fügen Sie das Social Media Follow-Modul zu Spalte 3 hinzu

Fügen Sie soziale Netzwerke Ihrer Wahl hinzu

Das nächste Modul, das wir in Spalte 3 benötigen, ist ein Social Media Follow Module. Fügen Sie einige soziale Netzwerke Ihrer Wahl hinzu.

Soziale Netzwerkstile einzeln zurücksetzen

Fahren Sie fort, indem Sie die Elementstile für jedes soziale Netzwerk einzeln zurücksetzen.

Symboleinstellungen

Gehen Sie dann zurück zu den allgemeinen Moduleinstellungen und ändern Sie die Symbolfarbe.

• Symbolfarbe: #ffc023

Blog-Modul zu Spalte 1 hinzufügen

Elemente

In Spalte 1 ist das einzige Modul, das wir hinzufügen, ein Blog-Modul. Deaktivieren Sie den Autor in den Elementeinstellungen.

• Autor anzeigen: No

Layout

Wechseln Sie dann zur Registerkarte Design des Moduls und ändern Sie das Layout.

• Layout: Gitter

Einstellungen für Titeltext

Ändern Sie als nächstes die Einstellungen für den Titeltext.

• Titelschriftart: Oxygen
• Schriftstärke des Titels: Fett
• Titeltextgröße: 1vw (Desktop), 3vw (Tablet), 5vw (Telefon)
• Höhe der Titelzeile: 1,5 em

Textkörpereinstellungen

Nehmen Sie auch einige Änderungen an den Textkörpereinstellungen vor.

• Körperschriftart: Open Sans
• Textgröße: 0.7vw (Desktop), 1.8vw (Tablet), 3vw (Telefon)
• Körperlinienhöhe: 2.2em

Metatext-Einstellungen

Als nächstes formatieren Sie die Metatext-Einstellungen entsprechend:

• Meta-Schriftart: Open Sans
• Meta-Textfarbe: #ffc023
• Metatextgröße: 0.8vw (Desktop), 1.8vw (Tablet), 3vw (Telefon)

Grenze

Entfernen Sie auch den Standardrahmen des Moduls.

• Rahmenbreite des Rasterlayouts: 0px

Box Schatten

Und verwenden Sie einen subtilen Kastenschatten.

• Stärke der Box-Schattenunschärfe: 80px
• Stärke der Box-Schattenausbreitung: -21px
• Schattenfarbe: rgba(0,0,0,0.08)

Sichtweite

Nun möchten wir, dass das Blog-Modul in Spalte 1 angezeigt wird, wenn jemand den Beitrag auf dem Desktop ansieht. Auf kleineren Bildschirmgrößen möchten wir jedoch, dass der Inhalt des Beitrags an erster Stelle steht. Aus diesem Grund werden wir das gesamte Modul auf Tablet und Telefon ausblenden.

Blog-Modul klonen und Duplikat in Spalte 3 platzieren

Wir klonen dann das Blog-Modul und platzieren das Duplikat in der dritten Spalte.

Sichtbarkeit ändern

Wir möchten, dass dieses Modul nur auf kleineren Geräten in Spalte 3 erscheint, deshalb blenden wir das gesamte Modul auf dem Desktop aus.

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

Sobald Sie die Blog-Post-Vorlage ausgefüllt haben (stellen Sie sicher, dass Sie auch ein Kommentarmodul hinzufügen!), können Sie alle Änderungen am Theme Builder speichern und das Ergebnis auf Ihrer Website 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 gezeigt, wie Sie mit Divis Theme Builder eine zweiseitige Seitenleiste zu Ihrer Blog-Post-Vorlage hinzufügen. Darüber hinaus haben wir die JSON-Datei des Layouts kostenlos zur Verfügung gestellt, damit Sie sie in der Nähe haben können, falls Sie sie für zukünftige Projekte benötigen! Wenn Sie Fragen 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.