Zwei Textblöcke CSS-Vorlage

Ein hellgraues Überschriftenfeld leitet diesen textfokussierten Bereich ein, gefolgt von einem zweispaltigen Inhaltsbereich. Die linke Spalte präsentiert hervorgehobenen Begleittext auf einem gedämpft blauen Hintergrund mit kräftiger, heller Schrift, während die rechte Spalte zwei Absätze Fließtext auf weißem Grund umfasst. Rechteckige Flächen, großzügiger Weißraum und der Kontrast zwischen in Versalien gesetzten Überschriften und kleinerem Absatztext schaffen eine klare redaktionelle Hierarchie. Diese Anordnung hebt die betonte Botschaft visuell deutlich von der längeren Lesespalte ab und bewahrt gleichzeitig einen statischen, wiederverwendbaren Inhaltsbereich für eine Seite.

Gedämpft blaue Betonung prägt die zweispaltige Texthierarchie

Das hellgraue Überschriftenfeld schafft eine ruhige Auftaktzone, bevor der Hauptinhalt beginnt. Darunter teilt sich der Bereich in zwei nebeneinanderliegende Spalten mit unterschiedlichen visuellen Aufgaben: Die linke Spalte isoliert hervorgehobenen Begleittext in gedämpftem Blau mit fetter, heller Schrift, während die rechte Spalte zwei Absätze auf weißem Hintergrund für längeres Lesen bereithält. Dieser Kontrast verleiht dem Bereich einen klaren Einstiegspunkt, ohne Interaktionen einzuführen oder seinen Zweck als Langtext zu verändern.

Für die Umsetzung als CSS-Vorlage liegt die entscheidende Styling-Beziehung zwischen der Gestaltung der Flächen und der Hierarchie. Die rechteckigen Hintergründe trennen Überschrift, Betonung und Fließtextbereiche, während großzügiger Weißraum verhindert, dass die beiden Spalten zu einer dichten Textwand werden. Die Gestaltung der Überschrift in Versalien kann optisch präsent bleiben, da sie durch kleineren Absatztext und das dezentere graue Feld darüber ausbalanciert wird.

Diese Entscheidungen bieten gezielte Ansatzpunkte für das Styling des Blocks selbst: die graue Überschriftenfläche, das gedämpft blaue Hervorhebungsfeld, der helle Textkontrast, die rechteckigen Formen, der Spaltenabstand und die typografische Skalierung. Sie lassen sich als abgestimmtes lokales visuelles System verfeinern, während die Überschrift, der hervorgehobene Text und das Inhaltsmodell mit zwei Absätzen intakt bleiben.

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 754342 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.