Riassunto AI
Vuoi convertire un layout di modulo a più colonne in una singola colonna quando visualizzato su dispositivi mobili? Mentre l'uso di più colonne può avere un bell'aspetto su schermi più grandi, il passaggio a un layout di modulo a colonna singola su schermi più piccoli renderà i tuoi moduli professionali e facili da usare.
Questo tutorial ti mostrerà come trasformare i tuoi layout a più colonne in una singola colonna solo per gli utenti che visitano il tuo sito su un dispositivo mobile.
Nota: Si consiglia di utilizzare il campo Layout per un approccio più semplice, drag-and-drop, alla creazione di layout di modulo avanzati che si adattano automaticamente alle dimensioni dello schermo degli utenti. Tuttavia, le classi CSS di layout trattate in questo tutorial sono ancora supportate.
Prima di iniziare, dovrai assicurarti che WPForms sia installato e attivato sul tuo sito WordPress e che tu abbia verificato la tua licenza. Quindi, puoi creare un nuovo modulo o modificarne uno esistente per accedere al generatore di moduli.
Creazione di un layout di modulo a più colonne
Con WPForms, puoi facilmente creare moduli con più colonne. Per questo esempio, creiamo un layout a due colonne utilizzando la seguente classe CSS: wpforms-one-half. Ecco un esempio di come apparirà il nostro modulo multi-colonna.
Nota: Il primo campo in ogni riga nell'immagine sopra utilizza anche la classe wpforms-first (ad esempio, wpforms-one-half wpforms-first. Questa classe indica al campo che deve iniziare una nuova riga.
Dopo aver creato un layout di modulo a due colonne, vogliamo assicurarci che i campi del modulo vengano visualizzati in una singola colonna solo per gli utenti che visitano il tuo sito su un dispositivo mobile.
Visualizzazione dei campi in una singola colonna su dispositivi mobili
Per visualizzare i campi in una singola colonna su dispositivi mobili, dovremo utilizzare una classe CSS preimpostata. Nell'editor del modulo, fai clic su un campo per visualizzare le Opzioni campo. Quindi, nella sezione Avanzate, aggiungi la classe wpforms-mobile-full al campo Classi CSS.
Infine, fai lo stesso per gli altri campi del modulo e ricorda di fare clic sul pulsante Salva per mantenere le modifiche.
Ora, per i visitatori mobili, il tuo layout di modulo multi-colonna verrà mostrato come una singola colonna. Ecco un esempio di come apparirebbe il modulo su un dispositivo mobile:
Ecco fatto! Ora puoi creare moduli che cambiano da layout multi-colonna a una singola colonna sui dispositivi mobili.
Successivamente, vuoi personalizzare ulteriormente l'aspetto del tuo modulo? Allora assicurati di consultare il nostro tutorial su come aggiungere CSS personalizzato al tuo modulo.