Riassunto AI
Lo spazio è una parte cruciale della progettazione dei moduli. In WPForms, lo spazio tra i campi, i titoli e altri aspetti è impostato di default per offrire un'esperienza ottimale ai visitatori del tuo sito.
Detto questo, ogni sito web è unico. Quindi, se vuoi impostare spazi personalizzati tra i campi per un migliore allineamento con il tuo stile specifico, sei nel posto giusto.
In questo articolo, ti mostrerò passo dopo passo come forzare lo spazio tra i campi in WPForms. Anche se dovrai lavorare un po' con il codice, non è necessaria alcuna conoscenza di programmazione pregressa per seguire il mio metodo.
In Questo Articolo
Forzare spazi tra i campi del modulo
Prima di condividere il codice esatto per forzare spazi tra diversi tipi di componenti del modulo, avrai bisogno dei plugin giusti per rendere questo compito il più semplice possibile.
Configurazione iniziale: Spaziatura dei moduli con codice
Iniziamo installando i plugin necessari sul tuo sito.
Passaggio 1: Installa WPForms e WPCode
Questo metodo funziona sia per la versione Lite che Pro di WPForms. Ma ti consiglio di ottenere WPForms Pro perché ti darà accesso a tonnellate di opzioni di stile aggiuntive con l'editor a blocchi, eliminando la necessità di codice per personalizzazioni più avanzate.
Dopo aver acquistato WPForms Pro, procedi e installa il plugin sul tuo sito. Ecco una guida dettagliata su come installare WPForms.
Successivamente, avrai anche bisogno del plugin WPCode. Questo è un plugin gratuito che rende incredibilmente facile aggiungere snippet di codice al tuo sito.
I passaggi di installazione sono simili al metodo per installare WPForms, ma puoi aggiungere la versione gratuita di WPCode direttamente dal repository di WordPress. Ecco la versione rapida del processo.
Dal menu di amministrazione di WordPress, vai su Plugin » Aggiungi Nuovo.
Questo ti porterà alla schermata dei plugin. Usa la casella di ricerca sul lato destro per cercare WPCode. Quando l'elenco dei plugin appare sullo schermo, fai clic sul pulsante Installa ora accanto ad esso.
L'installazione richiederà solo pochi secondi e il pulsante Installa cambierà in Attiva. Premi il pulsante Attiva per completare l'installazione del plugin sul tuo sito.
Ottimo! Con i plugin necessari installati, possiamo passare alla regolazione degli spazi tra i diversi elementi del modulo.
Passaggio 2: Crea e incorpora un modulo
Se stai cercando di regolare la spaziatura tra i campi in WPForms, probabilmente hai già creato e pubblicato uno o più moduli sul tuo sito.
Ma nel caso non l'avessi ancora fatto, puoi seguire questa facile guida su come creare un semplice modulo di contatto.
A scopo illustrativo, sto usando questo modello di modulo di sondaggio già pronto.
Assicurati di incorporare e pubblicare il tuo modulo (o almeno salvare una bozza nella tua area di amministrazione di WordPress). Puoi personalizzare la spaziatura solo su un modulo che è già incorporato nel tuo sito.
Dovrai anche conoscere l'ID del modulo per cui desideri personalizzare gli spazi. Puoi trovare facilmente l'ID del modulo andando su WPForms » Tutti i moduli.
L'ID del modulo è composto interamente da numeri e si trova nella colonna Shortcode tra le virgolette doppie. Nel mio caso, l'ID del modulo è 2294.
Ottimo! Ma potresti ancora chiederti come inserire il codice per modificare lo spazio di WPForms. Lo descriverò di seguito.
Passaggio 3: Inserisci il codice per la spaziatura dei moduli
Prima di utilizzare i codici, è importante sapere come inserire nuovi snippet di codice nel tuo sito WordPress. Dovrai ripetere questo processo per ogni codice che controlla lo spazio tra i campi in WPForms.
Per aggiungere un nuovo snippet, vai semplicemente su Code Snippets » + Aggiungi snippet.
Quindi, fai clic sul pulsante Usa snippet sotto l'opzione Aggiungi il tuo codice personalizzato (Nuovo snippet).
Ora dovresti trovarti in una nuova schermata, dove puoi dare un titolo al tuo snippet e scrivere il tuo codice personalizzato (o semplicemente copiare e incollare quelli che condividerò nella prossima sezione).
Poiché tutti i codici per controllare lo spazio in un modulo sono CSS, assicurati di selezionare Snippet CSS nel menu a discesa Tipo di codice.
Dopodiché, devi solo aggiungere il tuo snippet di codice e selezionare il metodo di inserimento. Le impostazioni di inserimento possono essere modificate da una sezione sotto l'Anteprima del codice. Ma non dovresti aver bisogno di modificare le impostazioni predefinite per nessuno dei codici discussi in questo post.
Soprattutto, ricorda di salvare il tuo snippet e attivarlo dopo aver aggiunto il tuo codice personalizzato. Non vedrai il codice avere effetto finché non sarà attivato utilizzando il pulsante di attivazione in alto a destra.
Eccellente! Ora sei pronto per iniziare a personalizzare lo spazio dei moduli con codice personalizzato.
Codici CSS per regolare la spaziatura dei moduli
Ora siamo pronti per iniziare a creare gli snippet di codice CSS che controllano gli spazi per diversi elementi del modulo.
Modifica dello spazio tra il titolo del modulo e il primo campo
Parliamo dei titoli dei moduli! Per impostazione predefinita, WPForms utilizza l'intestazione H1 della tua pagina come titolo del modulo. Questa intestazione appare sopra il modulo stesso.
Se desideri che il titolo appaia all'interno del contenitore del modulo, puoi facilmente abilitare tale opzione dall'editor a blocchi di WordPress.
Fai clic sul modulo incorporato all'interno del tuo editor per aprire ulteriori opzioni nel pannello di destra. Quindi, fai clic sul pulsante di attivazione Mostra titolo .
Potresti voler nascondere l'H1 se stai usando il titolo di WPForms. Questo può essere semplicemente fatto facendo clic sull'H1 e quindi premendo l'icona dell'occhio quando appare.
Ora siamo pronti per modificare lo spazio tra il titolo e il primo campo del modulo. Puoi Pubblicare o Aggiornare il tuo modulo a questo punto.
Diamo prima un'occhiata allo spazio predefinito tra il titolo del modulo e il primo campo in WPForms. Ecco come appare tipicamente:
Per modificare questo spazio, crea un nuovo snippet in WPCode, come mostrato nel passaggio 3. Puoi accedervi rapidamente andando su Code Snippets » + Aggiungi snippet nella barra laterale di WordPress.
Ecco il codice per modificare lo spazio del titolo per TUTTI i moduli WPForms sul tuo sito:
.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}
.wpforms-container-full .wpforms-title {
margin-bottom: 15px !important;
}
Ricorda, i valori di padding e margin sono variabili. Ciò significa che puoi inserire qui qualsiasi valore di cui hai bisogno. Ti consiglio di modificare solo il valore di margin-bottom in questo codice e di lasciare padding-bottom impostato su 0.
Ad esempio, se desideri che il titolo appaia con la stessa distanza del divario tra ciascun campo, puoi utilizzare 15px come valore di margin-bottom. Se desideri creare una distanza maggiore o minore di questa, aumenta o diminuisci semplicemente il valore px di margin-bottom secondo necessità.
Ecco come appare il titolo dopo aver aggiunto lo snippet di codice sopra al mio modulo di sondaggio.
Se desideri regolare questa spaziatura per moduli specifici anziché applicare modifiche globali, puoi modificare il codice sopra menzionando l'ID del modulo che ti interessa.
Ad esempio, ecco come cambierà il codice per un modulo con ID # 2294.
wpforms-2294 .wpforms-head-container {
padding-bottom: 0 !important;
}
#wpforms-2294 .wpforms-title {
margin-bottom: 15px !important;
}
Ciò si occupa della spaziatura per il titolo del tuo modulo. Ma per quanto riguarda la spaziatura tra ciascun campo?
Affronterò questo aspetto successivamente.
Modifica della spaziatura per tutti i campi
Il divario tra ogni riga successiva di campi è un altro numero variabile che può essere facilmente controllato con il codice.
Per riferimento, diamo prima un'occhiata alla spaziatura predefinita tra i campi.
Ora, se desideri aumentare o ridurre questo divario, puoi creare un nuovo snippet CSS seguendo gli stessi passaggi mostrati qui.
Solo che questa volta, il codice di cui hai bisogno è questo:
.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}
.wpforms-container .wpforms-field {
padding-top: 100px !important;
}
Il risultato è un modulo più allungato con un divario maggiore tra ciascun campo successivo.
Puoi regolare liberamente il divario modificando il valore px della proprietà padding-top.
Ancora una volta, se desideri modificare le spaziature dei campi solo per un singolo modulo, dovrai modificare il codice menzionando l'ID del modulo:
wpforms-2294 .wpforms-head-container {
padding-bottom: 0 !important;
}
#wpforms-2294 .wpforms-field {
padding-top: 100px !important;
}
Modifica del padding del pulsante di invio
Modificare il divario tra il tuo ultimo campo e il pulsante di invio è facile come i codici che hai usato sopra.
Per impostazione predefinita, la spaziatura per il pulsante di invio in WPForms appare così:
Il codice di cui hai bisogno per regolare il padding del pulsante di invio è:
.wpforms-container .wpforms-submit-container {
padding-top: 30px !important;
}
Dopo aver attivato questo codice, noterai che il padding aumentato avrà effetto per il pulsante di invio del tuo modulo:
È stato piuttosto semplice, vero?
Sentiti libero di usare i codici CSS per forzare uno spazio in WPForms come ritieni opportuno!
Successivamente, Applica Stili Avanzati del Modulo
Regolare i margini e il padding nei tuoi moduli è una delle poche cose che richiede codice. Ma WPForms ti consente di personalizzare gli stili del tuo modulo in modo estensivo senza codice per la maggior parte.
Puoi alterare l'aspetto dei tuoi campi, etichette, pulsanti e altro ancora con intuitivi controlli point-and-click. Vedi la nostra guida su stile del modulo con editor a blocchi per una panoramica completa.
Crea subito il tuo modulo WordPress
Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più facile. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.
Se questo articolo ti è stato utile, seguici su Facebook e Twitter per altri tutorial e guide gratuite su WordPress.
