> ## 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:** Questo articolo è stato tradotto automaticamente utilizzando AI e può contenere imprecisioni. Se qualcosa sembra sbagliato, si prega di contattare il nostro team di supporto. The **Trust Badges & Icons** sezione aiuta i commercianti migliorare visivamente la loro credibilità negozio utilizzando indicatori di fiducia personalizzabili come icone di pagamento sicuro, badge di garanzia, punti di consegna e altro ancora. Questa sezione consente il pieno controllo su: * Badge aspetto * Comportamento del layout * Tipografia * Animazione * Stile di sfondo * Reattività mobile * Personalizzazione CSS avanzata --- # **🎨 Template** ## **Che cosa fa** Cambia il tema visivo generale e la tavolozza dei colori dei tuoi badge. ## **Come usare** Fare clic sul menu a discesa per scegliere tra preset come: * **Venerdì nero** * **Minimal** * **Mint** * **Dusk** Questi modelli immediatamente aiutano a abbinare il vostro negozio branding e stile visivo. --- # **👀 Visibilità** ## **Che cosa fa** Controlli quali dispositivi possono vedere i badge di fiducia. ## **Opzioni disponibili** * **Desktop e Mobile** → Mostra distintivi ovunque * **Solo Desktop** → Nascosto su dispositivi mobili * **Solo mobile** → Nascosto su dispositivi desktop Questo aiuta i commercianti a creare esperienze specifiche del dispositivo. --- # **↔ Orientamento del layout (Desktop & Mobile)** ## **Che cosa fa** Determina come i distintivi individuali sono disposti. ## **Opzioni disponibili** ### **Orizzonte** I cattivi appaiono fianco a fianco in una sola riga. ### **Verticale** Badges impilano uno sotto l'altro in un layout della colonna. I controlli separati possono essere disponibili per layout Desktop e Mobile. --- # **📱 Badge Display Behavior (solo mobili)** ## **Che cosa fa** Controlla come i badge si comportano su schermi mobili più piccoli quando lo spazio diventa limitato. ## **Opzioni disponibili** ### **Scorrevole** I clienti possono scorrere orizzontalmente per visualizzare tutti i badge in una riga. ### **Merda.** I Badges si spostano automaticamente alla linea successiva, quindi tutti sono visibili insieme. --- # **✨ Animazione** ## **Che cosa fa** Aggiunge animazioni di ingresso quando i badge caricano sulla pagina. ## **Come usare** Selezionare uno stile di animazione dal menu a tendina. Le opzioni di animazione includono: * Scivolo in * Papà! * Condividi su Google * E più Le animazioni aiutano ad attirare l'attenzione del cliente senza richiedere ulteriori lavori di progettazione. --- # **🖼️ Stile di sfondo** ## **Che cosa fa** Controlla l'aspetto di sfondo dietro la sezione badge. ## **Opzioni disponibili** * Colore unico * Gradiente * Gradiente tricolore * Modelli ## **Personalizzazione aggiuntiva** I commercianti possono anche personalizzare: * Grado di angolo gradiente * Colori individuali * Codici di colore Hex * aspetto del modello Questo aiuta i distintivi visivamente si fondono nel design del negozio. --- # **📐 Borders & Corners** ## **Radius d'angolo (px)** Controlla come arrotondato gli angoli esterni appaiono. * Valori più elevati → Angolo più arrotondato * `0` → Angoli quadrati affilati ## **Dimensione del bordo (px)** Regola lo spessore del bordo esterno. ## **Colore di confine** Cambia il colore della linea di confine. ## **Stile di confine** Gli stili disponibili possono includere: * Solido * Dotted * Dare * Nessuno --- # **📏 Spacing (Desktop vs Mobile)** Lo spazio può essere personalizzato separatamente per dispositivi desktop e mobili. Questo assicura che il layout del badge rimanga equilibrato e reattivo in tutte le dimensioni dello schermo. ## **Ricambio interno (Padding)** Controlli che spaziano all'interno del contenitore del distintivo. Indicazioni disponibili: * Top * Fondo * Sinistra * Giusto. Questo crea spazio di respirazione tra contenuti e confini. ## **Spaziatura esterna (Margin)** Aggiunge spaziatura fuori dal blocco del distintivo. Controlli disponibili: * Margine superiore * Margine inferiore Utile per separare i distintivi dalle sezioni del negozio circostante. ## **Icon Spaziale** Controlla la distanza tra distintivi / icone individuali. --- # **🔷 Icon Styling** ## **Badge/Icona** ### **Che cosa fa** Aggiunge sfondi decorativi dietro le singole icone. ### **Opzioni disponibili** * Nessuno * Schermo * Emblema * Circolo * Piazza --- # **📏 Dimensioni e personalizzazione** ## **Desktop / Mobile Size (px)** Controlla la dimensione dell'icona indipendentemente per: * Desktop * Mobile ## **Colore dello sfondo** Cambia il colore di sfondo dietro la forma dell'icona. ## **Radiatore ad angolo** Regola come arrotondato lo sfondo dell'icona diventa. --- # **🚀 Pro Styling (Avanzato)** ## **Animazione Icona** Aggiunge effetti di movimento continui alle icone. Esempi possono includere: * Shake * Pulsante * Bounce ## **Icon Hover Animation** Attiva le animazioni quando i clienti superano le icone. Esempi possono includere: * Float * Wobble * Olografica ## **Icon Shadow** Aggiunge la profondità e gli effetti di stratificazione utilizzando ombre. Esempi possono includere: * Morbido Glow * Subtle Drop Shadow --- # **➖ Separatore di icone** ## **Che cosa fa** Aggiunge le linee divisorie tra le singole icone del badge. ## **Come usare** Abilitare il **Aggiungere separatore icona** casella di controllo. Questo aiuta a creare spaziatura più pulita e separazione visiva. --- # **✍️ Tipografia (Text & Fonts)** ## **Selezione caratteri** ### **Che cosa fa** Controlla lo stile tipografico utilizzato per i titoli e le sottovoci del badge. ### **Opzioni disponibili** * Usa il tuo Shopify tema font * Scegli font personalizzati * Supporto di Google Fonts Utilizzando il carattere tema aiuta a mantenere la coerenza storefront. --- # **📝 Titolo & Subheading Styling** ## **Dimensioni (px)** Controlla la dimensione del testo. ## **Colore** Modifica il colore del testo utilizzando: * Picker di colore * Codice Hex --- # **📐 Risparmio di testo** ## **Che cosa fa** Controlli che spaziano tra linee di testo per una migliore leggibilità. Aumentare la spaziatura può rendere il contenuto più pulito e più premium. --- # **💻 Custom CSS (Per sviluppatori)** ## **Caratteristica avanzata** Se le impostazioni integrate non sono sufficienti, i commercianti possono aggiungere uno stile CSS completamente personalizzato. ## **Classi di destinazione disponibili** ### **Contenitore di Badge** .futureblink-trust-badge ### **Titolo** .fb-title ### **Testo di sottofondo** .subheadings ### **Pulsante CTA** .cta-button --- # **⚡ Applicare CSS personalizzato** ## **Come usare** 1. Incolla il tuo CSS personalizzato nell'editor 2. Fare clic **Applicare** 3. L'anteprima cambia istantaneamente --- # **❗ Sovrapposizione Shopify Stile tematici** A volte Shopify temi possono ignorare il tuo stile personalizzato. Se le modifiche CSS non appaiono correttamente, utilizzare: ! Questo costringe il vostro stile a prendere la priorità sugli stili di tema. Esempio: .fb-title { colore: rosso!importante; # --- # **✅ Risultato finale** Una volta configurato con successo, Trust Badges & Icons contribuisce a creare un'esperienza di storagefront più professionale, affidabile e orientata alla conversione. Con uno stile adeguato al posto: * ✅ La credibilità del negozio migliora * ✅ Importanti garanzie diventano più visibili * ✅ La fiducia dei clienti aumenta * ✅ negozio branding si sente più lucido * ✅ La reattività mobile migliora * ✅ I layout Badge diventano più puliti e più organizzati * ✅ La consistenza visiva attraverso il negozio diventa più forte I distintivi di fiducia ben progettati possono significatival