### [Visualizzazione dei campi in una singola colonna su dispositivi mobili](https://wpforms.com/docs/how-to-display-fields-in-a-single-column-on-mobile/) **Pubblicato:** 23 novembre 2023 **Autore:** David Ozokoye **Estratto:** Scopri come utilizzare le classi CSS di layout per visualizzare i tuoi moduli in una singola colonna sui dispositivi mobili. **Contenuto:** Vuoi convertire un layout di modulo a più colonne in una singola colonna quando visualizzato su dispositivi mobili? Mentre l'utilizzo 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. - [Creazione di un layout di modulo a più colonne](#multi-column) - [Visualizzazione dei campi in una singola colonna su dispositivi mobili](#single-column-mobile) **Nota:** Si consiglia di utilizzare il [campo Layout](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/) per un approccio più semplice, drag-and-drop, per creare 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](https://wpforms.com/docs/install-wpforms-plugin/ "Come installare il plugin WPForms") sul tuo sito WordPress e che tu abbia [verificato la tua licenza](https://wpforms.com/docs/verify-wpforms-license/ "Come verificare la licenza WPForms"). Quindi, puoi [creare un nuovo modulo](https://wpforms.com/docs/creating-first-form/ "Come creare il tuo primo modulo") o modificarne uno esistente per accedere al generatore di moduli. Dai un'occhiata al nostro [modello di modulo Multi-Column Request a Quote](https://wpforms.com/templates/multi-column-request-a-quote-form-template/) personalizzabile per iniziare facilmente. ## Creazione di un layout di modulo a più colonne Con WPForms, puoi facilmente [creare moduli con più colonne.](https://wpforms.com/docs/how-to-create-multi-column-form-layouts-in-wpforms/ "Come creare layout di modulo a più colonne in WPForms"). 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 a più colonne. **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. Nel generatore di moduli, 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 a più colonne verrà visualizzato 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 a più colonne 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](https://wpforms.com/docs/how-to-add-custom-css-to-your-wpforms/) al tuo modulo. **Categorie:** Styling, Styling e personalizzazione ---