Unsere Geschichte CSS-Vorlage

Der Block „Unsere Geschichte“ stellt ein Unternehmen durch eine markante Überschrift, einen begleitenden Absatz, ein kreisförmiges Bild von drei Baufachleuten und einen Button „Mehr erfahren“ vor. Sein prägendes Layout platziert das Bild auf der rechten Seite, während eine abgerundete weiße Textkarte den unteren linken Bereich des Bildes überlappt. Dunkler Text, großzügige Innenabstände und der pillenförmige Button erzeugen eine klare Hierarchie innerhalb der Karte. Dieser statische Abschnitt ist als About-Story-Präsentation aufgebaut, bei der das Bild visuellen Kontext liefert und der Textbereich die Erklärung sowie die weiterführende Aktion bereitstellt.

Abgerundete Karte und kreisförmiges Bild prägen das Styling

Das kreisförmige Bild und die überlappende weiße Karte bilden das zentrale visuelle Gestaltungssystem dieses Blocks. Das Bild ist rechts zu einem großen Kreis zugeschnitten, während die Karte mit abgerundeten Ecken und großzügigen Innenabständen eine eigenständige Lesefläche über dem unteren linken Teil des Bildes schafft. Diese Überlappung ist kein seitenweiter Effekt, sondern die zentrale visuelle Beziehung innerhalb dieses einzelnen Abschnitts.

Dunkler Text verleiht der Überschrift „Unsere Geschichte“ und dem begleitenden Absatz einen starken Kontrast zur weißen Karte. Der pillenförmige, dunkle Button „Mehr erfahren“ setzt anschließend einen kompakten visuellen Akzent unter dem Fließtext und trennt den erläuternden Inhalt von der Handlungsaufforderung, ohne einen zusätzlichen Inhaltsbereich zu erfordern. Im Kontext einer CSS-Vorlage lassen sich diese Eigenschaften an das umgebende Design anpassen, während das grundlegende Story-Layout erhalten bleibt: Der Kreis behält seine Bildfunktion, die Karte bleibt der Textcontainer und der Button markiert weiterhin den nächsten Schritt.

Das Styling ist daher besonders wirkungsvoll, wenn Farbe, Eckenradius, Abstände, Typografie, Bildzuschnitt und Überlappung harmonisch zusammenspielen müssen. Eine hellere oder dunklere Farbpalette kann zwar die Stimmung verändern, doch das Zusammenspiel zwischen dem kreisförmigen Foto und der abgerundeten Karte sollte als prägendes visuelles Merkmal dieses Blocks stets erkennbar 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 3554665 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.