> ## 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). # 🎨 Trust Badges & Icons - Design & Styling > ℹ️ **Note:** Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team. Die **Vertrauensabzeichen & Icons** Abschnitt hilft Händlern, ihre Glaubwürdigkeit im Geschäft visuell zu verbessern, indem anpassbare Vertrauensindikatoren wie sichere Zahlungssymbole, Garantieabzeichen, Lieferhighlights und mehr verwendet werden. Dieser Abschnitt ermöglicht die vollständige Kontrolle über: * Badge Aussehen * Layoutverhalten * Typografie * Animationen * Hintergrunddesign * Mobile Reaktionsfähigkeit * Advanced CSS Anpassung --- # **🎨 Meldebogen** ## **Was es tut** Ändert das visuelle Gesamtthema und die Farbpalette Ihrer Abzeichen. ## **Wie zu verwenden** Klicken Sie auf den Dropdown, um aus Presets wie: * **Schwarzer Freitag** * **Minimal** * **Minze** * **Dämmerung** Diese Vorlagen passen sofort zu Ihrem Shop-Branding und visuellem Stil. --- # **👀 Sichtbarkeit** ## **Was es tut** Steuert, welche Geräte Ihre Vertrauensabzeichen sehen können. ## **Verfügbare Optionen** * **Desktop und Mobile** → Zeigt überall Abzeichen * **Nur Desktop** → Versteckt auf mobilen Geräten * **Nur mobil** Versteckt auf Desktop-Geräten Dies hilft Händlern, gerätespezifische Erlebnisse zu erstellen. --- # **↔️ Layout-Orientierung (Desktop & Mobile)** ## **Was es tut** Bestimmt, wie einzelne Abzeichen angeordnet sind. ## **Verfügbare Optionen** ### **Horizontal** Abzeichen erscheinen nebeneinander in einer einzigen Reihe. ### **Vertikal** Badges stapeln sich in einem spaltenlayout untereinander. Für Desktop- und Mobile-Layouts können separate Steuerelemente verfügbar sein. --- # **📱 Badge Display Verhalten (nur mobil)** ## **Was es tut** Steuert, wie sich Abzeichen auf kleineren mobilen Bildschirmen verhalten, wenn der Platz begrenzt wird. ## **Verfügbare Optionen** ### **Rollend** Kunden können horizontal wischen, um alle Abzeichen in einer Reihe anzuzeigen. ### **Gurtband** Badges bewegen sich automatisch in die nächste Zeile, so dass alle zusammen sichtbar sind. --- # **✨ Animation** ## **Was es tut** Fügt Eingabeanimationen hinzu, wenn Abzeichen auf der Seite geladen werden. ## **Wie zu verwenden** Wählen Sie einen Animationsstil aus dem Dropdown. Animationsoptionen umfassen: * Slide In * Pelz * Fade Up * Und mehr Animationen helfen, die Aufmerksamkeit des Kunden zu erregen, ohne dass zusätzliche Designarbeiten erforderlich sind. --- # **🖼️ Hintergrundstil** ## **Was es tut** Steuert das Hintergrundbild hinter dem Badge-Bereich. ## **Verfügbare Optionen** * Einzelfarben * Gefälle * Tricolor Gradient * Muster ## **Zusätzliche Anpassung** Händler können auch anpassen: * Gradientenwinkelgrad * Einzelfarben * Hex-Farbcode * Muster Aussehen Dies hilft, Abzeichen visuell in das Storefront-Design einzufügen. --- # **📐 Grenzen und Ecken** ## **Eckenradius (px)** Kontrolliert, wie abgerundet die äußeren Ecken erscheinen. * Höhere Werte → Mehr abgerundete Ecken * `0` → Scharfe quadratische Ecken ## **Randgröße (px)** Stellt die Dicke des äußeren Randes ein. ## **Randfarbe** Ändert die Farbe der Grenzlinie. ## **Grenzstil** Verfügbare Stile können umfassen: * fest * gepunktet * Gestrichelt * Keine --- # **📏 Spacing (Desktop vs Mobile)** Der Abstand kann separat für Desktop- und Mobilgeräte angepasst werden. Dies stellt sicher, dass Ihr Badge-Layout über alle Bildschirmgrößen hinweg ausgewogen und reaktionsschnell bleibt. ## **Inside Spacing (Padding)** Kontrolliert den Abstand innerhalb des Badge-Containers. Verfügbare Anweisungen: * oben * Boden * Links * rechts So entsteht eine Atempause zwischen Inhalt und Grenzen. ## **Außerhalb des Abstands (Marge)** Fügt Abstand außerhalb des Badge-Blocks hinzu. Verfügbare Kontrollen: * Höchste Marge * Unterste Marge Nützlich zum Trennen von Abzeichen von umgebenden Storefront-Abschnitten. ## **Icon Spacing** Steuert den Abstand zwischen einzelnen Abzeichen / Icons. --- # **🔷 Icon Styling** ## **Abzeichen/Icon Shape** ### **Was es tut** Fügt dekorative Hintergründe hinter einzelnen Icons hinzu. ### **Verfügbare Optionen** * Keine * Schutzschild * Emblem * Kreis * Quadrat --- # **📏 Größe & Customization** ## **Desktop / Mobile Größe (px)** Steuert die Symbolgröße unabhängig für: * Desktop * Mobil ## **Hintergrundfarbe** Ändert die Hintergrundfarbe hinter der Symbolform. ## **Eckenradius** Passt an, wie abgerundet der Icon-Hintergrund wird. --- # **🚀 Pro Styling (Fortgeschritten)** ## **Icon Animation** Fügt kontinuierliche Bewegungseffekte zu Icons hinzu. Beispiele können sein: * Schütteln * Puls * Hüllen ## **Icon Hover Animation** Triggert Animationen, wenn Kunden über Icons schweben. Beispiele können sein: * Float * Wackeln * Holografisch ## **Icon Shadow** Fügt Tiefe und Schichtungseffekte unter Verwendung von Schatten hinzu. Beispiele können sein: * Weichglühen * Subtile Tropfen Schatten --- # **➖ Icon-Separator** ## **Was es tut** Fügt Trennlinien zwischen einzelnen Badge-Icons hinzu. ## **Wie zu verwenden** Ermöglicht die **Icon Separator hinzufügen** Checkbox. Dies hilft, einen saubereren Abstand und eine visuelle Trennung zu schaffen. --- # **✍️ Typografie (Text & Fonts)** ## **Schriftartauswahl** ### **Was es tut** Steuert den Typografiestil, der für Badge-Titel und Unterüberschriften verwendet wird. ### **Verfügbare Optionen** * Verwenden Sie Ihre Shopify Thema: * Wählen Sie Custom Fonts * Google Fonts Unterstützung Die Verwendung der Theme-Schrift hilft, die Konsistenz der Storefront aufrechtzuerhalten. --- # **📝 Titel & Untertitel Styling** ## **Größe (px)** Kontrolliert die Textgröße. ## **Farbe** Ändert die Textfarbe mit: * Farbwähler * Hex-Code --- # **📐 Textabstand** ## **Was es tut** Steuert den Abstand zwischen Textzeilen für eine bessere Lesbarkeit. Durch die Erhöhung des Abstands können sich die Inhalte sauberer und Premium fühlen. --- # **💻 Custom CSS (für Entwickler)** ## **Erweitertes Feature** Wenn integrierte Einstellungen nicht ausreichen, können Händler ein vollständig benutzerdefiniertes CSS-Styling hinzufügen. ## **Verfügbare Zielklassen** ### **Gesamter Badge Container** .futureblink-trust-badge ### **Titel Text** .fb-Titel ### **Teilüberschrift Text** .Unterposition ### **CTA-Taste** .cta-Button --- # **⚡ Anwendung von Custom CSS** ## **Wie zu verwenden** 1. Fügen Sie Ihr eigenes CSS in den Editor ein 2. Klicken **Beantragen** 3. Vorschau ändert sich sofort --- # **❗ Überschreibend Shopify Themenstile** Manchmal Shopify Themen können Ihr individuelles Styling überschreiben. Wenn Ihre CSS-Änderungen nicht korrekt angezeigt werden, verwenden Sie: !wichtig Dies zwingt Ihr Styling, Vorrang vor Themenstilen zu haben. Beispiel: .fb-title Farbe: rot !wichtig; } --- # **✅ Endergebnis** Nach erfolgreicher Konfiguration helfen Trust Badges & Icons, ein professionelleres, vertrauenswürdigeres und conversion-orientiertes Storefront-Erlebnis zu schaffen. Mit dem richtigen Styling an Ort und Stelle: * ✅ Store Glaubwürdigkeit verbessert * ✅ Wichtige Garantien werden sichtbarer * ✅ Das Vertrauen der Kunden steigt * ✅ Store Branding fühlt sich polierter an * ✅ Mobile Reaktionsfähigkeit verbessert * ✅ Badge-Layouts werden sauberer und organisierter * ✅ Visuelle Konsistenz über die Storefront wird stärker Gut gestaltete Vertrauensabzeichen können signifikant sein