Unterseite CSS-Vorlagen

Footer-Inhalte erfordern mehr als die richtige Platzierung, wenn mehrere Linkgruppen, Kontakte und rechtliche Angaben sich begrenzten Raum teilen. Eine CSS-orientierte Vorlage bietet ein visuelles System für Spalten, Abstände, Kontraste, Ausrichtung und die Ausgewogenheit des Bereichs.

Mehr CSS-Vorlagen aus der Kategorie Text & Schaltfläche

Andere Text & Schaltfläche CSS-Vorlagen

Kreative untere CSS-Vorlagen für Rasterzeilen, Kontaktbänder und Footer

Untere CSS-Vorlagen enthalten die visuellen Regeln für den letzten Bereich einer Seite, bis hin zu Innenabständen und Farben. In dieser Sammlung nimmt dieser Bereich mehrere Formen an: von einer Zeile aus Rasterzellen mit Text und Schaltflächen über einen geteilten Textblock bis hin zu einem Kontaktband. Je näher die Standardeinstellungen einer Vorlage an Ihren Inhalten liegen, desto weniger Regeln müssen Sie später anpassen.

Spalten, die sich auf Smartphones untereinander anordnen

Breitere Bildschirme können mehrere parallele Gruppen aufnehmen, während schmalere Layouts sie in einer gut lesbaren Abfolge stapeln können. Grid- oder Flexbox-Regeln steuern diesen Wechsel an festgelegten Breakpoints, sodass vier Linkspalten auf einem Laptop auf einem Smartphone zu einer einzigen Spalte werden.

Die Dokumentation zum Grid Element von Nicepage beschreibt Optionen für Spalten, Zeilen und Abstände innerhalb eines Blocks. In Vorlagen, die auf einem Grid Repeater basieren, passt das Formatieren einer Zelle automatisch die restlichen an, und die Spaltenanzahl kann über verschiedene responsive Modi hinweg variieren.

Jede Ausgangsanordnung eignet sich für eine andere Art von unterem Inhalt:

  • Mehrere Spalten nebeneinander passen gut zu einem Footer mit vielen Links, solange die Zwischenabstände die Gruppen sauber voneinander trennen.
  • Ein untereinander angeordnetes Layout eignet sich für eine kurze, zentrierte Schlussbotschaft über einer einzelnen Schaltfläche und ändert sich auf dem Smartphone kaum.
  • Eine kompakte einzelne Zeile eignet sich für ein schmales Band mit einem Copyright-Hinweis und wenigen Icons, sofern der Text kurz bleibt.

Innenabstände und Kontrast am Ende des Inhalts

Untere CSS-Vorlagen reichen von luftig gestaltet bis hin zu dicht gepackt. Großzügige Innenabstände um einen minimalistischen unteren Bereich lassen wenige Zeilen Kontakttext gezielt und stimmig wirken. Bei dichten Linkspalten verhindern geringere Abstände, dass sich das Band zu weit nach unten zieht.

Auch der Kontrast zum darüberliegenden Inhalt variiert. Ein dunkles Band schließt die Seite nach unten deutlich ab, während eine feine Rahmenlinie auf dem Seitenhintergrund einen weicheren Übergang schafft. Diese weichere Kante ist nach einem dunklen Inhaltsbereich die sicherere Wahl, da ein direkt folgendes dunkles Band sonst zu einem einzigen schweren Block verschmilzt.

Große Typografie, Kleingedrucktes

Eine Vorlage hebt den Markennamen oder eine Kontaktüberschrift größer und kontrastreicher hervor, während rechtliche Hinweise kleiner und dezenter bleiben. Eine andere hält jede Zeile in derselben Größe und setzt allein auf die Anordnung. Wenn Ihr unterer Bereich ein zentrales Element enthält, nach dem Nutzer suchen – wie eine Telefonnummer –, ist die erste Variante schneller einsatzbereit.

Nicepage Theme Colors wenden ein einheitliches Farbschema auf das gesamte Projekt an, und das Wechseln einer Voreinstellung passt alle Elemente an, die diese Farben nutzen. Ein Bereich mit einer benutzerdefinierten Farbe behält diese auch nach dem Wechsel und wirkt wie von einer anderen Website übernommen. Eine Vorlage, deren unterer Bereich bereits auf Theme Colors basiert, übernimmt Ihre Farbpalette ohne zusätzlichen Aufwand.