25 Website-Footer-Design-Beispiele, die funktionieren

25 Footer-Muster, die Sie für Ihre eigene Website kopieren können, vom minimalen rechtlichen Footer über den fetten Sitemap-Footer bis zum Lokalunternehmen-Footer mit Karte — was jeder enthält, zu wem er passt, und ein Tipp, damit er funktioniert.

Häufige Fragen

Wie mache ich einen Footer barrierefrei?

Nutzen Sie echten Text statt Bilder für Öffnungszeiten und Kontaktdaten, machen Sie jeden Link mit der Tab-Taste erreichbar mit sichtbarem Fokus-Umriss, geben Sie Social-Icons Text-Labels, und halten Sie genug Farbkontrast gegen den Footer-Hintergrund.

Was sollte jeder Website-Footer enthalten?

Mindestens: eine Copyright-Zeile mit dem aktuellen Jahr, einen Weg, Sie zu kontaktieren, und Links zu allen gesetzlich erforderlichen Seiten (Datenschutzerklärung, AGB, eine Barrierefreiheitserklärung, falls zutreffend). Darüber hinaus hängt es von Ihrem Website-Typ ab — siehe die Musterliste unten.

Wie viele Links sind zu viele für einen Footer?

Es gibt keine feste Zahl, aber ein Footer, der versucht, jede Seite der Website aufzulisten, wird zu Lärm, den niemand liest. Gruppieren Sie Links in 3-5 beschriftete Spalten (zum Beispiel Unternehmen, Produkt, Ressourcen, Recht), statt in eine lange unsortierte Liste.

Sollte ein Footer eine Newsletter-Anmeldung haben?

Das ist eine vernünftige sekundäre Platzierung, da Besucher, die bis nach unten scrollen, ohne zu konvertieren, immer noch engagiert sind. Es sollte aber nie der einzige Ort sein, an dem Sie eine Newsletter-Anmeldung anbieten — platzieren Sie auch eine stärkere Version weiter oben auf der Seite.

Beeinflusst der Footer SEO?

Ja, indirekt. Footer-Links helfen Suchmaschinen und Besuchern, tiefere Seiten zu finden, und doppelte oder aufgeblähte Footer-Linklisten auf jeder Seite können verwässern, wie eine Website verstanden wird. Halten Sie Footer-Links gezielt und konsistent, keine Müllhalde.

Sollte der Footer auf Mobilgeräten anders aussehen?

Der Inhalt kann gleich bleiben, aber das Layout sollte sich mit klarem Abstand in einzelne Spalten stapeln, und alle einklappbaren Bereiche sollten leicht antippbar sein. Ein Footer, der als eine lange unlesbare Spalte winziger Schrift erscheint, ist ein häufiger Mobilfehler.

Kurze Antwort: Die besten Website-Footer fallen in eine kleine Anzahl wiederholbarer Muster — minimale rechtliche Footer, fette Sitemap-Footer, Newsletter-Footer, Lokalunternehmen-Footer mit Karte, und eine Handvoll anderer — und das richtige für Ihren Website-Typ zu wählen zählt mehr, als Ihren einzigartig zu machen. Unten sind 25 Muster, die Sie anpassen können, jedes mit Inhalt, Passung und einem Tipp.

Auswahlmethode und Zielgruppe: Dieser Leitfaden ist für Kleinunternehmer und die Menschen, die ihre Websites bauen. Die Muster werden nach fünf Dingen verglichen, nach denen Besucher am unteren Seitenrand suchen: Kontaktdaten, Öffnungszeiten, Hauptleistungen, Richtlinien-Links und Tastaturzugriff. Die durchgerechneten Beispiele weiter unten sind illustrative We.Inc-Vorlagendesigns, keine echten Unternehmen.

Warum Footer für SEO zählen

Warum Footer für SEO zählen, ist einer der am häufigsten übersehenen Aspekte von Website-Footer-Design, entscheidet aber oft, ob ein Aufwand erfolgreich ist oder scheitert. Unternehmen, die hier früh Zeit investieren, vermeiden teure Nacharbeit und sehen schnellere, planbarere Ergebnisse. Wichtige Dinge, bei denen man Footer und SEO richtig macht:

Braucht „warum Footer für SEO zählen" eine neue Website, Landingpage oder Web-App, bringt Sie We.Inc schnell dorthin. Sie beschreiben, was Sie wollen, in einem Chat, und dessen KI baut eine live, bearbeitbare Website direkt im Browser, Sie können also ausliefern, ohne zuerst mit einem Design-Tool zu kämpfen.

Was jeder Footer zuerst braucht

Vor den Mustern, die Nicht-Verhandelbaren: eine Copyright-Zeile mit dem aktuellen Jahr, eine funktionierende Kontaktmethode, und Links zu Ihrer Datenschutzerklärung und den AGB, falls Sie personenbezogene Daten sammeln. Bringen Sie diese richtig hin, egal welches Muster Sie wählen.

Wesentliche Footer-Elemente sind eine kritische Komponente jeder soliden Website-Bau-Strategie. Die Grundlagen hier richtig hinzubekommen schafft ein Fundament, auf dem jeder andere Teil der Arbeit aufbaut. Der wirksamste Ansatz für wesentliche Footer-Elemente ist systematisch statt reaktiv. Teams, die dafür feste Zeit einplanen, Ergebnisse konsistent verfolgen und schrittweise Anpassungen vornehmen, übertreffen die, die es als Ad-hoc-Arbeit behandeln. Der größte einzelne Erfolgsprädiktor ist, ob Sie einen dokumentierten Prozess haben, nicht wie ausgefeilt dieser Prozess ist. Teams kommen bei wesentlichen Footer-Elementen schneller voran, wenn der Bau der dahinterliegenden Website nicht der Engpass ist. Mit We.Inc erzeugen Sie die Seite oder App, indem Sie sie in einfacher Sprache beschreiben, und verfeinern sie dann mit visuellem Click-to-Edit oder dem eingebauten Code-Editor.

ElementWarum es zähltHäufiger Fehler
Copyright-ZeileGrundlegendes rechtliches Signal, günstig einzubindenZeigt ein altes Jahr
Datenschutz-/AGB-LinksOft gesetzlich erforderlich, falls Sie Daten sammelnKomplett fehlend, oder toter Link
KontaktmethodeLässt Besucher Sie erreichen, ohne zu suchenVergraben in einer Kontaktseite ohne direkten Link
Social-LinksSekundäres VertrauenssignalVerlinkt zu verlassenen Konten
Sitemap- oder Hauptnav-LinksHilft Besuchern und Suchmaschinen, Seiten zu findenDupliziert das gesamte Hauptmenü unsortiert

25 Footer-Muster

Footer-Layout-Muster sind eine kritische Komponente jeder soliden Website-Bau-Strategie. Die Grundlagen hier richtig hinzubekommen schafft ein Fundament, auf dem jeder andere Teil der Arbeit aufbaut. Wichtige Dinge bei Footer-Layout-Mustern:

Brauchen Footer-Layout-Muster eine Seite, einen Shop oder eine App, an die Sie Menschen verweisen, verwandelt We.Inc eine Beschreibung in eine funktionierende Website, die Sie in Minuten veröffentlichen können. Starten Sie mit einer Vorlage, passen Sie sie per Chat und visueller Bearbeitung an, und gehen Sie mit kostenlosem SSL auf Ihrer eigenen Domain live.

  1. Minimaler rechtlicher Footer. Nur Copyright, Datenschutz und AGB in einer Zeile. Passt zu einer kleinen Broschürenwebsite oder Landingpage, wo der Footer keine Marketingarbeit leistet. Tipp: Halten Sie ihn zentriert und zurückhaltend, damit er nicht mit Ihrem CTA darüber konkurriert.
  1. Fetter Sitemap-Footer. Mehrere beschriftete Spalten (Produkt, Unternehmen, Ressourcen, Recht), die den Großteil der Website-Struktur abdecken. Passt zu größeren Websites wie SaaS-Produkten oder inhaltsstarken Websites. Tipp: Deckeln Sie jede Spalte auf 5-7 Links, damit sie überfliegbar bleibt.
  1. Newsletter-First-Footer. Führt mit einem E-Mail-Erfassungsfeld vor allen Links. Passt zu Publishern, Blogs und Content-Unternehmen, die ein Publikum aufbauen. Tipp: Machen Sie das nie zur einzigen Newsletter-Anmeldung auf der Seite.
  1. Lokalunternehmen-NAP-+-Karte-Footer. Name, Adresse, Telefonnummer und eine eingebettete Karte. Passt zu jedem Unternehmen mit physischem Standort. Tipp: Halten Sie den NAP-Text identisch (nicht nur optisch ähnlich) zu dem in Ihrem Google-Unternehmensprofil.
  1. App-Download-Footer. App-Store- und Google-Play-Badges neben Standardlinks. Passt zu Produkten mit einer Begleit-App. Tipp: Verlinken Sie die Badges zu den echten Store-Einträgen, nicht zu einer generischen Startseite.
  1. Vertrauensbadge-Footer. Sicherheitssiegel, Zahlungsmethoden-Icons oder Branchenzertifizierungen. Passt zu E-Commerce und allem mit Zahlungsabwicklung. Tipp: Nutzen Sie Badges, die Sie tatsächlich belegen können — ein gefälschtes oder abgelaufenes Zertifizierungsbadge ist schlimmer als keins.
  1. Social-Proof-Footer. Logos von Kunden, Presseerwähnungen oder Bewertungsplattform-Ratings. Passt zu B2B- und Dienstleistungsunternehmen. Tipp: Nehmen Sie nur Logos auf, für die Sie Erlaubnis zur Anzeige haben.
  1. Mega-Footer mit Suche. Ein großer Footer mit eigenem Suchfeld neben Sitemap-Links. Passt zu großen Dokumentationswebsites oder Marktplätzen mit tiefem Inhalt.
  1. Einspaltiger gestapelter Footer. Alles vertikal gestapelt, keine Spalten. Passt zu sehr einfachen Websites, Portfolios oder Ein-Seiten-Websites. Tipp: Nutzen Sie Abstand, um Bereiche zu trennen, statt Trennlinien, die bei kleinem Maßstab schwer wirken können.
  1. Zweistufiger Footer. Ein Haupt-Footer-Bereich mit Spalten, dann eine dünne „Sub-Footer"-Leiste darunter nur mit Copyright und rechtlichen Links. Passt zu Websites, die wollen, dass der Marketing-Footer sich optisch vom rechtlichen Standardtext trennt.
  1. CTA-Wiederholungs-Footer. Wiederholt die primäre Handlungsaufforderung der Seite (Demo buchen, kostenlos starten) direkt über dem Standard-Footer-Inhalt. Passt zu Landingpages und Marketing-Websites. Tipp: Halten Sie diesen CTA optisch getrennt von den informativen Links darunter.
  1. Nach-oben-Footer. Enthält einen sichtbaren „Nach oben"-Link oder -Button, üblich bei Seiten mit langem Scroll. Passt zu inhaltsstarken Seiten, Portfolios mit vielen Arbeitsproben, oder langen Landingpages.
  1. Sprach-/Regionswechsler-Footer. Ein Dropdown oder eine Liste von Sprach-/Regionsoptionen im Footer. Passt zu jeder Website, die mehrere Länder oder Sprachen bedient.
  1. Team-/Kontaktperson-Footer. Namen und kleine Fotos wichtiger Teammitglieder mit direkten Kontaktlinks. Passt zu kleinen Agenturen und Beratungen, die Vertrauen und Beziehungen verkaufen.
  1. Community-/Social-Hub-Footer. Links zu einem Discord, Forum oder Community-Raum neben Social-Icons. Passt zu Produkten mit aktiver Nutzer-Community.
  1. Auszeichnungs-/Anerkennungs-Footer. Zeigt Auszeichnungen, „vorgestellt in"-Erwähnungen oder Branchen-Rankings. Passt zu Unternehmen, die sich konkrete, überprüfbare Anerkennung verdient haben — erfinden oder suggerieren Sie nie eine Auszeichnung, die Sie nicht erhalten haben.
  1. Barrierefreiheitserklärungs-Footer. Ein direkter Link zu einer Barrierefreiheitserklärungsseite, manchmal neben einem sichtbaren Barrierefreiheits-Einstellungssymbol. Passt zu jedem Unternehmen, dem inklusives Design ernst ist; siehe das Tool unten, um eine zu erstellen.
  1. Schwester-Websites-/Markenfamilie-Footer. Links zu anderen Auftritten unter derselben Muttermarke. Passt zu Unternehmen, die mehrere verwandte Websites oder Produktlinien betreiben.
  1. Notfall-/Dringend-Kontakt-Footer. Eine prominente Telefonnummer oder dringende Kontaktlinie, manchmal mit Öffnungszeiten. Passt zu Gesundheitswesen, Recht, Hausdienstleistungen und allem mit zeitkritischen Bedürfnissen.
  1. FAQ-Shortcut-Footer. Direkte Links zu den 3-5 häufigsten Support-Fragen statt eines generischen „Hilfe"-Links. Passt zu E-Commerce- und Abo-Produkten, die Support-Volumen reduzieren wollen.
  1. Job-/Karriere-Footer. Eine „Wir stellen ein"-Zeile mit Link zu offenen Stellen. Passt zu wachsenden Unternehmen, die wollen, dass der Footer auch als Recruiting-Kanal funktioniert.
  1. Presse-Kit-Footer. Ein direkter Link zu Logos, Markenmaterial und Medienkontaktinfo. Passt zu Unternehmen mit regelmäßigen Presseanfragen.
  1. Spenden-/Unterstützungs-Footer. Ein sichtbarer „Unterstützen Sie uns"- oder „Spenden"-Link, getrennt vom Spenden-Button der Hauptnavigation. Passt zu gemeinnützigen Organisationen und Open-Source-Projekten — siehe unseren Leitfaden zu Non-Profit-Website-Design für die Spendenseiten-Seite davon.
  1. Minimaler Dark-Mode-Footer. Ein optisch dunkleres Footer-Band, das mit einem helleren Seitenkörper kontrastiert, manchmal unabhängig vom Gesamtthema der Website. Passt zu designorientierten Portfolios und Kreativstudios.
  1. Compliance-lastiger Footer. Umfangreiche rechtliche Links (Cookie-Richtlinie, DSGVO-Hinweise, Haftungsausschlüsse, Lizenzinfo), oft erforderlich in Finanzen, Recht, Gesundheitswesen oder stark regulierten Branchen. Tipp: Raten Sie nicht, was für Ihre Branche rechtlich erforderlich ist — bestätigen Sie es mit einer Rechtsberatung oder aktuellen Branchenvorgaben.

Footer-CTAs, die konvertieren

Footer-CTAs, die konvertieren, sind eine kritische Komponente jeder soliden Website-Bau-Strategie. Die Grundlagen hier richtig hinzubekommen schafft ein Fundament, auf dem jeder andere Teil der Arbeit aufbaut. Der wirksamste Ansatz für Footer-CTAs, die konvertieren, ist systematisch statt reaktiv. Teams, die dafür feste Zeit einplanen, Ergebnisse konsistent verfolgen und schrittweise Anpassungen vornehmen, übertreffen die, die es als Ad-hoc-Arbeit behandeln. Der größte einzelne Erfolgsprädiktor ist, ob Sie einen dokumentierten Prozess haben, nicht wie ausgefeilt dieser Prozess ist. Brauchen Footer-CTAs, die konvertieren, eine neue Website, Landingpage oder Web-App, bringt Sie We.Inc schnell dorthin. Sie beschreiben, was Sie wollen, in einem Chat, und dessen KI baut eine live, bearbeitbare Website direkt im Browser, Sie können also ausliefern, ohne zuerst mit einem Design-Tool zu kämpfen.

Mobile Footer-Gestaltung

Mobile Footer-Gestaltung ist eine kritische Komponente jeder soliden Website-Bau-Strategie. Die Grundlagen hier richtig hinzubekommen schafft ein Fundament, auf dem jeder andere Teil der Arbeit aufbaut. Wichtige Dinge bei mobiler Footer-Gestaltung:

Teams kommen bei mobiler Footer-Gestaltung schneller voran, wenn der Bau der dahinterliegenden Website nicht der Engpass ist. Mit We.Inc erzeugen Sie die Seite oder App, indem Sie sie in einfacher Sprache beschreiben, und verfeinern sie dann mit visuellem Click-to-Edit oder dem eingebauten Code-Editor.

Desktop- und Mobil-Footer im Vergleich

ElementDesktopMobilTastaturprüfung
KontaktAdresse, Telefon, E-Mail in einer SpalteTelefon zuerst als Tap-to-Call-LinkJeder Link mit Tab erreichbar, sichtbarer Fokusring
ÖffnungszeitenKurze TabelleHeutige Zeiten zuerst, volle Woche darunterKlartext, kein Bild
Hauptleistungen4 bis 6 LinksEingeklappt oder auf die Top 3 reduziertLinks in logischer Reihenfolge
Richtlinien-LinksKleine Zeile untenDieselbe Zeile, größere Tap-ZieleNicht hinter Hover versteckt
SocialIcon-ReiheIcon-Reihe mit Text-Labels für ScreenreaderIcons haben barrierefreie Namen

Kommentierte Beispiele (illustrativ)

Illustratives We.Inc-Bäckerei-Design; sein Footer gruppiert Adresse, Öffnungszeiten und Social-Links.
BeispielFooter-InhaltWas anzupassen istEinschränkung
BäckereiAdresse, Öffnungszeiten, Bestelllink, SocialÖffnungszeiten als Text, Bestelllink wiederholtLange Öffnungszeiten-Tabellen werden auf Handys eng
KlempnerTelefon, Einsatzgebiet, LizenzzeileTap-to-Call zuerst auf MobilgerätenEinsatzgebietslisten können zu lang werden
ZahnarztAdresse, Kartenlink, NotfallnummerSeparate NotfallzeileZu viele Versicherungslogos wirken unaufgeräumt
AnwaltskanzleiBüros, Praxisbereiche, HaftungsausschlussErforderlicher Haftungsausschluss-TextRechtstext kann die Kontaktzeile begraben
Non-ProfitSpendenlink, Registrierung, BerichteRegistrierungsnummer sichtbarKonkurrierende Handlungsaufforderungen

Kopierbare Footer-Blöcke

Fügen Sie diese in Ihre Notizen ein und füllen Sie sie aus:

Kontakt: [Unternehmensname], [Straße, Ort], [Telefon-Link], [E-Mail] Öffnungszeiten: Mo bis Fr [Zeit], Sa [Zeit], So geschlossen Leistungen: [Leistung 1], [Leistung 2], [Leistung 3] Recht: Datenschutz, AGB, Barrierefreiheit, © [Jahr] [Unternehmensname]

Was anzupassen ist und was nicht zu kopieren ist

Passen Sie Gruppierung und Reihenfolge an. Kopieren Sie nicht die Badges, Auszeichnungen, Bewertungszahlen oder Rechtsformulierungen einer anderen Website; nutzen Sie nur, was für Ihr Unternehmen zutrifft, und lassen Sie Ihre eigenen Richtlinien prüfen.

Bearbeitung von Text und Layout einer Website im visuellen We.Inc-Editor.

Mit einer passenden Vorlage starten

Wählen Sie ein Design aus den Unternehmens-Website-Vorlagen, bearbeiten Sie den Footer im visuellen Editor, führen Sie dann den kostenlosen Website-Grader aus.

Bauen Sie Ihre Unternehmenswebsite. Erstellen Sie Ihr Konto. Der kostenlose Plan veröffentlicht bis zu 3 Vorlagen-Websites unter einer we.inc-Adresse (keine KI-Credits, keine eigene Domain). KI-Bau und Ihre eigene Domain beginnen mit Starter für 20 $ im Monat; siehe Preise.

Nützliche nächste Schritte: prüfen Sie eine bestehende Website mit dem kostenlosen Website-Grader, schätzen Sie ein Budget mit dem Website-Kostenrechner, durchsuchen Sie Unternehmens-Website-Vorlagen oder lesen Sie, wie der We.Inc-Website-Baukasten funktioniert.

Wie man wählt

Passen Sie das Muster zu dem, was Ihre Website tatsächlich braucht, nicht zu dem, was beeindruckend aussieht. Eine Fünf-Seiten-Broschürenwebsite braucht keinen Mega-Footer mit Suchfeld, und ein Marktplatz mit Tausenden Seiten wirkt mit nur einem minimalen rechtlichen Footer unterbesetzt. Im Zweifel beginnen Sie einfach (Muster 1, 4 oder 9) und fügen Bereiche nur hinzu, wenn Sie einen echten Grund haben.

Kostenlos mit We.Inc bauen

Sie müssen einen Footer nicht von einer leeren Seite aus gestalten. Öffnen Sie We.Inc und beschreiben Sie Ihre Website in einem Satz — zum Beispiel „eine lokale Bäckerei-Website mit einem Footer, der unsere Adresse, Öffnungszeiten und Social-Links zeigt" — und der Baukasten erzeugt einen funktionierenden Ausgangspunkt, Footer inklusive, den Sie dann anpassen können.

Beim kostenlosen Plan bekommen Sie bis zu 3 Vorlagen-Websites unter einer we.inc-Adresse ohne Kreditkarte, und Sie bearbeiten die Worte und Bilder des Footers selbst im Editor (keine KI-Erzeugung im kostenlosen Plan). Wollen Sie, dass die KI den Footer-Inhalt für Sie schreibt und anpasst, und die Website auf Ihre eigene Domain statt eine we.inc-Adresse bringt, beginnt das beim Starter-Plan für 20 $/Monat. Sehen Sie die aktuellen Details unter Preise (oder starten Sie beim kostenlosen Website-Baukasten, keine Kreditkarte), oder durchsuchen Sie Vorlagen, wenn Sie lieber mit einem fertigen Design starten.

Erste Schritte mit Website-Footer-Design

Die Grundlagen von 25 funktionierenden Website-Footer-Design-Beispielen sind für jedes Unternehmen erreichbar, das bereit ist, konsistenten Aufwand zu investieren. Beginnen Sie damit, einen Abschnitt aus diesem Leitfaden zu wählen, setzen Sie ihn vollständig um, und messen Sie das Ergebnis, bevor Sie zum nächsten übergehen. Schrittweiser, validierter Fortschritt schlägt den Versuch, alles auf einmal zu tun. Brauchen Sie eine Website, einen Shop oder eine Web-App zur Unterstützung Ihrer Website-Bau-Arbeit, lässt Sie We.Inc eine bauen, indem Sie sie in einem Chat beschreiben. Dessen KI erzeugt eine live, bearbeitbare Website, die Sie visuell oder im Code verfeinern können, dann mit kostenlosem SSL auf Ihrer eigenen Domain veröffentlichen. Starten Sie Ihr kostenloses We.Inc-Konto - keine Kreditkarte nötig.

Schnelle Footer-Checkliste

Bevor Sie einen Footer ausliefern, gehen Sie das durch:

Für die Layout-Entscheidungen direkt über dem Footer siehe unseren Leitfaden zu wie man eine Startseite gestaltet, und für die Lead-Erfassung im Footer oder anderswo auf der Seite behandelt unser Kontaktformular-Leitfaden die praktische Einrichtung. Braucht Ihr Footer eine Barrierefreiheitserklärung, kann unser Barrierefreiheitserklärungs-Generator helfen, eine schnell zu entwerfen, und unser vollständiger Leitfaden zu einer Website erstellen behandelt den Rest der Seite jenseits des Footers.

Kostenlos starten · Keine Kreditkarte nötig

Product

Who It's For

Features

Resources

Company

View Sitemap