Informationsblock CSS-Vorlage

Vier wiederkehrende Kontaktkarten leiten den Abschnitt mit Angaben zu Büro, Telefon, Fax und E-Mail ein, während der untere Bereich ein Anfrageformular von begleitenden Kontaktinhalten trennt. Das Formular umfasst Eingabefelder für E-Mail, Name und Nachricht, gefolgt von einer Schaltfläche zum Absenden. Auf der rechten Seite verleihen die Überschrift „Kontakt aufnehmen“, Begleittext und vier Social-Media-Icons der Anfrage zusätzlichen Kontext. Marineblau, Hellgrau, weiße Karten, weiche Schatten, blaue Liniensymbole, großzügige Abstände und ein starker Kontrast verleihen dem Bereich ein klar strukturiertes visuelles System für Kontaktinformationen.

Weiße Kontaktkarten schaffen ein klares visuelles System

Die vier Kontaktkarten geben dem Block seinen visuellen Rhythmus, bevor der Anfragebereich beginnt. Jede Karte nutzt eine weiße Fläche innerhalb der marineblauen und hellgrauen Farbpalette, wobei abgerundete Ecken, weiche Schatten und blaue Liniensymbole dafür sorgen, dass Büro-, Telefon-, Fax- und E-Mail-Angaben klar voneinander abgegrenzt bleiben. Ihre gleichmäßige horizontale Anordnung verleiht dem oberen Band ein einheitliches, wiederkehrendes Erscheinungsbild, anstatt die Kontaktkanäle als einen dichten Textblock darzustellen.

Darunter bilden das Formular und die begleitenden Inhalte eine zweite visuelle Beziehung. Das Formular nimmt die linke Spalte ein, während die dunkelblaue Überschrift „Kontakt aufnehmen“, kursiver Begleittext, ein beschreibender Absatz und vier Social-Media-Icons die rechte Seite füllen. Diese Trennung sorgt dafür, dass der Eingabebereich leicht erkennbar bleibt, während der umgebende Kontaktkontext seine eigene Hierarchie behält. Großzügige Abstände und ein starker Kontrast zwischen dem blauen oberen Band und dem hellgrauen unteren Bereich lassen die beiden Zonen als zusammenhängende, aber optisch eigenständige Teile eines gemeinsamen Abschnitts wirken.

Für eine Interpretation als CSS-Template liegt der praktische Schwerpunkt darauf, wie sich diese Eigenschaften anpassen lassen, ohne das Kontaktmodell zu verändern: Eckenradius der Karten, Weichheit der Schatten, Symbolfarben, Schriftgröße der Überschriften, Spaltenabstände und Kontraste können variiert werden, während die vier Kanäle und das Anfrageformular ihre Funktion beibehalten. Das Ergebnis ist ein Gestaltungssystem, das speziell auf diesen Kontaktbereich zugeschnitten ist, statt einer pauschalen, website-weiten Lösung.

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