Folgen Sie uns in den sozialen Netzwerken CSS-Vorlage

Der Block präsentiert einen Social-Follow-Aufruf in einer ausgewogenen zweispaltigen Anordnung. Ein großes Foto eines zusammenarbeitenden Teams nimmt die linke Seite ein, während die rechte Spalte die Überschrift „Folgen Sie uns auf Social Media“, Begleittext und fünf Plattform-Icons zentriert darstellt. Der hellgraue Hintergrund und die kontrastreiche schwarze Typografie sorgen für klare Lesbarkeit, während gleichmäßig angeordnete kreisrunde Icons einen ruhigen visuellen Rhythmus schaffen. Facebook, Twitter, Instagram, LinkedIn und Google+ sind als externe Social-Links integriert. Zusammen bilden Bild und zentrierte Inhalte einen luftigen Bereich, der Besucher zu den Social-Media-Kanälen führt.

Hellgraue Fläche verbindet Foto und Social-Icons

Der hellgraue Hintergrund verleiht dem Abschnitt ein ruhiges visuelles Umfeld für zwei kontrastierende Inhaltsbereiche: ein großes rechteckiges Foto auf der linken Seite und einen zentrierten Social-Follow-Aufruf auf der rechten Seite. Das Foto zeigt eine kooperierende Gruppe an einem Laptop und liefert so einen menschlichen Bezug, ohne mit dem eigentlichen Zweck des Blocks zu konkurrieren. Auf der gegenüberliegenden Seite formulieren die schwarze Überschrift und der begleitende Absatz die Botschaft, bevor die gleichmäßig verteilten kreisrunden Icons zu den externen Zielen führen.

Die wiederkehrenden Icons bilden die zentrale Gestaltungsgruppe dieser CSS-Template-Umsetzung. Durch ihre einheitliche runde Form und die gleichmäßigen Abstände wirken fünf verschiedene Plattformen wie eine zusammenhängende Bedieneinheit statt wie verstreute Links. Die Typografie kann kontraststark bleiben, während das Bild optisches Gewicht trägt – so bleiben die geteilte Anordnung und die zentrierte Ausrichtung der rechten Spalte gewahrt. Diese Eigenschaften bieten praktische Ansatzpunkte für die Feinabstimmung des Blocks: Hintergrundton, Textkontrast, Icon-Abstände, Bildproportionen und das Verhältnis zwischen beiden Spalten. Der Abschnitt lässt sich daher nahtlos an das visuelle Design eines Projekts anpassen, ohne den Social-Follow-Inhalt oder die klare Trennung zwischen Bild und Link-Gruppe zu verlieren. Durch die Anpassung dieser Details bleiben Bild und Link-Spalte auch dann visuell ausgewogen, wenn die umgebende Seite abweichende Bereichsgestaltungen nutzt.

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