Über mich CSS-Vorlage

Der „Über mich“-Block stellt eine Person anhand von zwei nebeneinanderliegenden Bereichen gleicher Breite vor. Ein leuchtend grünes Feld auf der linken Seite enthält die Überschrift „Über mich“ sowie einen weißen Begleitabsatz, während der weiße Bereich rechts ein rundes Porträt über einem separaten beschreibenden Absatz platziert. Das zentrierte Layout nutzt großzügige vertikale Abstände, um beide Inhaltsbereiche im Gleichgewicht zu halten. Seine statische Struktur trennt die einleitende Botschaft von der durch das Porträt geprägten Personenbeschreibung und schafft so einen wiederverwendbaren Profilabschnitt, ganz ohne zusätzliche Elemente auf Seitenebene.

Grüner Kontrast trennt die Einleitung vom Porträt

Das leuchtend grüne linke Feld bildet den stärksten visuellen Akzent des Blocks. Seine weiße Überschrift „Über mich“ und der kleinere weiße Absatz bilden eine kompakte Textgruppe, sodass die Einleitung als eigenständiger Bereich lesbar bleibt, statt mit den Porträitinhalten zu verschmelzen. Durch die Aufteilung in zwei gleich breite Spalten erhält das farbige Feld dieselbe horizontale Gewichtung wie der weiße Bereich daneben.

Auf der rechten Seite setzt das runde Porträt den ersten optischen Fixpunkt in einer zweiten Inhaltsgruppe. Der separate Absatz darunter liefert beschreibenden Kontext, ohne Text direkt über das Bild zu legen. Zentrierte Inhalte und großzügige vertikale Abstände lassen beide Spalten luftig wirken, während der Kontrast zwischen Grün und Weiß die Grenze zwischen beiden Bereichen sofort erkennbar macht. Dies sind die gestalterischen Zusammenhänge, die bei der Anpassung des Blocks als CSS-basierter Abschnitt gewahrt werden sollten: Akzent-Hintergrund, weiße Schrift, die runde Bildform, Ausrichtung und Weißraum greifen ineinander, anstatt als isolierte Verzierungen zu wirken.

Da die Struktur statisch ist, können sich stilistische Änderungen innerhalb dieses Abschnitts auf Farbe, Typografie, Abstände, Bildproportionen und Ausrichtung konzentrieren. Das Ergebnis bleibt ein klarer „Über mich“-Bereich, dessen Erscheinungsbild sich harmonisch in die umgebende Designsprache einfügt.

Mit Nicepage anpassen

Wenn Sie CSS Template Builder verwenden, können Sie Farben, Schriftarten, Kopf- und Fußzeilen, Layout, Spalten und andere Designelemente sowie Inhalte und Bilder anpassen.

Herunterladen

Vorlage offline bearbeiten

1. Laden Sie die Nicepage-Anwendung für Windows und Mac herunter und installieren Sie sie. Oder WordPress- und Joomla-Plugins von Download-Seite
2. Erstellen Sie eine neue Seite oder wählen Sie eine vorhandene aus
3. Klicken Sie auf Neuen Block hinzufügen, suchen Sie nach der ID 2456157 und klicken Sie auf die Eingabetaste

Vorlage online bearbeiten

Starten Sie Online-Baukasten diese Vorlage auf unserem Hosting

Erstellen Sie fantastische Websites

WordPress

Windows App

Joomla

Mac OS App

HTML5

Online

Kostenloser Nicepage Builder

Mehr als 15.000 Vorlagen

Einfaches Ziehen und Ablegen

Keine Codierung

Für Mobilgeräte geeignet

Schlüsselwörter

Diese Vorlage mit CSS anpassen

Seitenspezifisches Styling steuern

Passen Sie das visuelle Erscheinungsbild dieser vorgefertigten Vorlage direkt im Nicepage-Editor an. Passen Sie Typografie, Abstände, Hintergründe, Rahmen, Farben, Positionierung und andere Stileigenschaften mithilfe visueller Steuerelemente an. Das Seitenlayout bleibt dabei einfach zu verwalten, ohne dass Sie manuell CSS schreiben müssen.

Benutzerdefiniertes CSS bei Bedarf hinzufügen

Für Styling-Anforderungen, die über die Standardoptionen des Editors hinausgehen, verwenden Sie Benutzerdefiniertes CSS, um gezielte Regeln hinzuzufügen. CSS kann je nach Umfang der Anpassung auf einzelne Elemente, bestimmte Seiten oder die gesamte Website angewendet werden. CSS-Klassen können verwendet werden, um benutzerdefinierte Regeln mit ausgewählten Elementen zu verknüpfen.

Minimales CSS pro Seite exportieren

Für Projekte, bei denen die CSS-Größe und die Seitenleistung wichtig sind, kann Nicepage minimales CSS für jede Seite exportieren. Anstatt auf ein einziges, großes Stylesheet zurückzugreifen, kann jede Seite eine separate CSS-Datei verwenden, die nur die für diese Seite benötigten Stilregeln enthält. Laut Nicepage-Dokumentation sind diese seitenbezogenen CSS-Dateien etwa zehnmal kompakter, wodurch unnötiger CSS-Code reduziert und die Ladezeit der Seiten verbessert wird.

Dieser Workflow kombiniert visuelles Styling mit optionalem benutzerdefiniertem CSS und optimierter seitenbezogener CSS-Ausgabe. So haben Sie bei Bedarf mehr Kontrolle über die Gestaltung, ohne dass die manuelle CSS-Bearbeitung die primäre Methode zur Anpassung der Vorlage darstellt.