Come visualizzare il modulo in un'unica riga in WordPress (modo semplice)
Tempo di lettura: 5 minuti

Vuoi visualizzare il tuo modulo in un’unica riga?

I moduli a riga singola offrono maggiore flessibilità con il posizionamento dei moduli. Ciò significa che puoi facilmente aggiungere moduli alle aree ad alto traffico del tuo sito e migliorare le tue conversioni.

In questo articolo, ti mostreremo come visualizzare facilmente il tuo modulo in una singola riga in WordPress.

Perché visualizzare un modulo a riga singola in WordPress?

I moduli a riga singola offrono maggiore flessibilità nella scelta di dove posizionare i moduli. Poiché questo stile di forma è solo una singola riga, non occupano molto spazio e possono essere facilmente integrati con il contenuto esistente.

I moduli di iscrizione alla newsletter via e-mail vengono spesso visualizzati in una singola riga sopra o sotto il contenuto del post del blog. Anche i moduli a riga singola funzionano bene pagine di destinazione, pagine di contatto e altro pagine importanti sul tuo sito web.

Oltre a generare più iscritti e lead, puoi trasformare qualsiasi tipo di modulo in un modulo a riga singola. Ad esempio, potrebbe avere senso mostrare il tuo Modulo di Contatto in un’unica riga per risparmiare spazio sulla pagina.

Detto questo, ti mostriamo come visualizzare un modulo a riga singola sul tuo Sito Web WordPress.

Creare il tuo modulo a riga singola in WordPress

Per questo tutorial, useremo il WPForms plugin per creare un modulo a riga singola. È il miglior plugin per la generazione di lead per WordPress utilizzato da oltre 5 milioni di siti web.

WPForms

Puoi utilizzare il generatore di trascinamento della selezione per creare rapidamente qualsiasi modulo per il tuo sito. Inoltre, si integra con il popolare strumenti di email marketing così puoi facilmente far crescere il tuo lista e-mail.

C’è un versione premium del plugin con molte più funzionalità, ma useremo il versione semplificata per questo tutorial poiché ti consente di creare un semplice modulo e collegarlo a Contatto costante per la generazione di piombo.

La prima cosa che devi fare è installare e attivare il plugin. Per maggiori dettagli, consulta la nostra guida per principianti su come installare un plugin per WordPress.

Dopodiché, vai su WPForms » Aggiungi nuovo nel pannello di amministrazione di WordPress e dai un nome al modulo. Quindi, devi scegliere il tuo modello di modulo.

Selezioneremo il modello “Modulo di adesione”. Passa il mouse sopra il modello e fai clic sul pulsante “Usa modello”.

Seleziona il modello di modulo

Questo fa apparire il generatore di moduli drag and drop.

Vedrai che il modello che abbiamo scelto include automaticamente i campi del nome e dell’email e un pulsante di invio.

WPForms trascina e rilascia il generatore di moduli

Ogni campo può essere modificato facendo clic su di essi e apportando modifiche nella colonna di sinistra.

Puoi anche trascinare e rilasciare i campi per modificarne l’ordine.

Pannello dell'editor di moduli WPForms

Una volta terminata la personalizzazione dei campi, puoi visualizzare il modulo in un’unica riga.

Per farlo, vai su Impostazioni » Generali e quindi fare clic sulla scheda a discesa “Avanzate”.

Vai alle impostazioni avanzate del modulo

Quindi, digita “campi in linea” nella casella “Classe CSS modulo” (senza virgolette).

Questo applicherà quella classe CSS al form. Poiché WPForms include lo stile per la classe “campi in linea”, renderà automaticamente l’intero modulo visualizzato correttamente su una singola riga.

Aggiungi classe CSS in linea

Successivamente, puoi rendere il modulo ancora più piccolo nascondendo le etichette dei campi.

Basta fare clic sull’opzione di navigazione “Campi”, quindi selezionare l’opzione di menu “Avanzate” e fare clic sull’interruttore “Nascondi etichetta” per attivarla.

Nascondi le etichette dei moduli attiva/disattiva

Quindi, devi fare la stessa cosa per tutte le etichette dei campi del modulo.

Successivamente, nella stessa sezione “Avanzate”, puoi inserire il testo nella casella “Segnaposto”.

Questo dice ai tuoi utenti a cosa serve ogni campo del modulo.

Aggiungi testo segnaposto al modulo

Una volta completata la personalizzazione del modulo, assicurati di fare clic sul pulsante “Salva” per salvare le modifiche.

Se stai utilizzando il modulo per generare lead, puoi collegare il modulo al tuo provider di email marketing. Per maggiori dettagli, consulta la nostra guida su come creare una newsletter via email il modo giusto.

Aggiungere il tuo modulo a riga singola al tuo sito Web WordPress

Ora è il momento di aggiungere il tuo modulo a riga singola al tuo sito web. Puoi aggiungerlo a qualsiasi pagina, articolo o area widget.

Lo aggiungeremo a una pagina esistente, ma il processo sarà simile se lo aggiungi a un’altra area del tuo blog WordPress.

Basta aprire la pagina in cui si desidera visualizzare il modulo a riga singola, fare clic sull’icona di aggiunta del blocco “Più” e cercare “WPForms”.

Aggiungi blocco WPForms

Quindi, fai clic sul blocco “WPForms” per aggiungerlo al tuo sito.

Viene visualizzata una casella a discesa per scegliere il modulo a riga singola creato in precedenza.

Seleziona il modulo a riga singola dal menu a discesa

Una volta scelto il modulo, il plug-in caricherà un’anteprima del modulo all’interno dell’editor di contenuti. Quindi, fai clic sul pulsante “Aggiorna” o “Pubblica” per rendere attivo il tuo nuovo modulo.

Ora puoi visitare il tuo sito web per vedere il tuo nuovo modulo in azione.

Esempio di modulo a riga singola

Speriamo che questo articolo ti abbia aiutato a imparare come visualizzare il tuo modulo in una singola riga in WordPress. Potresti anche voler vedere la nostra guida su come ottenere un dominio di posta elettronica gratuito, e le nostre scelte esperte del le migliori app per numeri di telefono aziendali virtuali con opzioni gratuite.

Se ti è piaciuto questo articolo, iscriviti al nostro Canale Youtube per i video tutorial di WordPress. Ci trovi anche su Twitter e Facebook.

il post Come visualizzare il modulo in una singola riga in WordPress (modo semplice) è apparso per la prima volta su WPBeginner.



Source link

Di Simone Serra

Web Designer Freelancer Realizzazione Siti Web Serra Simone Realizzo siti web, portali ed e-commerce con focus specifici sull’usabilità, l’impatto grafico, una facile gestione e soprattutto in grado di produrre conversioni visitatore-cliente. Elaboro siti internet, seguendo gli standard Web garantendo la massima compatibilità con tutti i devices. Sviluppo e-commerce personalizzati, multilingua, geolocalizzati per potervi mettere nelle migliori condizioni di vendita. Posiziono il tuo sito su Google per dare maggiore visibilità alla tua attività sui motori di ricerca con SEO di base o avanzato.