Riassunto AI
Vuoi aggiungere un modulo WordPress al tuo sito web usando Elementor? Puoi usare facilmente il widget WPForms per Elementor per aggiungere moduli alle tue pagine e modificarli per farli apparire come desideri. Ancora meglio, puoi fare tutto questo direttamente dall'interno del page builder di Elementor.
Questo tutorial ti mostrerà come aggiungere WPForms a una pagina Elementor.
Prima di iniziare, assicurati di aver installato e attivato il plugin WPForms e verificato la tua chiave di licenza.
1. Abilitazione del markup moderno
Nota: Se hai già abilitato il markup moderno nelle impostazioni di WPForms, puoi saltare questa sezione e procedere alla sezione Incorporamento del tuo modulo in questa guida.
Prima di stilizzare i tuoi moduli in Elementor, dovrai abilitare il markup moderno in WPForms. Per farlo, vai su WPForms » Impostazioni e seleziona la scheda Generale.
Successivamente, scorri fino alla sezione Generale e assicurati che l'opzione Includi styling del modulo sia impostata su Stile base e tema del modulo.
Successivamente, imposta il pulsante di attivazione Usa markup moderno sulla posizione ON per abilitarlo.
Assicurati di salvare le modifiche dopo aver abilitato questa opzione. Una volta abilitato il markup moderno, sei pronto per stilizzare i tuoi moduli usando Elementor come descritto nelle sezioni seguenti.
2. Incorporamento del tuo modulo
Innanzitutto, dovrai aprire la pagina o il post in cui desideri incorporare il tuo modulo.
Se non vedi il builder di Elementor quando apri per la prima volta l'editor di pagine o post, fai clic sul pulsante blu Modifica con Elementor.
Una volta aperto il builder di Elementor, guarda la barra laterale sinistra. Nella sezione dei widget Base, dovresti vedere un widget chiamato WPForms.
Trascina il widget WPForms nell'area dei widget sul lato destro dello schermo.
Successivamente, dovrai scegliere tra aggiungere un modulo esistente o crearne uno nuovo di zecca in Elementor.
Aggiunta di un modulo esistente
Se desideri aggiungere un modulo che hai già creato a questa pagina, fai clic sul menu a discesa all'interno del widget WPForms. Vedrai tutti i moduli che hai creato. Seleziona quello che vuoi aggiungere alla tua pagina.
Elementor ti mostrerà un'anteprima live del tuo modulo come apparirà sul tuo sito web. Se hai bisogno di apportare modifiche al modulo, fai clic sul link Modifica il modulo selezionato nel pannello a sinistra.
Il modulo builder si aprirà in una finestra popup in modo da poter apportare modifiche al tuo modulo. Al termine della modifica, fai clic su Salva, quindi fai clic sull'icona X nell'angolo in alto a destra per chiudere il builder.
Vedrai istantaneamente tutte le modifiche apportate nel builder di Elementor.
Creazione di un nuovo modulo
Se non hai ancora moduli, o vuoi semplicemente crearne uno nuovo per questa pagina, puoi creare un nuovo modulo senza mai chiudere il page builder di Elementor. Per farlo, fai clic sul pulsante + Nuovo modulo nel pannello a sinistra.
Il modulo builder di WPForms si aprirà quindi in modo da poter iniziare a creare il tuo modulo, partendo dall'aggiunta di un nome e dalla scelta di un modello.
Nota: Se hai bisogno di aiuto per creare il tuo modulo, dai un'occhiata alla nostra guida su come creare il tuo primo modulo. Dai anche un'occhiata al nostro modello di modulo Elementor multipagina se desideri utilizzare un modello di modulo predefinito.
Al termine della creazione del modulo, fai clic sul pulsante Salva nell'angolo in alto a destra del generatore di moduli, quindi fai clic sull'icona X per chiuderlo.
Vedrai quindi il tuo nuovo modulo nel generatore di pagine Elementor. Se devi apportare ulteriori modifiche, fai semplicemente clic sul link Modifica il modulo selezionato nel pannello a sinistra.
3. Configurazione delle opzioni di visualizzazione
Per mostrare il titolo o la descrizione del modulo nella pagina, fai clic per espandere le Opzioni di visualizzazione del widget WPForms nel pannello sul lato sinistro del generatore di pagine.
Quindi attiva le impostazioni per Mostrare il Nome del modulo e la Descrizione del modulo in base alle tue preferenze.
Puoi anche cambiare l'aspetto del modulo nel frontend nella scheda Avanzate del generatore di Elementor.
Per imparare come utilizzare le impostazioni qui, consulta la documentazione di Elementor sulle opzioni avanzate dei widget.
4. Personalizzazione del tuo modulo
WPForms si integra con Elementor e ti consente di personalizzare l'aspetto dei tuoi moduli. Per iniziare, vai alla scheda Stile dal menu della barra laterale di Elementor.
Nota: Se non vedi la scheda Stile nella tua schermata Elementor, dovrai verificare che l'opzione di markup moderno sia abilitata sul tuo sito. Si prega di consultare la sezione Abilitazione del markup moderno all'inizio di questa guida su come farlo.
La scheda Stile in Elementor ti consente di regolare lo stile dei campi del modulo, delle etichette e dei pulsanti senza bisogno di conoscenze CSS. Troverai anche un'opzione per copiare queste impostazioni di stile da un modulo all'altro nella sezione Avanzate.
Tratteremo ciascuna di queste opzioni in modo più dettagliato di seguito.
Temi
L'impostazione Temi ti consente di scegliere un tema colore predefinito per aggiornare automaticamente lo stile dei campi, delle etichette, dei pulsanti, del contenitore e dello sfondo del tuo modulo.
Per applicare, fai semplicemente clic sul tuo tema preferito e questo regolerà istantaneamente i colori dei campi, delle etichette, dei pulsanti, del contenitore o dello sfondo del tuo modulo.
Se personalizzi le singole impostazioni dopo aver selezionato un tema, queste modifiche verranno salvate come un nuovo tema personalizzato del modulo. Questo nuovo tema verrà aggiunto al tuo elenco di temi disponibili e potrà essere applicato a qualsiasi modulo proprio come faresti con qualsiasi altro tema del modulo.
Puoi anche rinominare questo tema per una facile identificazione dal campo Nome tema.
Per eliminare un tema del modulo personalizzato, fai semplicemente clic sul pulsante ELIMINA TEMA sotto il nome del tema.
Stili dei campi
Nell'opzione Stili dei campi, vedrai le impostazioni per Dimensione, Raggio del bordo e opzioni di colore per Sfondo, Bordo e Testo.
Le impostazioni di Dimensione controllano la dimensione di ogni campo sul tuo modulo. Le opzioni disponibili includono: Piccolo, Medio e Grande.
Successivamente, troverai l'impostazione Raggio del bordo. Questo cambia la rotondità degli angoli dei tuoi campi: un numero più alto significa angoli più arrotondati.
Successivamente, troverai le opzioni per aggiornare i colori Sfondo, Bordo e Testo dei tuoi campi modulo. Per cambiare i colori predefiniti, fai clic sul colore adiacente all'etichetta.
Questo apre un selettore di colori, che ti permette di selezionare il colore desiderato. Se hai un colore di marca specifico per i tuoi moduli, puoi inserire direttamente il codice colore nel campo HEXA. Sebbene HEXA sia l'unit di default, puoi anche cambiarla in RGBA o HSLA secondo necessit .
Stili delle etichette
Sotto Stili etichetta, vedrai le opzioni per regolare le dimensioni e i colori delle etichette del tuo modulo. Dal menu a discesa Dimensioni, puoi scegliere tra Piccolo, Medio o Grande, a seconda delle tue preferenze.
Successivamente, troverai le opzioni per aggiornare i colori di Etichetta, Sottotitolo e Suggerimento e del messaggio di Errore dei tuoi campi. Di seguito, abbiamo spiegato le opzioni di colore disponibili.
- Etichetta: Questa opzione cambia il colore del testo delle tue etichette.
- Sottotitolo e Suggerimento: Questa opzione controlla il colore dei sottotitoli e dei suggerimenti dei campi che appaiono quando WPForms suggerisce valori agli utenti nel frontend.
- Errore: Il colore dei messaggi di errore che vengono visualizzati se si verifica un errore quando gli utenti compilano il tuo modulo.
Stili dei pulsanti
Le impostazioni Stili pulsante ti consentono di personalizzare lo stile dei tuoi pulsanti. Per cambiare la dimensione del pulsante, fai clic sul menu a discesa Dimensioni e seleziona l'opzione che desideri utilizzare.
Per dare al pulsante bordi arrotondati, inserisci semplicemente il valore nel campo Raggio bordo.
Successivamente, vedrai le opzioni per aggiornare i colori di sfondo e del testo del tuo pulsante.
Nota: Il colore di sfondo impostato per il pulsante verrà utilizzato anche come colore di accento predefinito. Ciò significa che il colore dello stato di focus per campi, barre di avanzamento, pulsanti radio e caselle di controllo utilizzerà il colore di sfondo del pulsante.
Stili del contenitore
Le impostazioni Stili contenitore consentono di personalizzare il padding, lo stile del bordo, lo spessore del bordo, il raggio del bordo, l'ombra e i colori del contenitore del modulo. Di seguito abbiamo dettagliato le opzioni del contenitore disponibili.
- Padding: Questa opzione imposta lo spazio all'interno dei bordi del contenitore del modulo. È possibile aumentare o diminuire questo valore per regolare lo spazio attorno al contenuto del modulo.
- Bordo (stile): Questa impostazione ti consente di scegliere il contorno del tuo contenitore, con opzioni per un bordo Solido, Tratteggiato o Puntinato.
- Spessore bordo: Determina lo spessore del bordo del contenitore. L'unità predefinita è pixel (px), ma è possibile selezionare l'unità più adatta alle proprie esigenze di progettazione.
- Raggio del bordo: Questo regola la rotondità degli angoli del contenitore, aggiungendo un bordo più morbido o più definito all'aspetto del modulo. La misurazione predefinita è in pixel (px) ma può essere modificata per adattarsi al tuo stile.
- Ombra: Scegli la dimensione dell'effetto ombra per il tuo contenitore per aggiungere profondità al design del tuo modulo, con opzioni che vanno da nessuna a grande.
- Bordo (colore): Aggiorna il colore del bordo del tuo contenitore per allinearlo al tuo tema visivo, migliorando l'estetica generale del modulo.
Stili di sfondo
Le impostazioni Stili di sfondo ti consentono di controllare l'immagine e il colore di sfondo del tuo modulo.
Per iniziare, seleziona una sorgente immagine dal menu a discesa Immagine. Per le immagini già caricate sul tuo sito web o per caricarne di nuove, seleziona l'opzione Libreria multimediale. Per esplorare una selezione più ampia di immagini professionali, seleziona l'opzione Foto stock.
Dopo aver effettuato la selezione, fai clic sulla sezione Scegli immagine per procedere.
Se selezioni Libreria multimediale dal menu a discesa Immagine, si aprirà la galleria multimediale del tuo sito web, permettendoti di scegliere un'immagine o caricarne una nuova. Se viene selezionato Foto stock, ti verrà presentata una selezione di foto stock tra cui scegliere per lo sfondo del tuo modulo.
Una volta selezionata l'immagine, la sezione Stili di sfondo offre ulteriori opzioni di personalizzazione:
- Posizione: Questa impostazione ti consente di allineare l'immagine di sfondo all'interno del modulo selezionando opzioni come In alto al centro, In basso al centro e altre per ottenere il posizionamento perfetto.
- Ripetizione: Scegli come si ripete la tua immagine di sfondo. Le opzioni sono Nessuna ripetizione per un'immagine singola, Affianca per ripetere l'immagine su tutto lo sfondo, Ripeti orizzontalmente per ripetere lungo la larghezza e Ripeti verticalmente per ripetere lungo l'altezza.
- Dimensioni: Questo regola come la tua immagine di sfondo si adatta al modulo. Copri assicura che l'immagine copra l'intero sfondo, adattandosi alle dimensioni del modulo. Se viene selezionato Dimensioni, puoi specificare la larghezza e l'altezza esatte per la tua immagine.
- Colori: Questa opzione ti consente di selezionare un colore di sfondo, che sarà visibile quando non viene utilizzata alcuna immagine.
Styling avanzato
In questa sezione, puoi aggiungere classi CSS al tuo modulo digitando il nome della classe nel campo Classi aggiuntive.
Successivamente, troverai il codice CSS che riflette tutti gli stili che hai aggiunto al modulo sotto Copia / Incolla impostazioni stile.
Questa opzione ti consente di copiare gli stili da un modulo all'altro.
Se hai copiato le impostazioni di stile da un altro modulo, sarai in grado di incollarle rapidamente qui. Dopo aver incollato lo snippet di codice, il modulo utilizzerà gli stili del modulo precedente.
Se desideri ripristinare qualsiasi personalizzazione che hai aggiunto al tuo modulo, fai clic sul pulsante Ripristina impostazioni stile. Questo ripristiner il tuo modulo al suo stato originale senza alcuna personalizzazione.
Dopo aver stilizzato il tuo modulo, assicurati di salvare le modifiche pubblicando la pagina o salvandola come bozza.
5. Pubblicazione del tuo modulo
Prima di mettere online il tuo modulo, una buona idea testarlo e assicurarsi che funzioni come previsto. La nostra guida su come testare correttamente i tuoi moduli WordPress prima del lancio include una checklist completa per aiutarti in questo processo.
Quando sei pronto per pubblicare il tuo modulo, fai clic sul pulsante Pubblica o Aggiorna in fondo al page builder di Elementor.
Fatto! Ora sai come incorporare WPForms in una pagina utilizzando Elementor.
Successivamente, desideri mostrare o nascondere campi in base alle scelte o agli input dei tuoi utenti nei tuoi moduli? Dai un'occhiata alla nostra guida semplice per utilizzare la logica condizionale intelligente per i passaggi su come implementarla.