Lesefortschritt:

Ein Browser-Back-Button für die Divi-Website

3. April 2024 | CSS-Stylesheet, Divi-Theme, Scripts

Dieser Beitrag beinhaltet 467 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.

Auf den ersten Blick könnte eine Extra-Browser-Back-Taste ein wenig unnötig erscheinen, zumal alle modernen Browser über eine Art Zurück-Schaltfläche verfügen. Nun: es gibt dennoch ab und an Anwendungsmöglichkeiten für die eigene Browser-Back-Taste. Wir zeigen Ihnen hier, wie Sie sowas einrichten.

Beginnen Sie mit dem Hinzufügen eines Button-Moduls zu Ihrer Seite. Schreiben Sie den gewünschten Text der Schaltfläche ins Textfeld des Buttons. Das kann so einfach sein wie «Zurück» oder «Zurückgehen» oder was immer Sie wollen.

Sobald die Schaltfläche zu Ihrem Layout hinzugefügt wurde wechseln Sie auf den Tab «Erweitert» und danach auf «CSS ID & Klassen». Dort sehen Sie ein Eingabefeld namens «CSS-ID». Geben Sie in dieses Feld den Text «browser-back-button» ein.

Nun, da Sie das Divi-Button-Modul platziert und die CSS-ID dem Modul hinzugefügt haben, können Sie das folgende Code-Snippet kopieren. Es verwendet das Standardverhalten des Browsers, um eine Seite zurück zu gehen. Fügen Sie den Scriüt-Code dem <head>-Bereich Ihrer Website hinzu – im Backend unter Divi/Theme-Optionen/Integration:

<script>
    jQuery(document).ready(function() {

        jQuery("#browser-back-button").attr('href', '#');

        jQuery("#browser-back-button").click(function(e) {
            // prevent default behavior
            e.preventDefault();
            // Go back 1 page
            window.history.back();
        });
    }); 
</script>

Das wars schon. Nebenan sehen Sie den Back-Button in Betrieb:

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This