Kopfbereich, Fußbereich und Navigation
Erstellen Sie Menüs unter Einstellungen → Navigation und gestalten Sie dann Kopf- und Fußbereich-Vorlagen unter Einstellungen → Kopf- & Fußbereich → Bearbeiten – der Vorlagen-Editor verwendet eine eigene Blockbibliothek für Logo, Menüs, Fußbereichsspalten und Newsletter, die seitenweit angewendet wird, sofern keine Seiteneinstellungen eine Seite überschreiben.
Ihr Website-Chrome – obere und untere Leiste – erscheint auf jeder öffentlichen Seite. ArtInStack teilt die Arbeit in zwei Bereiche auf, die Hand in Hand gehen:
| Was Sie konfigurieren | Wo | Was es steuert |
|---|---|---|
| Menülinks (URLs und Reihenfolge) | Einstellungen → Navigation | Welche Seiten in Menüs seitenweit erscheinen |
| Design von Kopf- & Fußbereich | Einstellungen → Kopf- & Fußbereich → Bearbeiten | Logo, Layout, Spalten, Social Media, Copyright, Newsletter, Warenkorb-Symbol |
Der Editor für Kopf- & Fußbereich ist ein separater visueller Builder (verwandt mit dem Seiten-Editor), 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.
Funktionsübersicht
- Registerkarte „Navigation“ – Verwalten Sie Linklisten (interne Seiten oder externe URLs), auf die Menü-Blöcke verweisen können.
- Registerkarte „Kopf- & Fußbereich“ – Erstellen oder wählen Sie Vorlagen aus; Bearbeiten öffnet den Vorlagen-Editor.
- Vorlagen-Editor – Ziehen Sie Voreinstellungen (Presets), Layout und Header-Elemente oder Footer-Elemente per Drag-and-Drop; konfigurieren Sie diese über Stil, Attr und Ereignisse in der rechten Seitenleiste (Interaktionen: Ereignisse und Interaktionen im Seiten-Editor).
- Website-Layout – Optional themaweite Voreinstellungen, die das allgemeine Styling von Kopf- und Fußbereich beeinflussen.
Architektur der Benutzeroberfläche
[Einstellungen → Navigation]
→ Menüelemente (Daten für Navigationsmenü-Blöcke)
[Einstellungen → Kopf- & Fußbereich → Kopf- oder Fußbereich bearbeiten]
→ Leinwand des Vorlagen-Editors (Kopf- ODER Fußbereich)
→ Rechte Seitenleiste: Bearbeiten | Ebenen | Blöcke
Blöcke-Panel: Voreinstellungen, Layout, Header-/Footer-Elemente
→ Vorlage speichern → gilt für alle Seiten, die diesen Standard verwenden
Der Inhalt des Seitenkörpers stammt weiterhin aus Seiten → Bearbeiten – siehe Referenz zu Editor-Blöcken und Layout.
Teil 1 – Navigationsmenü (Einstellungen → Navigation)
Verwenden Sie dies, wenn Sie Links hinzufügen, entfernen oder neu anordnen müssen, die in Navigationsblöcken angezeigt werden.
Umsetzungsschritte
- Öffnen Sie Einstellungen → Navigation.
- Fügen Sie Elemente hinzu, die auf veröffentlichte Seiten oder externe URLs verweisen.
- Ziehen Sie sie zum Neuordnen an die gewünschte Position.
- Speichern.
Navigationsmenü-Block (im Header-Vorlagen-Editor)
Wenn Sie einen Navigationsmenü-Block in einer Header-Vorlage platzieren, ö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 Live-Links aus Einstellungen → Navigation ein – Sie müssen nicht jeden Link manuell in der Vorlage für diesen Block eingeben.
Header-Voreinstellungen (Minimal, Standard, Zentriert, Mehrzeilig) platzieren einen Navigationsmenü-Block mit Platzhalter-Links auf der Leinwand, damit Sie den Abstand beurteilen können. Verknüpfen Sie den Block vor der Veröffentlichung der Website in Attr mit einem echten Menü – die veröffentlichte Ausgabe verwendet dieses Menü, nicht die Platzhalter.
Wenn ein Menülink für Besucher einen 404-Fehler ausgibt
Verlinken Sie nur auf veröffentlichte Seiten. Entwurfsseiten sind für abgemeldete Besucher nicht erreichbar.
Teil 2 – Vorlagen-Editor für Kopf- und Fußbereich
Editor öffnen
- Einstellungen → Kopf- & Fußbereich.
- Wählen Sie eine Kopf- oder Fußbereichs-Vorlage aus (oder erstellen Sie eine).
- Klicken Sie auf Bearbeiten.
Sie sehen eine kompakte Leinwand (Kopf- oder Fußbereichsband) und denselben Workflow in der rechten Seitenleiste wie bei Seiten: Bearbeiten / Ebenen / Blöcke, gefolgt von Stil, Attr und Ereignisse unter Bearbeiten.
Wie sich die Vorlagen-Leinwand von Seiten unterscheidet
| Seiten-Editor | Vorlagen-Editor für Kopf-/Fußbereich | |
|---|---|---|
| Leinwand-Root | Ganze Seite | Einzelner <header>- oder <footer>-Bereich |
| Blockbibliothek | Hero-Bereiche, Galerien, Produkte, … | Nur Kopf- oder nur Fußbereichs-Blöcke |
| Struktur | Mehrere Abschnitte üblich | Normalerweise ein Abschnitt → Zeilen → Spalten |
| Speichern | Pro Seite | Pro Vorlage (gilt überall dort, wo diese Vorlage verwendet wird) |
Änderungen an einem gemeinsamen Standard-Kopf- oder Fußbereich wirken sich auf jede Seite aus, die diesen verwendet – zeigen Sie die Startseite und eine Unterseite in der Vorschau an, bevor Sie umfangreiche Änderungen vornehmen.
Layout-Blöcke (sowohl für Kopf- als auch für Fußbereich)
Verfügbar unter Blöcke → Layout (gleiches Prinzip wie bei Seiten: Abschnitt → Zeile → Spalte).
| Block | Verwendung für |
|---|---|
| Abschnitt | Das Kopf- oder Fußbereichsband; Höhe und vertikales Padding in Attr |
| Zeile | Horizontales Layout; maximale Breite, Abstand, Spaltenlayout |
| Abstandhalter | Fester vertikaler Abstand zwischen Zeilen |
Verwenden Sie Ebenen, wenn Sie eine Zeile oder einen Abschnitt unter anderen Inhalten auswählen müssen.
Kopfbereich-Vorlage – Voreinstellungen
Schnellstarts unter Blöcke → Voreinstellungen (nur Header-Editor):
| Voreinstellung | Typisches Layout |
|---|---|
| Minimal | Logo links; Navigation + Mobil-Menüschaltfläche in einer wachsenden Spalte |
| Standard | Logo · Navigation + Hamburger-Menü · Warenkorb (drei Spalten) |
| Zentriert | Gleiche drei Spalten wie Standard, mit zentrierter Navigation in der mittleren Spalte |
| Mehrzeilig | Erste Zeile: Logo + Website-Titel · Navigation · Warenkorb; zweite Zeile für sekundäre Links |
Voreinstellungen enthalten eine Mobil-Menüschaltfläche zusammen mit der Navigation; Links im mobilen Menü werden bei der Veröffentlichung aus dem in Attr ausgewählten Navigationsmenü gefüllt.
Kopfbereich-Vorlage – Elemente
Unter Blöcke → Header-Elemente:
| Block | Verwendung für |
|---|---|
| Logo | Bild aus den Medien oder Platzhalter; Link-URL (Standard /) und Höhe in Attr |
| Website-Titel | Text des Studionamens neben oder anstelle des Logos |
| Navigationsmenü | Horizontales Menü, verknüpft mit einem Menü aus Einstellungen → Navigation |
| Navigationslink | Einzelner manueller Link (benutzerdefiniertes Label + URL) |
| CTA-Schaltfläche | Prominente Schaltfläche (Stil/Größe in Attr) |
| Social-Media-Symbole | Symbolleiste mit in Attr konfigurierten Netzwerken |
| Warenkorb | Shop-Warenkorbsymbol, wenn E-Commerce aktiviert ist (Farbe/Größe in Attr) |
| Sprachumschalter | Globus-Menü für veröffentlichte Sprachen – siehe Mehrsprachige Website-Sprachen |
Konfigurieren Sie Logo-Bild und Link-URL, Menüauswahl, CTA-URL und Social-Media-URLs in Attr nach Auswahl des Blocks.
Fußbereich-Vorlage – Voreinstellungen
Unter Blöcke → Voreinstellungen (nur Footer-Editor):
| Voreinstellung | Typisches Layout |
|---|---|
| Einfacher Fußbereich | Copyright links, Social Media rechts |
| Gestapelter Fußbereich | Zentriertes Logo, Links, Social Media, Copyright |
| Spaltiger Fußbereich | Mehrere Spalten für Links und Text |
| Newsletter-Fußbereich | Auf Registrierungen ausgerichtetes Layout mit Spalten |
Fußbereich-Vorlage – Elemente
Unter Blöcke → Footer-Elemente:
| Block | Verwendung für |
|---|---|
| Fußbereichsspalten | Mehrspaltiges Grundgerüst für Linkgruppen |
| Fußbereichsspalte | Eine Spalte innerhalb des Rasters |
| Fußbereichs-Logo | Kleineres Logo für den Fußbereich; Link-URL (Standard /) und Höhe in Attr |
| Copyright | Automatisches Jahres-Textmuster (© {year} …) in Attr |
| Social-Media-Links | Symbolreihe für Social Media im Fußbereich |
| Newsletter | E-Mail-Erfassungs-UI (Überschrift, Webhook und Text in Attr) |
| AGB & Datenschutz | Link zu den AGB oder zur Datenschutzseite |
| Sprachumschalter | Dasselbe Globus-Menü wie im Header – Mehrsprachige Website-Sprachen |
Website-Layout und Seitenüberschreibungen
- Einstellungen → Website-Layout – Themavoreinstellungen, die die Breite des Kopfbereichs oder den Stil des Fußbereichs seitenweit beeinflussen können.
- Seiten → Bearbeiten → Seiteneinstellungen – Seitenbezogene Überschreibung der Kopf-/Fußbereichs-Vorlage: Seiteneinstellungen und Überschreibungen.
- Schnelle Checkliste: Vorlagen-Manager · Vertiefung: Arbeiten mit Seitenvorlagen.
Fehlerbehebung & Häufige Fallstricke
| Problem | Zu überprüfen |
|---|---|
| Menü sieht auf der Live-Site falsch aus | Reihenfolge im Navigation-Tab + welches Menü der Navigationsmenü-Block in Attr referenziert |
| Kopfbereich hat sich nach einer Bearbeitung überall geändert | Erwartetes Verhalten – Standard-Header-Vorlagen werden gemeinsam genutzt; verwenden Sie eine Seitenüberschreibung für eine einzelne Landingpage |
| Block-Panel enthält keine Hero-Bereiche/Galerien | Sie befinden sich im Vorlagen-Editor; diese Blöcke existieren nur im Seiten-Editor |
| Mobiles Menü ist leer | Speichern Sie die Header-Vorlage; stellen Sie sicher, dass Navigation Elemente enthält und das Menü im Navigationsmenü-Block ausgewählt ist; veröffentlichen Sie eine Seite erneut |
| Logo springt nicht zur Startseite | Wählen Sie das Logo (oder Fußbereichs-Logo) aus → Attr → setzen Sie die Link-URL (Standard /) → Speichern Sie die Vorlage |
Nächste Schritte & Validierung
- Fügen Sie mindestens drei Elemente unter Einstellungen → Navigation hinzu.
- Bearbeiten Sie den Standard-Header → 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 Sie den Standard-Footer → wenden Sie den Einfachen Fußbereich an → aktualisieren Sie Copyright und Social-Media-Links → Speichern.
- Öffnen Sie zwei öffentliche URLs und vergewissern Sie sich, dass derselbe Chrome angezeigt wird.