È necessario combinare campi in linea e campi a larghezza intera del modulo Modulo di Contatto de Divi ?
Le modulo di contatto è un elemento importante da includere nel tuo sito web se vuoi catturare le email e convertire i tuoi visitatori in clienti.
Il modulo Modulo di Contatto de Divi può essere facilmente personalizzato per creare forme schede di contatto attraenti e accattivanti per tutti i tipi di siti web. Questo modulo viene fornito con due opzioni di visualizzazione che possono essere applicate a ciascun campo del modulo: en ligne ou larghezza.
In questo tutorial, presenteremo 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 layout di esempio per il modulo Modulo di contatto di Divi che utilizzano 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 assegnagli 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
Innanzitutto, sposta la riga contenente il modulo Modulo di Contatto alla sezione sopra, appena sotto la linea 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
Quindi, nelle impostazioni di modulo di contatto, modificare l'ordine dell'oggetto e del telefono in modo che il telefono venga elencato 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
Ora cambiamo alcune impostazioni per completare il design. Passare alla scheda Progettazione delle impostazioni del modulo Modulo di contatto.
Innanzitutto, 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
Aggiungi 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 della riga, quindi apri le impostazioni della colonna 1. Nella scheda Design, 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 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 Design e aggiungi il padding.
- Imbottitura (superiore, inferiore, sinistra e destra: 50px
Seleziona l'icona del cellulare per modificare le impostazioni reattive. Impostare l'imbottitura per il cellulare.
- 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.
Sposta il modulo dell'indirizzo nella colonna di destra.
Successivamente, sposta il modulo di testo "Contattaci" nella colonna di sinistra, quindi elimina la riga vuota rimanente.
Sposta il modulo del modulo di contatto nella colonna di sinistra, sotto il modulo di testo "Contattaci". Elimina la sezione vuota rimanente.
Apri le impostazioni della linea, nella scheda Design e disattiva Usa larghezza grondaia personalizzata
- Usa la larghezza della grondaia personalizzata: NO
Aggiungi codice al CSS personalizzato dell'elemento principale per allineare verticalmente i moduli Blurb e Contact Form.
align-items:center;
Apri le impostazioni della riga, quindi apri le impostazioni della colonna 1. Nella scheda Design, vai alle impostazioni del bordo e rimuovi il bordo. Ripeti i passaggi per rimuovere il bordo dalla colonna 2.
- Larghezza bordo destro: 0px
Modificare il layout del modulo di contatto
Lasceremo le larghezze del campo così come sono per il terzo design, tuttavia, apri le impostazioni del modulo di contatto e cambia l'ordine del numero di telefono e del campo dell'oggetto in modo che il telefono venga prima.
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.
Sposta il modulo dell'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, nella scheda Design e disattiva Usa larghezza grondaia personalizzata.
- Usa la larghezza della grondaia personalizzata: NO
Aggiungi codice al CSS personalizzato dell'elemento principale per allineare verticalmente i moduli Blurb e Contact Form.
align-items:center;
Apri le impostazioni della riga, quindi apri le impostazioni della colonna 1. Nella scheda Design, 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
Apri le impostazioni del modulo Testo per il testo "Contattaci" e centra 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 nostri campi saranno a larghezza intera. Apri le impostazioni del modulo di contatto, quindi apri le impostazioni per ciascun campo. Nella scheda Progettazione selezionare 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 telefono venga prima dell'oggetto.
Personalizzazione del design del modulo del modulo di contatto
Nelle impostazioni del modulo, nella scheda Design, imposta il colore del testo del campo 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 funzionare meglio la maschera di sfondo sui dispositivi mobili, utilizziamo le impostazioni reattive.
- Trasformazione maschera (telefono): orizzontale e rotazione
Risultato finale
Ecco il risultato finale del quarto layout.
Risultati finali
Diamo un'occhiata a tutti i nostri esempi ancora una volta.
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 e 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.
...
