Creazione di layout di moduli a più colonne con classi CSS

Vuoi condensare i tuoi moduli visualizzando i campi in più colonne? WPForms semplifica la suddivisione dei moduli in metà, terzi o layout ancora più complessi.

Questa guida ti mostrerà come utilizzare le nostre impostazioni di layout a più colonne per far sì che i tuoi moduli abbiano il miglior aspetto possibile.

---

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 moduli a più colonne 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 nell'editor 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.

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 visivo, 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 la stessa procedura per il nostro campo Email. Tuttavia, lo posizioneremo nella colonna di destra.

Quando hai finito di aggiungere i tuoi campi al tuo layout, assicurati di salvare le modifiche nell'editor dei moduli.

Ecco come appare il nostro esempio di layout a più colonne sul frontend del nostro sito:

Aggiunta manuale di classi CSS per layout a più colonne

Se preferisci non utilizzare lo strumento di layout visivo, 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 a più colonne:

• wpforms-met à
• wpforms-un-terzo
• wpforms-un-quarto
• wpforms-un-quinto
• wpforms-un-sesto
• wpforms-due-terzi
• wpforms-due-quarti
• wpforms-due-quinti
• wpforms-due-sesti
• wpforms-tre-quarti
• wpforms-tre-quinti
• wpforms-tre-sesti
• wpforms-quattro-quinti
• wpforms-quattro-sesti
• wpforms-cinque-sesti

L'immagine sottostante mostra 3 diversi layout comuni a più colonne. Le etichette indicano quali classi CSS sono state utilizzate dall'elenco sopra.

Note aggiuntive sull'utilizzo di layout a più colonne

Quando si utilizzano le classi per le colonne, ci sono alcune cose importanti da notare:

• Le colonne non si applicano nell'editor dei moduli. Sono visibili solo quando si visualizza il modulo sul frontend del tuo 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 dice al plugin che è il primo elemento e reimposta eventuali colonne precedenti nel modulo.
• Nella maggior parte dei casi, quando si utilizzano le classi per le colonne, è necessario impostare la Dimensione del 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 a più colonne con campi condizionali, i campi visualizzati condizionalmente saranno allineati a sinistra. Per mantenere questi campi allineati secondo il tuo layout preferito, puoi usare questo snippet CSS:

Domande frequenti

Queste sono le risposte ad alcune delle domande più frequenti sulla creazione di layout di moduli multi-colonna.

Perché il layout a più colonne non funziona quando visualizzo in anteprima il mio modulo?

Se il Markup Moderno è abilitato nelle impostazioni di WPForms, le classi CSS per più colonne non funzioneranno quando visualizzi il tuo modulo nel frontend. Per risolvere questo problema, dovrai disabilitare il Markup Moderno.

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.

Fatto! Ora puoi ottimizzare i tuoi moduli con layout a più colonne.

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 a più colonne che cambia per visualizzare i campi in una singola colonna sui dispositivi mobili, in modo che sia facile da usare su ogni dispositivo.