Beaver Builder – Spalte “Sticky” anzeigen

Inhaltsverzeichnis

Seit einigen Monaten bin ich nun fast zu 100% auf den Beaver Builder umgestiegen. Der ausschlaggebende Punkt war tatsächlich der “Pagebuilder Performance Test” den ich durchgeführt habe. Dieser hat recht deutlich gezeigt wie groß doch die Performance Unterschiede zwischen den einzelnen Pagebuildern sind und dass leider mein bisheriger Favorit – der Divi Builder hier nur einen Platz im unteren Mittelfeld belegen konnte.

Über den Beaver wird es in naher Zukunft einen sehr ausführlichen Test geben, trotzdem starte ich schon einmal mit kleineren Infos und Tipps die mir so während der täglichen Arbeit über den Weg laufen und bei denen ich der MEinung bin dass diese für euch genauso hilfreich sein können wie für mich.

Heute geht es um das Thema “Sticky Spalten” – klingt irgendwie im Deutschen nicht ganz rund oder irgendwie ungewohnt. “Sticky Sidebar klingt da schon vertrauter, aber es geht hier wirklich um eine Spalte / Modul die mit dem Beaver Builder erstellt worden ist.

Folgendes Beispielszenario Szenario: Wir möchten eine Seite mit dem Beaver Builder erstellen und hier auf der rechten Seite z.B. ein Inhaltsverzeichnis oder auch ein Button oder Angebote anzeigen das mit dem Text mitscrollt – also “Sticky” dargestellt wird. In meinem Fall übernimmt “Alf” hier die Sticky Position.

beaver spalte alf

Um die Spalte mit Alf nun mitscrollen zu lassen müssen wir 2 Schritte durchführen. Zum einen müssen wir der Spalte eine CSS ID geben und anschließend fügen wir ein kleines JS ein dass dann die entsprechende Sticky Funktion der CSS ID zuordnet – los gehts

1. CSS IDD für die Spalte vergeben

Wir öffnen dafür die “Einstellungen” der rechten Spalte (über den Schraubenschlüssel) und wählen das Tab “Erweitert” aus. Dort srollen wir zum Punkt ID und geben dort eine individuelle CSS Klasse ein – in unserem Fall sf_sticky

sticky id vergeben

Speichert das Ganze und schließt das Fenster.

Einbau des JavaScript Codes

Dafür öffnen wir links oben die Einstellungsoptionen des Beaver Builders für eine Seite und öffnen dort den Punkt “Layout CSS & JavaScript.

beaver optionen

Im Tab JavaScript (nicht CSS!) geben wir nun folgenden js Code ein:

jQuery(function() {
    var offset = jQuery("#sf_sticky").offset();
    var topPadding = 15;
    jQuery(window).scroll(function() {
        if (jQuery(window).scrollTop() > offset.top) {
            jQuery("#sf_sticky").stop().animate({
                marginTop: jQuery(window).scrollTop() - offset.top + topPadding
            });
        } else {
            jQuery("#sf_sticky").stop().animate({
                marginTop: 0
            });
        };
    });
});
sticky beaver

Das ganze speichern, veröffentlichen und schon ist eure rechte Spalte “Sticky”.

Schön ist diese Option z.B. auch wenn wir eine Seite erstellen und hier z.B. ein Inhaltsverzeichnis “mitscrollen” lassen wollen.

Viel Spaß beim testen und bleibt alle gesund!

Christian Pust
WordPress & Onlinemarketing Experte mit über 15 Jahren Erfahrung. Entwickler & CEO von Trackboxx – der Google Analytics Alternative.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Das könnte dich auch interessieren

Du benötigst Unterstützung bei deinem WordPress Projekt?

Dein Ansprechpartner
Christian