ℹ️ 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.

Vuoi il controllo completo su come il tuo Trust Badges guarda sul tuo negozio? 🎨

Mentre la scheda Design fornisce ampie opzioni di personalizzazione, CSS personalizzato ti dà la flessibilità di effettuare regolazioni di stile avanzate che vanno oltre le impostazioni standard.

Che tu stia rifinanziando la spaziatura, abbinando rigide linee guida del marchio, aggiungendo effetti visivi personalizzati, o risolvendo conflitti di stile specifici a tema, Custom CSS fornisce il pieno controllo creativo sul tuo design Trust Badge.

⚠️ Prima di iniziare

Prima di utilizzare Custom CSS:

• Assicurati di aver già creato un Trust Badge.
• Avere una comprensione di base di CSS o l'accesso a uno sviluppatore.
• Capire che Custom CSS può ignorare le impostazioni standard di progettazione.

💡 Se non hai ancora creato un Trust Badge, creane uno prima di procedere con questa guida.

🛠️ Passo 1 — Aprire la scheda di progettazione

Aprire Hoppy Trust Badges app e navigare al Trust Badge che si desidera personalizzare.

Allora:

➡️ Fare clic su Design scheda.

Scorrere verso il basso fino a trovare il CSS personalizzato sezione.

Questa sezione contiene tutti gli strumenti necessari per aggiungere e gestire lo styling personalizzato.

🎨 Fase 2 — Aprire la sezione CSS personalizzata

All'interno CSS personalizzato sezione che troverai:

• Editor CSS
• A Visualizza la guida pulsante pulsante
• Anonimo Applicare pulsante pulsante
• Un modello di avvio CSS

Il modello di avviamento contiene i selettori disponibili che possono essere personalizzati per il tuo Trust Badge.

Questo rende più facile iniziare lo styling senza dover ispezionare manualmente gli elementi di vetrina.

✍️ Passo 3 — Aggiungi il tuo CSS personalizzato

L'editor include diversi selettori preconfigurati che mirano a specifici elementi Trust Badge.

Selettori disponibili

contenitore

Selezionatore

Descrizione

.futureblink-trust-badge

Contenitore intero Trust Badge

Titolo

Selezionatore

Descrizione

.futureblink-trust-badge .fb-title

Testo del titolo principale

.futureblink-trust-badge.mobile .fb-title

Stile del titolo mobile

💡 Per i distintivi galleggianti, il selettore del titolo utilizza .title invece di .fb-title.

Subheading

Selezionatore

Descrizione

.futureblink-trust-badge .subheading

Descrizione testo

.futureblink-trust-badge.mobile .subheading

Descrizione mobile styling

Icone

Selezionatore

Descrizione

.futureblink-trust-badge .icon

Icone cattive

.futureblink-trust-badge.mobile .icon

Mobile icona styling

Pulsante d'azione

Selezionatore

Descrizione

.futureblink-trust-badge .cta-button

CTA pulsante

.futureblink-trust-badge.mobile .cta-button

Mobile CTA pulsante styling

Esempio CSS

Per aggiungere l'imbottitura al contenitore del badge e personalizzare il titolo:

.futureblink-trust-badge {
padding: 20px;
}

.futureblink-trust-badge .fb-title {
color: #2c3e50;
font-size: 18px;
}

💡 È possibile aggiungere ulteriori selettori CSS, query multimediali, animazioni e regole di styling come necessario.

📱 Passo 4 — Aggiungi mobile-Specific Styling

Per indirizzare specificamente i dispositivi mobili, utilizzare .mobile variazione dei selettori.

Esempio:

.futureblink-trust-badge.mobile .fb-title {
font-size: 14px;
}

L'app si avvolge automaticamente .mobile selettori all'interno di una query multimediale mobile quando li rende sul tuo negozio.

Se si preferisce scrivere le proprie domande multimediali, saranno conservati esattamente come inserito.

✅ Passo 5 — Applicare il CSS

Una volta aggiunta la CSS:

➡️ Fare clic Applicare.

L'anteprima live si aggiorna automaticamente, permettendo di rivedere immediatamente i cambiamenti di stile.

Se si desidera rimuovere lo styling personalizzato in seguito:

➡️ Fare clic Ripristino.

Questo rimuove il CSS personalizzato e ripristina le impostazioni standard di progettazione.

👀 Passo 6 — Recensione dell'anteprima

Dopo aver applicato il CSS:

➡️ Rivedere l'anteprima Desktop.

➡️ Recensione dell'anteprima Mobile.

Verificare che:

• Il testo appare correttamente.
• Le icone rimangono ben allineate.
• Lo spazio sembra coerente.
• I pulsanti mostrano come previsto.

Se sono necessarie modifiche:

➡️ Aggiorna il CSS.

➡️ Fare clic Applicare Ancora.

L'anteprima si rinfresca automaticamente dopo ogni cambiamento.

💾 Passo 7 — Salvare e pubblicare

Una volta soddisfatti del design:

➡️ Fare clic Salva.

➡️ Fare clic Pubblicazione.

⚠️ Salvare da solo non aggiorna il negozio.

Il Trust Badge deve essere pubblicato anche prima che i clienti possano vedere i cambiamenti.

⚠️ Note importanti

Impostazioni standard CSS personalizzate

Custom CSS ha la precedenza sulla maggior parte delle impostazioni della scheda Design.

Se un'impostazione di colore, spaziatura o tipografia sembra essere ignorata, è probabile che sia sovraccaricata dal CSS.

Manipolazione automatica!importante

L'app aggiunge automaticamente !important priorità alle dichiarazioni CSS durante il rendering degli stili sul negozio.

Non è necessario aggiungere !important manualmente.

Styling Scoped

Custom CSS è automaticamente indirizzato alla specifica Trust Badge che viene modificata.

Questo aiuta a prevenire lo styling conflitti con:

• Altri deficit di fiducia
• Elementi a tema
• Altri componenti

Selettori vuoti sono ammessi

Non è necessario utilizzare ogni selettore fornito nel modello.

Aggiungi solo gli stili agli elementi che vuoi personalizzare.

Convalida CSS

L'editor non convalida la sintassi CSS.

Se uno stile non si applica correttamente:

➡️ Controlla i nomi dei selettori.

➡️ Verificare bracci e semicoloni.

➡️ Rivedere il CSS per errori di sintassi.

❓ Risoluzione dei problemi

Se i tuoi stili non appaiono correttamente:

➡️ Confermare che Applicare è stato cliccato.

➡️ Verificare che il Trust Badge sia stato Salvataggio e Pubblicato.

➡️ Controllare che i nomi dei selettori corrispondono esattamente al modello fornito.

➡️ Prova in una finestra del browser Incognito o Privato.

➡️ Aggiorna il negozio per cancellare stili cache.

🎉 Risultato finale

✅ Il tuo Trust Badge può essere personalizzato oltre le impostazioni standard di progettazione.

✅ Branding, spaziatura, tipografia e stile icona possono essere controllati più precisamente.

✅ I layout desktop e mobili possono essere modellati in modo indipendente.

✅ Gli stili personalizzati rimangono isolati al Trust Badge selezionato.

Custom CSS offre un modo flessibile per creare un'esperienza Trust Badge più lucida e coerente, mantenendo la semplicità degli strumenti di design incorporati dell'app. ✨

Aggiornato il: 10/09/2026