Usa l'ottimizzazione dei dispositivi mobili nei moduli d'iscrizione di Klaviyo

Panoramica

Personalizza i tuoi moduli Klaviyo per desktop e dispositivi mobili senza duplicare i moduli, aiutandoti a pubblicare più velocemente e a migliorare l'esperienza dei visitatori su dispositivi mobili.

L'ottimizzazione per dispositivi mobili ti consente di progettare esperienze per ogni dispositivo modificando le visualizzazioni su dispositivi mobili e desktop una accanto all'altra e scegliendo se sincronizzare le modifiche ai blocchi tra i dispositivi o mantenere la specificità del dispositivo.

Prima di iniziare

• Alcuni tipi di blocco non supportano lo scollegamento tra i dispositivi. Le eccezioni includono: Informativa generale, Gira e vinci, Immagine (gestita separatamente) e Numero di telefono (consenso in più passaggi).

   

Come funziona

Selettore di anteprima del doppio dispositivo

Visualizza l'anteprima del tuo modulo su desktop e dispositivi mobili fianco a fianco per scoprire come le modifiche si adattano a tutti i dispositivi in tempo reale. In questo modo si riducono le selezioni e si accelera la qualità del design dei dispositivi mobili.

Blocchi collegati o non collegati

Per impostazione predefinita, i blocchi equivalenti in desktop e mobile sono collegati: le modifiche in una visualizzazione vengono trasferite all'altra. Puoi scegliere di scollegare i blocchi per apportare modifiche solo ai dispositivi mobili o desktop senza duplicare il modulo.

Puoi scollegare/ricollegare un blocco selezionato cliccando sul pulsante di scollegamento nell'area di lavoro o sul pulsante di scollegamento nel pannello laterale. 

Quando un blocco viene scollegato:

• Le modifiche si applicano solo alla vista del dispositivo attuale; il blocco dell'altro dispositivo non viene modificato.
• La clonazione di un blocco non collegato crea il clone solo nella visualizzazione del dispositivo corrente (la clonazione di un blocco collegato lo duplica su entrambi i dispositivi).

Ricollegamento dei blocchi:

• Ricollegandosi, viene creato un nuovo blocco accoppiato tra i dispositivi. Se il blocco della controparte è stato eliminato, il ricollegamento lo crea per l'altro dispositivo in modo che entrambe le visualizzazioni abbiano nuovamente il blocco (puoi quindi eliminare i duplicati che non ti servono).

Teaser per dispositivo

Puoi scollegare i teaser tramite il pannello laterale, in modo che ogni desktop e mobile abbia il proprio stile di teaser. Il ricollegamento ripristina la visibilità a tutti i dispositivi per il teaser ricollegato.

Passo dopo passo

Apri la doppia anteprima

1. Apri il tuo modulo nell'editor.
2. Passa all'anteprima tramite l'interruttore che mostra sia desktop che mobile affiancati per valutare il layout e la spaziatura a colpo d'occhio.

Scollega un blocco per le modifiche specifiche del dispositivo

1. Seleziona il blocco che desideri personalizzare su mobile.
2. Scegli Scollega in modo che le modifiche apportate ai dispositivi mobili non interessino il desktop.
3. Regola il layout del tuo dispositivo mobile (ad esempio, posizione, dimensioni e spaziatura dei caratteri) per garantirne la leggibilità su schermi più piccoli.
4. Ripeti per altri blocchi, se necessario.

Ricollega quando desideri un nuovo comportamento condiviso

1. Seleziona il blocco e scegli Ricollega.
2. Se la controparte è mancante sull'altro dispositivo, l'editor la crea automaticamente.
3. Rimuovi i blocchi duplicati.

Imposta i teaser per dispositivo (facoltativo)

1. Apri le impostazioni del teaser e scegli Rimuovi il link.
2. Configura il contenuto o la visibilità del teaser in modo indipendente per desktop e dispositivi mobili.

3. Ricollega in un secondo momento se vuoi che sia applicato un teaser a entrambi i dispositivi.

    

Procedure consigliate per i moduli mobili

• Dai la priorità agli schermi più piccoli: usa caratteri più grandi e testi concisi.

• Aumenta gli obiettivi di tocco e la spaziatura verticale in modo che pulsanti e input siano facili da usare.

• Considera lo schermo intero sui dispositivi mobili per mettere a fuoco e fare chiarezza, soprattutto sui dispositivi più piccoli.

• Mantieni le immagini mirate. Se un'immagine laterale è in competizione con il contenuto su schermi piccoli, nascondila o semplifica il layout.

   

Limitazioni e comportamenti da conoscere

• Un blocco collegato è un singolo blocco con visibilità del dispositivo impostata sia su desktop che su mobile. Tutte le modifiche apportate in entrambe le visualizzazioni aggiornano quel blocco condiviso.

• Quando scolleghi un blocco, l'editor crea un secondo blocco sotto il cofano e imposta ogni blocco su un dispositivo diverso (un solo desktop, un solo mobile). Da quel momento in poi, le modifiche non vengono sincronizzate tra loro.

• Lo scollegamento non è supportato per alcuni tipi di blocco: divulgazione, ruota e vinci, immagine (gestita separatamente nel lavoro con immagine laterale) e numero di telefono (consenso in più passaggi).

• La clonazione si comporta in modo diverso in base allo stato del link: i cloni dei blocchi collegati appaiono su entrambi i dispositivi; i cloni dei blocchi non collegati appaiono solo nella vista del dispositivo attuale.

• Quando ricolleghi, il blocco selezionato diventa la fonte della verità ed è impostato per essere mostrato su entrambi i dispositivi. Se manca una controparte, viene creata dall'editor; se esistono più versioni, potresti dover rimuovere manualmente i blocchi aggiuntivi che non vuoi mantenere.

   

Risultato

Ora dovresti essere in grado di creare un modulo d'iscrizione ottimizzato per i dispositivi mobili senza dover creare due moduli separati. 

Risoluzione dei problemi

• Non vedo come scollegare/ricollegare su un blocco:
  Il tipo di blocco potrebbe non supportare lo scollegamento (vedi eccezioni).

• La modifica apportata ai miei dispositivi mobili ha influito sul desktop (o viceversa):
  Assicurati che il blocco sia scollegato prima di modificare la versione specifica del dispositivo.

• Il mio relink ha creato un blocco extra:
  Questo è quello che ci si aspetta se manca la controparte. Elimina il duplicato di cui non hai bisogno dopo aver ricollegato.

   

I prossimi passaggi

• Primi passi con i moduli d'iscrizione.

• Nozioni di base: progettazione dei moduli.

• Come eseguire un test A/B di un modulo d'iscrizione.