Natürlich könnte man den Block Website-Untertitel manuell im Header einbauen, aber einfacher ist es, eine passende Vorlage mit Untertitel zu suchen und diese dann einzubauen.

Dazu lohnt sich ein Blick auf die zur Verfügung stehenden Header-Vorlagen, die Sie im Block-Inserter in der Kategorie Header finden.

Block-Inserter > Header > Vorlagen erkunden — Die Kategorie Header im Block-Inserter

In diesem Beitrag nehme ich Text-only header with tagline (tagline ist der englische Begriff für den Website-Untertitel), aber Sie können auch eine andere nehmen. So gibt es auch Vorlagen für Header mit einem Hintergrundbild, das man natürlich durch ein eigenes Bild ersetzen kann.

Tipp: Viele der im Block-Inserter gelisteten Vorlagen finden Sie auch im Vorlagen-Verzeichnis auf WordPress.org. Dort können Sie auch testen, wie die Vorlagen sich auf schmaleren Bildschirmen verhalten.

Schritt 2: Den Header öffnen

Header und Footer werden in Block-Themes als Template-Teile bezeichnet und im Website-Editor im Bereich Vorlagen verwaltet.

Am einfachsten ist das Öffnen des Headers zur Bearbeitung im Website-Editor mit der Befehlspalette:

Starten Sie die Befehlspalette:
- Per Maus klicken Sie im Browse-Modus oben auf die Lupe.
- Per Tastatur mit Strg bzw. cmd + k.
Geben Sie das Wort »Header« ein.
Bestätigen Sie die Auswahl mit Enter.

Danach landen Sie auf der Detail-Seite zum Header. Um ihn zu bearbeiten, klicken Sie links im dunklen Bereich auf den kleinen Bleistift oder in der Live-Vorschau irgendwo auf den Header.

Die folgende Abbildung zeigt den Header zur Bearbeitung im Website-Editor.

Der Header ist zur Bearbeitung im Website-Editor geöffnet — Der alte Header zur Bearbeitung im Website-Editor

Tipp: Man kann die Breite des Headers direkt im Website-Editor ändern und so auch das Icon für die mobile Overlay-Navigation prüfen.

Schritt 3: Die Header-Vorlage einfügen

In diesem Schritt löschen Sie alle Blöcke im Header und fügen dann die neue Vorlage ein:

Blenden Sie links die Listenansicht mit der Block-Struktur ein.
Markieren Sie in der Listenansicht den umgebenden Gruppe-Block, und löschen Sie ihn.
Klicken Sie in der oberen Werkzeugleiste auf den Block-Inserter.
Wechseln Sie auf das Register Vorlagen.
Öffnen Sie die Kategorie Header.
Suchen Sie eine Vorlage, die Ihnen gefällt.
Klicken Sie auf die gewünschte Vorlage, um sie einzufügen.

Die folgende Abbildung zeigt den Header im Website-Editor mit der Vorlage Text-only header with tagline.

Header mit Untertitel im Website-Editor — Die neue Header-Vorlage mit Website-Untertitel im Website-Editor

Tipp: Mit dem Plugin Twentig können Sie dem Header unten mit einem leichten Schatten versehen: Markieren Sie den umgebenden Gruppe-Block und aktivieren Sie im Block-Inspektor bei den Stilen im Bereich Shadow die gleichnamige Option. Der Header oben im Beitragsbild zeigt das Ergebnis.

Schritt 4: Die Navigation anpassen

Wie man die Navigation in Block-Themes anpasst, wird im Beitrag TT3 anpassen: 03. Die Navigation bearbeiten ausführlich geschildert.

In diesem Schritt möchte ich nur kurz darauf hinweisen, dass der Navigationsblock seit WordPress 6.4 auch Buttons enthalten kann.

Und noch ein Tipp:

Am Desktop und auf Tablets ist der Menüpunkt Startseite nicht nötig, da der Titel der Website auch als Link zur Homepage dient.
Im Overlay-Menü für schmalere Bildschirme hingegen wäre ein Link zur Startseite sinnvoll, da der Titel der Website dort nicht erscheint.

Desktop-Menü ohne Startseite — Das Desktop-Menü ohne den Menüpunkt Startseite

Overlay-Menü mit Startseite — Das Desktop-Menü ohne den Menüpunkt Startseite

Das Plugin Twentig hilft auch bei der Umsetzung dieser Idee, denn damit können Sie einzelne Menüpunkte wie den Link zur Startseite am Desktop und auf Tablets ausblenden, sodass er nur im mobilen Overlay-Menü erscheint.

Beiträge zu Twenty Twenty-Four

Es geht los mit einigen allgemeinen Infos:

Zur Anpassung des Themes gibt es u. a. folgende Beiträge:

Und die Reihe wird laufend erweitert:

Mehr gibt’s per Schlagwort Twenty Twenty-Four.

Es gibt auch zwei Videokurse zu Twenty Twenty-Four.

Geschrieben von

Peter Müller

Sie kennen mich vielleicht von meinen Büchern und Videokursen. Meine Spezialität ist es, trockene und komplizierte Sachverhalte auf einfache und unterhaltsame Weise darzustellen. Website: pmueller.de

Kommentare

4 Antworten zu „Twenty Twenty-Four: Header anpassen“

Moritz

4. Februar 2024

Hallo Peter,

vielen Dank für Eure Website. Die ist grandios!

Könntet ihr mir erklären, wie ich die Auswahl der Social Icons in der Navigation in Twenty Twenty-Four individuell erweitern kann? Ich möchte neben Instagram auch auf mein Profil einer anderen Werbsite durch ein Icon aufmerksam machen, welches sich aber nicht in der Auswahl des Themes befindet. Wie kann ich ein Icon (SVG) hochladen und in die Navigation einbinden? Oder wie kann ich einen Button so verändern, dass er nur noch durch das gewünschte Icon dargestellt wird?

Herzlichen Dank!
Moritz

Antworten
1. Peter Müller
  
  5. Februar 2024
  Vielen Dank für das Kompliment zur Website!
  
  Zu deinem Problem gibt es meines Wissens (noch?) keine wirklich saubere Lösung. Auf Anhieb fallen mir nur einige Workarounds ein:
  - Social Icons > Link-Symbol. In der Dokumentation zum Social-Icons-Block gibt es eine Liste der verfügbaren Icons, aber man kann die Social Icons leider nicht um eigene Icons erweitern. Für nicht gelistete Dienste gibt es das Ketten-Symbol „Link“, dem man eine beliebige URL zuweisen kann. Vorteil: Symbol ist im Social-Icons-Block und somit im Navigations-Block. Nachteil: Ketten-Symbol statt Logo in der Navigation.
  - Plugin The Icon Block. Mit diesem genialen Plugin von Core-Contributor Nick Diego kann man ganz einfach beliebige SVG-Icons einfügen und verlinken. Vorteil: Dein SVG-Icon. Nachteil: Der Icon-Block ist nicht Teil des Navigations-Blocks. Für Desktop und Tablet kann man den Icon-Block mit einem umgebenden Zeile-Block rechts neben dem Navigations-Block platzieren, aber mobil bleibt er dann neben dem Burger-Symbol stehen.
  - Button. Buttons können momentan leider nur Text enthalten. Vorteil: Der Button kann im Navigations-Block sein. Nachteil: Kein Icon.
  Voraussichtlich in WordPress 6.6 kommt die Möglichkeit, das mobile Menü zu gestalten, und vielleicht kann man dann ja auch einen Icon-Block in die mobile Navigation integrieren.
  
  Update
  Hier ist noch eine Idee, die ein bisschen aufwändiger ist, aber ein ich denke praktikables Ergebnis liefert. Ich habe das versuchsweise mal umgesetzt:
  - einstieg-in-wp.org, mit dem XING-Icon von Font Awesome
  Schau dir das mal an. Wenn es dir gefällt, hier kommt das ToDo:
  - Zunächst wie oben in Punkt 2 beschrieben das SVG-Icon mit The Icon Block neben dem Navigationsblock einbauen.
  - Mit dem sehr vielseitigen Plugin Block Visibility (auch von Nick Diego) kann man das Icon für mobile ausblenden (mit der Bedingung »Browser & Device«).
  - Dann im Navigationsblock den Link als Menüpunkt mit der Beschriftung XING hinzufügen, entweder als Individueller Link (nur im selben Tab) oder als Button (auf Wunsch auch in einem neuen Tab).
  - Um diesen Menüpunkt für Desktop und Tablet auszublenden, sodass er nur im mobilen Menü erscheint, nutzt man das Plugin Twentig, da Block Visibility für einen Menüpunkt leider nicht zur Verfügung steht.
  Man braucht also insgesamt drei Plugins: The Icon Block für das SVG-Icon, Block Visibility zum Ausblenden des SVG-Icons für mobil und Twentig für das Ausblenden des Menüpunktes mit dem Link/Button zum Dienst an Desktop und Tablet.
  
  Diese drei Plugins sind bei mir aber auf allen Websites mit Block-Themes sowieso installiert, da sie echt klasse und auch in vielen anderen Situationen nützlich sind.
  Antworten
  1. Moritz
    
    5. Februar 2024
    
    Vielen Dank für die schnelle Antwort Peter und die guten Ideen!
    
    Ich finde deinen Ansatz für einen Workaround unter Update ganz clever. Und im Footer kann man ja dann immer noch ein Icon dauerhaft einblenden. Denke, dass ich es entweder so oder nur mit The Icon Block lösen werde.
    
    Ich bin sehr gespannt, was in WordPress 6.6. für neue Gestaltungs Möglichkeiten im Hinblick auf das mobile Menü entsehen werden. Sehe auch generell noch an der ein oder anderen Stelle Verbesserungspotential 😉
    
    Antworten
    1. Peter Müller
      
      5. Februar 2024
      
      Wenn du mit deiner Site gerade anfängst, schaue dir unbedingt mal das Plugin Twentig genauer an.
      
      Besonders die Sache mit dem Portfolio Custom Post Type scheint mir wie gemacht für deine Website. Damit kann man für sein Portfolio Beiträge erstellen, die dann im Backend im Menü „Portfolio“ erscheinen. Das ist flexibler als statische Seiten und übersichtlicher als alles in „Beiträge“ zu packen.
      
      Auf der Demo Starter Website Portfolio ist das umgesetzt. Kann man im Backend einfach per Klick importieren (am besten auf einer Test-Website z. B. mit tastewp.com) und dann genauer untersuchen.
      
      Antworten