Lesefortschritt:

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

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

Trick # 332 | 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

Links auf der Divi-Website stylen

Im Divi-Theme lässt sich von Haus aus die Farbe der dargestellten Links definieren - jedoch ist damit mit Customizing auch schon Schluss. Beim Webdesign werden damit Links ab und an zu diskret dargestellt. Das lässt sich mit minimalem Aufwand ändern.

Werbung

 

Pin It on Pinterest

Share This