Hut CSS-Vorlagen

Flexible Hut-CSS-Templates für responsive Kataloge und Kollektionen

Hut-CSS-Templates bringen bereits vordefinierte Stile für Katalog-Raster und Produktkarten mit, sodass Sie diese meist nur noch an Ihre Fotos anpassen müssen. Ein Shop, der Filz-Fedoras neben Baseballkappen führt, benötigt Karten mit einheitlichem Erscheinungsbild, bei denen jede Form dennoch ihre eigenen Proportionen behält.

Anpassbare Raster, Bildrahmen und Hut-Karten

Kopfbedeckungen lassen sich in einem einheitlichen Raster nur schwer darstellen. Eine breite Strohkrempe benötigt horizontalen Raum, eine Kappe wirkt im Profil am besten, damit der Schirm sichtbar ist, und eine hohe Filzkrone streckt das Bild nach oben. Da die meisten Kataloge Modelaufnahmen mit einfachen Produktfotos mischen, funktioniert eine einzige Zuschnittregel selten für alle. Achten Sie darauf, wie die Bild-Container auf Fälle wie diese reagieren:

• Ein Basthut mit breiter Krempe, der von einem quadratischen Rahmen abgeschnitten wird, benötigt meist einen Contained-Fit-Modus und etwas mehr Innenabstand.
• Eine von der Seite fotografierte Baseballkappe wirkt in einer hohen Porträtkarte verloren, es sei denn, das Seitenverhältnis lässt sich pro Kollektion anpassen.
• Eine Nahaufnahme des Strohgeflechts eignet sich gut für einen Cover-Zuschnitt, während die Gesamtaufnahme daneben die vollständige Silhouette zeigen muss.

Eine helle Karte schmeichelt natürlichem Stroh, doch dunkler Filz und leuchtende Sportmützen erfordern oft einen tieferen Farbton – mit Größenangaben, die auf beiden gut lesbar bleiben.

Wiederverwendbare Regeln auf schmalen Bildschirmen

Ein solides Template gestaltet seine Karten mit gemeinsamen Klassen, sodass eine neue Serie von Kappen nicht bedeutet, jede Karte von Hand formatieren zu müssen. CSS Grid ordnet die Karten über die Zeile an, und Flexbox hält Titel und Größenhinweis in jeder Karte stabil. „Strohhut Kreissäge“ passt auf eine Zeile, während „Handgeflochtener Sonnenhut aus Bast mit breiter Krempe“ auf zwei Zeilen umbricht und den Kopfumfang-Bereich unter die benachbarten Karten verschieben kann. Auf kleineren Bildschirmen benötigen Krempen weiterhin seitlichen Freiraum, wenn die Spalten schmaler werden.

Farb-Muster aus marineblauem und anthrazitfarbenem Filz können in kleinen Kreisen fast identisch wirken, weshalb ausgeschriebene Namen und ein deutlich sichtbarer Auswahlaustand helfen. Das Styling ändert jedoch nur das Aussehen; die Auswahl einer Variante mit Live-Lagerbestand erfordert ein eigenes Setup.

Benutzerdefiniertes CSS in Nicepage

Sie können das Benutzerdefinierte CSS hinzufügen, um eine Elementklasse zuzuweisen und benutzerdefinierte Stile auf Element-, Seiten- oder Website-Ebene zu ergänzen. Eine hervorgehobene Karte für eine neue Filzkollektion kann so einen eigenen Rahmen und Schatten erhalten, während die Typografie den Website-Regeln folgt. Nicepage führt diese Regeln nicht direkt im Editor aus; prüfen Sie das Ergebnis und eventuelle Konflikte mit den integrierten Stilen daher in der Vorschau.

Die wahre Bewährungsprobe für ein Hut-CSS-Template folgt mit der nächsten Kollektion. Wenn seine Stile nach wenigen kleinen Anpassungen auch eine Reihe hoher Zylinder oder Snapbacks mit flacher Krempe problemlos aufnehmen, haben Sie die richtige Wahl getroffen.