È necessario combinare i campi in linea e i campi a larghezza intera del modulo Modulo di contatto da Divi ?
Il modulo di contatto è un elemento importante da includere nel tuo sito web se vuoi acquisire indirizzi email e convertire i visitatori in clienti.
Il modulo Modulo di contatto di Divi Può essere facilmente personalizzato per creare moduli di contatto accattivanti e coinvolgenti per tutti i tipi di siti web. Questo modulo offre due opzioni di visualizzazione applicabili a ciascun campo del modulo: en ligne ou larghezza.
In questo tutorial, ti mostreremo quattro possibilità di layout uniche per il tuo modulo di contatto Divi utilizzando campi in linea e a larghezza intera.
Cominciamo!
Panoramica
Ecco un'anteprima di ciò che andremo a progettare.
Primo layout
Secondo layout
Terzo layout
Quarto layout
Cosa ti serve per iniziare
Prima di iniziare installa e attiva il tema Divi e assicurati di avere l'ultima versione di Divi sul tuo sito web.
Ora sei pronto per iniziare!
4 esempi di layout per il modulo Divi Contact Form utilizzando campi in linea e a larghezza intera
Seleziona il layout predefinito
Ciascuno dei 4 modelli viene modificato dal layout della pagina di contatto del calzolaio di Pacchetto di layout per la riparazione di scarpe, che puoi trovare nella libreria Divi.
Aggiungi una nuova pagina al tuo sito web e assegnale un titolo, quindi seleziona l'opzione Usa Divi Builder.
Utilizzeremo un layout predefinito dalla libreria Divi per questo esempio, quindi seleziona Sfoglia i layout.
Trova e seleziona il layout della pagina di contatto del calzolaio.
selezionare Usa questo layout per aggiungere il layout alla tua pagina.
Ora siamo pronti per progettare i nostri esempi.
Primo layout
Per prima cosa, sposta la riga contenente il modulo Modulo di contatto nella sezione superiore, appena sotto la riga con i moduli Blurb. Quindi, puoi eliminare la sezione vuota rimanente.
Apri le impostazioni della linea e aggiungi il riempimento sinistro e destro,
- Imbottitura (sinistra e destra): 15%
Seleziona le opzioni reattive e imposta la spaziatura interna per i dispositivi mobili.
- Imbottitura (sinistra e destra): 5%
Layout del modulo di contatto modificato con campi in linea e a larghezza intera
Per questo layout, creeremo due campi separati per nome e cognome.
Apri le impostazioni del modulo Modulo di contatto e modifica il campo ID e titolo per il campo Cognome in Nome.
Aggiungi un nuovo campo sotto il campo Nome. Impostare il campo ID e Titolo su Nome.
Nelle impostazioni del campo del nome, apri le impostazioni del layout e imposta Crea larghezza intera su No.
- Crea larghezza intera: NO
Successivamente, nelle impostazioni del modulo di contatto, modifica l'ordine dell'oggetto e del numero di telefono in modo che il numero di telefono venga visualizzato prima dell'oggetto.
Apri le impostazioni del layout del campo Oggetto e imposta il campo a tutta larghezza.
- Crea larghezza intera: SÌ
Personalizzazione del design del modulo di contatto
Modifichiamo ora alcune impostazioni per finalizzare il design. Andiamo alla scheda Design nelle impostazioni del modulo Modulo di contatto.
Per prima cosa, cambia il colore di sfondo del pulsante.
- Sfondo pulsante: #DBC2B3
Aggiungi un margine superiore al pulsante.
- Margine pulsante (superiore): 10px
Infine, vai alle impostazioni del bordo e aggiungi angoli arrotondati ai campi.
- Input Angoli arrotondati: 30px
Guarda anche: Divi: come aggiungere un logo reattivo al modulo "Menu a larghezza intera".
Risultato finale dell'esempio 1
Ecco il risultato finale su desktop e mobile.
Secondo esempio
Per il nostro secondo esempio, sposteremo i moduli Blurb sul lato sinistro della pagina e posizioneremo il modulo di contatto sul lato destro della pagina. Sposta i moduli Blurb in una colonna.
Modificare il layout della riga.
Apri le impostazioni di progettazione della linea e spegni Usa larghezza grondaia personalizzata.
- Usa la larghezza della grondaia personalizzata: NO
Aggiungere il codice al CSS personalizzato dell'elemento principale per allineare verticalmente i moduli Blurb e Contact Form.
align-items:center;
Ora dobbiamo rimuovere il bordo sottile tra le colonne. Apri le impostazioni di riga, quindi apri le impostazioni per la colonna 1. Nella scheda Progettazione, vai alle impostazioni del bordo e rimuovi il bordo.
- Larghezza bordo destro: 0px
Successivamente, apri le impostazioni della colonna 2 e ripeti i passaggi per rimuovere il bordo.
- Larghezza bordo destro: 0px
Imposta il testo "Contattaci" in modo che sia centrato.
Sposta il modulo di contatto nella colonna di destra. Elimina la sezione vuota rimanente.
Layout del modulo di contatto modificato con campi in linea e a larghezza intera
Questo layout avrà anche due campi separati per nome e cognome. Apri le impostazioni del modulo Modulo di contatto e modifica il campo ID e titolo per il campo Cognome in Nome.
Aggiungi un nuovo campo sotto il campo Nome. Impostare il campo ID e Titolo su Nome.
Nelle impostazioni del campo del nome, apri le impostazioni del layout e imposta Crea larghezza intera su No.
- Crea larghezza intera: NO
Modificare l'ordine dei campi telefono e oggetto in modo che il numero di telefono venga prima dell'oggetto.
Apri le impostazioni del campo per E-mail, Telefono e Oggetto e imposta il layout a larghezza intera.
- Crea larghezza intera: SÌ
Personalizzazione del design del modulo di contatto
Apri le impostazioni della riga, quindi apri le impostazioni della colonna 2. Imposta il colore di sfondo.
- Sfondo: #DBC2B3
Nelle impostazioni della colonna 2, vai alla scheda Progettazione e aggiungi la spaziatura.
- Imbottitura (superiore, inferiore, sinistra e destra: 50px
Seleziona l'icona mobile per modificare le impostazioni responsive. Imposta la spaziatura per dispositivi mobili.
- Imbottitura (superiore, inferiore, sinistra e destra): 30px
Quindi aggiungi un'ombra di riquadro alla colonna.
Infine, apri le impostazioni del modulo Modulo di contatto e modifica il colore del testo del campo.
- Colore testo campi: #000000
Risultato finale dell'esempio 2
Ecco il risultato finale del secondo layout.
Terzo esempio
Per il terzo layout, avremo il modulo di contatto a sinistra e i moduli Blurb a destra. Iniziamo modificando la struttura delle colonne della riga contenente i moduli Blurb.
Spostare il modulo indirizzo nella colonna di destra.
Successivamente, sposta il modulo Testo "Contattaci" nella colonna di sinistra, quindi elimina la riga vuota rimanente.
Sposta il modulo Modulo di contatto nella colonna di sinistra, sotto il modulo Testo "Contattaci". Elimina la sezione vuota rimanente.
Apri le impostazioni della linea, nella scheda Progettazione, e disattiva Usa larghezza grondaia personalizzata
- Usa la larghezza della grondaia personalizzata: NO
Aggiungere il codice al CSS personalizzato dell'elemento principale per allineare verticalmente i moduli Blurb e Contact Form.
align-items:center;
Apri le impostazioni di riga, quindi apri le impostazioni per la colonna 1. Nella scheda Progettazione, vai alle impostazioni del bordo e rimuovi il bordo. Ripeti questi passaggi per rimuovere il bordo dalla colonna 2.
- Larghezza bordo destro: 0px
Modificare il layout del modulo di contatto
Per il terzo progetto lasceremo invariate le larghezze dei campi; tuttavia, apri le impostazioni del modulo di contatto e modifica l'ordine del numero di telefono e del campo oggetto in modo che il numero di telefono venga visualizzato per primo.
Risultato finale dell'esempio 3
Ecco il risultato finale del terzo layout.
Leggi anche: Divi: come visualizzare il modulo di intestazione a larghezza intera a schermo intero
Quarto esempio
Per il quarto e ultimo layout, il modulo Contact Form sarà a sinistra e i moduli Blurb a destra. Ancora una volta, inizieremo modificando la struttura delle colonne della riga contenente i moduli Blurb.
Spostare il modulo indirizzo nella colonna di destra.
Successivamente, sposta il modulo Modulo di contatto nella colonna di sinistra. Elimina la sezione vuota rimanente.
Apri le impostazioni della linea, vai alla scheda Progettazione e disattiva Usa larghezza grondaia personalizzata.
- Usa la larghezza della grondaia personalizzata: NO
Aggiungere il codice al CSS personalizzato dell'elemento principale per allineare verticalmente i moduli Blurb e Contact Form.
align-items:center;
Aprire le impostazioni della riga, quindi aprire le impostazioni per la colonna 1. Nella scheda Progettazione, andare alle impostazioni del bordo e rimuovere il bordo.
- Larghezza bordo destro: 0px
Successivamente, apri le impostazioni della colonna 2 e ripeti i passaggi per rimuovere il bordo.
- Larghezza bordo destro: 0px
Aprire le impostazioni del modulo Testo per il testo "Contattaci" e centrare il testo.
- Allineamento del testo: centrato
Layout del modulo di contatto modificato con campi in linea e a larghezza intera
Per questo design, tutti i campi saranno a larghezza intera. Apri le impostazioni del modulo Modulo di contatto, quindi apri le impostazioni per ciascun campo. Nella scheda Design, seleziona disposizione e definire Crea larghezza intera su SI.
Dopo aver creato ogni campo a larghezza intera, il modulo dovrebbe apparire così.
Ora cambia il campo ID e Titolo per il campo Cognome in Nome.
Aggiungi un nuovo campo sotto il campo Nome. Impostare il campo ID e Titolo su Nome.
Modificare l'ordine dei campi telefono e oggetto in modo che il numero di telefono venga prima dell'oggetto.
Personalizzazione del design del modulo del modulo di contatto
Nelle impostazioni del modulo, nella scheda Progettazione, imposta il colore del testo dei campi su nero.
- Colore testo campi: #000000
Apri le impostazioni della sezione e aggiungi un colore di sfondo.
- Sfondo: #DBC2B3
Infine, aggiungi una maschera di sfondo.
- Maschera di sfondo: Arch
- Trasformazione maschera: orizzontale
Per far sì che la maschera di sfondo funzioni meglio sui dispositivi mobili, utilizziamo le impostazioni responsive.
- Trasformazione maschera (telefono): orizzontale e rotazione
Risultato finale
Ecco il risultato finale del quarto layout.
Risultati finali
Diamo un'altra occhiata a tutti i nostri esempi.
Primo esempio
Secondo esempio
Terzo esempio
Quarto esempio
Scarica DIVI ora!!!
Conclusione
Avere un modulo di contatto attraente può aumentare le tue conversioni e consentire ai tuoi visitatori di connettersi direttamente con te.
Come abbiamo dimostrato in questo articolo, puoi utilizzare le opzioni di campo in linea e a larghezza intera per creare diversi aspetti e layout per il tuo modulo, mentre le opzioni di progettazione integrate di Divi ti consentono di creare design unici e accattivanti per far risaltare il modulo.
Si spera che questa tecnica aggiunga un'altra utile abilità di progettazione per progetti futuri.
Speriamo che questo tutorial ti ispiri per i tuoi prossimi progetti Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet.
Non esitate a consultare anche la nostra guida sul 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.
...