> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 So legen Sie benutzerdefiniertes CSS für Trust Badges & Icons fest > ℹ️ **Note:** Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team. Möchten Sie die vollständige Kontrolle darüber haben, wie Ihre Trust Badges auf Ihrer Storefront aussehen? 🎨 Während die Registerkarte Design umfangreiche Anpassungsoptionen bietet, **Custom CSS** gibt Ihnen die Flexibilität, erweiterte Styling-Anpassungen vorzunehmen, die über die Standardeinstellungen hinausgehen. Egal, ob Sie den Abstand verfeinern, strenge Markenrichtlinien einhalten, benutzerdefinierte visuelle Effekte hinzufügen oder themenspezifische Stylingkonflikte lösen, Custom CSS bietet die volle kreative Kontrolle über Ihr Trust Badge-Design. --- # **⚠️ Bevor Sie beginnen** Vor der Verwendung von Custom CSS: * Stellen Sie sicher, dass Sie bereits ein Trust Badge erstellt haben. * Haben Sie ein grundlegendes Verständnis von CSS oder Zugang zu einem Entwickler. * Verstehen Sie, dass Custom CSS die Standard-Designeinstellungen außer Kraft setzen kann. 💡 Wenn Sie noch kein Trust Badge erstellt haben, erstellen Sie eines, bevor Sie mit diesem Leitfaden fortfahren. --- # **🛠️ Schritt 1 - Öffnen Sie den Design Tab** Offen **Hoppy Trust Badges** App und navigieren Sie zum Trust Badge, das Sie anpassen möchten. Dann: ➡️ Klicken Sie **Design** Tab. Scrollen Sie nach unten, bis Sie die **Custom CSS** Schnitt. Dieser Abschnitt enthält alle Tools, die zum Hinzufügen und Verwalten von benutzerdefiniertem Styling erforderlich sind. --- # **🎨 Schritt 2 - Öffnen Sie den Custom CSS-Abschnitt** Innerhalb der **Custom CSS** Abschnitt finden Sie: * Ein CSS Editor * A **View Guide** Taste * An **Beantragen** Taste * Ein Starter CSS Template Die Startervorlage enthält die verfügbaren Selektoren, die für Ihr Trust Badge angepasst werden können. Dies macht es einfacher, mit dem Styling zu beginnen, ohne dass Storefront-Elemente manuell inspiziert werden müssen. --- # **✍️ Schritt 3 - Fügen Sie Ihr benutzerdefiniertes CSS hinzu** Der Editor enthält mehrere vorkonfigurierte Selektoren, die auf bestimmte Trust Badge-Elemente abzielen. ### **Verfügbare Selektoren** #### **Container** Auswahl Beschreibung `.futureblink-trust-badge` Gesamter Trust Badge Container --- #### **Titel** Auswahl Beschreibung `.futureblink-trust-badge .fb-title` Haupttitel `.futureblink-trust-badge.mobile .fb-title` Mobiles Title Styling 💡 Für schwimmende Abzeichen verwendet der Titelselektor `.title` statt `.fb-title`. --- #### **Unterrubrik** Auswahl Beschreibung `.futureblink-trust-badge .subheading` Beschreibungstext `.futureblink-trust-badge.mobile .subheading` Mobile Description Styling --- #### **Icons** Auswahl Beschreibung `.futureblink-trust-badge .icon` Abzeichensymbole `.futureblink-trust-badge.mobile .icon` Mobile Icon Styling --- #### **Call-To-Action-Taste** Auswahl Beschreibung `.futureblink-trust-badge .cta-button` CTA-Button `.futureblink-trust-badge.mobile .cta-button` Mobiles CTA Button Styling --- ### **Beispiel: CSS** So fügen Sie dem Badge-Container eine Polsterung hinzu und passen den Titel an: `.futureblink-trust-badge {` `padding: 20px;` `}` `.futureblink-trust-badge .fb-title {` `color: #2c3e50;` `font-size: 18px;` `}` 💡 Sie können bei Bedarf zusätzliche CSS-Selektoren, Medienanfragen, Animationen und Stylingregeln hinzufügen. --- # **📱 Schritt 4 — Hinzufügen von Mobile-Specific Styling** Um mobile Geräte gezielt anzusprechen, verwenden Sie die `.mobile` Variation der Selektoren. Beispiel: `.futureblink-trust-badge.mobile .fb-title {` `font-size: 14px;` `}` Die App wird automatisch verpackt `.mobile` Selektoren in einer mobilen Medienabfrage beim Rendern auf Ihrer Storefront. Wenn Sie es vorziehen, Ihre eigenen Medienanfragen zu schreiben, werden diese genau wie eingegeben aufbewahrt. --- # **✅ Schritt 5 - Wenden Sie Ihr CSS an** Sobald Ihr CSS hinzugefügt wurde: ➡️ Klicken **Beantragen**. Die Live-Vorschau wird automatisch aktualisiert, sodass Sie Ihre Styling-Änderungen sofort überprüfen können. Wenn Sie Ihr benutzerdefiniertes Styling später entfernen möchten: ➡️ Klicken **Zurücksetzen**. Dadurch wird Ihr Custom CSS entfernt und die Standard-Design-Einstellungen wiederhergestellt. --- # **👀 Schritt 6 - Überprüfen Sie die Vorschau** Nach der Anwendung Ihres CSS: ➡️ Überprüfen Sie die Desktop-Vorschau. ➡️ Überprüfen Sie die Mobile Preview. Prüfen Sie, ob * Der Text erscheint korrekt. * Icons bleiben richtig ausgerichtet. * Der Abstand sieht konsequent aus. * Tasten werden wie erwartet angezeigt. Falls Anpassungen erforderlich sind: ➡️ Aktualisieren Sie das CSS. ➡️ Klicken **Beantragen** noch einmal. Die Vorschau wird nach jeder Änderung automatisch aktualisiert. --- # **💾 Schritt 7 — Speichern und Veröffentlichen** Sobald Sie mit dem Design zufrieden sind: ➡️ Klicken **Sparen**. ➡️ Klicken **Veröffentlichen**. ⚠️ Sparen allein aktualisiert die Storefront nicht. Das Trust Badge muss ebenfalls veröffentlicht werden, bevor Kunden die Änderungen sehen können. --- # **⚠️ Wichtige Hinweise** ### **Custom CSS überschreibt Standardeinstellungen** Custom CSS hat Vorrang vor den meisten Design-Tab-Einstellungen. Wenn eine Farb-, Abstands- oder Typografieeinstellung ignoriert zu werden scheint, wird sie wahrscheinlich von Ihrem CSS überschrieben. --- ### **Automatisches !wichtiges Handling** Die App fügt automatisch hinzu `!important` Priorität auf CSS-Deklarationen beim Rendern von Stilen auf der Storefront. Sie müssen nicht hinzufügen `!important` manuell. --- ### **Scoped Styling** Custom CSS wird automatisch auf das spezifische Trust Badge, das bearbeitet wird, beschränkt. Dies verhindert Styling-Konflikte mit: * Andere Trust Badges * Themenelemente * Sonstige Storefront-Komponenten --- ### **Leere Selektoren sind erlaubt** Sie müssen nicht jeden in der Vorlage bereitgestellten Selektor verwenden. Fügen Sie nur Stile zu den Elementen hinzu, die Sie anpassen möchten. --- ### **CSS-Validierung** Der Editor validiert keine CSS-Syntax. Wenn ein Stil nicht korrekt angewendet wird: ➡️ Überprüfen Sie die Selektornamen. ➡️ Überprüfen Sie Zahnspangen und Semikolons. ➡️ Überprüfen Sie das CSS auf Syntaxfehler. --- # **❓ Fehlerbehebung** Wenn Ihre Styles nicht korrekt erscheinen: ➡️ bestätigen, dass **Beantragen** wurde angeklickt. ➡️ Überprüfen Sie, ob das Trust Badge wurde **Gerettet** und **Veröffentlicht**. ➡️ Überprüfen Sie, ob die Selektornamen genau mit der bereitgestellten Vorlage übereinstimmen. ➡️ Testen Sie in einem Incognito- oder Private-Browserfenster. ➡️ Erfrischen Sie die Storefront, um zwischengespeicherte Stile zu löschen. --- # **🎉 Endergebnis** ✅ Ihr Trust Badge kann über die Standard-Designeinstellungen hinaus angepasst werden. ✅ Branding, Abstand, Typografie und Icon-Styling können präziser gesteuert werden. ✅ Desktop- und mobile Layouts können unabhängig gestaltet werden. ✅ Benutzerdefinierte Stile bleiben für das ausgewählte Trust Badge isoliert. Custom CSS bietet eine flexible Möglichkeit, ein ausgefeilteres und markenkonsistenteres Trust Badge-Erlebnis zu schaffen, während die Einfachheit der integrierten Design-Tools der App erhalten bleibt. ✨