# Ein Header- und Footer-Builder aus echten Blöcken URL: https://canvaswp.com/de/header-builder/ Updated: 2026-11-03 Header-Builder Header, Footer, Topbars, Mega-Menüs, Seitenpanels, Seitentitel und Hero-Bereiche sind Einträge, die Sie im Block-Editor gestalten und anschließend der gesamten Website oder einer einzelnen Seite zuweisen. [Sehen Sie sich die Demos an](https://canvaswp.com/de/demos/) [So funktioniert der Editor](https://canvaswp.com/de/editor/) Zuletzt aktualisiert am 3. November 2026 So wird ein Header aufgebaut ## Blöcke so verschachtelt, wie Sie es erwarten Ein Header-Datensatz enthält einen Header Root. Der Root enthält einen Container, und ein Container enthält Zones. Eine Zone ist eine Zelle in der Header-Zeile: das Logo in der einen, das Menü in der nächsten, ein Suchsymbol und ein Warenkorb in der letzten. ### Zonen übernehmen das Layout Eine Zone legt fest, was wo steht. Schieben Sie eine nach rechts, gruppieren Sie eine Suche und einen Warenkorb zu einem Cluster, oder lassen Sie eine Zone schlicht, wenn Sie den Markup-Code möglichst im Hintergrund halten möchten. - Zonen ordnen sich je Breakpoint neu an, sodass ein Eintrag Desktop, Tablet und Smartphone abdeckt - Jede Zone kann auf eine Gerätestufe beschränkt werden und auf allen anderen nicht im Markup erscheinen - Zusätzliche Klassen für eine Zone, wenn Sie sie über Ihr eigenes CSS ansprechen möchten [Alle Blöcke in der Bibliothek](https://canvaswp.com/de/blocks/) ### Die 22 Header-Blöcke #### Header Root Der Header selbst. Alles andere ist darin verschachtelt. #### Header Container Ein Breiten-Container, mit dem ein Header je nach Breakpoint eingerahmt, vollbreit oder beides sein kann. #### Header Zone Eine Zelle in der Kopfzeile. Zonen nehmen die Bestandteile auf und bestimmen, wo sie platziert werden. #### Header Logo Ihr Logo mit separaten Dateien für die fixierte und die dunkle Variante. #### Header Navigation Das Hauptmenü mit Dropdowns und Mega-Menü-Panels. #### Header Search Ein Suchsymbol, das ein Feld öffnet, oder ein Feld, das immer geöffnet ist. #### Header Cart Der WooCommerce-Warenkorb mit Artikelanzahl und einer aufklappbaren Übersicht. #### Header Social Eine Reihe von Social-Icons aus den Profilen, die Sie einmal festlegen. #### Header Button Ein Call-to-Action-Button mit den üblichen Einstellungen für Größe, Stil und Link. #### Header Icon Link Ein einzelnes Symbol, das auf beliebige Ziele verlinkt, etwa auf eine Telefonnummer oder eine Kontoseite. #### Header Info Ein kleiner Block mit Kontaktdaten, einer Adresse oder Öffnungszeiten. #### Header Shop Search Eine Produktsuche für Shops, auf Ihren Katalog beschränkt. #### Header Topbar Platziert einen Topbar-Eintrag oberhalb der Header-Zeile. #### Mega Menu Column Eine Spalte in einem Mega-Menü-Panel, damit ein Panel echte Layouts aufnehmen kann. Layout-Voreinstellungen ## 7 Voreinstellungen als Ausgangspunkt Ein Preset ist ein Bündel von Layout-Einstellungen, das Sie mit einem Klick anwenden. Wählen Sie das gewünschte Verhalten und passen Sie danach in den Block-Einstellungen beliebige Werte an. ### Transparent Kein Hintergrund, damit alles, was hinter dem Header liegt, durchscheint. ### Halbtransparent Ein transluzenter Hintergrund, durch den das Bild dahinter sichtbar bleibt und der Text gut lesbar ist. ### Schwebend Der Header schwebt innerhalb der Seite, mit Abstand an allen Kanten. ### Schwebend und halbtransparent Schwebend angeordnet, auch mit transparentem Hintergrund. ### Schwebend, klein Ein schwebender Header in reduzierter Höhe. ### Volle Breite, fixiert Erstreckt sich über die volle Breite des Viewports und bleibt beim Scrollen der Seite fixiert. ### Sticky beim Scrollen nach oben Der Header verlässt den oberen Rand, wenn Besucher nach unten scrollen, und kehrt zurück, sobald sie wieder nach oben scrollen. Wiederverwendbare Bausteine ## Topbars, Mega-Menüs und Seitenpanels sind ebenfalls Datensätze Gestalten Sie jeden Header einmal, legen Sie ihn als Standard der Website fest und überschreiben Sie ihn dann auf den Seiten, die etwas anderes brauchen. ### Topbars Eine Topbar ist ein eigener Datensatz mit eigenen Blöcken: eine Telefonnummer, Öffnungszeiten, ein Sprachumschalter, ein Angebot. Der Block Header Topbar platziert sie oberhalb der Header-Zeile. Weisen Sie eine global zu und überschreiben Sie sie pro Seite. In 12 von 88 Demos ist eine Topbar enthalten, die Sie bearbeiten können. ### Mega-Menüs Ein Mega-Menü ist ein Datensatz, den Sie als Blöcke gestalten und mit dem Mega-Menü-Block ausgeben. Ein Menüpunkt öffnet dann einen Bereich in voller Breite, der Spalten, Bilder, Buttons oder beliebige andere Blöcke enthalten kann. Mega Menu Column keeps the panel on a grid. 5 demos ship one. ### Seitenpanels Ein Seitenpanel ist ein Bereich, der vom Bildschirmrand hereingleitet, etwa für ein sekundäres Menü, einen Warenkorb, ein Kontaktformular oder eine Auswahl an Details, die sonst den Header überladen würden. 6 Demos enthalten ein Seitenpanel, das bereits mit einem Auslöser verknüpft ist. Die Zuweisung eines Eintrags ist ein Feld: Wählen Sie das Standard-Seitenpanel, die Kante, aus der es kommt, ob es die Seite verschiebt oder darüber schwebt und wie der Auslöser aussieht. Topbars, Mega-Menüs und Footer werden auf die gleiche Weise zugewiesen. Header-Optionen ## 94 Felder, der größte Abschnitt in den Theme-Optionen Die Theme-Optionen enthalten die websiteweiten Header-Einstellungen, die kein einzelner Datensatz besitzen sollte. Ein Demo-Import setzt sie alle für Sie, und Sie ändern nur die, die Ihnen wichtig sind. - 94 von 533 Theme-Optionen-Feldern gehören zum Header - Legen Sie den Standard-Header fest und überschreiben Sie ihn dann auf einzelnen Seiten - Sticky-Verhalten, Höhe, Abstände und mobile Breakpoints - Jedes Feld ist in den Referenzartikeln dokumentiert [Alle 533 Theme-Optionen](https://canvaswp.com/de/features/#options) **Theme-Optionen, Header.** Das Panel selbst, auf einer laufenden Website aufgenommen. Muster ## 40 Header-Muster als Ausgangspunkt Fügen Sie ein Muster ein, und Sie erhalten normale Blöcke, die Sie neu anordnen, umbenennen und löschen können. Nichts ist gesperrt, und nichts ist ein Screenshot eines Layouts, das Sie nicht erreichen können. - 40 Header-Muster, mehr als in jeder anderen Kategorie - 16 Footer-Muster für das untere Ende der Seite - 183 Muster insgesamt, eingeordnet in 17 Kategorien - Eingefügt über den Muster-Tab des Einfügers, den Sie bereits verwenden [Muster nach Kategorie](https://canvaswp.com/de/editor/#patterns) Footer-Builder ## Footer und Copyright-Leisten sind eigene Datensätze Der Footer funktioniert genau wie der Header. Ein Footer-Datensatz enthält die Spalten, und ein Copyrights-Datensatz enthält die schmale Leiste darunter. So können Sie den rechtlichen Hinweis auf der gesamten Website ändern, ohne das darüberliegende Design zu verändern. ### Sechs Blöcke und 17 Optionen Footer About für den Firmentext, Footer Contacts für Adresse und Telefon, Footer Instagram für einen Feed, Footer Widget Area für alles, was ein Widget leisten kann, Widget Links für eine übersichtliche Spalte mit Links und Copyrights für die untere Leiste. - Einen Footer global oder pro Seite zuweisen, wie beim Header - Ein separater Copyright-Eintrag für die Leiste darunter - 16 Footer-Muster als Ausgangspunkte - Im Bearbeitungsbereich als Vorschau angezeigt, während Sie die Seite erstellen **Theme-Optionen, Footer.** 17 websiteweite Felder hinter den Footer-Datensätzen. Seitentitel ## 4 Stile, oder gestalten Sie Ihren eigenen Das Band unter dem Header ist eine eigenständige Gestaltungsfläche mit 57 Optionen dahinter und einer seitenspezifischen Überschreibung auf jeder Seite, die Sie veröffentlichen. **Theme-Optionen, Seitentitel.** 57 Felder, der drittgrößte Bereich im Produkt. ### Standard, Mini, Template oder Benutzerdefiniert Default ist die Standardleiste. Mini ist eine kompakte Version für Unterseiten. Template wählt eines der benannten, spezialisierten Layouts. Custom rendert einen Seitentitel, den Sie selbst aus Blöcken erstellt haben. - Page Title, Heading, Subtitle, Breadcrumbs and Buttons blocks - Ein seitenübergreifender Standardwert, den jede einzelne Seite überschreiben kann - Hintergrund, Höhe, Ausrichtung und Breadcrumbs lassen sich alle einstellen [Seitentitel in der Funktionsübersicht](https://canvaswp.com/de/features/#page-titles) Heroes und Slider ## Im Template über einen Slot-Block platziert Heroes und Slider sind eigene Datensätze, genau wie Header. Ein Slot-Block steht im Block-Template und bindet den Hero oder Slider ein, der der gerade aufgerufenen Seite zugewiesen ist. - Hero-Einträge und Slider-Einträge, beide aus Blöcken erstellt - Die Blöcke Hero Slot und Slider Slot liegen im Template, nicht in Ihren Inhalten - Eine Vorlage gilt für jede Seite, jeweils mit eigenem Einstieg - 12 der 88 Demos liefern einen Slider, den Sie bearbeiten können [Heroes und Slider](https://canvaswp.com/de/features/#heroes) Im Editor ## Sie gestalten den Header dort, wo Sie ihn auch sehen Slot-Blöcke übertragen Header, Topbar, Seitentitel, Hero-Bereich und Footer in den Bearbeitungsbereich, sodass eine Seite beim Öffnen wie die fertige Seite wirkt und nicht wie ein Kasten mit Absätzen. Eine Seite im Block-Editor, bei der Header und Footer den Inhalt umrahmen, und zwar durch denselben Code, der sie auch für Besucher darstellt. ### Ein Renderer Der Header, den Sie in der Arbeitsfläche sehen, wird vom selben Code gezeichnet, der ihn auch für Besucher ausgibt, daher gibt es keine separate Vorschau, die synchron gehalten werden muss. ### Global oder pro Seite Legen Sie für die Website einen Standard-Header, eine Topbar, einen Seitentitel, einen Hero-Bereich und einen Footer fest und überschreiben Sie dann jeden dieser Bereiche auf einzelnen Seiten über deren eigene Einstellungen. ### Von Grund auf responsiv Zonen lassen sich je Breakpoint neu sortieren und auf eine Gerätestufe beschränken, sodass Sie das Layout für das Smartphone im Editor prüfen, bevor es jemand anderes sieht. [Alles, was der Editor kann](https://canvaswp.com/de/editor/) Fragen ## Über den Builder Die restlichen Antworten finden Sie in den [vollständigen FAQ](https://canvaswp.com/de/faq/) und in der [Dokumentation](https://docs.canvaswp.com/how-to-build-a-header). **Benötigen Sie einen zweiten Header für mobile Geräte?** Ein einziger Canvas-Header deckt meist auch mobile Geräte ab, denn Zonen werden je Breakpoint neu angeordnet, und jede kann auf eine Gerätestufe beschränkt werden. Ein Header-Datensatz kann das Logo auf dem Smartphone in die Mitte setzen, die Kontaktdaten ausblenden und das Menü hinter einen Schalter verschieben. Legen Sie einen zweiten Datensatz nur an, wenn Sie tatsächlich ein anderes Design möchten, nicht um ein Layout zu korrigieren. **Kann eine Seite einen anderen Header verwenden?** Ja, Header, Topbar, Seitentitel und Footer in Canvas haben jeweils eine websiteweite Standardeinstellung und eine seitenspezifische Überschreibung, sodass eine Landingpage einen transparenten Header und eine Topbar nur mit Logo haben kann, während der Rest der Website seine eigenen Einstellungen behält. **Ist ein Header ein Widget-Bereich oder ein Menü?** Ein Canvas-Header ist keines von beidem: Er ist ein Datensatz, den Sie im Block-Editor bearbeiten, genau wie eine Seite. Die Navigation, das Logo, die Suche, der Warenkorb und die Schaltflächen darin sind Blöcke mit eigenen Einstellungsfeldern. **Was passiert mit meinem Header, wenn meine Lizenz abläuft?** Wenn eine Canvas-Lizenz abläuft, werden Ihr Header und der Rest Ihrer Website weiterhin genauso angezeigt wie heute. Pausiert wird der Service: Updates, Demo-Importe, Funktionen der CanvasAI Engine und die Bearbeitung von Premium-Blöcken werden eingestellt, bis Sie verlängern. Falls eine Lizenzprüfung unsere Server nicht erreicht, gilt eine Schonfrist von 14 Tagen. **Kann ich den Website-Editor weiterhin verwenden?** Ja, Canvas basiert auf echten Block-Vorlagen, daher bleiben Vorlagen und Vorlagenteile dort, wo WordPress sie ablegt, und ein Header-Datensatz wird durch einen Block in die Vorlage eingefügt. [Lesen Sie, wie der Editor funktioniert](https://canvaswp.com/de/editor/).