Sidebar Sticky Banner: Fixierte Box bei Scrolling mit CSS

In diesem Artikel möchte ich euch zeigen, wie ihr einen eigenen "Sticky Banner" also eine fixierte Box in eure Sidebar integrieren könnt. So könnt ihr in eurem Blog einen Werbebanner platzieren, der auch beim Scrollen permanent sichtbar bleibt. Hier in unserem Blog seht ihr das ganze in Aktion. Sofern du diesen Artikel auf einem Desktop-Gerät anschaust, siehst du, dass die rechte Box fixiert bleibt, wenn du scrollst.

 

CSS TUTORIAL

Fixierte Bannerbox in der Sidebar

1. Erstelle in deiner Blog-Layoutseite eine Content-Box, in dem du im FunnelBuilder das Element "Content-Box" auswählst.
2. Anschließend designst du die Box nach deinen Wünschen, in dem du Sektionen und Elemente hinzufügst.
3. Nun kopierst du den untenstehenden Code in die CSS des Elements "Content-Box". Achte bitte darauf, dass es 2 Codes gibt. Einmal für Desktop also "CSS" und einmal für Mobilgeräte "CSS (mobile Geräte).
4. Sobald du den Code eingefügt hast, klickst du auf Speichern und hast deine eigene Sticky Box.

 

CSS Code

CSS für Desktop

position: fixed;width: 300px;max-width: 100%;margin-bottom: 100px;

 

CSS (mobile Geräte)

position: inherit;width: 90%;margin: auto;margin-top: 90px;margin-bottom: 0px;

 

 

Hinweis: Klicke auf den jeweiligen Code um ihn automatisch in die Zwischenablage zu kopieren.