Arbeite mit uns CSS-Vorlage

Der Block „Arbeiten Sie mit uns“ stellt eine Gruppe von Unternehmensdienstleistungen über die Überschriften „Wir arbeiten hart, wir feiern hart“ und „Arbeiten Sie mit uns“ vor. Ein abgedunkeltes Foto mit Büromotiv füllt den Hintergrund, während die weiße Typografie über dem Bild deutlich lesbar bleibt. Unter dem einleitenden Text bilden vier weiße, rechteckige Karten eine horizontale Reihe für die gleichrangigen Kategorien Beratung, Entwicklung, Planung und Strategie. Jede Karte zentriert ein graues, kreisförmiges Icon über einer dunklen Leistungsbezeichnung, wodurch ein wiederkehrendes visuelles Muster mit starkem Kontrast zwischen Karten, Text und fotografischem Hintergrund entsteht.

Weiße Karten und kreisförmige Icons prägen das Dienstleistungsdesign

Das abgedunkelte Bürofoto bildet die visuelle Basis für den Einführungstext, während der weiße Slogan „Wir arbeiten hart, wir feiern hart“ und die Überschrift „Arbeiten Sie mit uns“ eine kontraststarke Textebene darüber bilden. Die Bildbearbeitung verleiht dem oberen Bereich des Abschnitts Tiefe, doch die Typografie bleibt der klarste Einstiegspunkt, da sie sich durch tonalen Kontrast vom Hintergrund abhebt.

Unter dieser bildbetonten Einleitung schaffen vier weiße rechteckige Karten ein einheitliches Gestaltungssystem für Beratung, Entwicklung, Planung und Strategie. Durch ihre übereinstimmenden Proportionen, zentrierten grauen Kreis-Icons und dunklen Beschriftungen wirken die Kategorien wie eine zusammenhängende Einheit statt wie vier separate Flächen. Die einheitliche Kartengestaltung verleiht der horizontalen Reihe zudem einen ruhigen visuellen Rhythmus, der einen Kontrast zum stimmungsvolleren Hintergrund darüber bildet.

Bei der Umsetzung als CSS-Template liegen die wesentlichen Gestaltungsbeziehungen innerhalb dieses Blocks: Bilddunkelheit gegenüber weißem Text, weiße Kartenflächen vor dem fotografischen Hintergrund, graue Icon-Kreise auf den Karten und eine konsistente Ausrichtung über die gesamte Dienstleistungsreihe hinweg. Diese Eigenschaften lassen sich präzise anpassen, während die Servicestruktur des Abschnitts erhalten bleibt. Das benutzerdefinierte CSS von Nicepage bietet zusätzliche Gestaltungsfreiheit, wenn ein Projekt gezielte Regeln für Farben, Abstände, Rahmen oder die Kartendarstellung dieses Blocks erfordert.

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