Newsletter abonnieren CSS-Vorlage

Der Block „Newsletter abonnieren“ kombiniert ein Hintergrundbild im Spa-Stil mit einem auf Wellness ausgerichteten Einleitungstext und einem Anmeldeformular. Das Formular umfasst getrennte Eingabefelder für Name und E-Mail-Adresse gefolgt von einem Absende-Button, was dem Bereich einen klaren Erfassungszweck verleiht. Das breite horizontale Layout platziert den Text über einem einzeiligen Formular, während das helle Bild mit Handtüchern, Steinen, Kerzen, Pflanzen und einer Ölflasche eine ruhige visuelle Atmosphäre schafft. Linksbündiger Inhalt, eine dunkle, schmal gesetzte Typografie, weiße, umrandete Felder und ein satter schwarzer Button erzeugen eine zurückhaltende Präsentation für Beauty und Wellness.

Helle Spa-Motive umrahmen ein klares Newsletter-Formular

Das sanfte Spa-Foto bestimmt die visuelle Kulisse dieses Newsletter-Bereichs: Handtücher, Steine, Kerzen, Pflanzen und eine Ölflasche schaffen einen hellen Wellness-Hintergrund. Vor diesem Bild bilden die große, schwarze, schmal gesetzte Überschrift und der kleinere dunkle Absatz einen gut lesbaren Textbereich auf der linken Seite. Der Text verleiht der Anmeldung einen klaren thematischen Schwerpunkt, indem er Spa-Behandlungen, Produkte, Aktionen, Wellness-Rezepte und Schönheitsgeheimnisse aufgreift.

Bei der Gestaltung des Blocks geht es darum, den Kontrast zwischen dem zart schattierten Bild und den Formularelementen zu wahren. Die weißen Eingabefelder mit schwarzen Konturen heben die Felder für Name und E-Mail vom Hintergrund ab, ohne eine wuchtige Card-Fläche einzuführen. Ein satter schwarzer Absende-Button setzt das stärkste visuelle Gewicht und bildet einen eindeutigen Abschluss der horizontalen Formularzeile. Abstände, typografische Hierarchie, Feldumrandungen, Button-Dimensionen und Bildplatzierung lassen sich als zusammenhängende Eigenschaften verfeinern, statt sie als voneinander losgelöste Verzierungen zu behandeln.

Diese Interpretation als CSS-Template konzentriert sich somit auf das Erscheinungsbild dieses konkreten Anmeldebereichs. Das Design kann für ein Spa-Thema ruhig und luftig bleiben, oder dieselbe Struktur lässt sich an eine breitere Beauty-Markenpalette anpassen, während Überschrift, Fließtext, die beiden Felder und das Absendeelement unverändert erhalten 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 123167 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.