Questo articolo ti guida nell'utilizzo dell'Editor Mobile nel builder di Form, Survey e Quiz di HITLEAD. Puoi personalizzare l'aspetto visivo e i testi per dispositivi mobili senza influire sul layout desktop — per un'esperienza perfettamente responsive e coinvolgente.

INDICE

Cos'è l'Editor Mobile?

L'Editor Mobile è una funzionalità di HITLEAD che ti offre strumenti dedicati per personalizzare l'aspetto di form, survey e quiz sui dispositivi mobili. Invece di dover scendere a compromessi tra mobile e desktop, puoi ora stilizzare ogni esperienza in modo indipendente — garantendo che i tuoi contenuti siano sempre curati e performanti su qualsiasi dimensione di schermo.

Vantaggi principali dell'Editor Mobile

Offrire un'esperienza fluida e mobile-first è fondamentale per mantenere gli utenti coinvolti. Questa funzionalità ti permette di perfezionare gli elementi visivi su mobile senza alterare il design desktop.

  • Carica immagini personalizzate di header e background esclusivamente per mobile
  • Regola in modo indipendente famiglia di font, dimensione del font e peso del font
  • Stilizza elementi di testo specifici: Label, Short Label, Placeholder
  • Anteprima e test del design mobile prima della pubblicazione
  • Mantieni i form user-friendly e coerenti con il brand su tutti i dispositivi
  • Aumenta i tassi di completamento migliorando l'esperienza utente mobile

Come usare l'Editor Mobile

Segui questi passi per attivare e configurare il tuo form, survey o quiz con l'Editor Mobile.

  1. Apri qualsiasi form, survey o quiz dal tuo dashboard builder.

Schermata 1 — Editor Mobile per Form, Survey e Quiz

  1. Clicca sul Device Toggle in cima alla schermata per passare alla Mobile View.

Schermata 2 — Editor Mobile per Form, Survey e Quiz

  1. Nella Mobile View, il pannello a destra mostrerà le impostazioni specifiche per mobile:

    • Layout Style: Scegli il layout mobile preferito.
    • Mobile Header Image: Carica un'immagine specifica per gli header mobile.
    • Mobile Background Image: Carica un'immagine di background dedicata al mobile.
    • Font Settings:
      • Regola la Font Family
      • Modifica la Font Size
      • Imposta il Font Weight

  2. Queste impostazioni dei font si applicano singolarmente a:

    • Label (es. "First Name")
    • Short Label (es. intestazioni di campo in formati compatti)
    • Placeholder Text (es. "Enter your email")

    Una volta completato, clicca Save, poi Preview per testare il design mobile.

  3. Quando sei soddisfatto, pubblica il tuo form — ora completamente ottimizzato per mobile!

Pannelli di stile separati per Desktop e Mobile

I controlli di stile indipendenti mantengono ogni dispositivo curato senza bisogno di override CSS. Adatta il layout alle dimensioni dello schermo preservando la coerenza del brand.

Proprietà di stile per dispositivo

  • Colore di sfondo, padding, bordo, peso del font (aggiunta di allineamento, interlinea, spaziatura tra lettere se presenti)
  • Gli stili impostati su Mobile non sovrascrivono quelli Desktop, e viceversa.
  • Padding reale a 0 px su Mobile: nella Mobile View puoi impostare il padding Top e Bottom a 0 px per una spaziatura zero effettiva. Gli stili mobile sono circoscritti al dispositivo, quindi non modificano il padding Desktop.

Schermata 3 — Editor Mobile per Form, Survey e Quiz

Contenuto vs. Stile su Mobile

Contenuto e presentazione si configurano separatamente. Modifica il testo specifico per mobile per maggiore chiarezza, e perfeziona gli stili solo mobile per una migliore leggibilità.

Comportamento

  • Contenuto: puoi usare un testo diverso su Mobile.
  • Stile: spaziatura, bordi e tipografia sono circoscritti al dispositivo.
  • Reset/Copy: se disponibile, usa Reset o Copy from Desktop per velocizzare la configurazione.

Immagini Header e Background Mobile

Le immagini si scalano in modo diverso sui schermi mobile. Con questa funzionalità puoi caricare immagini ottimizzate specificamente per i dispositivi piccoli, assicurando un design pulito e funzionale.

Perché è importante:

  • Gli utenti mobile interagiscono in verticale — usa immagini più compatte, in formato ritratto.
  • Evita il ritaglio o la distorsione delle immagini che spesso si verifica quando quelle desktop vengono ridimensionate.

Stile dei font su Mobile

Un testo che si legge bene su desktop può risultare compresso o troppo grande su uno schermo mobile. Usa l'Editor Mobile per regolare gli elementi tipografici singolarmente per una lettura mobile più fluida.

Controlli disponibili:

  • Font Family: scegli tra i font di sistema o personalizzati disponibili
  • Font Size: imposta la dimensione esatta in px per la chiarezza su schermi piccoli
  • Font Weight: usa grassetto, leggero o normale per migliorare la visibilità

Elementi interessati:

  • Label — guidano l'utente nella compilazione dei campi
  • Short Label — ideali per layout compatti o sezioni a più colonne
  • Placeholder — utili per suggerimenti di input discreti

Domande frequenti

D: Le modifiche nella Mobile View influenzano il layout desktop?

No — tutte le modifiche apportate nella Mobile View si applicano solo al mobile. Il design desktop rimane invariato.

D: Posso usare immagini di header e background diverse per mobile?

Sì! Carica immagini specifiche per mobile che si adattano meglio ai rapporti degli schermi piccoli senza influire sulla versione desktop.

D: Posso visualizzare in anteprima solo la versione mobile prima di pubblicare?

Assolutamente. Usa il pulsante Preview mentre sei nella Mobile View per testare ciò che i tuoi utenti vedranno su mobile.

D: Le modifiche ai font sono globali o specifiche per elemento?

Le impostazioni dei font possono essere configurate singolarmente per Label, Short Label e Placeholder — offrendoti il controllo completo.

D: Tutti i piani HITLEAD includono l'Editor Mobile?

Sì, questa funzionalità è inclusa in tutti i piani che offrono Form, Survey o Quiz.

Prossimi passi

  • Testa i tuoi form principali con la personalizzazione mobile per migliorare il coinvolgimento.
  • Esegui split test tra design ottimizzati per mobile e design condivisi.
  • Esplora ulteriori modi per migliorare la UX con le opzioni di stile e i campi smart.
  • Analizza i dati di conversione specifici per mobile utilizzando gli strumenti di analytics.