### [Creazione di layout di moduli multicolonna con classi CSS](https://wpforms.com/docs/how-to-create-multi-column-form-layouts-in-wpforms/) **Pubblicato:** 1 giugno 2018 **Autore:** Umair Majeed **Estratto:** Scopri come utilizzare le impostazioni di layout multicolonna per organizzare i campi del tuo modulo. **Contenuto:** Vuoi condensare i tuoi moduli visualizzando i campi in più colonne? WPForms semplifica la divisione dei moduli in metà, terzi o layout ancora più complessi. Questo tutorial ti mostrerà come utilizzare le nostre impostazioni di layout multicolonna per far sì che i tuoi moduli abbiano un aspetto ottimale. - [Creazione di moduli multicolonna con layout visivi](#visual) - [Aggiunta manuale di classi CSS multicolonna](#manual) - [Note aggiuntive sull'utilizzo di layout multicolonna](#notes) - [Domande frequenti](#faq) **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, alla creazione di layout di moduli avanzati. Tuttavia, le classi CSS di layout trattate in questo tutorial sono ancora supportate. --- Prima di iniziare, assicurati che WPForms sia [installato e attivato](https://wpforms.com/docs/install-wpforms-plugin/) sul tuo sito WordPress e che tu abbia [verificato la tua licenza](https://wpforms.com/docs/verify-wpforms-license/). Quindi puoi [creare un nuovo modulo](https://wpforms.com/docs/creating-first-form/) o modificarne uno esistente per accedere al generatore di moduli. ## Creazione di moduli multicolonna con layout visivi WPForms include uno strumento di layout visivo che ti consente di creare più colonne senza codice. Per accedere a questo strumento, fai clic su qualsiasi campo nel generatore per aprire il suo pannello Opzioni campo. Quindi fai clic sulla scheda **Avanzate**. Apri lo strumento di layout visivo facendo clic su **Mostra layout** accanto all'opzione Classi CSS. Questo rivelerà diverse opzioni di layout predefinite che puoi utilizzare nel tuo modulo. **Nota:** L'opzione **Mostra layout** è disponibile solo per gli utenti di WPForms Lite. Se stai utilizzando il plugin WPForms Pro, ti verrà richiesto di utilizzare il [campo Layout](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/) per creare campi modulo multicolonna. Per il nostro esempio, vogliamo che i campi Nome ed Email appaiano uno accanto all'altro, e che ciascuno occupi metà della larghezza del modulo. Per creare questo layout, selezioneremo l'opzione che mostra due caselle di uguali dimensioni. Una volta selezionato questo layout, dobbiamo scegliere in quale colonna vogliamo che appaia questo particolare campo. Poiché il nostro campo Nome è il primo nel nostro modulo, vogliamo che appaia nella colonna di sinistra. Quando fai clic su una colonna nello strumento di layout visivi, le classi corrispondenti vengono aggiunte automaticamente all'impostazione Classi CSS del campo. La classe `wpforms-one-half` indica al campo di occupare metà della larghezza disponibile, mentre la classe `wpforms-first` indica al campo che deve iniziare una nuova riga. Successivamente, dobbiamo eseguire lo stesso processo per il nostro campo Email. Tuttavia, lo metteremo nella colonna di destra. Quando hai finito di aggiungere i tuoi campi al tuo layout, assicurati di salvare le modifiche nel generatore di moduli. Ecco come appare il nostro esempio di layout multicolonna sul frontend del nostro sito: Dai un'occhiata al nostro [Modello di modulo di richiesta preventivo multicolonna](https://wpforms.com/templates/multi-column-request-a-quote-form-template/) che utilizza classi CSS per creare un layout compatto e multicolonna. ## Aggiunta manuale di classi CSS multicolonna Se preferisci non utilizzare lo strumento di layout visivi, puoi digitare manualmente le classi CSS nel campo pertinente nella scheda Avanzate del pannello Opzioni campo. Ecco tutte le classi CSS disponibili per i layout multicolonna: - wpforms-one-half - wpforms-one-third - wpforms-one-fourth - wpforms-one-fifth - wpforms-one-sixth - wpforms-two-thirds - wpforms-two-fourths - wpforms-two-fifths - wpforms-two-sixths - wpforms-three-fourths - wpforms-three-fifths - wpforms-three-sixths - wpforms-four-fifths - wpforms-four-sixths - wpforms-five-sixths L'immagine sottostante mostra 3 diversi layout multicolonna comuni. Le etichette indicano quali classi CSS sono state utilizzate dall'elenco sopra. **Nota:** Il primo campo in ogni riga nell'immagine sopra utilizza anche la classe `wpforms-first`. **Nota:** Il primo campo in ogni riga nell'immagine sopra utilizza anche la classe `wpforms-first`. ## Note aggiuntive sull'utilizzo di layout multicolonna Quando si utilizzano classi di colonna, ci sono alcune cose importanti da notare: - Le colonne non vengono applicate nel generatore di moduli. Sono visibili solo quando si visualizza il modulo sul frontend del sito. Testa sempre i tuoi moduli prima di pubblicarli per assicurarti di essere soddisfatto dei loro layout. - Il primo campo in ogni riga deve avere la classe `wpforms-first` oltre alla sua classe di colonna. Questo indica al plugin che è il primo elemento e reimposta eventuali colonne precedenti nel modulo. - Nella maggior parte dei casi, quando si utilizzano classi di colonna, è necessario impostare la **Dimensione campo** (anch'essa nella scheda Avanzate del pannello Opzioni campo) su **Grande**. Ciò consente al campo di riempire tutto lo spazio disponibile nella sua colonna e mantiene la spaziatura destra e sinistra uniforme rispetto ai campi adiacenti. - Se utilizzi un layout multicolonna [con campi condizionali](https://wpforms.com/docs/how-to-use-conditional-logic-with-wpforms/), i campi visualizzati condizionalmente saranno allineati a sinistra. Per mantenere questi campi allineati secondo il tuo layout preferito, puoi utilizzare questo snippet CSS: **Nota:** Se non hai familiarità con l'uso del CSS in WPForms, consulta la nostra [guida CSS per principianti](https://wpforms.com/docs/how-to-style-wpforms-with-custom-css-beginners-guide/) e il nostro documento sull'[utilizzo di classi personalizzate con WPForms](https://wpforms.com/docs/how-to-add-custom-css-to-your-wpforms/). ## Domande frequenti Queste sono le risposte ad alcune delle domande più frequenti sulla creazione di layout di moduli multicolonna. #### Perché il layout multicolonna non funziona quando visualizzo in anteprima il mio modulo? Se il Markup Moderno è abilitato nelle impostazioni di WPForms, le classi CSS multicolonna non funzioneranno quando visualizzi il tuo modulo nel frontend. Per risolvere questo problema, dovrai disabilitare il Markup Moderno. **Nota:** La disabilitazione del Markup Moderno ti impedisce di stilizzare i moduli nell'editor a blocchi. Si consiglia di utilizzare il [campo Layout](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/) per creare campi modulo multicolonna se desideri comunque stilizzare il tuo modulo nell'editor a blocchi. Per fare ciò, vai su **WPForms » Impostazioni** e seleziona la scheda **Generale**. Successivamente, scorri verso il basso e deseleziona l'opzione **Usa Markup Moderno**. Assicurati di salvare le modifiche una volta terminato. Nota: Se non riesci a trovare le impostazioni del Markup Moderno, dovrai aggiungere un filtro per forzare WPForms a mostrare questa opzione. Per maggiori dettagli, consulta la nostra guida allo [styling dei moduli](https://wpforms.com/docs/styling-your-forms/#show-hide-modern-markup). Ecco fatto! Ora puoi ottimizzare i tuoi moduli con layout multicolonna. Successivamente, vorresti anche far sì che i tuoi moduli abbiano un bell'aspetto sui dispositivi mobili? Puoi configurare il tuo modulo per avere un layout multicolonna che cambia per [visualizzare i campi in una singola colonna su dispositivi mobili](https://wpforms.com/docs/how-to-display-fields-in-a-single-column-on-mobile/), in modo che sia user-friendly su ogni dispositivo. **Categorie:** Styling, Styling e personalizzazione ---