Kopfzeile, Fußzeile und Navigation - ArtInStack Documentation

Das Chrome Ihrer Website – obere und untere Leiste – wird auf jeder öffentlichen Seite angezeigt. ArtInStack unterteilt die Einstellungen in zwei Bereiche, die zusammenwirken:

Was Sie konfigurieren	Wo	Was es steuert
Menü-Links (URLs und Reihenfolge)	Einstellungen → Navigation	Welche Seiten siteweit in den Menüs erscheinen
Design von Kopf- und Fußzeile	Einstellungen → Kopf- und Fußzeile → Bearbeiten	Logo, Layout, Spalten, Social-Media-Symbole, Copyright, Newsletter, Warenkorb-Symbol

Der Kopf- und Fußzeilen-Editor ist ein separater visueller Builder (aus derselben Familie wie der Seiteneditor), dessen Geltungsbereich jedoch auf <header> oder <footer> beschränkt. Er verfügt über eine eigene Blockbibliothek – nicht über die Hero-, Galerie- oder Portfolio-Blöcke, die Sie auf Seiten verwenden.

Übersicht über die Funktionen

Registerkarte „Navigation“ – Stellen Sie Linklisten (interne Seiten oder externe URLs) zusammen, auf die Menüblöcke verweisen können.
Registerkarte „Kopf- und Fußzeile“ – Erstellen oder wählen Sie Vorlagen aus; mit Bearbeiten öffnen Sie den Vorlageneditor.
Vorlageneditor – Ziehen Sie Blöcke für Voreinstellungen, Layout sowie Kopfzeilenelemente oder Fußzeilenelemente per Drag & Drop; konfigurieren Sie diese mit Stil, Attr und Ereignisse in der rechten Seitenleiste (Interaktionen: Ereignisse und Interaktionen im Seiteneditor).
Website-Layout — Optionale themenweite Voreinstellungen, die das gesamte Styling von Kopf- und Fußzeile beeinflussen.

Architektur der Benutzeroberfläche

[Einstellungen → Navigation]
        → Menüpunkte (Daten für Navigationsmenü-Blöcke)

[Einstellungen → Kopf- und Fußzeile → Kopf- oder Fußzeile bearbeiten]
        → Arbeitsbereich des Vorlageneditors (Bereich Kopfzeile ODER Fußzeile)
        → Rechte Seitenleiste: Bearbeiten | Ebenen | Blöcke
              Block-Panel: Voreinstellungen, Layout, Kopf- und Fußzeilenelemente
        → Vorlage speichern → gilt für alle Seiten, die diese Standardeinstellung verwenden

Der Inhalt des Seitenkörpers stammt weiterhin aus Seiten → Bearbeiten – siehe Referenz zu Editorblöcken und Layout.

Teil 1 – Navigationsmenü (Einstellungen → Navigation)

Verwenden Sie diese Option, wenn Sie Links hinzufügen, entfernen oder neu anordnen möchten, die in Navigationsblöcken angezeigt werden.

Schritte zur Umsetzung

Öffne Einstellungen → Navigation.
Füge Einträge hinzu, die auf veröffentlichte Seiten oder externe URLs verweisen.
Ziehe die Einträge per Drag & Drop, um sie neu anzuordnen.
Speichere.

Block „Navigationsmenü“ (im Editor für Kopfzeilenvorlagen)

Wenn Sie einen Navigationsmenü-Block in eine Kopfzeilenvorlage einfügen, öffnen Sie Attr und wählen Sie aus, welches gespeicherte Menü dieser Block verwenden soll (Menü auswählen). Zum Zeitpunkt der Veröffentlichung fügt ArtInStack die aktiven Links aus Einstellungen → Navigation ein – Sie müssen nicht jeden Link für diesen Block manuell in die Vorlage eingeben.

Die Header-Voreinstellungen (Minimal, Standard, Zentriert, Mehrzeilig) fügen einen Navigationsmenü-Block mit Platzhalter-Links auf die Arbeitsfläche ein, damit Sie den Abstand beurteilen können. Verbinden Sie den Block in Attr mit einem echten Menü, bevor Sie sich auf die Live-Seite verlassen – die veröffentlichte Ausgabe verwendet dieses Menü, nicht die Platzhalter.

Wenn ein Menü-Link für Besucher einen 404-Fehler zurückgibt

Verlinken Sie nur auf veröffentlichte Seiten. Entwurfsseiten sind für nicht angemeldete Besucher nicht erreichbar.

Teil 2 – Editor für Kopf- und Fußzeilenvorlagen

Öffnen Sie den Editor

Einstellungen → Kopf- und Fußzeilen.
Wählen Sie eine Kopfzeilen- oder Fußzeilen-Vorlage aus (oder erstellen Sie eine).
Klicken Sie auf Bearbeiten.

Sie sehen eine kompakte Arbeitsfläche (Kopf- oder Fußzeilenbereich) und denselben Arbeitsablauf in der rechten Seitenleiste wie bei Seiten: Bearbeiten / Ebenen / Blöcke, dann Stil, Attribute, Ereignisse unter Bearbeiten.

Wie sich die Vorlagen-Arbeitsfläche von Seiten unterscheidet

	Seiteneditor	Editor für Kopf- und Fußzeilenvorlagen
Arbeitsflächen-Stamm	Ganze Seite	Einzelnes `<header>` oder `<footer>`-Bereich
Blockbibliothek	Heroes, Galerien, Produkte, …	Blöcke nur für Kopf- oder Fußzeile
Struktur	Mehrere gemeinsame Abschnitte	In der Regel ein Abschnitt → Zeilen → Spalten
Speichern	Pro Seite	Pro Vorlage (gilt überall dort, wo diese Vorlage verwendet wird)

Änderungen an einer gemeinsamen Standard-Kopf- oder Fußzeile wirken sich auf jede Seite aus, die diese verwendet – Vorschau auf der Startseite und einer Unterseite vor umfangreichen Bearbeitungen.

Layout-Blöcke (sowohl Kopf- als auch Fußzeile)

Verfügbar unter Blöcke → Layout (gleiches Prinzip wie bei Seiten: Abschnitt → Zeile → Spalte).

Block	Verwendung für
Abschnitt	Die Kopf- oder Fußzeilenleiste; Höhe und vertikaler Abstand unter Attr
Zeile	Horizontales Layout; maximale Breite, Abstand, Spaltenlayout
Abstandhalter	Fester vertikaler Abstand zwischen den Zeilen

Verwenden Sie Ebenen, wenn Sie eine Zeile oder einen Abschnitt unter anderen Inhalten hervorheben möchten.

Kopfzeilenvorlage – Voreinstellungen

Schnellstarts unter Blöcke → Voreinstellungen (nur Kopfzeilen-Editor):

Voreinstellung	Typisches Layout
Minimal	Logo links; Navigation + Schaltfläche für das mobile Menü in einer sich vergrößernden Spalte
Standard	Logo · Navigation + Hamburger-Menü · Warenkorb (drei Spalten)
Zentriert	Gleiche dreispaltige Struktur wie „Standard“, wobei die Navigation in der mittleren Spalte zentriert ist
Mehrzeilig	Obere Zeile: Logo + Seitentitel · Navigation · Warenkorb; zweite Zeile für sekundäre Links

Die Voreinstellungen enthalten eine Menüschaltfläche für Mobilgeräte zusammen mit der Navigation; die Links im mobilen Ausklappmenü werden bei der Veröffentlichung aus dem Navigationsmenü gefüllt, das Sie unter Attr ausgewählt haben.

Header-Vorlage – Elemente

Unter Blöcke → Header-Elemente:

Block	Verwendung für
Logo	Bild aus Medien oder Platzhalter; Link-URL (Standard `/`) und Höhe in Attr
Seitentitel	Text mit dem Namen des Studios neben oder anstelle des Logos
Navigationsmenü	Horizontales Menü, das mit einem Menü aus Einstellungen → Navigation verknüpft ist
Navigationslink	Einzelner manueller Link (benutzerdefinierte Bezeichnung + URL)
CTA-Button	Auffälliger Button (Stil/Größe unter Attr)
Social-Media-Symbole	Symbolzeile mit in Attr konfigurierten Netzwerken
Warenkorb	Warenkorb-Symbol im Shop, wenn der E-Commerce aktiviert ist (Farbe/Größe in Attr)

Konfigurieren Sie nach Auswahl des Blocks das Logo-Bild und die Link-URL, die Menüauswahl, die CTA-URL sowie die Social-Media-URLs in Attr.

Fußzeilenvorlage – Voreinstellungen

Unter Blöcke → Voreinstellungen (nur im Fußzeilen-Editor):

Voreinstellung	Typisches Layout
Einfache Fußzeile	Copyright links, Social-Media-Symbole rechts
Gestapelte Fußzeile	Zentriertes Logo, Links, Social-Media-Links, Copyright
Mehrspaltige Fußzeile	Mehrere Spalten für Links und Text
Newsletter-Fußzeile	Auf die Anmeldung ausgerichtetes Layout mit Spalten

Fußzeilenvorlage – Elemente

Unter Blöcke → Fußzeilenelemente:

Block	Verwendung für
Fußzeilenspalten	Mehrspaltige Hülle für Linkgruppen
Fußzeilenspalte	Eine Spalte innerhalb des Rasters
Fußzeilenlogo	Kleineres Logo für die Fußzeile; Link-URL (Standard `/`) und Höhe in Attr
Copyright	Textmuster mit automatischer Jahresangabe (`© {Jahr} …`) in Attr
Social-Media-Links	Reihe mit Social-Media-Symbolen in der Fußzeile
Newsletter	Benutzeroberfläche zur E-Mail-Erfassung (Überschrift, Webhook und Text in Attr)
AGB	Link zur Seite mit den AGB oder der Datenschutzerklärung

Website-Layout und Seitenüberschreibungen

Einstellungen → Website-Layout — Theme-Voreinstellungen, die sich möglicherweise auf die Breite der Kopfzeile oder den Stil der Fußzeile auf der gesamten Website auswirken.
Seiten → Bearbeiten → Seiteneinstellungen — Seitenbezogene Überschreibung der Kopf- und Fußzeilenvorlagen: Seiteneinstellungen und Überschreibungen.
Kurze Checkliste: Vorlagen-Manager · Ausführliche Anleitung: Arbeiten mit Seitenvorlagen.

Fehlerbehebung & häufige Fallstricke

Problem	Was zu überprüfen ist
Menü sieht auf der Live-Seite falsch aus	Reihenfolge auf der Registerkarte Navigation + auf welches Menü der Block Navigationsmenü unter Attr verweist
Die Kopfzeile hat sich nach einer Bearbeitung überall geändert	Erwartet – die Standard-Kopfzeilenvorlage wird gemeinsam genutzt; verwenden Sie eine Seitenüberschreibung für eine Landingpage
Im Block-Panel fehlen Hero-Blöcke/Galerien	Sie befinden sich im Vorlagen-Editor; diese Blöcke sind nur im Seiten-Editor verfügbar
Menü auf Mobilgeräten leer	Speichern Sie die Header-Vorlage; stellen Sie sicher, dass Navigation Elemente enthält und das Menü im Block Navigationsmenü ausgewählt ist; veröffentlichen Sie die Seite erneut
Das Logo führt nicht zur Startseite	Wählen Sie das Logo (oder Fußzeilenlogo) aus → Attr → legen Sie die Link-URL fest (Standard `/`) → Speichern Sie die Vorlage

Nächste Schritte & Validierung

Fügen Sie mindestens drei Einträge unter Einstellungen → Navigation hinzu.
Bearbeiten Sie die Standard-Kopfzeile → wenden Sie die Voreinstellung Minimal an → legen Sie das Logo fest (Bild + Link-URL) → verknüpfen Sie das Navigationsmenü in Attr mit Ihrem Menü → Speichern.
Bearbeiten der Standard-Fußzeile → Voreinstellung Einfache Fußzeile anwenden → Copyright und Social-Media-Links aktualisieren → Speichern.
Öffnen Sie zwei öffentliche URLs und vergewissern Sie sich, dass das gleiche Erscheinungsbild angezeigt wird.</footer></header></footer></header>