Abzeichen CSS-Vorlagen

Anpassbare Badge-CSS-Vorlagen

Badge-CSS-Vorlagen bieten Ihnen fertige Designs, die Sie anpassen können, bis jedes Badge perfekt zu Ihrer Website passt. Schwierigkeiten entstehen oft, wenn sich mehrere Badges einen Bereich teilen und ein knallorangefarbener Gutschein neben dezenten Kundenlogos platziert wird – so wirkt er schnell wie von einer fremden Website importiert. Im Mittelpunkt stehen dabei Rahmen, Abstände und Kontraste. Anschließend spielen die Ausrichtung und Skalierung auf kleineren Bildschirmen eine entscheidende Rolle.

Visuelle Gewichtung für jede Art von Kennzeichnung

Ein Badge sollte die Überschrift, die es ergänzt, niemals übertönen. Jede Badge-Form erfordert ihre eigenen Einstellungen:

1. Runde Siegel in einem Design wie Barbershop Awards wirken am besten in einer einheitlichen Größe, mit einem feinen Rahmen und ausreichend Freiraum ringsum, damit die Beschriftung gut lesbar bleibt.
2. Rechteckige Labels und Marken-Badges wie in Brands Symbol benötigen einen ruhigen Hintergrund mit großzügigem Innenabstand. Eine feste Höhe bewahrt die Proportionen des Logos.
3. Der Block Free 10% Off Coupon kann die auffälligste Füllfarbe der Seite tragen, sofern der Rabatt einen starken Kontrast und eine gut lesbare Schriftgröße behält.

Farbe allein erklärt ein Badge nicht ausreichend, daher benötigt selbst das leuchtendste Element lesbaren Text. Ein vollständiger Kreis wirkt offiziell, während ein weicherer Rahmenradius ein Angebot nahbarer erscheinen lässt. Zusätzliche Ringe und Bänder verleihen Feierlichkeit, doch zu viele Details lassen ein kleines Badge schnell überladen wirken.

Größenanpassung von Emblemen über verschiedene Bildschirmbreiten

Kleinere Bildschirme erfordern in der Regel drei Anpassungen:

1. Verringern Sie die Siegelgrößen auf Tablet- und Smartphone-Breiten, damit eine Reihe von Auszeichnungen gleichmäßig schrumpft.
2. Sorgen Sie dafür, dass Label-Texte auf Smartphones lesbar bleiben, und lassen Sie längere Titel umbrechen. Eine geringere Zeilenhöhe und zusätzlicher Innenabstand sorgen dafür, dass beide Zeilen innerhalb des Rahmens Platz finden.
3. Verringern Sie die Abstände zwischen Badges auf schmalen Bildschirmen, ohne dass sich die Rahmen berühren.

In Logo-Reihen wie Our Clients sorgen eine einheitliche Höhe und gleiche Abstände für ein harmonisches Gesamtbild, ohne einzelne Marken zu verzerren. Die responsiven Modi von Nicepage zeigen jeden Badge-Block in Tablet- und Smartphone-Breiten an.

Gezielte Regeln für einzelne Gutscheine

Wenn ein saisonaler Gutschein ein Design benötigt, das die visuellen Bedienelemente des Editors nicht bereitstellen, unterstützt Nicepage Custom CSS für einzelne Elemente, bestimmte Seiten oder die gesamte Website. Eine separate Klasse für jede Variante – etwa für diesen Gutschein oder ein goldenes Auszeichnungssiegel – ermöglicht es Ihnen, ein Element umzugestalten, ohne die übrigen zu beeinflussen. Ein zu weit gefasster Selektor für alle abgerundeten Labels könnte versehentlich auch Buttons, Tags oder ein Zertifizierungssiegel eines Drittanbieters verändern. Prüfen Sie das Ergebnis anschließend in der Vorschau, da der Editor benutzerdefiniertes CSS nicht ausführt.

Ein Gutschein, der auf eine Sale-Aktion verlinkt, benötigt sichtbare Hover- und Fokus-Zustände, während nicht verlinkte Siegel unter dem Mauszeiger unverändert bleiben. Vergleichen Sie vor dem Abschluss Größen und Kontraste auf dem Desktop sowie auf dem Smartphone und stellen Sie sicher, dass jede benutzerdefinierte Regel nur die dafür vorgesehenen Badges betrifft.