Come utilizzare un CSS personalizzato nei moduli d'iscrizione

Scopri come utilizzare un CSS personalizzato per personalizzare i tuoi moduli d'iscrizione in Klaviyo andando oltre quanto disponibile nell'editor dei moduli. Il CSS personalizzato ti offre un controllo preciso sulle proprietà come l'altezza delle linee, la spaziatura delle lettere e degli elementi, in modo che i tuoi moduli possano corrispondere esattamente al tuo marchio.

Prima di iniziare

Prima di utilizzare un CSS personalizzato, tieni presente quanto segue:

• Il CSS personalizzato è disponibile solo sui piani Klaviyo a pagamento. Questa funzionalità è in fase di implementazione graduale, quindi potresti non vederla ancora nel tuo account.
• L'assistenza di Klaviyo non può risolvere i problemi relativi al codice personalizzato. I problemi causati dal CSS personalizzato (ad esempio, layout interrotti, campi nascosti, problemi di rendering) sono di tua responsabilità per il debug e la risoluzione. Se un modulo con CSS personalizzato non viene visualizzato o non si comporta correttamente, disattiva prima il CSS personalizzato per verificare se la causa è il tuo codice.
• Il CSS personalizzato applica solo lo stile. Non puoi aggiungere o modificare l'HTML del tuo modulo o dei suoi blocchi attraverso questa funzionalità.
• Testa prima di pubblicare. I CSS personalizzati possono influire sull'usabilità del modulo (ad esempio, nascondere accidentalmente un campo obbligatorio può prevenire le iscrizioni). Visualizza sempre l'anteprima e testa il tuo modulo prima della pubblicazione.

Abilita un CSS personalizzato

Per abilitare il CSS personalizzato su un modulo:

1. Vai ai moduli d'iscrizione e apri il tuo modulo nell'editor.
2. Seleziona la scheda Stili.
3. Scorri fino alla sezione CSS personalizzato nella parte inferiore del pannello.
4. Attiva il CSS personalizzato.
5. Controlla il messaggio di avviso. Abilitando il CSS personalizzato, riconosci che l'assistenza di Klaviyo non può fornire assistenza per i problemi causati dal tuo codice personalizzato.

Una volta abilitato, appare un editor CSS in cui puoi scrivere CSS personalizzati per il tuo modulo. Il CSS personalizzato è abilitato per ogni modulo; attivandolo per un modulo non influisce sugli altri tuoi moduli.

Imposta i nomi delle classi sui componenti del modulo

Quando il CSS personalizzato è abilitato, ogni componente del tuo modulo ottiene un campo di classe CSS, visibile nella parte inferiore della barra laterale del componente quando lo selezioni. Il nome della classe viene impostato automaticamente sul nome del componente e puoi sostituirlo con il tuo per un accesso più semplice.

Usa questi nomi di classe come selettori nel tuo CSS. L'impostazione dei nomi delle tue classi è il modo più affidabile per targetizzare gli elementi del modulo, perché rimangono stabili e leggibili.

Se in seguito disabiliti il CSS personalizzato, i nomi delle tue classi vengono mantenuti e, se lo riabiliti, riappariranno.

Scrivi il tuo CSS

L'editor CSS inizia con un testo vuoto: non mostra gli stili attuali del tuo modulo, perché vengono generati quando il modulo viene visualizzato sul tuo sito. Per targetizzare gli elementi, utilizza uno di questi approcci:

• Usa i nomi delle tue classi. Fai riferimento ai nomi delle classi che hai impostato sui componenti del modulo (scelta consigliata).
• Controlla il tuo modulo dal vivo. Apri il modulo pubblicato sul tuo sito web, quindi utilizza gli strumenti di sviluppo del tuo browser (clic con il pulsante destro del mouse > Ispeziona) per identificare i selettori a cui desideri rivolgerti.

Evita di targetizzare i nomi delle classi generati automaticamente da Klaviyo. Questi sono interni, possono includere valori hash e possono cambiare senza preavviso, il che spezzerebbe in silenzio il tuo CSS. Usa invece i nomi delle tue classi.

Esempio

Supponiamo che tu imposti il nome della classe form-headline nel blocco del titolo e email-input nel blocco di input dell'e-mail:

.form-headline {
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.email-input {
  margin-bottom: 12px;
}

Il CSS personalizzato sblocca anche stili non disponibili nell'editor, come il testo da destra a sinistra:

.form-headline {
  direction: rtl;
  text-align: right;
}

Anteprima e pubblicazione

Dopo aver scritto il tuo CSS:

1. Utilizza l'anteprima dell'editor per controllare l'aspetto del tuo modulo.
2. Verifica il tuo modulo sia su desktop che su dispositivo mobile, poiché i CSS personalizzati possono influire su ciascuno di essi in modo diverso.
3. Pubblica il tuo modulo su una pagina non pubblica per verificare la sua visualizzazione sul sito.
4. Invia un'iscrizione di prova sul tuo modulo pubblicato per verificare che tutti gli input e i pulsanti funzionino ancora.
5. Pubblica il tuo modulo.

Disabilita il CSS personalizzato

Per rimuovere lo stile personalizzato, disattiva il CSS personalizzato nella scheda Stili. Il tuo modulo torna immediatamente allo stile standard dell'editor. Questo è anche il modo più rapido per verificare se un problema di visualizzazione è causato dal tuo codice personalizzato. Se scegli di riattivare il CSS personalizzato, il tuo codice CSS precedente verrà salvato per.

Risoluzione dei problemi

Il mio CSS non viene applicato.
Verifica che il CSS personalizzato sia attivato, che i selettori corrispondano ai nomi delle classi impostati sui tuoi componenti e che tu abbia pubblicato l'ultima versione del modulo. Gli stili del tuo sito web possono anche entrare in conflitto con gli stili dei moduli o sovrascrivere questi ultimi. Utilizza gli strumenti di sviluppo del tuo browser per verificare quali sono le regole vincenti.

Il mio modulo sembra rotto o ha smesso di raccogliere iscrizioni.
Disabilita il CSS personalizzato per confermare la causa, quindi controlla il tuo codice. Controlla in particolare le regole che nascondono o riposizionano gli input e i pulsanti.

Non vedo la sezione CSS personalizzato.
Il CSS personalizzato è disponibile solo sui piani a pagamento e viene implementato gradualmente. Se hai un piano a pagamento e non lo vedi ancora, torna tra qualche istante.

Gli stili tipografici di una classe personalizzata non vengono applicati.

Se gli stili di layout come margin funzionano, ma gli stili di testo come letter-spacing o line-height non funzionano, è probabile che la classe personalizzata sia associata al wrapper esterno, mentre il testo visibile viene renderizzato in un elemento figlio annidato. In quel caso, applicalo anche agli elementi figlio, ad esempio: .form-headline, .form-headline * { ... }.

Domande frequenti

Posso aggiungere un HTML personalizzato al mio modulo?
No. Non puoi aggiungere elementi HTML a un modulo o modificare l'HTML di blocchi esistenti. Il CSS personalizzato modifica solo lo stile dei componenti esistenti del tuo modulo.

Il CSS personalizzato funziona su tutti i miei moduli?
Il CSS personalizzato è abilitato per i moduli visualizzati sul tuo sito web. Abilitala individualmente in ogni modulo che desideri personalizzare.

L'assistenza di Klaviyo mi aiuterà a scrivere o correggere il mio CSS?
No. L'assistenza di Klaviyo non può scrivere, rivedere o risolvere i problemi relativi al codice personalizzato. Se un modulo con CSS personalizzato presenta un problema, ti verrà chiesto di disabilitare il CSS personalizzato per escluderlo prima che l'assistenza possa indagare ulteriormente.

Cosa succede al mio CSS se disabilito la funzionalità?
Il tuo modulo torna allo stile standard. I nomi delle tue classi di componenti vengono salvati e ripristinati se riabiliti il CSS personalizzato.