Footer-Navigation

Ausgewählte Links

1. Company XYZ-Dokumentation zum Abschnitt „Fußzeilennavigation“
2. Shopify-Dokumentation zu Abschnitten und Blöcken
3. Company XYZ-Dokumentation zum Fußzeilenmenü-Block
4. Company XYZ-Dokumentation zum Logo-Block
5. Company XYZ-Dokumentation zum Block für Social-Media-Symbole
6. Company XYZ-Dokumentation zum Block für Lokalisierungsauswahlfelder
7. Company XYZ-Dokumentation zum Block für Zahlungssymbole
8. Company XYZ-Dokumentation zum Copyright-Block
9. Company XYZ-Dokumentation zum Schaltflächen-Block
10. Company XYZ-Dokumentation zum Bild-Block
11. Company XYZ-Dokumentation zum Video-Block
12. Company XYZ-Dokumentation zum Trennlinien-Block
13. Shopify-Dokumentation zum Anpassen von Abschnitten
14. Company XYZ-Dokumentation zu den Einstellungen für Abschnittshintergründe
15. Company XYZ-Dokumentation zu den Einstellungen für den Innenabstand von Abschnitten
16. Company XYZ-Dokumentation zu den Trennlinien-Einstellungen
17. Company XYZ-Dokumentation zu den Einstellungen für Layout-Breiten

Hilfreiche Videos

Learn With Shopify-Video: Best Practices für Shopify-Navigationsmenüs

Learn With Shopify-Video: Best Practices für Shopify-Navigationsmenüs

Shopify Academy-Video: Ihren Shop anpassen

Shopify Academy-Video: Ihren Shop anpassen

Verwenden Sie die Footer-Navigation, um ein benutzerdefiniertes Layout für den Seitenabschluss mit Menüs, Markenelementen, Rechtstext, sozialen Links, Medien und Hilfsinhalten zu erstellen. Es funktioniert am besten, wenn Sie mehr Kontrolle als bei einem einfachen gestapelten Footer wünschen, insbesondere auf Desktop, Tablet und Mobile.

Die Referenz zur Footer-Navigation ist in der Company XYZ-Dokumentation verfügbar. Einen umfassenderen Überblick über das Verhalten von Abschnitten in Shopify finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Grundeinstellungen

Die wichtigsten Layout-Steuerungen legen fest, wie viele Spalten der Footer bei unterschiedlichen Bildschirmgrößen verwendet. Diese Einstellungen bestimmen die Gesamtstruktur, bevor Sie einzelne Blöcke im Detail anpassen.

1. Legen Sie zuerst das Desktop-Layout fest. Verwenden Sie mehr Spalten für Footer mit vielen Links und weniger Spalten für einfachere, markenorientierte Layouts.
2. Verwenden Sie die Tablet-Einstellung gezielt. Wenn Tablet-Spalten auf 0 gesetzt sind, übernimmt das Tablet die Desktop-Spaltenanzahl, was nützlich ist, wenn Ihr Desktop-Layout bereits gut skaliert.
3. Halten Sie Mobile einfacher. Schmalere Bildschirme funktionieren meist besser mit weniger Spalten, besonders wenn Sie Menüs mit breiteren Inhalten wie Rich Text, Bildern oder Video kombinieren.

Tipp

Wenn der Footer überladen wirkt, reduzieren Sie die Spaltenanzahl, bevor Sie Inhalte ausblenden. Eine klarere Struktur verbessert die Lesbarkeit in der Regel stärker als das Entfernen nützlicher Links.

Farbeinstellungen

Diese farbbezogenen Einstellungen auf Abschnittsebene ermöglichen es Ihnen, die Text- und Symbolfarben des Footers zu überschreiben, ohne den Rest der Website zu ändern. Verwenden Sie sie, wenn der Footer eine eigene visuelle Gestaltung benötigt.

1. Stimmen Sie die Textfarbe auf den Hintergrund ab. Das ist besonders wichtig, wenn Sie ein Hintergrundbild, einen Verlauf oder ein Video hinzufügen.
2. Verwenden Sie die Symbolfarbe für Konsistenz. Das hilft, symbolbasierte Blöcke wie Social Links oder andere Hilfselemente einheitlich wirken zu lassen.
3. Behandeln Sie Blockfarben als Ausnahmen. Beginnen Sie mit den Abschnittsfarben für den gesamten Footer und verwenden Sie Blockfarben nur dann, wenn ein bestimmtes Element hervorgehoben werden soll.

Unterstützte Blocktypen

1. Button
2. Copyright
3. Follow on shop button
4. Footer menu
5. Localization selectors
6. Logo
7. Payment icons
8. Rich text
9. Separator
10. Social media icons
11. Image
12. Video

Blockhinweise

Fußzeilenmenü

Footer menu-Blöcke zeigen eine Navigationsliste an, optional mit einer Überschrift für jede Gruppe. Mehr über den Fußzeilenmenü erfahren Sie hier.

1. Verwenden Sie separate Menü-Blöcke für unterschiedliche Gruppen wie Hilfe, Unternehmen und Richtlinien.
2. Fügen Sie kurze Überschriften hinzu, wenn Sie mehrere Menüs haben, damit Kunden den Footer schneller überblicken können.
3. Teilen Sie lange Listen in kleinere Gruppen auf, statt ein übergroßes Menü zu erstellen.

Logo

Der Logo-Block stärkt die Markenidentität und kann den Footer visuell verankern. Wenn im Block kein Bild festgelegt ist, kann auf den Shopnamen zurückgegriffen werden. Mehr über den Logo block erfahren Sie hier.

1. Halten Sie das Logo in einer dezenten Größe, damit es das Layout unterstützt, statt es zu dominieren.
2. Eine Breite von 0 lässt das Logo den verfügbaren Platz ausfüllen, was für einfache, markenorientierte Footer meist am besten ist.

Rich text

Rich Text eignet sich gut für kurze Markentexte, Kontaktdaten, Vertrauensbotschaften oder eine prägnante Wertbotschaft.

1. Halten Sie den Text kurz, damit der Footer leicht überblickbar bleibt.
2. Verwenden Sie Hintergrund- oder Textfarben auf Blockebene nur dann, wenn sich dieser Inhalt deutlich von den umliegenden Elementen abheben soll.

Social-Media-Icons

Dieser Block bezieht sich auf die in Ihren Theme-Einstellungen konfigurierten Social-Media-Konten. Mehr über den Social media icons block erfahren Sie hier.

1. Verwenden Sie Show all, wenn Ihre konfigurierten Social-Media-Konten vollständig und konsistent sind.
2. Deaktivieren Sie Show all, wenn Sie nur einige wichtige Netzwerke hervorheben möchten.
3. Wählen Sie den Symbolstil passend zum Footer-Design: markenbezogen für Wiedererkennung, solid für eine klarere UI oder nur Text für einen reduzierten Look.

Lokalisierungs-Auswahlfelder

Localization selectors ermöglichen es Kunden, Land, Währung und Sprache auszuwählen, sofern unterstützt. Mehr über den Lokalisierungs-Auswahlfelder erfahren Sie hier.

1. Fügen Sie diesen Block nur hinzu, wenn diese Auswahlmöglichkeiten für Kunden verfügbar sind.
2. Auf Mobile kann der Eingabestil Small field den Block in eine neue Zeile zwingen. Sehen Sie sich den Footer daher nach der Änderung in der Vorschau an.

Fügen Sie Localization selectors nur hinzu, wenn sie vollständig eingerichtet und für Kunden nützlich sind. Andernfalls erhöhen sie die Komplexität, ohne den Footer zu verbessern.

Zahlungssymbole und Copyright

Diese Blöcke werden normalerweise nahe dem unteren Bereich des Footers für Vertrauenssignale und rechtliche Informationen verwendet. Mehr über den Zahlungssymbole und den Copyright block erfahren Sie hier.

1. Platzieren Sie sie in einer unteren Reihe, damit das Footer-Muster vertraut wirkt.
2. Halten Sie den Copyright-Text kurz und aktuell.
3. Betrachten Sie Payment icons als unterstützende Vertrauenssignale und nicht als Hauptinhalt des Footers.

Schaltfläche

Der Button-Block fügt eine klare Footer-Aktion hinzu, etwa um Ihr Team zu kontaktieren oder eine Support-Seite zu öffnen. Mehr über den Schaltfläche erfahren Sie hier.

1. Verwenden Sie höchstens ein oder zwei Buttons, damit der Footer nicht mit dem Hauptinhalt der Seite konkurriert.
2. Mobile Buttons in voller Breite sind hilfreich, wenn die Aktion auf kleineren Bildschirmen wichtig ist.

Bild und Video

Image- und Video-Blöcke können den Footer redaktioneller oder stärker markenorientiert wirken lassen. Mehr über den Bild und den Video block erfahren Sie hier.

1. Setzen Sie Medien sparsam ein, damit die Navigation nicht zu weit nach unten auf der Seite gedrängt wird.
2. Halten Sie Bildunterschriften kurz und praktisch.
3. Bei Video erzeugt ein Vorschaubild in der Regel einen besseren ersten Eindruck.

Achtung

Große Medienblöcke können es erschweren, Footer-Links zu finden, besonders auf Mobile. Wenn die Navigation die Hauptaufgabe des Footers ist, sollte Medieninhalten eine untergeordnete Rolle zukommen.

Trennlinie

Der Separator-Block fügt Abstand oder eine visuelle Trennung zwischen Footer-Elementen hinzu. Mehr über den Trennlinie erfahren Sie hier.

1. Verwenden Sie ihn, um obere und untere Footer-Bereiche zu trennen oder um mehr Luft um Hilfsinhalte zu schaffen.
2. Selbst bei einer Höhe von 0 kann ein kleiner Abstand bestehen bleiben, da der Footer den Standardabstand zwischen den Elementen verwendet.

Gemeinsame Blockeinstellungen

Die meisten Footer-Blöcke enthalten gemeinsame Steuerungen für Ausrichtung, Layout und Sichtbarkeit. Diese Einstellungen machen den Abschnitt flexibel genug für benutzerdefinierte responsive Footer. Allgemeines zum Bearbeitungsverhalten finden Sie in der Shopify-Dokumentation zum Anpassen von Abschnitten

1. Ausrichtungseinstellungen ermöglichen es, einzelne Blöcke auf Desktop und Mobile unterschiedlich auszurichten.
2. Layout-Einstellungen ermöglichen es, einen Block in eine neue Zeile oder Spalte zu verschieben oder ihn so zu strecken, dass er den verbleibenden Platz auf dem Desktop ausfüllt.
3. Sichtbarkeitseinstellungen sind hilfreich, wenn Desktop und Mobile deutlich unterschiedliche Footer-Layouts benötigen.

Standard-Abschnittseinstellungen

Abschnittshintergrund-Einstellungen

Abschnittshintergrund-Einstellungen steuern die Hintergrundfarbe, den Verlauf, das Bild, das Video und die Overlay-Behandlung des Footers. In diesem Abschnitt sind sie besonders nützlich, um den Footer vom restlichen Seiteninhalt abzugrenzen oder ein stärkeres markenbezogenes Finish zu erzeugen.

Wenn Sie Bild- oder Video-Hintergründe hinzufügen, prüfen Sie den Kontrast von Text und Symbolen sorgfältig. Overlay-Farbe und -Deckkraft können die Lesbarkeit verbessern, und medienbezogene Hintergründe speziell für Mobile können das Design auf kleineren Bildschirmen vereinfachen.

Padding-Einstellungen

Padding-Einstellungen steuern den Abstand oberhalb und unterhalb des Footer-Inhalts. Verwenden Sie sie, um den Footer großzügiger wirken zu lassen oder ihn zu verdichten, wenn die Seite bereits viel vertikalen Raum hat.

Desktop- und Mobile-Padding können separat angepasst werden, wodurch ein großer Desktop-Footer auf Smartphones nicht zu hoch wirkt.

Trennlinien-Einstellungen

Trennlinien-Einstellungen fügen oben oder unten am Footer-Abschnitt eine Linie hinzu. Das ist nützlich, wenn Sie einen klareren Übergang zwischen dem Footer und nahegelegenem Inhalt wünschen.

Wenn die Farbe der Trennlinie transparent ist, wird stattdessen die Standardrahmenfarbe verwendet. Halten Sie die Trennliniengestaltung dezent, es sei denn, der Footer braucht eine stärkere Abgrenzung.

Breiten-Einstellungen

Breiten-Einstellungen steuern sowohl die maximale Inhaltsbreite als auch die gesamte Abschnittsbreite. In Footer navigation beeinflusst die Inhaltsbreite, wie eng die Blöcke zusammenstehen, während die Abschnittsbreite vor allem dann wichtig ist, wenn Sie Hintergrundgestaltung verwenden.

Der Editor kann Breitenänderungen weniger deutlich erscheinen lassen als auf der Live-Seite. Sehen Sie sich das Ergebnis daher im Storefront an, wenn Sie das Layout verfeinern. Verwenden Sie schmalere Breiten für besser lesbares Layout und breitere Breiten, wenn der Hintergrund Teil des Designs ist.

Nutzungshinweise

1. Beginnen Sie mit den Spalten. Legen Sie zuerst die Spaltenanzahl für Desktop, Tablet und Mobile fest und passen Sie dann das Layout einzelner Blöcke nur dort an, wo es nötig ist.
2. Gruppieren Sie Links klar. Verwenden Sie mehrere Footer menu-Blöcke mit kurzen Überschriften, damit Kunden Support-, Unternehmens- und Richtlinien-Links schnell überblicken können.
3. Sichern Sie den Kontrast. Prüfen Sie die Lesbarkeit von Text und Symbolen erneut, sobald Sie ein Hintergrundbild, einen Verlauf, ein Video oder benutzerdefinierte Farben hinzufügen.
4. Verwenden Sie responsive Varianten sparsam. Blenden Sie Blöcke nur aus oder duplizieren Sie sie, wenn Mobile und Desktop tatsächlich unterschiedliche Footer-Layouts benötigen.
5. Stellen Sie Hilfsinhalte in den Hintergrund. Logos, Medien, Payment icons und Buttons sollten den Footer unterstützen, nicht das Auffinden der zentralen Navigation erschweren.
6. Sehen Sie sich beide Ansichten in der Vorschau an. Footer-Blöcke können sich zwischen Desktop und Mobile neu anordnen, ausgeblendet werden oder in ihrer Bedeutung ändern. Prüfen Sie daher jede Größe vor der Veröffentlichung.
7. Betrachten Sie Medien als Designentscheidung. Getrennte Medien für Desktop und Mobile können Zuschnitt, Lesbarkeit und Fallback-Verhalten verändern. Prüfen Sie daher beide Versionen, wenn Sie Bilder oder Video verwenden.
8. Lassen Sie Standardwerte stehen, wenn Sie Fallback-Styling wünschen. Leere oder transparente Farbauswahlen behalten in der Regel das vorhandene Footer-Erscheinungsbild bei, während explizite Farben, Verläufe oder Medien den Footer-Bereich eigenständiger machen.