So erstellen Sie einen Blog-Post-Ticker mit dem Post Slider-Modul von Divi

Ein Blog-Post-Ticker ist ein praktisches Tool, um Blog-Posts (neueste, verwandte usw.) dynamisch auf Ihrer Website zu präsentieren. Sie können es sich als Newsticker für WordPress-Blogposts vorstellen.

Heute zeigen wir Ihnen, wie Sie mit Divis Post-Slider-Modul einen Blog-Post-Ticker erstellen. Ähnlich einem News-Ticker wird der Blog-Post-Ticker, den wir erstellen werden, eine vereinfachte und kompakte Version des Post-Slider-Moduls von Divi sein. Und da das Post-Slider-Modul über integrierte Funktionen zum Präsentieren von Posts auf verschiedene Weise verfügt, können Sie es überall verwenden. Sie können es auf der Startseite als Post-Ticker verwenden, um aktuelle Posts anzuzeigen, oder Sie können es in der Kopfzeile einer Blog-Post-Vorlage verwenden, um Posts anzuzeigen, die sich nach der aktuellen Kategorie beziehen.

Nachdem wir Ihnen gezeigt haben, wie Sie den Blogpost-Ticker in Divi erstellen, zeigen wir Ihnen auch, wie Sie ihn in Ihrer Divi-Bibliothek speichern, damit Sie ihn einer Kopfzeile einer Blogpost-Vorlage im Divi Builder hinzufügen können.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf den Blogpost-Ticker, den wir in diesem Tutorial erstellen werden.

So stapelt sich der Post-Ticker gut auf dem Telefondisplay.

Wir zeigen, wie Sie den Post-Ticker hinzufügen, um verwandte Posts auch im Header einer Blog-Post-Vorlage anzuzeigen.

Laden Sie das Layout und die Vorlage KOSTENLOS herunter

Um die Designs 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.

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!

Importieren Sie das Layout in die Divi-Bibliothek

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer. Es ist die JSON-Datei im Ordner mit dem Namen „Blog Post Ticker Layout (Divi Library)“.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Importieren Sie die Header-Vorlage in den Divi Theme Builder

Wenn Sie die Blog-Post-Vorlage mit dem zum Header hinzugefügten Post-Ticker importieren möchten, müssen Sie zu Divi > Theme Builder navigieren.

Verwenden Sie dann das Portabilitätssymbol oben rechts auf der Seite, um die JSON-Datei zu importieren. Es ist die Datei im Ordner mit dem Namen „Blog-Post-Header-Vorlage mit Post-Ticker (Theme Builder)“.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Erstellen des Blogpost-Tickers in Divi

Erstellen der Reihe

Lassen Sie uns zunächst eine einspaltige Zeile innerhalb des Abschnitts erstellen.

Zeileneinstellungen

Aktualisieren Sie als Nächstes die Zeilenentwurfseinstellungen wie folgt:

• Dachrinnenbreite: 1
• Padding: 0px oben, 0px unten

Erstellen des Post-Ticker-Titels mit einem Textmodul

Nachdem die Zeile nun vorhanden ist, fügen Sie der Zeile ein Textmodul hinzu, um den Post-Ticker-Titel zu erstellen.

Titeltext und Hintergrund

Aktualisieren Sie den Textkörper so, dass er "Letzte Beiträge:" lautet.

Aktualisieren Sie dann die Hintergrundfarbe:

• Hintergrundfarbe: #333333

Designeinstellungen

Aktualisieren Sie auf der Registerkarte Design die Textstile wie folgt:

• Textschriftart: Poppins
• Schriftstärke des Textes: Halbfett
• Textschriftart: TT
• Text Textfarbe: rgba(255,255,255,0.7)
• Text Buchstabenabstand: 1px
• Textzeilenhöhe: 40px
• Textausrichtung: Mitte

• Breite: 100%
• Max. Breite: 175 px (Desktop und Tablet), 100 % (Telefon)

Das kümmert sich um unseren Post-Ticker-Titel. Beginnen wir nun mit dem Aufbau des Post-Tickers.

Erstellen des Blogpost-Tickers mit einem Blogpost-Slider-Modul

Um den Blogpost-Ticker zu erstellen, verwenden wir ein Post-Slider-Modul und vereinfachen dann das Design, um es wirklich kompakt zu machen.

Fügen Sie unter dem Textmodul ein Post-Slider-Modul hinzu.

Slider-Inhalt posten

Auf der Registerkarte Inhalt können Sie die Anzahl der Beiträge, die enthaltenen Kategorien und ihre Reihenfolge auswählen. In diesem Beispiel behalten wir die Standardeinstellung bei und lassen den Schieberegler die neuesten Beiträge anzeigen.

Um den Beitragsauszug auszublenden, aktualisiere Folgendes:

• Beitragsauszüge verwenden: NEIN
• Auszug Länge: 0

Post-Slider-Elemente und Hintergrund

Eigentlich wollen wir im Slider nur den Beitragstitel und die Folienpfeile anzeigen. Blenden Sie in der Optionsgruppe Elemente alles außer den Pfeilen aus.

• Kontrollen anzeigen: NEIN
• Weiterlesen-Button anzeigen: NEIN
• Beitrags-Meta anzeigen: NO

Wir werden die Option beibehalten, das vorgestellte Bild als Hintergrund jeder Folie anzuzeigen. Stellen Sie jedoch für ein Backup sicher, dass Sie die folgende Hintergrundfarbe hinzufügen:

• Hintergrundfarbe: #eeeeee

Einstellungen für das Post-Slider-Design

Overlay- und Pfeilstile

Aktualisieren Sie auf der Registerkarte Design die Hintergrundüberlagerung und die Pfeilfarbe wie folgt:

• Hintergrundüberlagerung verwenden: JA
• Hintergrund-Overlay-Farbe: rgba(248,248,248,0,9)
• Pfeilfarbe: #ffffff (Desktop), #ef51f7 (Hover)

Titeltext

Aktualisieren Sie dann die Titeltextstile wie folgt:

• Titelschriftart: Poppins
• Schriftstärke des Titels: Mittel
• Ausrichtung des Titeltextes: Links
• Titeltextfarbe: #333333
• Titeltextfarbe (Hover): #ef51f7
• Titeltextgröße: 16px (Desktop), 14px (Telefon)
• Höhe der Titelzeile: 40 Pixel
• Titeltextschatten: siehe Screenshot
• Titeltext Schattenfarbe: transparent

Abstand

Wir müssen Platz für das Textmodul Post-Ticker-Titel schaffen, damit wir unseren Post-Slider auf der rechten Seite davon positionieren können. Aktualisieren Sie dazu Folgendes:

• Rand: 175 Pixel links (Desktop und Tablet), 0 Pixel links (Telefon)
• Padding: 0px oben, 0px unten, 0px links, 0px rechts

Automatische Animation

Der Post-Slider verfügt über eine integrierte Option zum Hinzufügen automatischer Animationen. Dadurch erhalten wir die Ticker-Funktionalität, die wir benötigen, um die Beiträge zu sehen, ohne auf die Folienpfeile klicken zu müssen.

Fügen Sie die automatische Animation wie folgt hinzu:

• Automatische Animation: EIN
• Automatische Animationsgeschwindigkeit: 3500

Fühlen Sie sich frei, die Geschwindigkeit so zu erhöhen oder zu verringern, wie Sie es für am besten halten.

Erweitertes Styling

CSS-Klasse und benutzerdefiniertes CSS

An dieser Stelle ist der Post-Slider größtenteils ein funktionierender Post-Ticker. Aber es gibt ein paar fortgeschrittene Optimierungen, die wir hinzufügen können, um das Design zu bereinigen.

Fügen Sie zunächst wie folgt eine benutzerdefinierte CSS-Klasse hinzu:

• CSS-Klasse: et-post-ticker

Um sicherzustellen, dass der Beitragstitel in einer Zeile innerhalb des Schiebereglers/Tickers bleibt und den Überlauf mit einem Auslassungszeichen ausblendet, fügen Sie dem Folientitel das folgende CSS hinzu:

padding-bottom:0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Um den Folienpfeilen mehr Schaltflächengefühl zu verleihen, fügen Sie den Folienpfeilen das folgende CSS hinzu:

height: 40px;
width: 40px;
line-height:40px;
font-size: 28px;
text-align: center;
margin-top:-20px;
background:#333;

Zusätzliches CSS mit Code-Modul zum Positionieren von Schiebepfeilen

An diesem Punkt wird die Standardfunktion der Folienpfeile nur beim Bewegen der Maus angezeigt und die Platzierung der Pfeile befindet sich auf der rechten und linken Seite der Folie. Um die Benutzererfahrung zu verbessern und es eher wie ein Postticker zu machen, können wir die Pfeile immer anzeigen lassen und sie rechts neben dem Schieberegler positionieren.

Fügen Sie dazu ein neues Codemodul unter dem Post-Slider hinzu.

Fügen Sie dann das folgende CSS ein und achten Sie darauf, es mit den erforderlichen Style-Tags zu umschließen.

.et-post-ticker.et_pb_slider:hover .et-pb-arrow-prev,
.et-post-ticker .et-pb-arrow-prev {
  right: 40px !important;
  opacity: 1 !important;
  left: auto !important;
}
.et-post-ticker.et_pb_slider:hover .et-pb-arrow-next,
.et-post-ticker .et-pb-arrow-next {
  right: 0px !important;
  opacity: 1 !important;
}
.et-post-ticker .et_pb_slide {
  padding: 0 84px 0 3% !important;
}

Endergebnis

Hier ist das Endergebnis auf einer Live-Seite.

Beachten Sie, wie der Postticker den Überlauf des Titeltexts behandelt.

Und so stapelt sich der Post-Ticker gut auf dem Telefondisplay.

Hinzufügen des Post-Tickers zum Header einer Blog-Post-Vorlage

Ein offensichtlicher Anwendungsfall für diesen Post-Ticker besteht darin, dass er aktuelle Posts in einem tatsächlichen Header einer Blog-Post-Vorlage anzeigt. So können Sie das tun.

Speichern der Zeile in der Divi-Bibliothek

Speichern Sie zuerst die Zeile mit den Elementen, aus denen unser Post-Ticker besteht, in der Divi-Bibliothek. Sie können dies tun, indem Sie auf das Drei-Punkte-Symbol in der Zeile klicken und "In Bibliothek speichern" auswählen. Geben Sie dann dem Layout einen Namen und klicken Sie auf die Schaltfläche „In Bibliothek speichern“.

Hinzufügen der Post-Ticker-Zeile zur Header-Vorlage

Bearbeiten Sie die benutzerdefinierte Kopfzeile

Sobald die Zeile in der Bibliothek gespeichert wurde, können wir sie einem benutzerdefinierten Header hinzufügen. Stellen Sie für dieses Beispiel sicher, dass die Vorlage „Alle Beiträge“ zugewiesen ist. Klicken Sie dann auf , um die benutzerdefinierte Kopfzeile für diese Vorlage zu bearbeiten.

Zeile einfügen (Post-Ticker) aus Bibliothek

Klicken Sie im Kopfzeilen-Layout-Editor auf , um eine neue Zeile an der Stelle hinzuzufügen, an der der Post-Ticker angezeigt werden soll.

Wählen Sie im Modalelement Zeile einfügen die Registerkarte Aus Bibliothek hinzufügen aus. Suchen Sie die Tickerzeile des Blog-Posts, die Sie zuvor in der Bibliothek gespeichert haben, und wählen Sie sie aus.

Jetzt wird der Post-Ticker in der Kopfzeile angezeigt.

Präsentieren Sie verwandte Beiträge für die aktuelle Kategorie

Da dieser Post-Ticker nur in Blog-Posts angezeigt wird, können wir nur die Posts anzeigen, die sich auf die aktuelle Kategorie beziehen.

Zuerst müssen wir den Titeltext in unserem Textmodul auf „Ähnliche Beiträge:“ aktualisieren.

Öffnen Sie dann die Post-Slider-Einstellungen. Wählen Sie unter Eingeschlossene Kategorien die Option Aktuelle Kategorie aus.

Jetzt hat jeder Blog-Post einen Post-Ticker in der Kopfzeile, der verwandte Posts nach aktueller Kategorie anzeigt.

Ergebnis auf Blog-Post-Vorlage

Hier ist die automatische Animation in Aktion.

So können Sie auf die Navigationspfeile klicken, um zum nächsten und vorherigen Beitrag zu springen. Und wenn Sie auf den Beitragstitel klicken, gelangen Sie zu diesem Beitrag.

Und so sieht es auf Tablet und Telefon aus.

Abschließende Gedanken

Wie wir erfahren haben, können wir ganz einfach einen Blogpost-Ticker erstellen, indem wir das Design des Schiebereglermoduls von Divi vereinfachen und einige benutzerdefinierte Anpassungen an den Navigationspfeilen vornehmen. Und vergessen Sie nicht, dass Sie Stilanpassungen jederzeit einfach mit allen im Post-Slider integrierten Optionen vornehmen können. Hoffentlich wird dies für alle Blogger und Webentwickler nützlich sein.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!