Mittel CSS-Vorlagen

Flexible Medium-CSS-Vorlagen für abwechslungsreiche visuelle Layouts

Das Styling ist die Ebene, die Sie in einer CSS-Vorlage am stärksten steuern. Farben, Schriftgrößen und Abstände sind in jedem Design vordefiniert. Dasselbe gilt für die Art und Weise, wie sich Blöcke auf schmalen Bildschirmen neu anordnen. Die Designs der Medium-Kollektion reichen von schlichten typografischen Blöcken bis hin zu Event-Layouts, die auf großen Fotos basieren. Ein frühzeitiger Vergleich ihres Stylings erspart daher spätere Nacharbeit.

Wie stark sich vorgefertigte Stile unterscheiden

Die meisten visuellen Entscheidungen in diesen Designs lassen sich drei Bereichen zuordnen:

1. Farbe bestimmt den Großteil der Stimmung. „Mittlerer Text mit Schaltfläche“ setzt auf schwarzen Text auf weißem Grund mit einer einzelnen blauen Schaltfläche als Akzent, während Fashion & Music ganze Abschnitte in Orange taucht.
2. Typografie prägt den Tonfall ebenso stark. Fett formatierte Wörter in der Überschrift von „Mittlerer Text mit Schaltfläche“ setzen Akzente ohne zusätzliche Farbe, und Fashion & Music setzt auf schmal proportionierte Überschriften, die wie Plakatschriften wirken.
3. Karten veranschaulichen den Umgang mit wiederkehrenden Inhalten. Modern Technology Devices platziert drei weiße Karten mit weichen Schatten über der unteren Kante eines violetten und magentafarbenen Hintergrunds.

Wenn Demomaterial ersetzt wird

Ein kurzer Test mit eigenen Inhalten zeigt, wie flexibel das Styling reagiert:

1. Ersetzen Sie die Demo-Überschrift durch Ihre längste Überschrift. Bei „Mittlerer Text mit Schaltfläche“ verschiebt eine Überschrift, die über drei Zeilen umbricht, die Balance; Zeilenhöhe und Textbreite müssen daher möglicherweise angepasst werden.
2. Platzieren Sie eigene Fotos hinter dem Text. Weiße Schrift, die auf dem Demofoto von Fashion & Music gut lesbar ist, kann auf einem hellen Bild verblassen. Ein dunkleres Overlay oder ein durchgehender Farbstreifen hinter den Worten stellt die Lesbarkeit wieder her.
3. Ändern Sie die Palette in den Theme-Farben. Elemente, die Theme-Farben nutzen, übernehmen die Anpassung; eine manuell umgefärbte Schaltfläche behält dagegen ihren bisherigen Farbton.
4. Schalten Sie die responsiven Modi von großen Bildschirmen bis hinunter zu Smartphones durch. Kartenabstände und Schriftgrößen benötigen dort oft eigene Werte, und die Überlappung in Modern Technology Devices verdient einen genauen Blick.

Kartenreihen basieren mitunter auf CSS Grid oder Flexbox, und diese Wahl beeinflusst, wie Elemente bei Platzmangel umbrechen. In jedem Modus können Sie Größen und Abstände separat anpassen.

Benutzerdefiniertes CSS ergänzt fehlende Einstellungen

Standard-Bedienelemente decken die meisten Anpassungen an Farben, Schriftarten und Abständen ab. Benutzerdefiniertes CSS hilft bei Details, für die es keine eigene Einstellung gibt, beispielsweise beim Ausgleichen der Zeilenumbrüche in einer langen Überschrift. Nicepage unterstützt benutzerdefinierte Regeln für ein einzelnes Element oder für die gesamte Website. Da diese Regeln mit den Standardstilen kollidieren können, empfiehlt sich eine Prüfung in der Vorschau und nochmals auf der veröffentlichten Website. Ein passendes Design wirkt auch dann stimmig, wenn eigene Überschriften, Fotos und Farbpaletten das Demomaterial ersetzen – selbst auf Smartphone-Breite.