In questo articolo scoprirai come creare un modulo con Elementor gratuito.
Anche se il widget Modulo è disponibile solo su Elementor Pro, ciò non significa che non puoi aggiungere moduli con la versione gratuita di Elementor.
Se desideri includere un modulo in una pagina creata con la versione gratuita di Elementor, esistono due metodi che esploreremo in questo articolo.
Elementor, nelle sue versioni pro e gratuita, offre due widget che consentono di creare moduli. Questi sono widget HTML e Shortcode. Il widget HTML ti consente di incorporare un modulo utilizzando il codice HTML, mentre il widget Shortcode ti consente di incorporare un modulo dai plugin dei moduli utilizzando codici brevi, come Modulo di Contatto 7.
contenuto
Crea un modulo con la versione gratuita di Elementor utilizzando un widget HTML in 7 passaggi
Creare un modulo con la versione gratuita di Elementor è del tutto possibile, anche se non hai accesso al widget Modulo disponibile nella versione Pro. Un metodo efficace è utilizzare il widget HTML, che consente di incorporare un modulo utilizzando il codice HTML.
Passaggio 1: crea una nuova pagina o modifica quella esistente
Per iniziare, crea una nuova pagina e modificala con Elementor (Pagine -> Aggiungi). Se lo desideri, puoi anche modificare una pagina esistente.
Se decidi di creare un modulo su una nuova pagina, non dimenticare di configurare il layout facendo clic sull'icona a forma di ingranaggio sopra la tua pagina.
Passaggio 2: preparare il codice HTML del modulo
Per iniziare, avrai bisogno del codice HTML per il tuo modulo. Se hai competenze HTML, puoi scrivere tu stesso il codice. Altrimenti puoi trova molti modelli di moduli HTML gratuiti online. Una volta che il codice HTML è pronto, copialo e vai al passaggio successivo.
Passaggio 3: aggiungi una nuova sezione in Elementor
Nel tuo editor Elementor, inizia creando una nuova sezione nella pagina in cui desideri inserire il modulo. Fare clic sul pulsante “+” per aggiungere una sezione.
Quindi scegli il layout più adatto al tuo modulo.
Passaggio 4: inserisci il widget HTML
Dopo aver aggiunto la sezione, trova il widget "HTML" nel pannello dei widget a sinistra. Trascinalo e rilascialo nella sezione che hai creato. Questo widget ti permette di inserire il codice HTML direttamente nella pagina.
Passaggio 5: incolla il codice HTML del modulo
Una volta installato il widget HTML, fai clic sulla scheda "Contenuto" del widget nel pannello di sinistra. Incolla il codice HTML del tuo modulo nel campo previsto a questo scopo. Il modulo apparirà immediatamente sulla pagina.
Passaggio 6: personalizza e stilizza il modulo
Il modulo che hai integrato prenderà automaticamente lo stile di base del tuo tema WordPress. Tuttavia, se desideri personalizzarlo ulteriormente, puoi aggiungere CSS personalizzati per regolare colori, margini, caratteri e altro. Per questo è necessario conoscere i CSS o, se necessario, assumere uno sviluppatore.
Passaggio 7: anteprima e pubblicazione
Una volta integrato e stilizzato il modulo, prenditi il tempo necessario per visualizzare l'anteprima della pagina per assicurarti che tutto venga visualizzato correttamente. Testare il modulo per verificare che funzioni come previsto. Quando sei soddisfatto del risultato, pubblica la pagina.
Vedi anche: Come utilizzare i widget/modelli di Elementor come blocchi Gutenberg
Una cosa importante da notare: se il tuo modulo HTML utilizza CSS, immagini o JavaScript esterni per lo stile, assicurati di caricare le cartelle contenenti i file CSS, immagini e JavaScript nella directory principale del tuo sito web.
Pertanto, utilizzare un widget HTML per creare un modulo nella versione gratuita di Elementor è una soluzione semplice e flessibile. Sebbene ciò richieda un po' più di lavoro rispetto al widget Modulo disponibile nella versione Pro, è un metodo efficace per aggiungere moduli funzionali al tuo sito senza costi aggiuntivi.
Combinando le funzionalità di Elementor con un po' di codice HTML, puoi creare moduli su misura per le tue esigenze mantenendo la coerenza visiva del tuo sito.
Crea un modulo Elementor gratuito utilizzando il modulo di contatto 7 in 7 passaggi
La creazione di un modulo con la versione gratuita di Elementor può essere facilmente eseguita utilizzando il file popolare plugin Contact Form 7. Questo plugin offre un metodo semplice ed efficace per incorporare moduli nelle tue pagine Elementor senza richiedere alcuna conoscenza di codifica.
Esistono molti altri plugin per moduli, ma noi li consigliamo Modulo di Contatto 7 perché è il plugin per moduli più popolare per WordPress ed è completamente gratuito.
Passaggio 1: installa e attiva il modulo di contatto 7
Per iniziare, devi installare e attivare il plugin Modulo di Contatto 7 sul tuo sito WordPress. Accedi alla dashboard di WordPress, vai su Estensioni> Aggiungi, quindi cercare "Modulo di contatto 7". Una volta trovato il plugin, fai clic su installare orapoi attivare une fois l'installation terminée.
Passaggio 2: crea un nuovo modulo
Una volta attivato il plugin, puoi creare un modulo. Per fare questo, vai a Contatto > Aggiungi nuovo nella dashboard di WordPress. Assegna un nome al modulo per riconoscerlo facilmente in seguito.
Per impostazione predefinita, Contact Form 7 ti offre a modulo di contatto Di base inclusi i campi per nome, e-mail, oggetto e messaggio. Puoi utilizzare questo modulo così com'è o personalizzare i campi in base alle tue esigenze.
Se desideri aggiungere un nuovo campo, posiziona il puntatore nell'area in cui desideri aggiungere il nuovo campo (puoi posizionarlo sotto o sopra un campo esistente). Aggiungi un'etichetta per il nuovo campo del modulo in formato <label> votre label préféré </label>.
Posiziona il puntatore subito dopo l'etichetta del campo che desideri modificare o dopo l'ultimo campo esistente. Successivamente, seleziona il tipo di campo che desideri aggiungere dalla scheda Champ. Per migliorare la leggibilità e l'organizzazione del tuo modulo, puoi inserire un'interruzione di riga dopo ogni nuovo campo, che renderà il modulo più chiaro e allineato con gli altri campi esistenti.
Compila i campi e clicca su Inserisci il tag (puoi lasciare tutto come predefinito).
Contact Form 7 invierà a un'e-mail i contributi inviati tramite il modulo. È possibile impostare l'e-mail dalla scheda E-mail.
Puoi andare alla scheda Messaggi se vuoi sovrascrivere i messaggi predefiniti. Puoi personalizzare il messaggio che appare dopo che i tuoi visitatori hanno inviato correttamente il modulo o il messaggio di errore quando il modulo non è stato inviato, ecc.
Fare clic sul pulsante Enregistrer una volta terminata la modifica del modulo.
Passaggio 3: personalizza il modulo
Se desideri modificare o aggiungere ulteriori campi al tuo modulo, puoi farlo direttamente nell'interfaccia di Contact Form 7. Puoi aggiungere campi per numeri di telefono, caselle di controllo o qualsiasi altro tipo di dati inclusi di cui hai bisogno. Una volta completate le modifiche, salva il modulo.
Leggi la nostra guida su: Come personalizzare il modulo modulo di contatto 7
Passaggio 4: ottieni lo shortcode del modulo
Dopo aver creato e personalizzato il tuo modulo, Contact Form 7 ti fornirà uno shortcode univoco. Questo shortcode è essenziale per integrare il modulo in una pagina Elementor. Copia semplicemente lo shortcode trovato sotto il nome del modulo.
Passaggio 5: incorpora il modulo in Elementor
Ora che hai lo shortcode, apri la pagina in cui desideri aggiungere il modulo utilizzando l'editor di Elementor. Aggiungi una nuova sezione o seleziona una sezione esistente in cui dovrebbe apparire il modulo.
Trova il widget "Shortcode" nel pannello widget di Elementor, quindi trascinalo nella sezione prescelta. Incolla lo shortcode che hai copiato in precedenza nel campo previsto a questo scopo.
Passaggio 6: personalizza e stilizza il modulo
Il modulo Contact Form 7 integrato in Elementor prenderà lo stile del tuo tema WordPress. Se desideri personalizzare ulteriormente l'aspetto del modulo, puoi farlo aggiungendo CSS personalizzato. Puoi modificare colori, margini, tipografia e altro per adattare il modulo all'aspetto generale del tuo sito.
Leggi anche: Come disabilitare un popup di Elementor sugli smartphone
Passaggio 7: testare e rilasciare
Prima di pubblicare la tua pagina, assicurati di visualizzare l'anteprima del modulo per verificare che funzioni correttamente. Invia un messaggio di prova per assicurarti che tutte le funzionalità funzionino. Una volta soddisfatto, pubblica la pagina per rendere il modulo accessibile ai tuoi visitatori.
COSÌ ! Utilizzando Contact Form 7 con Elementor gratuito, puoi creare facilmente moduli funzionali senza spendere un centesimo. Questo metodo è ideale per gli utenti che desiderano funzionalità di base ma efficaci, pur mantenendo la flessibilità per personalizzare il proprio modulo.
Contact Form 7, combinato con Elementor, ti offre una soluzione solida per acquisire informazioni essenziali dai tuoi visitatori.
Se desideri una personalizzazione più semplice, puoi consultare questo articolo su come farlo personalizzare un modulo Contact Form 7 utilizzando Essential Addons ed Elementor.
FAQ: come creare un modulo con la versione gratuita di Elementor
Posso creare un modulo con la versione gratuita di Elementor?
Sì, puoi creare un modulo con la versione gratuita di Elementor utilizzando widget HTML o Shortcode. Sebbene il widget Modulo sia riservato alla versione Pro, esistono alternative gratuite efficaci.
Quali sono i metodi per creare un modulo in Elementor gratuito?
Puoi utilizzare il widget HTML per incorporare direttamente un modulo HTML o il widget Shortcode per incorporare un modulo creato con un plugin come Contact Form 7.
Come aggiungere un modulo HTML a una pagina Elementor?
Utilizza il widget HTML in Elementor per inserire il codice HTML per il tuo modulo. Puoi incollare il codice direttamente nel campo del contenuto del widget.
Devo conoscere l'HTML per creare un modulo con Elementor gratuito?
Anche se aiuta, non hai bisogno di competenze HTML se usi un plug-in per moduli come Contact Form 7, che genera codici brevi facili da incorporare.
Come modellare un modulo creato con Elementor gratuito?
Se utilizzi un modulo HTML, dovrai utilizzare i CSS per dargli uno stile. I moduli generati da plugin come Contact Form 7 ereditano lo stile del tuo tema WordPress, ma puoi anche personalizzare lo stile con i CSS.
Esistono plugin gratuiti per creare moduli con Elementor?
Sì, plugin come Contact Form 7, WPForms Lite e Ninja Forms sono opzioni gratuite popolari per la creazione di moduli che puoi incorporare in Elementor.
Come integrare un modulo Contact Form 7 in una pagina Elementor?
Crea il tuo modulo in Contact Form 7, quindi copia lo shortcode generato. Utilizza il widget Shortcode di Elementor per incorporare questo modulo nella tua pagina.
Quali sono i limiti della versione gratuita di Elementor per la creazione di moduli?
La versione gratuita di Elementor non offre un widget Modulo dedicato. Per creare moduli, dovrai utilizzare soluzioni come HTML, shortcode o plugin esterni.
Come posso testare il mio modulo creato con Elementor?
Dopo aver incorporato il modulo nella pagina, visualizza l'anteprima della pagina con Elementor e invia un test per assicurarti che il modulo funzioni correttamente.
È possibile utilizzare moduli avanzati con la versione gratuita di Elementor?
Per funzionalità avanzate, come campi condizionali o moduli in più passaggi, si consiglia di eseguire l'aggiornamento alla versione Pro di Elementor o utilizzare plug-in dei moduli con funzionalità avanzate nelle loro versioni gratuite.
Altre risorse correlate
- Come integrare ActiveCampaign con Elementor
- Come integrare AWeber con Elementor
- Elementor : Come aggiungere l'animazione di Lottie
- Elementor : Come creare un tracker di avanzamento verticaleOttieni subito Elementor Pro!!!
Conclusione
COSÌ ! Questo è tutto per questo articolo che ti mostra come creare un modulo con la versione gratuita di Elementor. Se hai dubbi su come arrivarci, faccelo sapere nella commentaires.
Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...