Unsere Werte CSS-Vorlage

„Unsere Werte“ ist ein Block für hervorgehobene Inhalte, der auf einer klaren geteilten Komposition basiert. Eine große, schmal laufende Überschrift steht auf der linken Seite, während drei gleichwertige Karten rechts eine horizontale Reihe bilden. Die Karten tragen die Bezeichnungen Recherche, Strategie und Design und kombinieren jeweils ein quadratisches mintgrünes Icon, einen dunklen Titel, Beschreibungstext und eine Richtungspfeil-Grafik. Großzügige horizontale Abstände trennen die Überschrift auf weißem Hintergrund von der Kartengruppe. Die drei Beschreibungen nutzen denselben Fließtext, was dem Abschnitt ein einheitliches, wiederkehrendes Inhaltsmuster verleiht.

Mintgrüne Icons strukturieren das visuelle System aus drei Karten

Der weiße Hintergrund, die große schwarze Überschrift und die großzügigen horizontalen Abstände bilden das visuelle Grundgerüst dieses Abschnitts. „Unsere Werte“ nimmt einen separaten Bereich auf der linken Seite ein, während Recherche, Strategie und Design als drei parallele Karten rechts ausgerichtet sind. Diese Teilung hält den Abschnittstitel visuell unabhängig von den wiederholten Inhalten und gibt der Kartenreihe den Raum, als geschlossene Einheit zu wirken.

Jede Karte folgt demselben visuellen Schema: ein quadratisches mintgrünes Icon, ein dunkler Titel, Beschreibungstext in hellerem Grau und eine Richtungspfeil-Grafik. Die einheitliche Gestaltung erleichtert den Vergleich der drei Punkte und setzt gleichzeitig einen klaren Farbakzent innerhalb der sonst zurückhaltenden Farbpalette. Der bündig ausgerichtete Karteninhalt sorgt zudem dafür, dass die Reihe geordnet wirkt und nicht wie drei unzusammenhängende Textfragmente.

Als CSS-Template-Interpretation liegt der praktische Schwerpunkt auf der stilistischen Beziehung zwischen diesen Elementen. Farbe, Typografie, Abstände, Ausrichtung, Icon-Form und Textkontrast lassen sich innerhalb des Blocks flexibel anpassen, ohne die Botschaft zu Werten und Kompetenzen zu beeinträchtigen. Nicepage unterstützt gezieltes benutzerdefiniertes CSS, wenn ein Projekt Formatierungen außerhalb der Standard-Bedienelemente erfordert; die visuelle Identität entsteht hier jedoch primär aus den konkreten Beziehungen, die der Abschnitt bereits mitbringt.

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