Riassunto AI
Desideri un maggiore controllo sul layout dei tuoi moduli WordPress? Il campo Layout per WPForms offre una soluzione potente per creare layout di moduli avanzati che si adattano automaticamente alle dimensioni dello schermo degli utenti.
Questa guida ti mostrerà come utilizzare il campo Layout in WPForms.
Prima di iniziare, assicurati di installare e attivare WPForms e verificare la tua licenza. Quindi, crea un nuovo modulo o modifica uno esistente per accedere al generatore di moduli.
Aggiungere un campo Layout al tuo modulo
Nel generatore di moduli, troverai il campo Layout nella sezione Campi Fantasia. Fai clic sul campo Layout o trascinalo nell'area di anteprima per aggiungerlo al tuo modulo.
Scegliere un layout a colonne
Una volta aggiunto un campo Layout al tuo modulo, è il momento di scegliere il layout preferito.
Il campo Layout offre diverse opzioni per disporre i campi del tuo modulo in colonne diverse. Per aprire il pannello Opzioni campo e visualizzare i layout a colonne disponibili, fai clic sul campo Layout nell'area di anteprima del modulo.
Ora vedrai diversi layout disponibili con un numero di colonne compreso tra 1 e 4. Per impostazione predefinita, il campo Layout selezionerà il layout a 2 colonne, che ha 2 colonne di uguale larghezza.
Utilizzeremo il layout predefinito in questa guida, ma la funzionalità rimane la stessa per tutti i layout.
Nota: I campi del tuo modulo non verranno visualizzati correttamente se in precedenza hai utilizzato l'opzione classi CSS per abilitare il layout a più colonne. Consulta la nostra sezione FAQ per maggiori dettagli.
Impostazione dell'ordine di visualizzazione dei campi
Il menu a discesa Visualizzazione determina l'ordine dei campi nel tuo modulo. I campi nei nuovi campi Layout sono impostati per essere visualizzati in righe per impostazione predefinita, consentendo agli utenti di navigare nel modulo orizzontalmente da sinistra a destra.
Per modificare questo ordine, fai clic sul menu a discesa Visualizzazione e seleziona l'opzione preferita.
Nota: Se il tuo modulo include un campo Layout con più campi impilati, si consiglia di utilizzare l'opzione Righe – i campi sono ordinati da sinistra a destra dal menu a discesa Visualizzazione. Ciò garantisce che i campi vengano visualizzati nella visualizzazione mobile, nelle notifiche del modulo e nelle voci esattamente come li hai disposti, preservando la struttura del modulo e l'esperienza utente previste.
Cambiare Layout
Se desideri cambiare layout, anche dopo aver aggiunto campi a singole colonne, seleziona semplicemente uno qualsiasi dei layout disponibili dal pannello Opzioni Campo.
Le colonne e i loro contenuti adegueranno automaticamente le loro dimensioni e posizione in base alle dimensioni dello schermo dell'utente.
Nota: Se ci sono meno colonne nel layout appena selezionato rispetto al precedente, tutti i campi nell'ultima colonna verranno rimossi dal campo Layout e inseriti nel corpo principale del tuo modulo.
Utilizzo di Layout Multipli
Se lo desideri, puoi aggiungere più campi Layout al tuo modulo e scegliere diverse configurazioni di colonne per ciascuno.
Ad esempio, un campo Layout può avere 1 colonna e un altro campo Layout può avere 2 colonne, offrendoti maggiore flessibilità nell'aspetto del tuo modulo.
Per aiutarti a distinguere ogni campo Layout, sentiti libero di aggiungere un'etichetta al campo Etichetta nel pannello Opzioni Campo.
Poiché i campi Layout agiscono come contenitori, sono la soluzione perfetta per raggruppare elementi nel modulo.
Aggiungere campi a singole colonne
Per aggiungere un campo a qualsiasi colonna, fai clic e trascina il campo dalla barra laterale alla colonna di destinazione.
Nota: I campi Layout, Interruzione di Pagina, Ripetitore e Anteprima Voce non possono essere aggiunti all'interno di un campo Layout.
La maggior parte dei campi aggiunti al campo Layout avrà per impostazione predefinita una dimensione campo grande, il che significa che occuperanno l'intera larghezza della colonna. Tuttavia, la dimensione del campo Testo Formattato e Testo Paragrafo è determinata dall'altezza, con un'impostazione predefinita di dimensione media all'interno del campo Layout.
Per un'altezza regolabile per il campo Testo Paragrafo, consulta la nostra documentazione per sviluppatori.
Abilitare la logica condizionale
Il campo Layout supporta anche l'attivazione della logica condizionale per mostrare o nascondere un intero campo Layout in base alla selezione dell'utente.
Nota: È necessaria la versione 1.9.0 o successiva di WPForms per accedere alla funzionalità di logica condizionale per il campo Layout.
Per attivare la logica condizionale, fai clic sul campo Layout per aprire il suo pannello Opzioni Campo. Quindi vai alla scheda Logica Intelligente.
Una volta lì, attiva l'opzione Attiva Logica Condizionale sulla posizione ON.
Dopo averla abilitata, appariranno opzioni aggiuntive per configurare la regola della logica condizionale. Per il nostro esempio, abbiamo aggiunto un campo a scelta multipla che chiede agli utenti se desiderano lasciare una recensione. Quindi impostiamo la regola su Mostra questo campo se Desideri lasciare una recensione? è Sì.
Questa regola nasconderà tutti i campi all'interno del campo Layout quando pubblicherai il tuo modulo. I campi verranno visualizzati solo quando l'utente seleziona Sì dalle opzioni del campo a scelta multipla.
Dopo aver abilitato la logica condizionale per un campo Layout, l'opzione per utilizzare la logica condizionale sarà disabilitata sui singoli campi all'interno del campo Layout.
Nota: Per maggiori dettagli su come funziona la logica condizionale, assicurati di consultare la nostra guida completa all'uso della logica condizionale in WPForms.
Rimuovere un campo Layout dal tuo modulo
Se desideri rimuovere un campo Layout dal tuo modulo, passa il mouse sopra il campo e fai clic sull'icona del cestino.
Poiché l'eliminazione di un campo Layout eliminerà anche tutti i campi al suo interno, apparirà una sovrapposizione che ti chiederà di confermare l'eliminazione. Procedi e fai clic su OK se accetti di eliminare il campo Layout e tutti i campi che hai aggiunto al suo interno.
Nota: Non sarai in grado di recuperare nessuno dei campi aggiunti all'interno del campo Layout una volta eliminati.
Anteprima del tuo modulo
Una volta aggiunti i campi alle colonne all'interno dei tuoi campi Layout, procedi e salva le modifiche facendo clic su Salva.
Quindi, fai clic sul pulsante Anteprima per aprire l'anteprima del modulo in una nuova scheda.
Nella pagina di anteprima, vedrai una versione funzionante del tuo modulo. Qui puoi interagire con il tuo modulo e testare il suo layout visivo. Sarai anche in grado di testare quanto bene il tuo modulo funziona su diverse dimensioni dello schermo.
Domande frequenti
Queste sono le risposte ad alcune delle domande più frequenti sulla creazione di layout di moduli multi-colonna.
Perché il campo Layout non viene visualizzato correttamente quando visualizzo in anteprima il mio modulo?
Se in precedenza hai utilizzato l'opzione delle classi CSS per creare colonne multiple sul tuo modulo, ciò impedirà al campo Layout di funzionare correttamente. Dovrai rimuovere le classi CSS dai campi del tuo modulo prima di utilizzare il campo Layout.
Per fare ciò, apri il generatore di moduli e fai clic sul campo che desideri modificare per aprire il pannello Opzioni campo. Successivamente, vai alla scheda Avanzate e rimuovi la/le classe/i CSS multi-colonna dal campo Classi CSS.
Dopo aver rimosso le classi CSS, assicurati di salvare le modifiche e di visualizzare in anteprima il tuo modulo per assicurarti che appaia e funzioni come previsto.
Posso visualizzare o nascondere un campo Layout in base alla selezione dell'utente?
Sì, puoi mostrare o nascondere un campo Layout nei tuoi moduli a seconda delle risposte fornite dai tuoi utenti. Ciò richiede l'abilitazione della logica condizionale sul campo Layout specifico che desideri nascondere. Si prega di fare riferimento alla nostra sezione sulla logica condizionale per ulteriori dettagli.
Posso allineare il pulsante di invio sulla stessa riga del campo Layout?
Sì. Se desideri utilizzare il campo Layout per creare un modulo a riga singola, dovrai aggiungere una classe CSS personalizzata nella pagina delle impostazioni del modulo.
Per fare ciò, vai su Impostazioni » Generali nel tuo modulo, e aggiungi la classe CSS inline-fields al campo Classe CSS del modulo.
Nota: L'utilizzo della classe inline-fields in WPForms può talvolta entrare in conflitto con gli stili del tuo tema WordPress. Per saperne di più, assicurati di consultare il nostro tutorial su come visualizzare i moduli in una singola riga.
Ecco fatto! Ora sai come utilizzare il campo Layout in WPForms.
Successivamente, desideri sapere come mostrare opzioni diverse nel tuo modulo in base alle interazioni dell'utente? Dai un'occhiata alla nostra guida su come utilizzare la logica condizionale in WPForms.