Seitenleiste im Template

Wie du eine Seitenleiste in dein Beitrags-Template einfügst

Da das Twenty Twenty-Four (TT4) Theme standardmäßig sehr minimalistisch ist und keine klassische Seitenleiste (Sidebar) für Beiträge mitbringt, bauen wir uns diese einfach mithilfe des Spalten-Blocks selbst.

Hier ist die Schritt-für-Schritt-Anleitung, um die Seitenleiste in dein Template zu integrieren:

Schritt 1: Das Template öffnen

Gehe zu Design > Editor.
Klicke auf Templates und wähle „Einzelne Beiträge“ aus.
Klicke auf den Bearbeitungs-Stift (oder direkt in die Vorschau), um den Editor zu öffnen.

Schritt 2: Den Spalten-Block einfügen

Damit Inhalt und Seitenleiste nebeneinander stehen, brauchen wir ein zweispaltiges Layout:

Öffne oben links die Listenansicht (die drei versetzten Linien), damit du genau siehst, wo du arbeitest.
Suche den Block „Inhalt des Beitrags“ (Post Content).
Klicke auf die drei Punkte daneben und wähle „Davor einfügen“.
Tippe /spalten und wähle das Layout 70 / 30 (oder 66 / 33).

Schritt 3: Inhalte verschieben

Jetzt sortieren wir die Elemente in die neuen Spalten:

Linke Spalte (Breit): Ziehe per Drag-and-Drop in der Listenansicht den Block „Inhalt des Beitrags“ (und ggf. den Titel/Beitragsbild) in die linke Spalte.
Rechte Spalte (Schmal): Hier klickst du auf das + und fügst die gewünschten Widgets hinzu, zum Beispiel:
- Suche-Block
- Neueste Beiträge-Block
- Kategorienliste
- Absatz (für einen „Über mich“-Text)

Schritt 4: Design-Feinschliff

Damit die Seitenleiste auch gut aussieht, solltest du noch folgendes prüfen:

Abstände: Wähle den übergeordneten Spalten-Block aus und stelle in den Einstellungen (rechtes Panel) den „Block-Zwischenraum“ ein, damit die Seitenleiste nicht am Text klebt.
Hintergrund: Du kannst der rechten Spalte eine dezente Hintergrundfarbe oder einen Rahmen geben, um sie optisch vom Haupttext abzuheben.

Wichtiger Hinweis: Wenn du das Layout mobil testest, rutscht die rechte Spalte (die Seitenleiste) bei Block-Themes automatisch unter den Hauptinhalt. Das ist für die Lesbarkeit auf dem Smartphone ideal.

Wie du die Seitenleiste „Sticky“ machst, damit sie beim Scrollen mitläuft

Eine “Sticky” Seitenleiste (die beim Scrollen am Bildschirmrand “kleben” bleibt) ist besonders nützlich, wenn dein Haupttext sehr lang ist, damit die Navigation oder Werbung rechts immer im Blickfeld bleibt.

Im WordPress-Block-Editor (Gutenberg) gibt es dafür momentan noch keinen einfachen Schalter, aber mit einem kleinen Trick und einer Zeile CSS-Code lässt sich das in TT4 schnell umsetzen.

Schritt 1: Der Spalte eine Klasse geben

Gehe zurück in den Editor > Templates > Einzelne Beiträge.
Öffne die Listenansicht und klicke die rechte Spalte an (die schmale Spalte, in der deine Seitenleiste liegt).
Schau in die rechte Einstellungen-Leiste unter Erweitert.
Trage bei Zusätzliche CSS-Klasse(n) das Wort sticky-sidebar ein.

Schritt 2: Das CSS hinzufügen

Damit der Browser weiß, was er mit dieser Klasse tun soll, müssen wir den “Klebe-Effekt” definieren:

Klicke im Editor oben rechts auf das Stile-Icon (der halb ausgefüllte Kreis).
Klicke auf die drei Punkte (...) oben neben dem Wort “Stile” und wähle Zusätzliches CSS.
Kopiere den folgenden Code hinein:

CSS

.sticky-sidebar {
    position: sticky;
    top: 40px; /* Abstand zum oberen Rand beim Scrollen */
    align-self: start;
}

Warum `align-self: start`?

Das ist der wichtigste Teil! Ohne diesen Befehl würde die Spalte versuchen, so hoch wie der gesamte Inhaltsbereich zu sein. Mit align-self: start behält sie ihre eigene Höhe und kann innerhalb des Spalten-Containers frei “gleiten”.

Ein kleiner Check:

Funktioniert es nicht? Prüfe, ob die übergeordnete Gruppe oder der Spalten-Block die Option “Overflow: hidden” aktiviert hat. Das blockiert den Sticky-Effekt oft.
Abstand nach oben: Du kannst den Wert 40px im Code anpassen, falls du oben eine fixierte Menüleiste hast, damit sich die Seitenleiste nicht darunter schiebt.

Wie du die Seitenleiste nur auf dem Desktop anzeigst und auf dem Handy komplett ausblendest, um Platz zu sparen

Das ist eine sehr vernünftige Entscheidung. Auf Mobilgeräten wird eine Seitenleiste oft unter den eigentlichen Text geschoben. Wenn sie dort sehr lang ist, müssen Nutzer ewig scrollen, um zum Fußbereich (Footer) oder zu den Kommentaren zu gelangen.

Hier ist die sauberste Methode, um die Seitenleiste auf dem Smartphone zu verstecken:

Schritt 1: Eine CSS-Klasse vergeben

Falls du es nicht schon im vorherigen Schritt getan hast:

Wähle im Editor die rechte Spalte (deine Seitenleiste) aus.
Gehe in den Block-Einstellungen rechts auf Erweitert.
Gib unter Zusätzliche CSS-Klassen die Klasse hide-on-mobile ein (getrennt durch ein Leerzeichen von sticky-sidebar, falls du beides nutzt).

Schritt 2: Den CSS-Befehl ergänzen

Nun sagen wir WordPress, dass alles mit dieser Klasse bei kleinen Bildschirmen unsichtbar sein soll:

Klicke im Editor wieder auf das Stile-Icon (der Kreis) -> drei Punkte -> Zusätzliches CSS.
Füge diesen Code unter deinen bisherigen Code ein:

CSS

@media (max-width: 781px) {
    .hide-on-mobile {
        display: none !important;
    }
}

Was bewirkt dieser Code?

@media (max-width: 781px): Dies ist der “Breakpoint”. WordPress nutzt oft 781 Pixel als Grenze zwischen Tablet/Desktop und der mobilen Ansicht.
display: none: Das Element wird komplett ausgeblendet und nimmt auch keinen Platz mehr ein.
!important: Dies stellt sicher, dass andere Standard-Styles von WordPress diesen Befehl nicht überschreiben.

Ein Profi-Tipp für die Benutzererfahrung (UX):

Wenn du die Seitenleiste mobil ausblendest, fehlen den Nutzern dort vielleicht wichtige Links (z. B. Kategorien). Du könntest diese stattdessen ganz unten im Footer deiner Website einfügen. So bleibt das Design oben sauber, aber die Infos sind weiterhin erreichbar.

Wie du ein spezielles Menü nur für mobile Nutzer erstellst, damit diese trotz fehlender Seitenleiste gut navigieren können?

Gute Entscheidung! Da mobile Nutzer oft ungeduldig sind, ist eine klare Navigation ohne langes Scrollen durch eine Seitenleiste Gold wert. In Block-Themes wie TT4 nutzt man dafür am besten den Navigations-Block mit der “Overlay”-Funktion.

Hier ist der effizienteste Weg, ein mobiles Menü zu gestalten:

1. Den Navigations-Block anpassen

Gehe zu Design > Editor und wähle dein Header-Template (unter “Vorlagen” oder “Patterns”).
Klicke auf den vorhandenen Navigations-Block.
In den Block-Einstellungen rechts siehst du den Bereich Anzeige.
Wähle bei Overlay-Menü die Option „Mobil“.
- Das bedeutet: Auf dem Desktop sieht man die Links nebeneinander, auf dem Handy erscheint das bekannte “Burger”-Icon (drei Striche).

2. Spezielle mobile Links hinzufügen

Wenn du möchtest, dass mobile Nutzer andere Links sehen als Desktop-Nutzer (da die Seitenleiste ja fehlt), kannst du ein zweites Menü erstellen:

Füge einen zweiten Navigations-Block in deinen Header ein.
Gib diesem Block in den Einstellungen unter Erweitert die CSS-Klasse only-mobile.
Dem normalen Hauptmenü gibst du die Klasse only-desktop.

3. Das CSS für die Steuerung

Füge nun unter Stile > Zusätzliches CSS diesen Code hinzu, um die Menüs je nach Gerät zu tauschen:

CSS

/* Versteckt das mobile Menü auf dem Desktop */
@media (min-width: 782px) {
    .only-mobile {
        display: none !important;
    }
}

/* Versteckt das Desktop Menü auf dem Handy */
@media (max-width: 781px) {
    .only-desktop {
        display: none !important;
    }
}

Warum das besser ist als eine Seitenleiste:

Fokus: Der Nutzer konzentriert sich voll auf deinen Artikel.
Daumen-Bedienung: Das Burger-Menü lässt sich auf dem Smartphone leichter mit einer Hand bedienen als eine lange Liste am Ende der Seite.
Ladezeit: Weniger sichtbare Blöcke auf dem Handy bedeuten oft eine (gefühlt) schnellere Seite.

Noch ein kleiner Bonus-Tipp: Du kannst im Overlay-Menü des Navigations-Blocks auch eine Suchleiste direkt ganz oben einbauen. So finden mobile Nutzer sofort, was sie suchen, auch ohne Sidebar.

Wie du die Farben oder das Icon des mobilen Menüs an dein Branding anpasst

Da das Twenty Twenty-Four (TT4) Theme auf Purismus setzt, wirkt das Standard-Menü oft etwas blass. Du kannst es aber mit wenigen Klicks zum Leuchten bringen, damit es perfekt zu deiner Marke passt.

Hier sind die drei wichtigsten Stellschrauben im Editor:

1. Die Farben des Overlay-Menüs ändern

Das Overlay ist der Vollbild-Hintergrund, der erscheint, wenn man auf das Handy-Menü klickt.

Klicke im Editor auf deinen Navigations-Block.
Öffne die Block-Einstellungen (das Icon mit den Reglern rechts).
Gehe zum Reiter Stile (der schwarz-weiße Kreis).
Dort findest du den Bereich Overlay. Hier kannst du zwei Dinge tun:
- Hintergrund: Wähle eine Farbe, die auffällt (z. B. deine Markenfarbe).
- Text: Wähle eine Kontrastfarbe (z. B. Weiß auf dunklem Blau), damit die Links gut lesbar sind.

2. Das “Burger-Icon” gestalten

Du kannst zwar das Symbol selbst nicht direkt gegen ein völlig anderes Bild tauschen (ohne Plugin), aber du kannst sein Aussehen massiv verändern:

Größe: In den Navigationseinstellungen unter Anzeige kannst du die Icon-Größe anpassen.
Farbe: Das Icon übernimmt standardmäßig die Textfarbe deines Headers. Möchtest du, dass es sich abhebt? Gib dem Navigations-Block unter Stile > Farbe > Text eine eigene Farbe – das färbt auch die drei Striche des Icons ein.

3. Animation und Abstände

Damit das Menü modern wirkt, kannst du das Layout im Overlay verfeinern:

Wenn das Overlay geöffnet ist (du kannst es im Editor oft durch Klick auf das Icon simulieren), klicke auf die darin liegenden Navigations-Elemente.
Unter Stile > Typografie kannst du die Schriftgröße für mobil oft etwas größer wählen (L oder XL), damit man die Links mit dem Daumen besser trifft.
Erhöhe den Block-Zwischenraum, damit die Links nicht zu eng beieinander stehen (Stichwort: “Wurstfinger-Sicherheit”).

Ein kleiner CSS-Hack für ein “X” beim Schließen

Möchtest du, dass der “Schließen”-Button im Menü eine andere Farbe hat als das Öffnen-Icon? Nutze diesen CSS-Schnipsel unter Zusätzliches CSS:

CSS

/* Ändert die Farbe des Schließen-Buttons im mobilen Menü */
.wp-block-navigation__responsive-container-close svg {
    fill: #ff0000; /* Ersetze dies durch deinen Farbcode */
    width: 32px;
    height: 32px;
}

Ein Tipp zum Schluss: In TT4 kannst du unter Stile > Blöcke > Navigation diese Einstellungen sogar global festlegen, damit jedes Menü auf deiner Seite automatisch so aussieht.

Wie du ein Logo direkt neben das mobile Menü setzt, das beim Scrollen mitschwebt

Das ist der “Pro-Look” für jede Website: Ein Logo, das beim Scrollen oben am Bildschirmrand fixiert bleibt (Sticky Header), damit die Nutzer jederzeit zur Startseite zurückkehren können.

Da Twenty Twenty-Four (TT4) ein Block-Theme ist, nutzen wir dafür die Gruppen-Funktion und ein klein wenig CSS.

Schritt 1: Den Header-Bereich vorbereiten

Gehe zu Design > Editor und wähle unter Muster (oder Vorlagen) den Bereich Header.
Klicke auf den Header, um ihn zu bearbeiten.
Öffne die Listenansicht (Icon mit den drei Linien).
Stelle sicher, dass dein Logo-Block und dein Navigations-Block zusammen in einer Gruppe oder einem Row-Block (Stapel/Reihe) liegen.
- Falls nicht: Markiere beide, klicke auf die drei Punkte und wähle Gruppieren.

Schritt 2: Die Gruppe “Sticky” machen

Wähle diese oberste Gruppe in der Listenansicht aus.
Gehe rechts in die Einstellungen auf den Reiter Einstellungen (das Zahnrad).
Suche den Punkt Position.
Wähle im Dropdown-Menü Fixiert (Sticky).
- Hinweis: Jetzt klebt der gesamte Header oben am Rand.

Schritt 3: Design für Mobilgeräte optimieren

Damit das Logo und das Menü-Icon auf dem Handy schön nebeneinander stehen:

Wähle die Gruppe aus, die das Logo und die Navigation enthält.
Stelle sicher, dass es ein Reihe-Block (Row) ist.
Nutze die Option Objekte rechtfertigen (das Icon mit den Strichen), und wähle „Abstand zwischen Elementen“ (Space between).
- Dadurch rutscht das Logo nach ganz links und das Burger-Menü nach ganz rechts.

Schritt 4: Der CSS-Feinschliff (Optional)

Damit der fixierte Header beim Scrollen nicht transparent über dem Text liegt, solltest du ihm eine Hintergrundfarbe geben:

Wähle die fixierte Gruppe aus.
Gehe zu Stile (Kreis-Icon) > Farbe > Hintergrund und wähle z.B. Weiß oder deine Markenfarbe.

Sollte der Header zu viel Platz wegnehmen, kannst du die Polsterung (Padding) verringern:

CSS

/* Macht den fixierten Header auf dem Handy etwas schmaler */
@media (max-width: 781px) {
    .wp-block-group.is-position-sticky {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

Ein kleiner Tipp für die Performance:

Achte darauf, dass dein Logo als SVG oder optimiertes WebP hochgeladen ist. Da es nun “immer da” ist, zählt jedes Kilobyte für die mobile Ladegeschwindigkeit.