Sticky Header mit jedem FSE-Theme für WordPress

Alle schimpfen über das neue Blockediting, hat man den Eindruck. Insbesondere suchen viele User nach Wegen, altgewohnte Bestandteile wie eine Seitenleiste oder die beliebten Sticky-Header zu realisieren. Es gibt einige Anleitungen mit CSS-Code im Netz zu finden, den man im Customizer eingeben muss, die Ergebnisse sind aber alles andere als zufriedenstellend. Dabei ist es so einfach. Es gibt für alles einen Block, so wie es seit Jahren für alles ein Plugin gibt.

Will man eine Sidebar oder jedes andere Element fixieren, genügt der Sticky-Block.

Beim Durchlesen der Beschreibung dämmerte es mir erst noch nicht richtig, doch dann kam ich durch bloßes Ausprobieren darauf, wie man den Sticky Block am besten einsetzt. So muss man für eine mitscrollende Sidebar nicht das ganze Element in den Sticky Block packen, sondern vielleicht nur ein oder zwei am unteren Ende, die sichtbar in der Bildschirmmitte bleiben sollen. Zum Beispiel eine Newsletteranmeldung oder eine Werbeanzeige. Da es in diesem Artikel aber um den bewährten Sticky Header geht, folgt hier nun die bebilderte Kurzanleitung.

Wir rufen die Frontseite oder jede andere Seite auf und klicken auf „Webseite bearbeiten“. Nun klicken auf die Listenansicht und schon öffnet sich links ein weiteres Fenster.

Der Sticky Block muss nun in das Template für den Header eingefügt werden. Falls wir ihn noch nicht über den Pluginbereich im Dashboard installiert haben, klicken wir oben auf das PLUS zur Blockauswahl und geben „Sticky“ in der Suche ein. Schon wird uns das Teil zur Installation vorgeschlagen und wir können gleich weitermachen.

So und nun schieben wir den Block an die richtige Stelle.

Nach dem Hinzufügen muss er ganz oben platziert werden. Dann muss seitlich versetzt die Gruppe mit dem Header darunter geschoben werden, wie man es von Untermenüpunkten aus dem klassischen Menu kennt, das es nun ja auch nicht mehr gibt.

Fertig. Aber es gibt noch ein paar Punkte zu beachten. Der Hintergrund des Headers sollte nicht transparent sein. Wir müssen eine Farbe definieren, auch dann wenn es weiss sein soll. Sonst schiebt sich beim Scrollen der Content hässlich übereinander und produziert ziemlich unansehnlichen Buchstabensalat.

Wir klicken auf die drei Punkte der Gruppe in der Listenansicht, die den Header enthält und wählen „weitere Einstellungen anzeigen“ aus. Dann bezieht sich die Farbauswahl im rechten Seitenfenster auf die Gruppe. So – jetzt sind wir fertig und beim nächsten Mal, wenn wir wissen, wie es funktioniert und der Header nicht zu groß und farbig ist, sind es wirklich nur ein paar Klicks – kein CSS, kein Gefummel an Childthemes, um unser Standardtheme nach unseren Wünschen zu gestalten. Viel Spaß mit Sticky Block, das wir noch ausführlich erklären werden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.