Unsere Leistungen CSS-Vorlage

Der Block „Unsere Erfolge“ nutzt ein seitenbreites Foto von Zusammenarbeit am Arbeitsplatz als visuelle Kulisse für eine wiederholte Reihe aus vier Zählerkarten. Die Karten überlappen den unteren Rand des Bildes und sind horizontal ausgerichtet, wodurch ein klarer Übergang von der Fotografie zu den Zahlenwerten entsteht. Jedes leuchtend gelbe rechteckige Panel enthält ein weiß umrandetes kreisförmiges Badge und zentrierte weiße Typografie. Die Beschriftungen lauten „Zufriedene Kunden“, „Abgeschlossene Projekte“, „Tassen Kaffee“ und „Auszeichnungen“, während die dargestellten Zahlen Beispielinhalte sind. Eine kleine, zentrierte Bildquellenangabe unterhalb der Karten rundet den Abschnitt als dezentes Detail ab.

Gelbe Zähler-Panels balancieren das Arbeitsplatz-Foto aus

Das seitenbreite Foto von Zusammenarbeit am Arbeitsplatz verleiht dem Block ein weites visuelles Feld, während die vier gelben Zähler-Panels entlang der Unterkante für einen markanteren grafischen Rhythmus sorgen. Durch ihre Überlappung wirken die Karten mit dem Bild verbunden, anstatt als zusammenhanglose Reihe darunter zu stehen. In jedem Panel fasst ein weiß umrandetes kreisförmiges Badge die zentrierte weiße Typografie ein, sodass das Gestaltungsmuster über alle vier Zusammenfassungseinheiten hinweg einheitlich bleibt.

Diese Beziehungen definieren das visuelle Grundsystem des Blocks: fotografischer Kontext oben, kräftig gelbe Panels unten und kreisförmige weiße Details, die sich von Karte zu Karte wiederholen. Die Beschriftungen – Zufriedene Kunden, Abgeschlossene Projekte, Tassen Kaffee und Auszeichnungen – sind kurz genug, um gegenüber den Zahlen visuell untergeordnet zu bleiben, während die einreihige Anordnung den Abschnitt übersichtlich hält. Die kleine, zentrierte Quellenangabe nimmt eine zurückhaltende Position unter den Karten ein, damit der Bildnachweis nicht mit dem Hauptkontrast zwischen Bild und Panels konkurriert.

Für eine Umsetzung als CSS-Template sind diese Gestaltungsregeln wichtiger als das Hinzufügen neuer Inhalte. Farben, Badge-Konturen, Typografie, Abstände, Überlappung und Ausrichtung lassen sich verfeinern, während die Struktur mit vier Zählern intakt bleibt. Das visuelle Konzept kann auf benachbarte Abschnitte abgestimmt werden, doch das Styling dieses Blocks bezieht sich auf das eigene Bild, die Karten und die Quellenangabe und definiert kein vollständiges Designsystem für die gesamte Website.

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