So gestalten Sie einen scrollbaren Widget-Bereich für die letzten Beiträge in Divi
Veröffentlicht: 2019-05-02Das Sidebar-Modul von Divi ist ein äußerst nützliches Werkzeug, um benutzerdefinierte Widget-Bereiche in Ihr Design zu integrieren. Auf diese Weise können Sie jedes WordPress-Widget in einem Divi-Layout anzeigen. In diesem Tutorial zeige ich Ihnen, wie Sie in Divi einen scrollbaren Widget-Bereich für die letzten Beiträge erstellen. Ich werde einen Abschnitt "Aus unserem Blog" mit dem Widget-Bereich für die letzten Beiträge auf der rechten Seite eines Blog-Moduls entwerfen. Dies ist perfekt, um einige Ihrer neuesten Blog-Posts auf einer Homepage oder Zielseite zu präsentieren.
Lass uns anfangen!
Vorgeschmack
Hier ist ein kleiner Vorgeschmack auf das Design, das wir in diesem Tutorial erstellen werden.
Laden Sie das scrollbare Layout für aktuelle Beiträge KOSTENLOS herunter
Um das scrollbare Layout-Design für die letzten Beiträge aus diesem Tutorial in die Hände zu bekommen, müssen Sie es 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.
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.
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!
Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.
Kommen wir zum Tutorial, sollen wir?
Abonnieren Sie unseren Youtube-Kanal
Erstellen des Widget-Bereichs „Neueste Beiträge“
Da wir unserem Divi-Layout ein Widget für aktuelle Beiträge hinzufügen werden, müssen wir als erstes einen neuen Widget-Bereich (mit dem Widget für letzte Beiträge) erstellen, um ihn mit dem Sidebar-Modul von Divi zu verwenden.
Um den Widget-Bereich für die letzten Beiträge zu erstellen, navigieren Sie zu Darstellung > Widgets. Erstellen Sie dann einen neuen Widget-Bereich, indem Sie dem Widget-Bereich einen Namen geben (nennen Sie ihn „neueste Beiträge“, wenn Sie möchten) und klicken Sie auf die Schaltfläche Erstellen. Aktualisieren Sie die Seite, um den neuen verfügbaren Widget-Bereich anzuzeigen.
Öffnen Sie den Schalter des Widgets für die letzten Beiträge, das mit WordPress geliefert wird, links auf der Seite. Wählen Sie dann den Widget-Bereich „Neueste Beiträge“ aus der Liste aus und klicken Sie auf Widget hinzufügen, um das Widget zum Widget-Bereich hinzuzufügen.
Öffnen Sie dann den Widget-Bereich für letzte Beiträge und aktualisieren Sie das Widget für letzte Beiträge mit einem Titel. Stellen Sie die Anzahl der anzuzeigenden Beiträge auf einen großen Wert ein, damit wir nach Abschluss unseres Designs genügend Beiträge zum Scrollen haben.
Nachdem wir nun unseren Widget-Bereich eingerichtet haben, können wir mit unserem Divi-Design beginnen.
Erstellen des Abschnitts „Aus unserem Blog“ mit scrollbarem Widget-Bereich für die letzten Beiträge
Gestaltung des Überschriftenabschnitts
Erstellen Sie einen neuen regulären Abschnitt mit einer einspaltigen Zeile.
Aktualisieren Sie den Abschnitt vor dem Hinzufügen eines Moduls wie folgt:
Hintergrundfarbe: #333333
Benutzerdefinierte Polsterung: 0px unten
Nehmen Sie dann auch die untere Polsterung der Zeile heraus, indem Sie die Zeileneinstellungen aktualisieren:
Benutzerdefinierte Polsterung: 0px unten
Fügen Sie dann der Zeile einen Textbaustein hinzu.
Aktualisieren Sie dann die folgenden Texteinstellungen:
Fügen Sie für den Inhalt die folgende H2-Überschrift html hinzu:
<h2>From our Blog</h2>
Aktualisieren Sie dann die folgenden Texteinstellungen:
Überschrift 2 Schriftart: Roboto
Überschrift 2 Schriftstil: TT
Überschrift 2 Textfarbe: #ffffff
Überschrift 2 Textgröße: 40px
Überschrift 2 Buchstabenabstand: 2px
Das kümmert sich um die Überschrift für unser Layout. Jetzt ist es an der Zeit, den Rest des Layouts mit einem Spezialbereich zu erstellen.
Erstellen des Spezialbereichs
Die Verwendung eines separaten Spezialbereichs für den Rest des Layouts ermöglicht es uns, rechts eine dedizierte Seitenleiste für unseren scrollbaren Widget-Bereich zu haben. Außerdem ermöglicht es uns, unsere Zeilen auf der linken Seite des Abschnitts getrennt vom Seitenleistenbereich zu dimensionieren und zu gestalten.
Fahren Sie fort und fügen Sie einen Spezialbereich mit einem Spaltenlayout in der rechten Seitenleiste wie folgt hinzu:
Fügen Sie dann dem Abschnitt eine einspaltige Zeile hinzu.
Bevor wir ein Modul hinzufügen, aktualisieren wir unsere Abschnitts- und Zeileneinstellungen.
Anpassen der Abschnittseinstellungen
Öffnen Sie die Einstellungen für den Spezialbereich und aktualisieren Sie Folgendes:
Hintergrundfarbe: #333333
Dachrinnenbreite: 2
Benutzerdefinierte Polsterung: 0px oben
Spalte 2 Benutzerdefinierte Auffüllung: 0 Pixel oben, 0 Pixel unten
Anpassen der Zeileneinstellungen
Öffnen Sie als Nächstes die Zeileneinstellungen und aktualisieren Sie Folgendes:
Höhe: 640px
Breite des oberen Rands: 8px
Farbe des oberen Rands: #444444
Breite des unteren Rands: 8px
Farbe des unteren Rands: #444444
Die benutzerdefinierte Höhe von 640 px entspricht der Höhe des scrollbaren Widget-Bereichs für die letzten Beiträge, den wir der Seitenleiste unseres Spezialbereichs hinzufügen werden. Dadurch wird sichergestellt, dass die beiden die gleiche Höhe für ein ästhetisch ansprechenderes Design haben.
Hinzufügen des Blog-Moduls
Fügen Sie in der einspaltigen Zeile auf der linken Seite ein Blog-Modul hinzu.
Aktualisieren Sie dann die Einstellungen des Blogmoduls wie folgt:
Beitragsnummer: 2
Layout: Gitter
Titelschriftart: Roboto
Meta-Schriftart: Roboto
Gewicht der Metaschrift: Leicht
Meta-Schriftstil: TT
Paginierungsschrift: Roboto
Paginierungs-Schriftart: TT
Paginierungstextfarbe: #ffffff
Paginierungstextgröße: 18px
Paginierung Buchstabenabstand: 2px
Hinzufügen des scrollbaren Widget-Bereichs für die letzten Beiträge
Schließlich ist es an der Zeit, die scrollbaren letzten Beiträge zu unserem Layout hinzuzufügen. Fügen Sie dazu ein Sidebar-Modul zum Sidebar-Bereich des Specialty-Bereichs auf der rechten Seite hinzu.
Wählen Sie dann den Widget-Bereich „Neueste Beiträge“ aus, den Sie zuvor erstellt haben, indem Sie ihn aus der Dropdown-Liste Widget-Bereich auf der Registerkarte „Inhalt“ auswählen.
Aktualisieren Sie dann das Design des Titel- und Textkörpers wie folgt:
Titelschriftart: Roboto
Titelschriftart: TT
Titeltextfarbe: #ffffff
Abstand der Titelbuchstaben: 2px
Körperschriftart: Roboto
Schriftstil für den Textkörper: Unterstreichen
Als nächstes blenden Sie den Rahmentrenner wie folgt aus:
Grenztrennzeichen anzeigen: NEIN
Geben Sie dem Seitenleistenmodul dann eine maximale Höhe und benutzerdefinierte Polsterung wie folgt:
Maximale Höhe: 640px
Benutzerdefinierte Polsterung: 30 Pixel oben, 30 Pixel unten, 5 % rechts
Die maximale Höhe von 640 px entspricht der benutzerdefinierten Höhe von 640 px, die der angrenzenden Zeile zugewiesen wurde.
Nachdem wir dem Seitenleistenmodul nun eine maximale Höhe von 640px gegeben haben, müssen wir den vertikalen Überlauf auf Scrollen einstellen, um unsere scrollbare Funktionalität zu erhalten. Gehen Sie dazu auf die Registerkarte Erweitert und aktualisieren Sie Folgendes:
Vertikaler Überlauf: Scrollen
Endergebnis
Das ist es! Schauen wir uns nun das Endergebnis an.
Bonusoption: Hinzufügen von benutzerdefiniertem CSS zur Design-Bildlaufleiste (nicht von allen Browsern unterstützt)
Das Gestalten einer Bildlaufleiste in WordPress ist ziemlich mühsam, wenn Sie browserübergreifende Unterstützung wünschen. In den meisten Fällen sollten Sie also die Standardstile des Browsers belassen und den Tag beenden. Wenn Sie jedoch die Bildlaufleiste an das Design Ihrer Seite anpassen möchten, können Sie benutzerdefiniertes CSS hinzufügen. Leider ist die Browserunterstützung auf Browser beschränkt, die CSS-Eigenschaften mit dem Präfix ::webkit unterstützen (im Grunde nur Safari und Chrome). So geht's.
Öffnen Sie die Einstellungen des Spezialbereichs und fügen Sie die folgende CSS-Klasse hinzu:
CSS-Klasse: cust-scroll
Öffnen Sie dann die Seiteneinstellungen modal und fügen Sie der Seite das folgende benutzerdefinierte CSS hinzu.
/* width */
.cust-scroll ::-webkit-scrollbar {
width: 8px;
}
/* Track */
.cust-scroll ::-webkit-scrollbar-track {
background: #444444;
}
/* Handle */
.cust-scroll ::-webkit-scrollbar-thumb {
background: #888888;
}
/* Handle on hover */
.cust-scroll ::-webkit-scrollbar-thumb:hover {
background: #ffffff;
}
Dadurch wird die Breite der Bildlaufleiste auf 8px geändert und die Farben für Spur und Griff angepasst. Fühlen Sie sich frei, selbst mit weiteren Designs und Farben zu experimentieren.
Und falls Sie sich fragen, ist der Fallback für andere Browser der Standardstil des Browsers für Bildlaufleisten.
Abschließende Gedanken
Das Hinzufügen von vertikalem Scrollen zu Inhalten ist praktisch, wenn Sie Benutzern die Möglichkeit geben möchten, mehr Inhalte auf engstem Raum anzuzeigen. Ein scrollbarer Widget-Bereich für die letzten Beiträge ist ein großartiges Beispiel dafür, wie vertikales Scrollen wirklich gut funktionieren kann. Natürlich können Sie das in diesem Tutorial verwendete Seitenleistenmodul durch ein Textmodul ersetzen und jedem gewünschten Inhalt einen vertikalen Bildlauf hinzufügen. Dieselbe Anpassung gilt für jedes Modul.
In Bezug auf das Styling der Bildlaufleiste bin ich mir sicher, dass es andere Plugins oder Javascript-Lösungen gibt, die eine browserübergreifende Lösung bieten würden. Wenn Sie gute kennen, können Sie diese gerne mit uns teilen.
Ich freue mich, von Ihnen in den Kommentaren unten zu hören.
Danke schön!