Come aggiungere la forma di gravità al sito Web di Elementor

Non puoi immaginare un sito web senza moduli. La maggior parte dei siti Web utilizza moduli singoli o multipli per scopi diversi. Quindi, è essenziale imparare anche ad aggiungere moduli al tuo sito Elementor.

Se hai lo strumento giusto in mano, puoi eseguire l'intero processo in un paio di minuti senza toccare una riga di codice.

Oggi abbiamo condiviso come creare/aggiungere moduli al sito Web di Elementor, utilizzando il widget Gravity Forms gratuito di Happy Addons.

Abbiamo anche condiviso gli altri widget dei moduli Happy Addons compatibili con i plugin dei moduli più diffusi.

Come utilizzare il widget Gravity Forms di Happy Addons per creare moduli per il sito Web Elementor

Puoi facilmente creare forme diverse usando il widget Gravity Forms.

Nel segmento seguente, ti mostreremo come utilizzare il widget Gravity Forms e creare gratuitamente moduli sempreverdi per il tuo sito Web Elementor.

Segui questi quattro semplici passaggi :

1. Installa e attiva i plugin necessari
2. Crea una nuova forma di gravità
3. Aggiungi il widget Gravity Forms di Happy Addons
4. Personalizza il modulo nel tuo stile

Iniziamo:

Passaggio uno: installa e attiva i plug-in necessari

Innanzitutto, dobbiamo installare e attivare i plug-in richiesti sul nostro sito Web. Qui abbiamo già installato e attivato i seguenti plugin. È possibile utilizzare i seguenti collegamenti per scaricare i plug-in.

1. Elementor (gratuito)
2. Componenti aggiuntivi felici (gratuiti)
3. Forme di gravità (professionista)

Nota: per tua preoccupazione, il plug-in Gravity Forms non offre una versione gratuita. Devi acquistare la sua versione pro.

Passaggio due: crea una nuova forma di gravità

Dopo aver installato il plug-in, è necessario accedere all'area Moduli o Nuovi moduli . Quindi fare clic sul pulsante Aggiungi nuovo per creare un nuovo modulo.

Nel seguente popup modale, avrai la possibilità di creare il modulo. Aggiungi il titolo del modulo e la descrizione del modulo qui. Infine, fai clic sul pulsante Crea modulo per creare un nuovo modulo.

Molto bene! Hai creato un nuovo modulo. Ora è necessario aggiungere i campi del modulo necessari al modulo. Nel plug-in Gravity Forms, puoi facilmente aggiungere i campi modulo richiesti utilizzando la funzione di trascinamento della selezione.

Innanzitutto, devi digitare il nome del campo nella barra di ricerca. Quindi trascina e rilascia il campo nell'area laterale sinistra.

Qui vedi che stiamo cercando il campo del modulo Nome dalla barra di ricerca e trascinalo nel posto giusto.

Abbiamo anche aggiunto altri tre campi modulo nei nostri moduli come Email, Sito Web e Messaggio per creare un modulo completo. Dopo aver aggiunto i campi essenziali del modulo, fare clic sul pulsante Aggiorna per salvare il modulo.

Passaggio tre: aggiungi il widget Gravity Forms di Happy Addons

È ora di visualizzare il modulo sul tuo sito Web Elementor.

Innanzitutto, trova il widget Gravity Forms di Happy Addons dal menu della barra laterale di sinistra, quindi trascinalo nella posizione adatta del tuo sito web.

In secondo luogo, scegli il nome del modulo dall'elenco a discesa. Qui, abbiamo selezionato il modulo di esempio che hai creato in precedenza.

Puoi anche mostrare il titolo del modulo e Abilita invio Ajax qui nella sezione Contenuto .

Nota: quando apporti una modifica al pannello dell'editor di Elementor, devi fare clic sul pulsante Applica per aggiornare le modifiche alla pagina del frontend.

Passaggio quattro: personalizza il modulo nel tuo stile

Nella sezione Stile , otterrai le opzioni di stile essenziali per una migliore personalizzazione del modulo.

Eccoli.

• Campi dei moduli
• Etichetta campi moduli
• Pulsante Invia
• Rottura
• Elenco

In questo blog, utilizzeremo le prime tre impostazioni Campi modulo, Etichetta campi modulo e Pulsante di invio che vengono spesso utilizzate per progettare il modulo.

Campi modulo

Nell'area Stile-> Campi modulo , troverai molte opzioni di stile per modificare lo stile predefinito dei campi modulo. Queste sono le opzioni Larghezza campo grande, Spaziatura campo, Riempimento, Raggio bordo, Tipografia, Colore testo campo, Colore segnaposto campo, Tipo bordo, Ombra riquadro e Colore sfondo che puoi utilizzare per personalizzare i campi.

Per aumentare i campi del modulo Padding .

Puoi cambiare il colore del testo del campo a modo tuo.

Etichetta campi modulo

È inoltre possibile reimpostare Margine, Riempimento etichetta, Margine etichetta secondaria, Tipografia etichetta, Tipografia etichetta secondaria, Colore testo etichetta, Colore testo etichetta secondaria e Colore etichetta richiesto dello stile etichetta dei campi modulo .

Qui, abbiamo cambiato il colore dell'etichetta richiesto predefinito e impostato il colore rosso.

Pulsante Invia

Nell'area Stile-> Pulsante di invio, otterrai le possibili opzioni di progettazione come Larghezza intera pulsante, Larghezza pulsante, Margine, Padding, Tipografia, Tipo bordo, Raggio bordo, Ombra riquadro, Colore testo e Colore sfondo per lo stile dell'invio pulsante.

Abilita larghezza intera pulsante e imposta larghezza pulsante

Se hai bisogno di un pulsante di invio a larghezza intera, puoi farlo abilitando il pulsante Larghezza intera . Quindi puoi impostare la larghezza del pulsante a modo tuo.

Imposta margine, riempimento e raggio più ampio

Abbiamo anche definito il margine, il riempimento e il raggio più ampio del pulsante di invio.

Cambia colore pulsante al passaggio del mouse

Per rendere il pulsante più visibile, abbiamo cambiato il colore al passaggio del mouse del pulsante Invia.

Anteprima finale del widget Gravity Forms di Happy Addons

L'aspetto finale della nostra forma Elementor Gravity è simile all'immagine seguente.

Puoi anche guardare il video.

Altri 6 widget di moduli Happy Addon che puoi utilizzare

Come il widget Gravity Forms, Happy Addons offre altri 6 widget di moduli. Puoi anche usarli per integrare i moduli nel tuo sito Web Elementor.

Parliamo di questi widget uno per uno.

1. Modulo di contatto 7

Contact Form 7 è uno dei principali plug-in di moduli per WordPress utilizzati dalla maggior parte degli utenti. Per questo motivo, Happy Addons consente ai suoi utenti di aggiungere moduli utilizzando il widget gratuito Contact Form 7.

Con questo widget, puoi facilmente aggiungere e personalizzare diversi tipi di moduli al tuo sito Web Elementor.

Consulta la documentazione.

2. Forme Ninja

Ora puoi anche utilizzare il tuo plug-in Ninja Forms preferito. Utilizzando il widget Happy Addons Ninja Forms, puoi inserire i moduli necessari nel tuo sito Elementor.

Leggi la documentazione dettagliata di Ninja Forms.

3. WeForms

Con il nuovo e unico widget weForms di Happy Addons, puoi aggiungere moduli prefabbricati al tuo sito Web in modo più organizzato.

Dai un rapido controllo a questa documentazione e scopri come funziona questo widget.

4. Forme Caldera

Prova il widget gratuito di Happy Addons Caldera Forms per aggiungere moduli straordinari al tuo sito Elementor. Diamo un'occhiata alla guida per l'utente.

5. WPForms

Vuoi aggiungere moduli al tuo sito Web utilizzando il popolare plug-in WPForms? In Happy Addons, puoi facilmente aggiungere e personalizzare i moduli predefiniti utilizzando il widget WPForms. Per maggiori dettagli, ecco una guida rapida per te.

Forme fluide

Ultimo, ma non per importanza. Puoi anche utilizzare il widget Happy Addons Fluent Forms per integrare i moduli nel tuo sito web. Segui la documentazione completa di Fluent Forms.

Sei pronto per utilizzare il widget Gravity Forms di Happy Addons

Puoi semplificare il processo di progettazione del modulo utilizzando i widget del modulo Happy Addons. Ci auguriamo che tu abbia seguito tutti i passaggi precedenti e appreso il processo di integrazione dei moduli.

Ora è il momento di aggiungere Gravity Form al sito Web di Elementor.

Sei pronto per andare?

Se hai ancora domande su questo blog o sui moduli di Elementor Gravity, puoi alzare la voce nella casella dei commenti qui sotto.

Dai un'occhiata ad altri tutorial essenziali...

• Come personalizzare il design del tuo modulo in Elementor utilizzando i widget Happy Form GRATIS!
• La guida definitiva alla creazione di un modulo di contatto Elementor
• 7 migliori generatori di moduli WordPress a confronto (pro e contro)
• Modulo di contatto 7: revisione delle funzionalità e controllo delle prestazioni (rispetto a WPForms)
• Recensione onesta di WPForms per gli esperti di marketing

Non dimenticare di iscriverti alle nostre newsletter. È anche completamente GRATUITO !