So fügen Sie eine feste Seitenleiste voller Höhe in Ihre Blog-Post-Vorlage ein

Die Entscheidung, Ihren Blog-Posts eine Seitenleiste hinzuzufügen, liegt ganz bei Ihnen. Einige Blogger entscheiden sich dafür, überhaupt keine Seitenleiste zu verwenden. Dieses Tutorial ist für diejenigen unter Ihnen, die eine Seitenleiste bevorzugen, sie aber ein wenig anders aussehen lassen möchten. Normalerweise sind Seitenleisten statisch positioniert, aber wenn der Inhalt des Beitrags lang ist, muss der Leser zurück nach oben scrollen, um die Seitenleiste zu sehen.

In diesem Blogpost-Vorlagendesign haben wir eine feste Seitenleiste mit voller Höhe erstellt, die beim Scrollen im Postinhalt an Ort und Stelle bleibt. Lassen Sie beim Neuerstellen des Tutorials zwei Registerkarten in Ihrem Browser geöffnet: einen für den Theme-Builder und einen für eine Blog-Post-Vorschau. Auf diese Weise können Sie die Änderungen sehen, während Sie gehen.

Lass uns anfangen!

Vorschau

Bevor wir beginnen, werfen wir einen Blick auf die feste Seitenleiste in voller Höhe.

Desktop

Handy, Mobiltelefon

Laden Sie die Vorlage für feste Seitenleisten in voller Höhe KOSTENLOS herunter

Um die kostenlose Vorlage für feste Seitenleisten in voller Höhe 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!

Sidebar-Widget erstellen

Bevor Sie mit der Vorlage für feste Seitenleisten mit voller Höhe beginnen, erstellen Sie ein benutzerdefiniertes Seitenleisten-Widget. Wir werden dies später in unsere Seitenleiste innerhalb der Vorlage aufnehmen.

Widget-Builder öffnen

Klicken Sie auf „Darstellung“ und wählen Sie „Widgets“.

Elemente zum Sidebar-Widget hinzufügen

Ziehen Sie die Elemente "Letzte Beiträge" und "Kategorien" in das Seitenleisten-Widget.

Elementeinstellungen im Widget anpassen

Wählen Sie aus, dass nur 3 aktuelle Beiträge angezeigt werden sollen, und fügen Sie einen Titel hinzu. Fügen Sie auch dem Kategorien-Widget einen Titel hinzu und vergessen Sie nicht, in beiden Feldern auf "Speichern" zu klicken, wenn Sie fertig sind.

• Titel der letzten Beiträge: Mehr lesen:
• Kategorien Titel: Durchsuchen

2. Beginnen Sie mit dem Theme Builder

Theme Builder öffnen / Neue Vorlage hinzufügen

Es ist an der Zeit, die Seitenleistenvorlage mit fester voller Höhe neu zu erstellen! Öffnen Sie zunächst Ihren Theme-Builder und fügen Sie eine neue Vorlage hinzu.

Vorlageneinstellungen festlegen

Wählen Sie in den Vorlageneinstellungen "Alle Blog-Posts" aus. Wenn Sie die Vorlage für eine bestimmte Kategorie oder ein bestimmtes Tag verwenden möchten, ändern Sie die Vorlageneinstellungen entsprechend.

Benutzerdefinierten Körper hinzufügen

Klicken Sie dann auf „Benutzerdefinierten Körper hinzufügen“.

Wählen Sie Benutzerdefinierten Körper erstellen

Wir werden diese Vorlage von Grund auf neu erstellen, also fahren Sie fort und wählen Sie "Benutzerdefinierten Körper erstellen".

Von Grund auf neu bauen

Wählen Sie im Visual Builder die Option zum erneuten Erstellen von Grund auf.

Erstellen Sie die Vorlage mit fester Seitenleiste in voller Höhe neu

Abschnittseinstellungen

Hintergrund

Öffnen Sie den vorhandenen Abschnitt in Ihrem Vorlageneditor und fügen Sie einen Verlaufshintergrund hinzu.

• Hintergrundverlauf
  • Farbe 1: Weiß #ffffff
  • Farbe 2: Hellgrau #eaeaea

Abstand

Fügen Sie auch etwas Polsterung hinzu.

• Obere Polsterung: 55px

Neue Zeile hinzufügen

Spaltenstruktur

Fügen Sie nun eine Zeile mit einer 3/4 – 1/4 Spaltenstruktur hinzu.

Größe

Passen Sie die Größe der Reihe wie folgt an.

• Benutzerdefinierte Dachrinnenbreite: 2
• Breite:
  • Desktop und Tablet: 90%
  • Telefon: 100%
• Maximale Breite:
  • Desktop: 1920px
• Mindesthöhe: 100vh

Spalte 1 Einstellungen

Abstand

Passen Sie die Spalteneinstellungen an, bevor Sie Module hinzufügen. Spalte 1 zuerst.

• Linke und rechte Polsterung
  • Tablette: 2%
  • Telefon: 8%

Spalte 2 Einstellungen

Hintergrund

Fügen Sie dann in Spalte 2 eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: Weiß #ffffff

Abstand

Fügen Sie auch einige Abstände ein.

• Linke und rechte Polsterung
  • Desktop: 3%
  • Tablet und Telefon: 14%

Grenze

Geben Sie der Spalte als nächstes abgerundete Ecken.

• Abgerundete Ecken
  • Tablet und Desktop: 15px

Benutzerdefinierte CSS

Wechseln Sie zur Registerkarte "Erweitert" und fügen Sie dem Hauptelement einige CSS-Codezeilen hinzu. Dies wird uns helfen, die Seitenleiste in voller Höhe auf dem Desktop zu erstellen.

• Hauptelement
  • Mindesthöhe: 100%

min-height: 100%;

Position

Um den festen Seitenleisteneffekt zu erzeugen, fügen Sie der Spalte schließlich eine feste Position hinzu.

• Position
  • Desktop: Behoben
  • Tablet und Telefon: Standard
• Ort: Oben rechts

Beitragstitel hinzufügen Modul #1

Elemente

Zeit, Module hinzuzufügen! Beginnen Sie mit einem ersten Beitragstitelmodul in Spalte 1 und aktivieren Sie nur den Titel.

• Titel anzeigen: Ja

Dynamisches Hintergrundbild

Gehen Sie dann zu den Hintergrundeinstellungen und verwenden Sie das vorgestellte Bild als dynamisches Hintergrundbild.

Titeltext

Gestalten Sie die Einstellungen für den Titeltext.

• Titelschriftart: Bai Jamjuree
• Titelschriftart: Großbuchstaben
• Titeltextfarbe: #e98074
• Titeltextgröße:
  • Desktop: 45px
  • Tablet: 35px
  • Telefon: 25px
• Abstand der Titelbuchstaben: 3px
• Höhe der Titelzeile: 1,3 em

Abstand

Fügen Sie dann eine benutzerdefinierte obere und untere Polsterung hinzu.

• Obere Polsterung: 20%
• Untere Polsterung: 20%

Grenze

Fügen Sie auch einige abgerundete Ecken hinzu.

• Alle Ecken: 15px

Titel-CSS

Und vervollständigen Sie die Moduleinstellungen, indem Sie dem Titelelement des Moduls auf der Registerkarte "Erweitert" drei Zeilen CSS-Code hinzufügen.

background-color: rgba(255,255,255,0.56);
padding-top: 2%;
padding-bottom: 2%;

Beitragstitel hinzufügen Modul #2

Elemente

Fügen Sie nun ein weiteres Beitragstitelmodul hinzu. Wählen Sie die folgenden Elemente aus.

• Meta
• Autor
• Beitragskategorien

Metatext

Öffnen Sie die Registerkarte Design und gestalten Sie den Metatext.

• Schriftart: Bai Jamjuree
• Gewicht: Mittel
• Farbe: Grau #8e8d8a
• Größe
  • Desktop: 20px
  • Tablet und Telefon: 15px
• Buchstabenabstand: 2px

Größe

Passen Sie auch die Größe an.

• Breite: 90%
• Modulausrichtung: Mitte

Abstand

Vervollständigen Sie die Einstellungen dieses Moduls mit etwas Abstand.

• Obere Polsterung: 15px

Modul für Beitragsinhalt hinzufügen

Hintergrund

Fügen Sie als Nächstes ein Beitragsinhaltsmodul mit weißem Hintergrund hinzu.

• Hintergrundfarbe: Weiß #ffffff

Text

Gestalten Sie nun den Fließtext.

• Schriftart: Lato
• Farbe: Grau #8e8d8a
• Größe: 16px

Überschriftstext

Fahren Sie fort, indem Sie alle Textstile für Überschriften gestalten.

• H1
  • Schriftart: Bai Jamjuree
  • Gewicht: Mittel
  • Farbe: Koralle #e98074
  • Größe
    • Desktop: 45px
    • Tablet: 33px
    • Telefon: 30px
  • Buchstabenabstand: 1px
• H2
  • Schriftart: Bai Jamjuree
  • Gewicht: Mittel
  • Farbe: Koralle #e98074
  • Größe
    • Desktop: 35px
    • Tablet und Telefon: 25px
  • Buchstabenabstand: 1px
• H3
  • Schriftart: Bai Jamjuree
  • Gewicht: Normal
  • Farbe: Dunkelgrau #606060
  • Größe
    • Desktop: 25px
    • Tablet und Telefon: 22px
  • Buchstabenabstand: 1px
• H4
  • Schriftart: Bai Jamjuree
  • Gewicht: Normal
  • Farbe: Dunkelgrau #606060
  • Größe
    • Desktop: 22px
    • Tablet: 20px
    • Telefon: 18px
  • Buchstabenabstand: 1px
• H5
  • Schriftart: Bai Jamjuree
  • Gewicht: Mittel
  • Farbe: Dunkelgrau #606060
  • Größe: 16px
  • Buchstabenabstand: 1px
• H6
  • Schriftart: Bai Jamjuree
  • Gewicht: Normal
  • Farbe: Dunkelgrau #606060
  • Größe: 16px
  • Buchstabenabstand: 1px

Abstand

Fügen Sie auch einige Abstandseinstellungen hinzu.

• Oberer Rand: 40px
• Obere Polsterung: 10%
• Untere Polsterung: 10%
• Linke Polsterung: 10%
• Rechte Polsterung: 10%

Grenze

Zu guter Letzt fügen Sie einige abgerundete Ecken hinzu.

• Abgerundeter Rand: 15px

Kommentarmodul hinzufügen

Elemente

Um die erste Spalte zu vervollständigen, fügen Sie ein Kommentarmodul hinzu. Aktivieren Sie die folgenden Elemente:

• Antwort-Button
• Anzahl Kommentare

Felder

Gestalten Sie die Felder auf der Registerkarte Design.

• Hintergrundfarbe: Hellgrau #f7f7f7
• Textfarbe: Grau #8e8d8a
• Schriftart: Bai Jamjuree
• Textgröße: 17px
• Abgerundete Ecken: 15px

Kommentaranzahl Text

Gestalten Sie auch den Kommentarzählertext.

• Überschriftsebene: H3
• Schriftart: Bai Jamjuree
• Farbe: Koralle #e98074
• Größe: 22px
• Buchstabenabstand: 1px

Formulartiteltext

Dann der Formulartitel.

• Überschriftsebene: H3
• Schriftart: Bai Jamjuree
• Farbe: Koralle #e98074
• Größe: 18px
• Buchstabenabstand: 1px

Metatext

Stylen Sie auch den Metatext.

• Schriftart: Bai Jamjuree
• Farbe: #606060
• Größe: 14px
• Buchstabenabstand: 1px

Kommentartext

Vergiss den Kommentartext nicht.

• Schriftart: Bai Jamjuree
• Größe: 1px

Taste

Stylen Sie nun die Knöpfe.

• Benutzerdefinierte Stile
• Textgröße: 18px
• Textfarbe: Weiß #ffffff
• Hintergrundfarbe: Koralle #e98074
• Schaltflächenrandradius: 15px
• Knopfschrift: Bai Jamjuree

Größe

Passen Sie auch die Zeilengröße an.

• Breite: 90%

Abstand

Ebenso die Abstandseinstellungen.

• Obere Polsterung: 8%
• Linke und rechte Polsterung: 4%

Personenmodul hinzufügen

Text

Gehen Sie zur festen Seitenleistenspalte und fügen Sie ein Personenmodul hinzu.

• Name: Autor des dynamischen Beitrags
• Vorher: Geschrieben von:

Titeltext

Gestalten Sie den Überschriftentext auf der Registerkarte Design wie folgt:

• Überschriftsebene: H4
• Schriftart: Bai Jamjuree
• Farbe: Koralle #e98074
• Größe: 2vh
• Buchstabenabstand: 2px

Größe

Passen Sie als nächstes die Größe an.

• Mindesthöhe:
  • Desktop: 3vh
  • Tablet und Telefon: automatisch
• Maximale Höhe:
  • Desktop: 3vh
  • Tablet und Telefon: automatisch

Abstand

Fügen Sie auch benutzerdefinierte Abstände hinzu.

• Oberer Rand
  • Desktop: 6vh
  • Tablet und Telefon: 10vh

Bildmodul hinzufügen

Bild

Fügen Sie nun ein Bildmodul hinzu. Wählen Sie dynamischen Inhalt für das Bild des Autors aus.

• Bild: Dynamisches Autorenprofilbild

Ausrichtung

Wechseln Sie zur Registerkarte Design und wählen Sie die folgende Ausrichtung:

• Bildausrichtung: Links

Größe

Passen Sie als nächstes die Größe des Moduls an.

• Maximale Breite: 15vh
• Modulausrichtung: Links
• Maximale Höhe
  • Desktop: 15vh

Grenze

Schließlich fügen Sie den Randeinstellungen einige abgerundete Ecken hinzu.

• Runde Ecken: 15px

Sidebar-Modul hinzufügen

Inhalt

Jetzt ist es an der Zeit, die Sidebar-Widgets mit dem Sidebar-Modul hinzuzufügen.

• Widget-Bereich: Seitenleiste

Layout

Passen Sie zuerst das Layout an.

• Grenztrennzeichen anzeigen: Nein

Titeltext

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

• Schriftart: Bai Jamjuree
• Gewicht: Mittel
• Farbe: Koralle #e98074
• Größe: 2vh
• Buchstabenabstand: 2px

Hauptteil

Fahren Sie mit dem Fließtext fort.

• Schriftart: Bai Jamjuree
• Gewicht: Leicht
• Farbe: Dunkelgrau #7f7f7f
• Schwebefarbe: Koralle #e98074
• Größe: 1.5vh
• Buchstabenabstand: 1px
• Linienhöhe: 1.8em

Größe

Passen Sie auch die Größe des Moduls an.

• Mindesthöhe
  • Desktop: 12vh
  • Tablet und Telefon: automatisch
• Maximale Höhe
  • Desktop: 12vh
  • Tablet und Telefon: automatisch

Abstand

Vergessen Sie nicht, einen Abstand hinzuzufügen.

• Obere Polsterung
  • Desktop: 1vh
  • Tablet und Telefon: 3vh

Benutzerdefinierte CSS

Zu guter Letzt fügen Sie einige CSS-Codezeilen in die Registerkarte "Erweitert" ein.

• Widget: Auffüllen-unten: 0vh;

padding-bottom: 0vh;

• Titel: Polsterung-unten: 2vh;

padding-bottom: 2vh;

E-Mail-Option hinzufügen

Text

Das nächste Modul, das wir in unserer Seitenleiste benötigen, ist ein E-Mail-Optin-Modul. Fügen Sie Inhalte Ihrer Wahl hinzu.

• Titel: Aktualisierungen
• Schaltfläche: Abonnieren

Email-Konto

Verbinden Sie Ihre E-Mail als nächstes mit dem Formular.

• Dienstanbieter: Ihr E-Mail-Anbieter
• Liste: Ihre gewählte Liste

Felder

Wir verwenden nur das Vornamensfeld in den Feldeinstellungen.

• Vornamensfeld anzeigen

Hintergrund

Deaktivieren Sie dann den Standardhintergrund.

• Hintergrundfarbe verwenden: Nein

Layout

Wechseln Sie zur Registerkarte Design und ändern Sie die Layouteinstellungen.

• Layout: Körper oben, Form unten
• Vorname Volle Breite: Nein
• E-Mail in voller Breite: Nein

Felder

Dann formatieren Sie die Felder wie folgt:

• Hintergrundfarbe: Hellgrau #f7f7f7
• Textfarbe: #606060
• Polsterung oben und unten: 1vh
• Linke Polsterung: 1vh
• Schriftart: Bai Jamjuree
• Textgröße: 1.5vh
• Buchstabenabstand: 1px
• Abgerundete Ecken: 15px

Titeltext

Stylen Sie auch den Titeltext.

• Überschriftsebene: H4
• Schriftart: Bai Jamjuree
• Farbe: Koralle #e98074
• Größe: 2vh
• Buchstabenabstand: 2px
• Linienhöhe: 1em

Taste

Dann die Schaltfläche.

• Benutzerdefinierte Stile
• Textgröße: 1.5vh
• Textfarbe: Weiß #ffffff
• Hintergrundfarbe: Koralle #e98074
• Randradius: 15px
• Buchstabenabstand: 2px
• Schriftart: Bai Jamjuree
• Polsterung oben und unten: 1vh

Abstand

Und vervollständigen Sie die Moduleinstellungen und das Tutorial, indem Sie dem Modul einige benutzerdefinierte Abstandswerte hinzufügen. Das ist es! Stellen Sie sicher, dass Sie alle Änderungen am Theme Builder speichern, nachdem Sie den Vorlagenkörper erstellt haben.

• Obere Polsterung
  • Desktop und Tablet: 0vh
• Bodenpolsterung
  • Desktop: 2vh
  • Tablet und Telefon: 6vh
• Linke und rechte Polsterung
  • Desktop und Tablet: 0vh

Vorschau

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

Desktop

Handy, Mobiltelefon

Das ist ein Wrap!

Wir haben die feste Seitenleiste in voller Höhe für Ihre Blog-Post-Vorlagen neu erstellt. Wenn Sie die Vorlage über den obigen Link heruntergeladen haben, vergessen Sie nicht, Ihre Seitenleisten-Widgets wie im ersten Teil dieses Tutorials gezeigt einzurichten.

Bist du ein Sidebar- oder kein Sidebar-Typ? Lass es uns in den Kommentaren wissen, wenn du Ideen oder Fragen hast!