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:

• I CSS personalizzati sono disponibili solo con i piani Klaviyo a pagamento.
• 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 a moduli d'iscrizione. Apri il menu Azioni del modulo (3 puntini) e seleziona Modifica.
2. Seleziona Modifica stili nella barra laterale sinistra.
3. Scorri fino alla sezione CSS personalizzato nella parte inferiore del pannello.
4. Attiva Abilita un 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 ha un campo Nome classe in Classi CSS. Il nome predefinito si basa sul tipo di componente, quindi i componenti dello stesso tipo lo condividono.

1. Seleziona il componente nell'anteprima del modulo.
2. In Classi CSS, inserisci un nome univoco in Nome classe, ad esempio form-headline. Inserisci il nome senza un punto iniziale.

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 si avvia vuoto — non mostra gli stili attuali del tuo modulo, perché vengono generati quando il modulo viene visualizzato sul tuo sito. Dopo aver impostato i nomi delle classi, seleziona Modifica stili e inserisci le tue regole in Codice CSS personalizzato. Per selezionare gli elementi, usa 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

Per i blocchi di testo, applica il targeting al testo all’interno del blocco e anche al relativo wrapper esterno. La dichiarazione !important qui sotto sovrascrive lo stile line-height inline sul testo.

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,
.form-headline * {
  line-height: 1.2 !important;
  letter-spacing: 0.5px;
}

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

Il CSS personalizzato permette anche di applicare stili non disponibili nell’editor, come il testo da destra a sinistra. Questo esempio sostituisce l’allineamento del testo in linea nell’intestazione:

.form-headline,
.form-headline * {
  direction: rtl;
  text-align: right !important;
}

Anteprima e pubblicazione

Se il modulo è già attivo, la pubblicazione del targeting per la pagina di test impedirà temporaneamente che venga visualizzato sulle pagine in cui di solito appare. Ripristina il targeting previsto dopo i test.

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. Limita il modulo a una pagina di test non pubblica prima di pubblicarlo. Per il targeting degli URL, seleziona Targeting e comportamento > Targeting. In URL, attiva Mostra solo su determinati URL, seleziona Corrispondenza esatta e inserisci l’URL completo della pagina di test, incluso https://. Per un modulo aperto da un trigger personalizzato, attivalo invece sulla pagina di test.
4. Seleziona Pubblica o pianifica, scegli Pubblica ora, quindi fai clic su Pubblica ora. Risolvi eventuali avvisi di blocco prima di pubblicare.
5. Invia un'iscrizione di prova sul tuo modulo pubblicato per verificare che tutti gli input e i pulsanti funzionino ancora.
6. Una volta completato il test, ripristina le impostazioni di targeting previste e pubblica di nuovo usando Pubblica o pianifica > Pubblica ora. Se usi un trigger personalizzato, rendi il modulo disponibile tramite il trigger previsto.

Disabilita il CSS personalizzato

Per rimuovere lo stile personalizzato, seleziona Modifica stili e disattiva Abilita CSS personalizzato. L’anteprima del modulo torna allo stile standard dell’editor. Questo è anche il modo più rapido per verificare se un problema di visualizzazione è causato dal tuo codice personalizzato. Per applicare la modifica al tuo sito web, seleziona Pubblica o pianifica, scegli Pubblica ora, quindi fai clic su Pubblica ora. Il tuo codice CSS e i nomi delle classi dei componenti vengono salvati se scegli di riattivare il CSS personalizzato.

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 danneggiato o ha smesso di raccogliere iscrizioni.
Disattiva il CSS personalizzato per controllare l’anteprima del modulo, poi rivedi il codice. Per verificare la modifica sul tuo sito web, pubblica di nuovo il modulo. Controlla in particolare le regole che nascondono o riposizionano i campi e i pulsanti.

Non vedo la sezione CSS personalizzato.
CSS personalizzato è disponibile nei piani a pagamento di Klaviyo. Apri il modulo nell’editor, seleziona Modifica stili e scorri fino a CSS personalizzato.

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 no, probabilmente la classe personalizzata è associata al wrapper esterno, mentre il testo visibile viene renderizzato in un elemento figlio nidificato. In quel caso, fai in modo che abbiano come target anche gli elementi figlio, ad esempio: .form-headline, .form-headline * { ... }. Se l'elemento figlio ha uno stile inline per la stessa proprietà, intervenire solo su di esso non sovrascriverà quello stile. Aggiungi !important solo alla proprietà che devi sovrascrivere, come negli esempi sopra.

Domande frequenti

Posso aggiungere HTML personalizzato al mio modulo?
Sì. Con un piano Klaviyo a pagamento, puoi aggiungere un blocco HTML per contenuti personalizzati. Questo è separato dai CSS personalizzati e non ti consente di modificare l'HTML dei blocchi esistenti. Scopri come usare un blocco HTML personalizzato.

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 disattivo la funzionalità?
L’anteprima del modulo torna allo stile standard. Pubblica la modifica per applicarla sul tuo sito web. Il tuo codice CSS e i nomi delle classi dei componenti vengono salvati e ripristinati se riattivi il CSS personalizzato.