Zeichen CSS-Vorlagen

Responsive CSS-Vorlagen für Charaktere

Bei der Wahl einer CSS-Vorlage für Charaktere geht es vor allem darum, die Stimmung für die Person im Mittelpunkt festzulegen – egal, ob das Porträt einen erfahrenen Berater oder ein junges Fotomodell zeigt. Jedes Design dieser Kollektion ist bereits vollständig gestaltet. Ein Autorenprofil erhält tiefes Petrol und eine Schreibschrift-Überschrift, eine Person wird in Schwarz-Weiß auf Hellgrau dargestellt und ein Künstler kreisrund eingerahmt. Entscheiden Sie sich zuerst für den grundlegenden Look und stimmen Sie Farben und Schriftarten anschließend auf den Rest der Website ab.

Wie jedes Design sein Motiv hervorhebt

Im direkten Vergleich unterscheiden sich die Designs durch wenige visuelle Entscheidungen:

1. Wie der Text vom Gesicht ferngehalten wird. Das Profil für freiberufliche Autoren weist der weißen Überschrift und dem Absatz eine eigene Spalte neben dem Porträt zu, sodass der Text niemals über das Foto verläuft.
2. Woher die Farbe kommt. Tiefes Petrol füllt den Hintergrund des Autorenprofils aus, während About Our Agency fast monochrom bleibt.
3. Wie viel Gewicht die Überschrift erhält. About Our Main Artist kombiniert ein kreisförmiges Porträt mit einer übergroßen Serif-Überschrift, wodurch der Name genauso viel Aufmerksamkeit auf sich zieht wie das Gesicht.

Bei den Autoren- und Agentur-Designs ragt das Porträt zudem leicht über den Rand des Hintergrunds hinaus – ein dezenter Versatz, der zusätzliche Tiefe verleiht.

Farben anpassen, bevor Sie Custom CSS verwenden

Sobald Sie sich für eine Vorlage entschieden haben, erfolgen die Änderungen meist in dieser Reihenfolge:

1. Tauschen Sie das Demobild aus und prüfen Sie den Bildausschnitt, da ein runder Rahmen ein Foto deutlich enger zuschneidet als ein Rechteck.
2. Passen Sie Farben und Schriftarten über die visuellen Steuerelemente an. Theme-Farben aktualisieren jedes Element auf der gesamten Website, das sie verwendet, während eine benutzerdefinierte Farbe lokal bleibt.
3. Nutzen Sie Custom CSS nur für Details, die über die Bedienelemente nicht erreichbar sind – etwa einen Graustufenfilter, der ein Farbfoto an den Agentur-Look anpasst.

Custom CSS kann auf ein einzelnes Element, eine Seite oder die gesamte Website angewendet werden. Nicepage führt den Code nicht direkt im Editor aus, sodass Sie den Filter in der Vorschau sehen, während die Arbeitsfläche weiterhin das farbige Original anzeigt.

Smartphones verändern die Balance

Wechseln Sie in den responsiven Modi zur Smartphone-Ansicht und prüfen Sie, wie das Layout das Porträt und den Text neu anordnet, sobald beide nicht mehr nebeneinander in eine Zeile passen. Stellen Sie sicher, dass das Gesicht weiterhin zuerst ins Auge fällt, der Text lesbar bleibt und die Proportionen gewollt wirken. Planning a Vacation benötigt diesen Test besonders, da der weiße Text direkt auf einem Schwarz-Weiß-Foto liegt und ein schmalerer Bildschirm Wörter auf hellere Bereiche verschieben kann. Wenn ein Design hinsichtlich Proportionen und Hintergrund bereits zu Ihrem Bild passt, sind für die Feinabstimmung nur wenige kleine Änderungen nötig.