30 Tage Fitness Challenge CSS-Vorlage

Der Block für die 30-Tage-Fitness-Challenge kombiniert einen hellgrauen Hintergrund mit einem zentrierten Textbereich und drei Zonen für Fitnessfotografie. Ein großes Bild nimmt die linke Seite ein, während zwei kleinere Bilder rechts vertikal übereinander angeordnet sind. So entsteht ein visueller Rahmen um die Dachzeile, die Überschrift „30 Tage Veränderung“, den ergänzenden Absatz und den abgerundeten Button „Jetzt starten“. Eine schwarze, schmale Display-Typografie verleiht der Hauptbotschaft starken Nachdruck, während der magentafarbene Button einen deutlichen Akzent setzt. Großzügiger Weißraum trennt den Text von den Bildern und sorgt dafür, dass sich die Einführung der Challenge leicht erfassen lässt.

Grauer Raum, schmale Typografie und Magenta-Akzente strukturieren den Challenge-Block

Das Design des Blocks beruht auf einem ausgewogenen Zusammenspiel von Farbe, Typografie und Bildsprache. Ein hellgrauer Hintergrund schafft eine ruhige Fläche für den zentrierten Inhalt, während schwarzer Text der Überschrift „30 Tage Veränderung“ genügend Kontrast verleiht, um die visuelle Hierarchie anzuführen. Der fette, schmale Display-Schriftschnitt hebt den Titel markant hervor, ohne zusätzlichen Platz zu beanspruchen, sodass der darunterliegende Begleittext optimal lesbar bleibt.

Der abgerundete magentafarbene Button „Jetzt starten“ setzt den kräftigsten Farbakzent innerhalb des Abschnitts. Seine Form und der gesättigte Farbton heben die Handlung klar vom neutralen Hintergrund und der dunklen Schrift ab, während der umgebende Freiraum verhindert, dass er im Textblock untergeht. Das große Fitnessfoto links und die beiden übereinanderliegenden Bilder rechts bringen visuelle Dynamik ein, deren Anordnung die zentrale Botschaft jedoch stets als Ankerpunkt bewahrt.

Als Interpretation einer CSS-Vorlage beschreiben diese Eigenschaften das Erscheinungsbild dieses spezifischen Blocks und kein seitenweites Designsystem. Hintergrundton, Schriftstärke der Überschrift, Buttonfarbe, Eckenrundung, Bildproportionen und Abstände lassen sich flexibel anpassen, während die bestehenden Challenge-Inhalte und der dreiteilige Aufbau intakt bleiben. Die wiederkehrende Bildeinrahmung verleiht dem Abschnitt zudem einen stimmigen visuellen Rhythmus: Ein breites Bildfeld balanciert die zwei schmaleren Felder aus, ganz ohne zusätzliche Komponenten oder Interaktionen zu erfordern.

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