Einen WordPress-Header ohne Plugin erstellen
Ein Header ist der einzige Bereich einer Website, den jeder Besucher sieht, und der Bereich, den Themes meist hinter einem Einstellungsbildschirm mit neun Optionen verstecken. In Canvas ist ein Header ein Datensatz, den Sie im Editor aus Blöcken aufbauen. Diese Anleitung zeigt also einen Aufbau und keine Tour durch Kontrollkästchen.
Schritt 1: Was ein Header in Canvas ist
Ein Header ist ein Datensatz, der im WordPress-Admin wie eine Seite aufgelistet und im selben Block-Editor bearbeitet wird. Genau diese eine Entscheidung macht das Header-Plugin in Ihrem Stack überflüssig.
Andere Themes erstellen den Header an einer anderen Stelle. Blocksy und Astra führen ihre Header-Builder beide im Customizer, einem Einstellungsbereich neben der Website, getrennt vom Editor, in dem Sie Seiten verfassen. Unser Vergleich mit Blocksy stellt die beiden Ansätze nebeneinander.
Die Verschachtelung
Ein Header-Datensatz enthält einen Header Root. Dieser enthält einen Header Container, der festlegt, ob der Header begrenzt, über die volle Breite oder bei einem Breakpoint in der einen Form und anderswo in der anderen dargestellt wird. Der Container enthält Header Zones, und eine Zone ist eine Zelle in der Header-Zeile. Das Logo kommt in die eine, die Navigation in die nächste, ein Suchsymbol und ein Warenkorb in die letzte.
Insgesamt gibt es 22 Blöcke aus der Header-Familie, und auf einer typischen Website werden Sie davon vier oder fünf verwenden. Alles Übrige ist für den Tag da, an dem Sie eine Shop-Suche, einen Sprachlink oder einen Block mit Öffnungszeiten in der Ecke benötigen.
Dabei handelt es sich nicht um einen eigenen Editor. Wenn Sie Seiten in WordPress bearbeiten, können Sie auch einen Header bearbeiten, und dieselben Rückgängig-Funktionen, Block-Einstellungen und Tastenkürzel gelten.
Schritt 2: Den Header-Datensatz anlegen
Öffnen Sie die Liste Headers im Canvas-Menü und legen Sie einen neuen Eintrag an. Sie haben zwei realistische Ausgangspunkte.
Mit einem Muster starten
Fügen Sie ein Header-Muster ein, und Sie erhalten normale Blöcke, passend angeordnet und bereit, umgeordnet, umbenannt oder gelöscht zu werden. Header sind die größte Musterkategorie im Produkt, bei insgesamt 183 Mustern, sodass meist etwas in der Nähe der gewünschten Form dabei ist. Dies ist der schnellste Weg und der, den Sie bei einem ersten Aufbau wählen sollten.
Mit einer Demo beginnen
Wenn Sie eine der 88 Demo-Websites importiert haben, ist der Header bereits ein Datensatz auf Ihrer Website. Öffnen Sie ihn und ändern Sie ihn, oder duplizieren Sie ihn und probieren Sie es an der Kopie aus. Das Bearbeiten eines funktionierenden Headers vermittelt die Struktur schneller als eine leere Arbeitsfläche.
Geben Sie dem Datensatz einen Namen, der zeigt, wofür er gedacht ist, etwa Haupt-Header oder Landingpage-Header. Innerhalb eines Monats werden Sie drei davon haben, und die Namen sind das Einzige, woran Sie sie unterscheiden können.
Schritt 3: Zonen festlegen
Zonen übernehmen das Layout, sodass Sie sich kaum mit Ausrichtungsklassen herumschlagen müssen.
- Schieben Sie eine Zone an den Rand. Eine linke Zone für das Logo, eine mittlere Zone für das Menü und eine rechte Zone für die Aktionen ist die Anordnung, bei der die meisten Websites landen.
- Gruppieren Sie zusammengehörige Elemente. Ein Suchsymbol, ein Warenkorb und eine Schaltfläche in einer Zone bilden einen Cluster und werden mit einheitlichem Abstand als eine Gruppe platziert.
- Reihenfolge pro Breakpoint ändern. Die Zone, die auf dem Desktop an dritter Stelle steht, kann auf dem Smartphone an erster stehen, ohne einen zweiten Header-Datensatz.
- Zone auf eine Gerätestufe begrenzen. Legen Sie fest, dass eine Zone auf Geräten ohne Platz dafür übersprungen wird, sodass nichts nachträglich per CSS ausgeblendet werden muss.
- Fügen Sie einer Zone eigene Klassen hinzu, wenn Sie sie aus einem eigenen Stylesheet ansprechen möchten.
Erstellen Sie zuerst die Anordnung für den Desktop und lassen Sie sie unverändert, bis alle Teile vorhanden sind. Layoutentscheidungen fallen deutlich leichter, sobald echte Inhalte in der Zeile stehen.
Schritt 4: Die Teile hinzufügen
Füllen Sie nun die Zonen aus. Jede davon ist ein Block, und jeder hat einen Einstellungsbereich mit den Optionen, die dieser Block unterstützt.
- Header Logo. Ihr Logo, mit separaten Dateien für den Sticky-Zustand und den dunklen Zustand, sodass ein transparenter Header über einem dunklen Foto ohne Behelfslösung auskommt.
- Header Navigation. Das Hauptmenü mit Dropdowns und Mega-Menü-Panels. Es zeigt ein WordPress-Menü an, sodass Sie das Menü weiterhin dort verwalten, wo Sie es erwarten.
- Header Search. Ein Symbol, das ein Feld öffnet, oder ein Feld, das immer geöffnet ist, je nachdem, was dem Design besser entspricht.
- Header-Button. Der Call-to-Action mit den üblichen Einstellungen für Größe, Stil und Link. Einer überzeugt, drei sind nur Ballast.
- Header Cart. Der WooCommerce-Warenkorb mit Artikelanzahl und einer Dropdown-Zusammenfassung, für Online-Shops.
- Header Icon Link, Header Social und Header Info. Eine Telefonnummer, eine Reihe Social-Profile, ein kleiner Block mit Kontaktdaten, eine Adresse oder Öffnungszeiten.
Mega-Menüs, wenn eine Liste nicht ausreicht
Ein Mega-Menü ist ein eigener Datensatz, der aus Blöcken aufgebaut und vom Mega-Menü-Block ausgegeben wird. Dadurch öffnet ein Menüpunkt ein Panel über die volle Breite mit Spalten, Bildern und Schaltflächen. Mega Menu Column hält das Panel in einem Raster. Greifen Sie darauf zurück, wenn eine Kategorie tatsächlich eine Struktur hat, und nicht, um eine kleine Website überladen wirken zu lassen.
Schritt 5: Sticky, transparent und die Layout-Voreinstellungen
Das Verhalten stammt aus Voreinstellungen. Das sind Pakete mit Layout-Einstellungen, die Sie mit einem Klick anwenden und anschließend anpassen. Wählen Sie das gewünschte Verhalten und passen Sie danach beliebige Einstellungen an.
- Transparent. Kein Hintergrund, sodass alles hinter dem Header durchscheint. Kombinieren Sie sie mit der dunklen oder hellen Logo-Variante, damit der Schriftzug lesbar bleibt.
- Halbtransparent. Ein durchscheinender Hintergrund, durch den das Bild dahinter sichtbar bleibt und der Text lesbar ist. Meist die sicherere Wahl gegenüber einem unruhigen Foto.
- Schwebend, und schwebend halbtransparent oder schwebend klein, wobei der Header innerhalb der Seite mit Abstand platziert ist und die Fensterränder nicht berührt.
- Volle Breite und sticky. Erstreckt sich über die gesamte Breite des Ansichtsbereichs und bleibt beim Scrollen der Seite oben fixiert.
- Beim Hochscrollen fixiert. Der Header verschwindet vom oberen Rand, während Besucher nach unten scrollen, und kehrt zurück, sobald sie wieder nach oben scrollen. So erhalten lange Seiten wieder mehr Platz.
Die websiteweiten Einstellungen dahinter
Die Header-Optionen sind der größte Abschnitt der Theme-Optionen, mit 94 von insgesamt 533 Feldern, und sie betreffen Dinge, die kein einzelner Datensatz verwalten sollte: den Standard-Header, das Sticky-Verhalten, die Höhe, die Abstände und den Breakpoint für Mobilgeräte. Ein Demo-Import füllt alle Felder aus, und Sie ändern nur die, die Ihnen wichtig sind.
Schritt 6: Der Telefon-Header
Der Großteil des Traffics kommt über das Smartphone, prüfen Sie diesen Punkt also vor allen anderen. Die gute Nachricht: Es ist derselbe Datensatz.
- Neu anordnen statt neu bauen. Verschieben Sie das Logo in die Mitte, platzieren Sie den Umschalter links und eine Anruf-Schaltfläche rechts, alles über die Anordnung der Zonen.
- Lassen Sie weg, was nicht passt. Blenden Sie die Kontaktdaten oder die Social-Leiste nur auf größeren Bildschirmen ein. Sie auf einem Smartphone zusammenzuquetschen, hilft niemandem.
- Achten Sie auf große Tippflächen. Ein Menüschalter und ein Telefonsymbol sind die beiden Elemente, die Menschen beim Gehen antippen.
- Legen Sie den Breakpoint bewusst fest. Die Breite, bei der das Menü einklappt, ist eine Einstellung. Deshalb kann ein langes Menü früher einklappen als ein kurzes.
- Erwägen Sie ein Seitenpanel für das mobile Menü. Ein Seitenpanel ist ein Datensatz, der vom Rand her einblendet und Platz für ein vollwertiges Menü, ein Suchfeld und einen Button bietet.
Prüfen Sie es im Editor, bevor Sie veröffentlichen. Canvas stellt den Header in der Bearbeitungsansicht mit demselben Code dar wie für Besucher, sodass Sie das Layout für Smartphones bereits während des Aufbaus sehen.
Schritt 7: Weisen Sie ihn zu, für die gesamte Website oder pro Seite
Ein Datensatz bewirkt nichts, solange nicht etwas darauf verweist. Es gibt zwei Ebenen, und sie funktionieren bei jedem Rahmenelement gleich.
Der websiteweite Standard
Legen Sie den Standard-Header in den Theme-Optionen fest, dann verwenden ihn alle Seiten. Verfahren Sie genauso mit der Topbar, dem Design des Seitentitels und dem Footer. Diese Einstellung sorgt dafür, dass eine neue Seite sofort richtig aussieht, sobald Sie sie veröffentlichen.
Die Überschreibung pro Seite
Jede einzelne Seite kann alle diese Einstellungen über ihre eigenen Optionen überschreiben. Eine Kampagnen-Landingpage erhält einen transparenten Header und keine Topbar, die Kontaktseite behält die Standardversion. Dafür muss nichts dupliziert werden, und Sie müssen sich später nichts merken, denn die Überschreibung gilt auf der Seite, die sie betrifft.
Topbars
Eine Topbar ist ein eigener Datensatz mit eigenen Blöcken: einer Telefonnummer, Öffnungszeiten, einem Sprachumschalter, einer Ankündigung. Der Block Header Topbar platziert sie über der Header-Zeile. Da sie eigenständig ist, ändert sich ein Feiertagshinweis auf der gesamten Website, ohne den Header überhaupt zu öffnen.
Quellen
Wenn dieser Leitfaden etwas außerhalb von Canvas selbst beschreibt, finden Sie hier die offiziellen Seiten, die es dokumentieren.
- Bildschirm „Menüs“ unter Designwordpress.org · Hier werden WordPress-Menüs erstellt und den Positionen zugewiesen, die ein Theme anbietet
- Erfolgskriterium 2.5.8 verstehen: Zielgröße (Minimum)w3.org · Warum Tippziele mindestens 24 × 24 CSS-Pixel groß sein müssen
Wie es weitergeht
Zwei Leitfäden dazu, warum der Header die größere Frage bestimmt, und zum Builder selbst.
Häufige Fragen
Die vollständige FAQ beantwortet alle weiteren Fragen, und die Dokumentation beschreibt jede Einstellung im Detail.
Benötigen Sie einen zweiten Header für mobile Geräte?
In der Regel nicht, denn ein einziger Header-Datensatz von Canvas passt sich einem Smartphone selbstständig an. Zonen ordnen sich je Breakpoint neu an, und jede kann auf eine Gerätestufe beschränkt werden. So kann ein einziger Datensatz das Logo auf einem Smartphone zentrieren, die Kontaktdaten ausblenden und das Menü hinter einen Umschalter legen. Erstellen Sie einen zweiten Datensatz nur, wenn Sie tatsächlich ein anderes Design möchten, nicht um ein Layout zu reparieren.
Kann eine Seite einen anderen Header haben?
Ja, jede Canvas-Seite kann einen eigenen Header haben. Header, Topbars, Seitentitel und Footer haben jeweils einen seitenweiten Standard und eine seitenspezifische Überschreibung. So kann eine Kampagnen-Landingpage einen transparenten Header über einem Foto zeigen, während alle anderen Seiten den Standard behalten.
Ist das ein Widget-Bereich oder ein Menü?
Ein Canvas-Header ist keins von beiden: Er ist ein Datensatz, den Sie im Block-Editor bearbeiten, genau wie eine Seite, und das Logo, die Navigation, die Suche, der Warenkorb und die Buttons darin sind Blöcke mit eigenen Einstellungsbereichen. Ihre WordPress-Menüs bleiben WordPress-Menüs; der Block Header Navigation gibt eines davon aus.
Was passiert mit meinem Header, wenn meine Lizenz abläuft?
Ihre Website wird weiterhin genau so angezeigt wie heute. Ausgesetzt wird der Dienst: Updates, Demo-Importe, die CanvasAI Engine und die Bearbeitung von Premium-Blöcken werden pausiert, bis Sie Ihre Lizenz verlängern. Falls eine Lizenzprüfung unsere Server nicht erreichen kann, gilt eine Kulanzfrist von 14 Tagen.
Erstellen Sie Ihre nächste Website mit Canvas
Ob Einsteiger, Freelancer oder Agentur: Sie erhalten dieselben Blöcke und dieselben Demos. Beginnen Sie mit einer Website und erstellen Sie so viele, wie Sie benötigen, mit derselben Lizenz.