So erstellen Sie einen Lesefortschrittsbalken für Ihre Divi-Blog-Posts (ohne Plugin)

Das Hinzufügen einer Lesefortschrittsleiste (oder Bildlaufanzeige) zu Ihrer Blog-Post-Vorlage ist eine intelligente Möglichkeit, den Lesefortschritt eines Benutzers für einen bestimmten Artikel anzuzeigen. Die Idee ist, oben im Beitrag einen festen Fortschrittsbalken anzuzeigen, der direkt mit der Scroll-Position des Benutzers im Beitragsinhalt korreliert. Wenn der Benutzer den Artikel erreicht, beginnt sich der Fortschrittsbalken zu füllen. Wenn der Benutzer das Ende des Artikels erreicht, ist der Fortschrittsbalken zu 100% gefüllt.

In diesem Tutorial zeigen wir Ihnen, wie Sie einen Lesefortschrittsbalken für Divi-Blog-Posts erstellen, der intelligent genug ist, um zu wissen, wann der Benutzer (durch Scrollen) den eigentlichen Post-Inhalt startet und beendet, nicht die gesamte Seite. Dadurch wird der Lesefortschritt genauer angezeigt.

Wir zeigen Ihnen, wie Sie diesen Lesefortschrittsbalken mit dem Divi Theme Builder zu Divis Standard-Blogpost-Vorlage oder einer benutzerdefinierten Post-Vorlage hinzufügen.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden. Beachten Sie, wie der Fortschrittsbalken oben in der Beitragsvorlage fixiert ist. Der Fortschrittsbalken beginnt sich zu füllen, sobald der Benutzer den tatsächlichen Beitrags-/Artikelinhalt erreicht hat und endet, wenn der Benutzer den Beitragsinhalt beendet hat.

Laden Sie das Layout 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!

Um das Abschnittslayout in Ihren Divi Theme Builder zu importieren, navigieren Sie zum Divi Theme Builder.

Klicken Sie auf das Portabilitätssymbol.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird die Abschnittsvorlage im Divi Theme Builder angezeigt.

Kommen wir zum Tutorial, ja?

Teil 1: Importieren der vorgefertigten Vorlagen

Für dieses Tutorial verwenden wir einige vorgefertigte Vorlagen aus unserem sechsten Theme-Builder-Paket. Wir werden die Standard-Website-Vorlage importieren, die uns einen funktionierenden globalen Header gibt, in dem wir die Post-Info-Leiste hinzufügen. Und wir werden die Blog-Post-Vorlage importieren, um unsere Ergebnisse in einem Live-Post zu testen.

WICHTIG: Es wäre am besten, diese Vorlagen auf einer Test-Site zu importieren, damit Sie eine Live-Site nicht durcheinander bringen.

Importieren Sie die Standard-Website-Vorlage

Zuerst müssen Sie das vierte KOSTENLOSE Theme Builder Pack für Divi herunterladen. Entpacken Sie dann die Datei.

Navigieren Sie im WordPress-Dashboard zu Divi > Theme Builder. Klicken Sie dann oben rechts auf das Portabilitätssymbol. Wählen Sie im Portabilitäts-Popup die Registerkarte Import aus. Wählen Sie dann die JSON-Standarddatei für die Website-Vorlage aus dem heruntergeladenen Ordner und klicken Sie auf die Schaltfläche Importieren. Dadurch wird eine neue Standard-Website-Vorlage mit einer globalen Kopf- und Fußzeile importiert.

Importieren Sie die Beitragsvorlage

Wiederholen Sie diesen Vorgang, um die Beitragsvorlage aus demselben heruntergeladenen Ordner zu importieren. Öffnen Sie das Portabilitäts-Popup, wählen Sie die JSON-Datei der Post-Vorlage aus und klicken Sie auf die Schaltfläche Importieren. Dadurch erhalten Sie eine Beitragsvorlage, die allen Beiträgen auf Ihrer Website zugewiesen ist, zusammen mit der Standardkopfzeile und Fußzeile.

Global in der Kopfzeile der Beitragsvorlage deaktivieren

Wir werden unsere dynamische Post-Infoleiste zum Header der Post-Vorlage hinzufügen. Da wir die Post-Info-Leiste jedoch nur in der Post-Vorlage haben möchten, müssen wir global in der Kopfzeile deaktivieren, damit unsere Leiste nicht allen Kopfzeilen der gesamten Site hinzugefügt wird. Um Global im globalen Header zu deaktivieren, öffnen Sie das Einstellungsmenü im globalen Header und wählen Sie „Global deaktivieren“.

Jetzt sollte der Header grau mit der Aufschrift „Custom Header“ sein. Wenn Sie fertig sind, klicken Sie auf das Bearbeitungssymbol, um die Kopfzeilen-Layout-Vorlage zu bearbeiten.

Entwerfen des Lesefortschrittsbalkens

Abschnitt und Zeile hinzufügen

Erstellen Sie im Kopfzeilen-Layout-Editor einen neuen regulären Abschnitt unter dem aktuellen Abschnitt, der die Kopfzeile enthält.

Fügen Sie dann dem Abschnitt eine einspaltige hinzu.

Abschnittseinstellungen

Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

• Padding: 0px oben, 0px unten

Zeileneinstellungen

Nachdem die Abschnittseinstellungen hinzugefügt wurden, öffnen Sie die Einstellungen für die Zeile und aktualisieren Sie Folgendes:

• Hintergrundfarbe: #2b2b2b

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%
• Padding: 0px oben, 0px unten

Erstellen der Bildlaufleiste mit einem Teilermodul

Der Fortschrittsbalken wird allmählich breiter, um den leeren Container/die leere Zeile zu belegen. Um dies zu erstellen, verwenden wir ein Trennmodul mit einer benutzerdefinierten Hintergrundfarbe. Sobald wir den Teiler so gestaltet haben, wie der Fortschrittsbalken aussehen soll, fügen wir den Code hinzu, der erforderlich ist, damit der Teiler zum richtigen Zeitpunkt beim Scrollen auf der Seite breiter wird.

Trennmodul hinzufügen

Erstellen Sie ein neues Trennmodul innerhalb der Spalte.

Deaktivieren Sie dann die Sichtbarkeit des Teilers. Wir werden stattdessen eine Hintergrundfarbe hinzufügen, die als Fortschrittsbalkenfarbe dient. Aktualisieren Sie Folgendes:

• Teiler anzeigen: NEIN
• Hintergrundfarbe links: #ff4349
• Hintergrund mit Farbverlauf rechts: #fe7f47
• Verlaufsrichtung: 90deg

Aktualisieren Sie auf der Registerkarte Design die Höhe des Fortschrittsbalkens:

• Höhe: 20px

Geben Sie auf der Registerkarte "Erweitert" dem Trenner eine benutzerdefinierte CSS-ID wie folgt:

• CSS-ID: scrollBar

Wir benötigen dies, um die Bildlaufleiste später für die Funktionalität mit jQuery zu verwenden.

Fortschrittsbalken-Prozentzählerbezeichnung hinzufügen

Fügen Sie ein Textmodul unterhalb des Trennmoduls hinzu, um das Label für den Prozentzähler des Fortschrittsbalkens hinzuzufügen.

Fügen Sie dann den folgenden HTML-Code zum Textkörperinhalt hinzu:

<p>Reading Progress: <span></span></p>

Die span Tags sind hier wichtig, da wir jQuery verwenden werden, um die span Tags mit dem Prozentzähler aufzufüllen.

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Textschriftart: Heebo
• Schriftstärke des Textes: Fett
• Textschriftart: TT
• Text Textfarbe: #ffffff
• Text Textgröße: 13px
• Text Buchstabenabstand: 3px
• Textzeilenhöhe: 1em

Aktualisieren Sie dann die linke Auffüllung ein wenig:

• Polsterung: 10px übrig

Unter der Registerkarte Erweitert geben Sie dem Textbaustein eine absolute Position in der Mitte der Spalte/Zeile. Dadurch wird sichergestellt, dass es keinen Platz im Dokument einnimmt und innerhalb der Leiste vertikal zentriert bleibt.

• Position: Absolut
• Ort: Linke Mitte

Bevor Sie das Textmodul verlassen, fügen Sie eine CSS-Klasse hinzu, damit wir sie mit unserem jQuery-Code ansprechen können.

• CSS-Klasse: et-progress-label

Hinzufügen des jQuery-Codes

Um dem Fortschrittsbalken die magische Funktionalität zu verleihen, die er benötigt, müssen wir den erforderlichen jQuery-Code hinzufügen.

Fügen Sie dazu unter dem Textbaustein einen neuen Codebaustein hinzu.

Fügen Sie dann den folgenden Code ein:

<script>
(function($) {
    $(document).ready(function(){
        var winHeight = $(window).height();
        var $scrollBar = $('#scrollBar');
        var $progressLabel = $('.et-progress-label p span');   
        var $postContent = $('.et-post-content');
        $scrollBar.css('width', 0);
        $progressLabel.html('0%');
        $(window).scroll(function(){
            var postContentHeight = $postContent.height();          
            var postContentStartPosition = $postContent.offset().top;
            var winScrollTop = $(window).scrollTop();
            var postScrollTop = postContentStartPosition - winScrollTop;
            var postScrollableArea = postContentHeight - winHeight;
            var postScrollPercentage = Math.abs((postScrollTop/postScrollableArea)*100);
            if (postScrollTop > 0) {
                $scrollBar.css('width', 0);
                $progressLabel.html('0%');
            } else if (postScrollTop < 0 && postScrollTop > -postScrollableArea) {
                $scrollBar.css('width', (postScrollPercentage + '%'));
                $progressLabel.html( Math.round(postScrollPercentage) + '%');
            } else if (postScrollTop < -postScrollableArea) {
                $scrollBar.css('width', '100' + '%');
                $progressLabel.html('100%');
            }
        });
    });
})( jQuery );
</script>    

Und für den letzten Schritt müssen wir unserer Sektion eine feste Position geben. Wir haben dies als letztes gespeichert, da dadurch der Abschnitt hinter den obigen Abschnitten mit dem Kopfzeileninhalt ausgeblendet wird.

Öffnen Sie die Abschnittseinstellungen für den Abschnitt, der den Fortschrittsbalken enthält, und aktualisieren Sie Folgendes:

• Position: Behoben
• Z-Index: 998

Öffnen Sie dann die Einstellungen des oberen Abschnitts mit dem Kopfzeileninhalt und aktualisieren Sie den Z-Index wie folgt:

• Z-Index: 999

Jetzt wird der Fortschrittsbalken zunächst hinter dem oberen Teil der Kopfzeile verborgen. Wenn der Benutzer dann im Beitrag nach unten scrollt, wird er oben auf der Seite fixiert angezeigt.

Vergessen Sie nicht, die Änderungen zu speichern.

Hinzufügen des Selektors (CSS-Klasse) zum Post-Content-Modul in der Vorlage für den Textbereich.

Im Moment wird der Code geschrieben, um ein Element mit der Klasse „et-post-content“ als Hauptinhalt des Beitrags zu erkennen.

Da wir eine benutzerdefinierte Vorlage für den Textkörper des Beitrags verwenden, müssen wir diese CSS-Klasse auf das Beitragsinhaltsmodul der Vorlage anwenden, damit unser Code den Lesefortschritt angemessen berechnen kann, wenn der Benutzer im Beitrag nach unten scrollt.

Öffnen Sie dazu die Body-Area-Vorlage der Post-Vorlage im Theme-Builder.

Öffnen Sie die Einstellungen für das Post-Content-Modul und fügen Sie die folgende CSS-Klasse hinzu:

• CSS-Klasse: et-post-content

Speichern Sie dann die Änderungen.

Wenn Sie fertig sind, speichern Sie die Änderungen am Layout und am Theme Builder.

Endergebnis

Um das Ergebnis in Aktion zu sehen, öffnen Sie einen Live-Beitrag auf Ihrer Website. Stellen Sie sicher, dass der Beitrag genügend Inhalt hat, damit Sie auf der Seite nach unten scrollen können.

Verwenden des Lesefortschrittsbalkens in Divis Standard-Beitragsvorlage (keine benutzerdefinierte Vorlage)

Wenn Sie keine benutzerdefinierte Textkörpervorlage für den Beitrag verwenden und den Lesefortschrittsbalken zur Standardvorlage für Blogbeiträge in Divi hinzufügen möchten, müssen Sie lediglich eine einzelne CSS-Klasse im Code aktualisieren.

Stellen Sie zunächst sicher, dass der benutzerdefinierte Textbereich der Beitragsvorlage gelöscht wurde.

Öffnen Sie dann das benutzerdefinierte Header-Vorlagenlayout und aktualisieren Sie das Codemodul, indem Sie diese Codezeile ersetzen…

 var $postContent = $('.et-post-content');

mit diesem…

 var $postContent = $('.entry-content');

Die Klasse „entry-content“ zielt auf das div in der Standard-Post-Vorlage ab, das den Inhalt des Blog-Posts enthält (mit Ausnahme des Titels, des vorgestellten Bildes, der Metadaten oben und der Kommentare unten, die die tatsächliche Länge des Artikels verzerren würden).

Ergebnis

Hier ist das Ergebnis eines Beitrags, der die Standard-Beitragsvorlage verwendet.

Abschließende Gedanken

Dieser Lesefortschrittsbalken ist viel intelligenter als Ihr typischer Scroll-Indikator, der den Fortschritt des Scrollens durch die gesamte Seite/das gesamte Dokument anzeigt. Diese Leiste zielt nur auf den tatsächlichen Beitragsinhalt ab, den der Benutzer lesen wird, und bietet eine genaue Darstellung des Lesefortschritts. Dies ist ideal für Blogs, die dazu neigen, lange Texte und Kommentare zu haben. Ich würde mich auch hervorragend für Online-Kurse einsetzen, um diesen Studenten zusätzliche Motivation zu geben, weiterzumachen!

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

Danke schön!