Blatt CSS-Vorlagen

Leaf-CSS-Vorlagen für pflanzenbetonte Layouts

Eine Leaf-CSS-Vorlage liefert eine fertige visuelle Basis mit grünen und erdigen Tönen, großzügigen Bildbereichen und einer Typografie, die sich dezent neben der Fotografie einfügt. Die Seiten und Texte können bereits existieren; was Sie von hier übernehmen, ist das Erscheinungsbild zusammen mit der Freiheit, es an Ihre eigene Marke anzupassen. Der Großteil der anschließenden Arbeit besteht darin, Demo-Farbtöne durch eigene zu ersetzen und zu entscheiden, wie viel Raum die Fotografien erhalten.

Palette, Abstände und Card-Proportionen

Die meisten Anpassungen finden an wenigen Stellen statt:

1. das Farbset, bei dem das Ersetzen von zwei Demo-Gröntönen durch eigene Farben die Stimmung jedes Bildschirms verändert;
2. Schriftgrößen und Zeilenhöhe, die darüber entscheiden, ob eine lange Beschreibung luftig oder gedrängt wirkt;
3. Card-Proportionen, vom Bildseitenverhältnis bis hin zum Innenabstand um eine Bildunterschrift;
4. das Erscheinungsbild von Schaltflächen und Links beim Darüberbewegen des Mauszeigers durch Besucher.

Dies sind gemeinsame Regeln, sodass eine einzelne Änderung überall dort greift, wo dieselbe Klasse vorkommt, und eine lange Auflistung genauso schnell neu dargestellt wird wie eine kurze. Aus diesem Grund bleibt der visuelle Charakter auch bei Anpassungen erhalten: Ändern Sie die Farbtöne sowie die Größen, und die Vorlage wirkt weiterhin wie aus einem Guss.

Fotoraster in Smartphone-Größe

Websites rund um Pflanzenwelt und Botanik leben von Bildern, und Bilder sind das Erste, was auf einem schmalen Bildschirm ins Wanken gerät. Drei Aspekte zeigen schnell, ob eine Vorlage gut damit umgeht:

1. wie viele Spalten das Raster bei Tablet-Größe beibehält;
2. ob eine Bildunterschrift lesbar bleibt, sobald das zugehörige Bild schrumpft;
3. was aus den Abständen wird, da ein zu enges Raster auf einem Smartphone schnell überladen wirkt

Fotografien von Blättern leiden zudem mehr unter Zuschnitten als reine Produktaufnahmen, da die Form eines Wedels in dem Moment verloren geht, in dem ein quadratisches Thumbnail ihn durchschneidet. Die responsiven Modi von Nicepage ermöglichen es Ihnen, während der Bearbeitung zwischen verschiedenen Bildschirmbreiten zu wechseln, damit die Smartphone-Ansicht am Tag der Veröffentlichung keine Überraschung wird.

Stil-Ausnahmen, die sich lokal lohnen

Früher oder später widersetzt sich eine Seite den übergreifenden Gestaltungsregeln. Eine saisonale Werbeaktion verlangt nach dunkleren Cards, oder ein einzelner langer Leitfaden benötigt breiteren Text als alles um ihn herum. Nicepage unterstützt benutzerdefiniertes CSS auf Element-, Seiten- und Website-Ebene, sodass Ausnahmen so eng begrenzt bleiben, wie es nötig ist.

Visuelle Kontrolle ist der Grund, warum Sie dieses Format überhaupt wählen. Bewerten Sie die Optionen nach fotobetonten Abschnitten, die Ihren Vorstellungen bereits nahekommen, einer Palette, die sich mit wenigen Handgriffen an Ihre Farben anpassen lässt, und ausreichend Spielraum, um eine Regel genau dort zu überschreiben, wo das Design es verlangt.