Trick # 500 | Dieser Beitrag beinhaltet 1769 Wörter. – Geschätzte Lesezeit: ca. 9 Minuten.
Heute – zum Anlass des 500. Beitrags aus der Praxis von Dr. Code – stellen wir ein Tutorial zur Verfügung, mit welchem sich ganz einfach eine Lesefortschrittsanzeige auf der Divi-Website erstellen lässt. Sie besteht aus einem Balken, der auf 100 Prozent anwächst, je weiter in einem Beitrag gescrollt wird. Das hilft Ihren Leserinnen und Lesern abzuschätzen, wieviel Content sie schon bewältigt haben und soll sie motivieren, weiter auf der Seite zu bleiben.
Sinnvollerweise wenden Sie diese Fortschrittsanzeige in einem Template für Ihre Blog-Posts an. Wir empfehlen, ein solches via den Theme-Builder des Divi-Themes zu erstellen. Die Fortschrittsanzeige können Sie entweder in einem Header-Template oder in einem Content-Template anlegen; abhängig davon, wo der Fortschrittsbalken angezeigt werden soll.
Wir erklären Ihnen den Aufbau in der Folge Step by Step:
- Platzieren Sie eine neue Sektion an der gewünschten Stelle und wählen Sie in der Folge eine neue einspaltige Zeile.
- Bearbeiten Sie die neu erstellte Sektion, wechseln Sie auf den «Design»-Tab und legen Sie den Innenabstand (unter «Zwischenräume») oben und unten auf 0px fest.
- Nun bearbeiten Sie die Divi-Zeile. Legen Sie die Hintergrundfarbe im Tab «Inhalt» fest. Diese Farbe wird später als Hintergrundfarbe des Fortschrittbalkens angezeigt.
- Wechseln Sie in der Divi-Zeile auf den Tab «Design». Dort können Sie unter «Grösse einstellen» den Spaltenabstand auf «1» festlegen. Bei der «Breite» und der «Maximalen Breite» geben Sie je 100% ein.
- Immer noch im Tab «Design» der Divi-Zeile legen Sie nun den Innenabstand unter «Zwischenräume» oben und unten auf 0px fest.
- Nun kommt der eigentliche Fortschrittsbalken hinzu: Dazu fügen Sie der Divi-Zeile ein «Teiler-Modul» hinzu.
- In dessen Einstellungen deaktivieren Sie die Anzeige des «Unterteilers» im Tab «Inhalt». Gleich unterhalb können Sie die Farbe des Teilermoduls festlegen. Diese Farbe wird später zur Vordergrundsfarbe der Fortschrittsanzeige; sie sollten also nicht dieselbe Farbe verwenden, wie in Schritt 3.
- Im «Design»-Tab des Teilers klicken Sie auf «Grösse einstellen» und legen die Höhe auf 20px fest.
- Und schliesslich wechseln Sie in den Tab «Erweitert» des Teiler-Moduls und vergeben die CSS-ID «scrollBar» – unter «CSS-ID und Klassen» im Textfeld «CSS-ID».
- Nun bestimmen Sie, welcher Lesefortschritt künftig gemessen werden soll. Ist es die ganze Sektion (oder Zeile) mit Ihrem Beitragsinhalt? Oder ist es «nur» der Inhalt im Modul «Inhalt posten»? Wählen Sie und bearbeiten Sie das gewünschte Element. Wechseln Sie in den Tab «Erweitert» und fügen Sie unter «CSS-ID und Klassen» die Klasse «et-post-content» ins Textfeld «CSS-Klasse» ein.
Nun fügen Sie der Sektion, in welcher sich der Teiler befindet, ein Code-Modul hinzu. Kopieren Sie den nachfolgenden Scriptcode und speichern ihn in das Code-Modul:
<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>Wenn alles richtig funktioniert, sollte Ihr Fortschrittsbalken nun so aussehen:
Scrollen Sie ein wenig auf und ab, um die Bewegung zu erkennen.
Nun können Sie die ganze Sektion mit dem Lesefortschrittbalken so fixieren, wie Sie möchten. Dafür müssen Sie die Einstellungen der Sektion noch einmal öffnen und zum Beispiel im Tab «Erweitert» die «Scroll Effects» auf «Stick To Top» setzen.
Zusätzlich den Lesefortschritt in Prozenten anzeigen
Vielleicht genügt Ihnen der obige Hack schon; ansonsten setzen wir noch einen drauf:
- Fügen Sie der Sektion, welche Sie oben erstellt haben, noch ein Text-Modul hinzu. Wechseln Sie in die Text- oder HTML-Ansicht Ihres Editors und fügen Sie folgende Zeile ein:
<p>Lesefortschritt: <span></span></p>- Im «Design»-Tab des Textmoduls legen Sie die Schriftgrösse auf 13px und die Zeilenhöhe auf 1em fest. Je nach Farbe des Fortschrittbalkens definieren Sie auch eine Schriftfarbe, welche im Vergleich zum Balken kontrastiert.
- Nun wechseln Sie auf den Tab «Design» des Text-Moduls und legen unter «Zwischenräume» den linken Innenabstand auf 10px fest.
- Danach klicken Sie auf den Tab «Erweitert», danach auf «Arbeitsstelle» (oder «Position») und definieren «Absolut» als Positionierung und wählen im folgenden Auswahlfeld «Mitte links».
- Weiterhin im Tab «Erweitert» geben Sie unter «CSS-ID und Klassen» «et-progress-label» ins Textfeld CSS-Klasse ein.
Mit der Textergänzung zeigt sich der Lesefortschrittsbalken nun so:
Lesefortschritt:
Scrollen Sie ein wenig auf und ab, um die Bewegung zu erkennen.
OK: War recht umfangreich. Aber so als Jubiläumsbeitrag …
Werbung
Werbung
