Come combinare campi in linea e a larghezza intera nel modulo modulo di contatto di Divi

Pubblicato: 2022-10-05

Il modulo di contatto è un elemento importante da includere nel tuo sito web se desideri acquisire e-mail e convertire i tuoi visitatori in clienti. Il modulo modulo di contatto Divi può essere facilmente personalizzato per creare moduli di contatto accattivanti e accattivanti per tutti i tipi di siti Web. Il modulo viene fornito con due opzioni di larghezza che possono essere applicate a ciascun campo del modulo: in linea o a larghezza intera. In questo tutorial, presenteremo quattro possibilità di layout uniche per il tuo modulo di contatto Divi utilizzando campi in linea e a larghezza intera.

Iniziamo!

Sbirciata

Ecco un'anteprima di ciò che progetteremo.

Primo layout

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 1 Design finale

Layout dei moduli di contatto Divi con layout di campi in linea ea larghezza intera 1 Design finale Mobile

Secondo Disposizione

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 2 Design finale

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 2 Design finale Mobile

Terzo layout

Layout dei moduli di contatto Divi con layout di campi in linea e a larghezza intera 3 Design finale

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 3 Design finale Mobile

Quarta disposizione

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 4 Design finale

Layout dei moduli di contatto Divi con layout di campi in linea ea larghezza intera 4 Design finale Mobile

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 possibilità di layout per il tuo modulo di contatto Divi utilizzando campi in linea e a larghezza intera

Seleziona il layout predefinito

Ciascuno dei 4 design viene modificato dal layout della Pagina di contatto per riparazioni di scarpe dal Pacchetto layout per riparazioni 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.

Layout di moduli di contatto Divi con layout di campi in linea e a larghezza intera Usa Builder

Utilizzeremo un layout predefinito dalla libreria Divi per questo esempio, quindi seleziona Sfoglia layout.

Layout dei moduli di contatto Divi con layout dei campi in linea e a larghezza intera Sfoglia il layout

Cerca e seleziona il layout della Pagina dei contatti per la riparazione di scarpe.

Layout dei moduli di contatto Divi con layout dei campi in linea e a larghezza intera Trova layout

Seleziona Usa questo layout per aggiungere il layout alla tua pagina.

Layout dei moduli di contatto Divi con layout dei campi in linea e a larghezza intera Usa layout

Ora siamo pronti per costruire i nostri progetti.

Primo layout

Per prima cosa, sposta la riga contenente il modulo del modulo di contatto nella sezione sopra, proprio sotto la riga con i moduli blurb. Quindi puoi eliminare la sezione vuota rimanente.

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 1 Sposta riga

Apri le impostazioni della riga e aggiungi il riempimento a sinistra e a destra,

Imbottitura sinistra: 15%
Padding-destra: 15%

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 1 riempimento

Seleziona le opzioni reattive e imposta il riempimento mobile.

Imbottitura a sinistra: 5%
Padding-destra: 5%

Layout dei moduli di contatto Divi con layout dei campi in linea e a larghezza intera 1 Spaziatura reattiva

Modifica del layout del modulo di contatto con campi in linea e a larghezza intera

Per questo layout creeremo due campi separati per nome e cognome. Apri le impostazioni del modulo del modulo di contatto e modifica l'ID campo e il titolo per il campo Nome in Nome.

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 1 Rinomina campo

Aggiungi un nuovo campo sotto il campo Nome. Impostare l'ID campo e il titolo su Cognome.

Layout dei moduli di contatto Divi con layout di campi in linea ea larghezza intera 1 Aggiungi campo

Nelle impostazioni del campo del cognome, apri le impostazioni del layout e imposta Rendi larghezza intera su No.

Larghezza intera: no

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 1 Crea in linea

Quindi, nelle impostazioni del modulo di contatto, cambia l'ordine di Oggetto e Telefono in modo che Telefono sia elencato prima di Oggetto.

Layout dei moduli di contatto Divi con layout dei campi in linea e a larghezza intera 1 Ordine dei campi

Apri le impostazioni del layout del campo dell'oggetto e imposta il campo a larghezza intera.

Crea larghezza intera: Sì

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 1 Crea larghezza intera

Personalizzazione del design del modulo di contatto

Ora modifichiamo alcune impostazioni per completare il design. Passa alla scheda di progettazione delle impostazioni del modulo di contatto.

Innanzitutto, cambia il colore di sfondo del pulsante.

Sfondo del pulsante: #DBC2B3

Layout di moduli di contatto Divi con layout di campi in linea e a larghezza intera 1 pulsante Sfondo

Aggiungi un margine superiore al pulsante.

Margine pulsante in alto: 10px

Layout dei moduli di contatto Divi con layout dei campi in linea e a larghezza intera 1 pulsante Margine

Infine, vai alle impostazioni del bordo e aggiungi angoli arrotondati agli input.

Ingressi angoli arrotondati: 30px

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 1 Angoli arrotondati

Progettazione finale

Ecco il design finale su desktop e dispositivi mobili.

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 1 Design finale

Layout dei moduli di contatto Divi con layout di campi in linea ea larghezza intera 1 Design finale Mobile

Secondo Disposizione

Per il nostro secondo progetto, sposteremo i moduli blurb sul lato sinistro della pagina e avremo il modulo di contatto sul lato destro della pagina. Sposta i moduli blurb su una colonna.

Layout dei moduli di contatto Divi con layout dei campi in linea e a larghezza intera 2

Modifica la disposizione delle righe.

Layout di moduli di contatto Divi con layout di campi in linea e a larghezza intera Layout a 2 righe

Apri le impostazioni del disegno della riga e disattiva Usa larghezza grondaia personalizzata.

Usa larghezza grondaia personalizzata: no

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 2 Larghezza della grondaia personalizzata

Aggiungi del codice al CSS personalizzato dell'elemento principale per allineare verticalmente i moduli del blurb e il modulo di contatto.

align-items:center;

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 2 elemento principale CSS

Ora dobbiamo rimuovere il bordo sottile tra le colonne. Apri le impostazioni della riga, quindi apri le impostazioni per la colonna 1. Nella scheda Design, vai alle impostazioni del bordo e rimuovi il bordo.

Larghezza bordo destro: 0px

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 2 Bordo destro

Quindi, apri le impostazioni per la colonna 2 e ripeti i passaggi per rimuovere il bordo.

Larghezza bordo destro: 0px

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 2 Larghezza bordo destro

Imposta il testo "Contattaci" in modo che sia centrato.

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 2 Allineamento del testo

Sposta il modulo di contatto nella colonna di destra. Elimina la sezione rimanente vuota.

Layout del modulo di contatto Divi con layout dei campi in linea ea larghezza intera 2 Sposta il modulo di contatto

Modifica del layout del modulo di contatto con campi in linea e a larghezza intera

Questo layout avrà anche due campi separati per nome e cognome. Apri le impostazioni del modulo del modulo di contatto e modifica l'ID campo e il titolo per il campo Nome in Nome.

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 2 ID campo e titolo

Aggiungi un nuovo campo sotto il campo Nome. Impostare l'ID campo e il titolo su Cognome.

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 2 ID campo

Nelle impostazioni del campo del cognome, apri le impostazioni del layout e imposta Rendi larghezza intera su No.

Larghezza intera: no

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 2 Nessuna larghezza intera

Modificare l'ordine dei campi del telefono e dell'oggetto in modo che il telefono venga prima dell'oggetto.

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 2 Riordina i campi

Apri le impostazioni del campo per E-mail, Telefono e Oggetto e imposta il layout a larghezza intera.

Crea larghezza intera: Sì

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 2 Crea larghezza intera

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

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 2 Aggiungi sfondo

All'interno delle impostazioni della colonna 2, vai alla scheda del design e aggiungi del riempimento.

Imbottitura superiore: 50px
Imbottitura in basso: 50px
Riempimento a sinistra: 50px
Padding-destra: 50px

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 2 Aggiungi riempimento

Seleziona l'icona del cellulare per modificare le impostazioni reattive. Imposta il riempimento per dispositivi mobili.

Imbottitura superiore: 30px
Imbottitura in basso: 30px
Riempimento a sinistra: 30px
Padding-destra: 30px

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 2 Aggiungi riempimento reattivo

Quindi aggiungi un'ombra di riquadro alla colonna.

Layout dei moduli di contatto Divi con layout dei campi in linea e a larghezza intera 2 Box Shadow

Infine, apri le impostazioni del modulo di contatto e cambia il colore del testo del campo.

Colore del testo dei campi: #000000

Layout dei moduli di contatto Divi con layout dei campi in linea e a larghezza intera 2 Colore del testo del campo

Progettazione finale

Ecco il progetto definitivo per il secondo layout.

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 2 Design finale

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 2 Design finale Mobile

Terzo layout

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.

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 3 Scegliere Layout

Spostare il modulo indirizzi nella colonna di destra.

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 3 Sposta l'indirizzo

Quindi, sposta il modulo di testo Contattaci nella colonna di sinistra, quindi elimina la riga vuota rimanente.

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 3 Sposta il testo

Sposta il modulo di contatto nella colonna di sinistra, sotto il modulo di testo Contattaci. Elimina la sezione vuota rimanente.

Layout dei moduli di contatto Divi con layout dei campi in linea e a larghezza intera 3 Modulo di spostamento

Apri le impostazioni del disegno della riga e disattiva Usa larghezza grondaia personalizzata.

Usa larghezza grondaia personalizzata: no

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 3 Nessuna larghezza della grondaia personalizzata

Aggiungi del codice al CSS personalizzato dell'elemento principale per allineare verticalmente i moduli del blurb e il modulo di contatto.

align-items:center;

Layout dei moduli di contatto Divi con layout di campi in linea ea larghezza intera 3 CSS personalizzato

Apri le impostazioni della riga, quindi apri le impostazioni per la colonna 1. Nella scheda Design, vai alle impostazioni del bordo e rimuovi il bordo. Ripetere i passaggi per rimuovere il bordo dalla colonna 2.

Larghezza bordo destro: 0px

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 3 Larghezza del bordo

Modifica del 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.

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 3 Riordina i campi

Progettazione finale

Ecco il progetto definitivo per il terzo layout.

Layout dei moduli di contatto Divi con layout di campi in linea e a larghezza intera 3 Design finale

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 3 Design finale Mobile

Quarta disposizione

Per il quarto e ultimo layout, il modulo di contatto sarà a sinistra e i moduli blurb a destra. Ancora una volta, inizieremo modificando la struttura delle colonne della riga contenente i moduli blurb.

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 4 Scegliere Layout

Spostare il modulo indirizzi nella colonna di destra.

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 4 Modulo di spostamento

Sposta il modulo di contatto nella colonna di sinistra. Elimina la sezione vuota rimanente.

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 4 Sposta modulo

Apri le impostazioni del disegno della riga e disattiva Usa larghezza grondaia personalizzata.

Usa larghezza grondaia personalizzata: no

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 4 Grondaia personalizzata

Aggiungi del codice al CSS personalizzato dell'elemento principale per allineare verticalmente i moduli del blurb e il modulo di contatto.

align-items:center;

Apri le impostazioni della riga, quindi apri le impostazioni per la colonna 1. Nella scheda Design, vai alle impostazioni del bordo e rimuovi il bordo.

Larghezza bordo destro: 0px

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 4 Larghezza del bordo

Quindi, apri le impostazioni per la colonna 2 e ripeti i passaggi per rimuovere il bordo.

Larghezza bordo destro: 0px

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 4 Larghezza bordo 2

Apri le impostazioni del modulo di testo per il testo Contattaci e centra il testo.

Allineamento del testo: centro

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 4 Allineamento del testo

Modifica del layout del modulo di contatto con campi in linea e a larghezza intera

Per questo progetto, tutti i nostri campi saranno a larghezza intera. Apri le impostazioni del modulo di contatto, quindi apri le impostazioni per ogni campo. Nella scheda progettazione, seleziona Layout e imposta Rendi larghezza intera su Sì.

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 4 Crea larghezza intera

Dopo aver reso ogni campo a larghezza intera, il modulo dovrebbe assomigliare a questo.

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 4 Larghezza intera

Ora, cambia l'ID campo e il Titolo per il campo Nome in Nome.

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 4 ID campo

Aggiungi un nuovo campo sotto il campo Nome. Impostare l'ID campo e il titolo su Cognome.

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 4 Campo del cognome

Modificare l'ordine dei campi del telefono e dell'oggetto in modo che il telefono venga prima dell'oggetto.

Layout dei moduli di contatto Divi con layout dei campi in linea e a larghezza intera 4 Ordine dei campi

Personalizzazione del design del modulo di contatto

Nelle impostazioni di progettazione del modulo di contatto, imposta il colore del testo dei campi su nero.

Colore testo campi: #000000

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 4 Colore del testo

Apri le impostazioni della sezione e aggiungi un colore di sfondo.

Sfondo: #DBC2B3

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 4 Aggiungi sfondo

Infine, aggiungi una maschera di sfondo.

Maschera di sfondo: Arch
Trasformazione maschera: orizzontale

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 4 Aggiungi maschera di sfondo

Per far funzionare meglio la maschera di sfondo sui dispositivi mobili, utilizziamo le impostazioni reattive.

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 4 Maschera di sfondo reattiva

Trasformazione maschera su dispositivo mobile: orizzontale e ruota

Layout dei moduli di contatto Divi con layout dei campi in linea e a larghezza intera 4 Trasformazione della maschera reattiva

Progettazione finale

Ecco il progetto definitivo per il quarto layout.

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 4 Design finale

Layout dei moduli di contatto Divi con layout di campi in linea ea larghezza intera 4 Design finale Mobile

Risultato finale

Diamo un'occhiata a tutti i nostri progetti finali ancora una volta.

Primo layout

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 1 Design finale

Layout dei moduli di contatto Divi con layout di campi in linea ea larghezza intera 1 Design finale Mobile

Secondo Disposizione

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 2 Design finale

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 2 Design finale Mobile

Terzo layout

Layout dei moduli di contatto Divi con layout di campi in linea e a larghezza intera 3 Design finale

Layout dei moduli di contatto Divi con campi in linea e a larghezza intera Layout 3 Design finale Mobile

Quarta disposizione

Layout dei moduli di contatto Divi con layout dei campi in linea ea larghezza intera 4 Design finale

Layout dei moduli di contatto Divi con layout di campi in linea ea larghezza intera 4 Design finale Mobile

Pensieri finali

Avere un modulo di contatto di bell'aspetto 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 look e layout diversi per il tuo modulo e le opzioni di design integrate di Divi ti consentono di creare design unici e accattivanti per far risaltare il modulo. Per saperne di più sui diversi modi in cui puoi applicare uno stile al modulo del modulo di contatto, dai un'occhiata a questo tutorial per creare un modulo reattivo a schermo intero con un'animazione di scorrimento ingrandita e questo tutorial per altre 5 opzioni di stile uniche. Come hai disegnato il modulo del modulo di contatto? Ci piacerebbe sentirti nei commenti!