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.

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

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.

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
            });
        };
    });
});

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!

Kommentar verfassen

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

154 SEO Tools - die ultimative Liste!

Abonniere jetzt unseren Newsletter und lade dir die Liste kostenlos herunter!

Alles klar! Prüfe jetzt deinen Posteingang um die Anmeldung abzuschließen.