5 modi unici per modellare il modulo di contatto di Divi

I moduli di contatto sono una parte vitale di molti siti web. Il loro scopo principale è essere intuitivi e aiutare i visitatori a mettersi facilmente in contatto. Ma ciò non significa che tutti i moduli di contatto debbano apparire in un modo certo e predefinito. Puoi facilmente combinare un'esperienza intuitiva con un bel design. Questo è esattamente ciò che faremo in questo post. Condivideremo 5 design unici del modulo di contatto Divi che puoi creare utilizzando solo le opzioni integrate di Divi.

Arriviamo ad esso!

Anteprima dei progetti del modulo del modulo di contatto Divi

Desktop

Iniziamo dando un'occhiata ai progetti del modulo del modulo di contatto Divi sul desktop.

Mobile

E questo è l'aspetto del design del modulo del modulo di contatto Divi su schermi di dimensioni più piccole:

5 modi unici per modellare il modulo di contatto di Divi

Iscriviti al nostro canale Youtube

Creazione del modulo di contatto n. 1

Aggiungi nuova sezione

Sfondo sfumato

Cominciamo con il primo esempio! Aggiungi una nuova sezione, vai alle impostazioni dello sfondo e aggiungi uno sfondo sfumato.

• Colore 1: #4c00ff
• Colore 2: #ffd400
• Tipo di gradiente: radiale
• Direzione radiale: in basso a sinistra
• Posizione di partenza: 34%
• Posizione finale: 34%

Spaziatura

Quindi, vai alle impostazioni di spaziatura e aggiungi alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 200 px
• Imbottitura inferiore: 200 px

Aggiungi nuova riga

Struttura della colonna

Aggiungi una nuova riga utilizzando la seguente struttura di colonne:

Colore di sfondo della colonna 1

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi uno sfondo sfumato della colonna 1.

• Colore di sfondo della colonna 1: rgba (255,255,255,0,55)

Immagine di sfondo della colonna 1

Aggiungi anche un'immagine di sfondo alla prima colonna.

• Colonna 1 Immagine di sfondo Ripeti: nessuna ripetizione
• Colonna 1 Miscela immagine di sfondo: schermo

Colore di sfondo della colonna 2

E un colore di sfondo bianco per la seconda colonna.

• Colore di sfondo della colonna 2: #ffffff

Dimensionamento

Modificare le impostazioni di dimensionamento successivo.

• Equalizza le altezze delle colonne: Sì

Spaziatura

Rimuovi anche tutto il riempimento personalizzato predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Raggio del bordo della colonna

Aggiungi un raggio di bordo a entrambe le colonne nella scheda Avanzate.

border-radius: 10px;

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere i vari moduli! Aggiungi un modulo di testo alla prima colonna con alcuni contenuti a scelta.

Impostazioni testo

Quindi, vai alle impostazioni del testo e apporta alcune modifiche.

• Carattere del testo: Soddisfa
• Colore del testo: #333333
• Dimensione del testo: 100 px
• Altezza riga di testo: 1em
• Orientamento del testo: al centro

Spaziatura

Aggiungi anche alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 600 px
• Imbottitura inferiore: 100 px

Scatola ombra

Per aggiungere profondità al disegno, usa un'ombra sottile.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Forza di diffusione dell'ombra della scatola: -16px
• Colore ombra: rgba(0,0,0,0.3)

Aggiungi modulo immagine alla colonna 2

Carica immagine PNG

Continua aggiungendo un modulo immagine alla seconda colonna. Carica un'immagine PNG a tua scelta.

Dimensionamento

Modificare le impostazioni di dimensionamento di questo modulo.

• Larghezza: 25% (Desktop), 50% (Tablet), 60% (Telefono)
• Allineamento del modulo: Centro

Spaziatura

Crea una sovrapposizione utilizzando un margine superiore negativo.

• Margine superiore: -60%

Aggiungi il modulo di testo n. 1 alla colonna 2

Aggiungi contenuto

Proprio sotto il modulo immagine, aggiungi un modulo di testo con alcuni contenuti.

Impostazioni testo

Modifica le impostazioni del testo di questo modulo.

• Carattere del testo: Soddisfa
• Colore del testo: #333333
• Dimensione del testo: 44px
• Orientamento del testo: al centro

Aggiungi il modulo di testo n. 2 alla colonna 2

Aggiungi contenuto

Aggiungi un altro modulo di testo successivo.

Impostazioni testo

Modifica anche le impostazioni del testo di questo modulo.

• Carattere del testo: Arial
• Colore del testo: #ffd400
• Dimensione del testo: 18px
• Spaziatura delle lettere del testo: 2px
• Orientamento del testo: al centro

Spaziatura

Aggiungi un margine inferiore dopo.

• Margine inferiore: 100 px

Aggiungi il modulo del modulo di contatto alla colonna 2

Abilita l'opzione "Crea larghezza intera" nel campo Nome ed e-mail

L'ultimo modulo necessario è il Modulo di contatto. Prima di fare qualsiasi altra cosa, apri i campi del nome e dell'email e modifica il layout.

• Crea larghezza intera: Sì

Aggiungi campo oggetto

Per creare questo design, abbiamo aggiunto un altro campo per l'oggetto.

Elementi

Disattiva l'opzione captcha successiva.

• Visualizza Captcha: No

Impostazioni testo campo modulo

Apportare alcune modifiche alle impostazioni del testo del campo modulo di questo modulo di contatto.

• Colore sfondo campo modulo: rgba(255,255,255,0)
• Carattere del campo modulo: Arial
• Peso del carattere del campo modulo: leggero
• Dimensione testo campo modulo: 16px
• Spaziatura lettere campo modulo: 2px

Impostazioni dei pulsanti

Stiamo modificando anche l'aspetto del pulsante.

• Usa stili personalizzati per il pulsante: Sì
• Colore del testo del pulsante: #ffd400
• Larghezza bordo pulsante: 0px
• Spaziatura delle lettere dei pulsanti: 2px
• Carattere pulsante: Arial
• Stile carattere: sottolineato
• Colore sottolineatura: #4c00ff

Spaziatura

Aggiungi successivamente alcuni valori di riempimento personalizzati.

• Imbottitura inferiore: 100 px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Frontiera

E aggiungi un sottile bordo inferiore a ciascuno dei campi.

• Larghezza bordo inferiore: 2px
• Colore bordo inferiore: #efefef

Spaziatura campo individuale

Ultimo ma non meno importante, aggiungi un margine inferiore a ciascuno dei singoli campi ad eccezione di quello del messaggio.

• Margine inferiore: 20 px

Creazione del modulo di contatto n. 2

Aggiungi nuova sezione

Sfondo sfumato

Al prossimo esempio! Aggiungi una nuova sezione con uno sfondo sfumato.

• Colore 1: #562fef
• Colore 2: #ffffff
• Tipo di gradiente: lineare
• Posizione di partenza: 50%
• Posizione finale: 50%

Spaziatura

Aggiungi alcuni valori di riempimento personalizzati alle impostazioni di spaziatura di questa sezione.

• Imbottitura superiore: 200 px
• Imbottitura inferiore: 200 px

Aggiungi nuova riga

Struttura della colonna

Aggiungi una nuova riga utilizzando la seguente struttura di colonne:

Colore di sfondo

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi un colore di sfondo alla riga.

• Colore di sfondo: #ffffff

Sfondo sfumato colonna 2

Aggiungi uno sfondo sfumato alla seconda colonna della riga successiva.

• Colore 1: #9932ff
• Colore 2: #562fef
• Tipo di gradiente colonna 2: lineare
• Direzione gradiente colonna 2: 160deg

Dimensionamento

Modifica anche le impostazioni di dimensionamento della riga.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Spaziatura

Quindi, aggiungi alcuni valori di spaziatura personalizzati.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px
• Imbottitura superiore colonna 1: 100 px
• Imbottitura inferiore colonna 1: 50 px
• Colonna 1 Imbottitura sinistra: 50 px
• Imbottitura destra colonna 1: 50 px
• Imbottitura superiore colonna 2: 100 px
• Imbottitura inferiore colonna 2: 100 px
• Imbottitura sinistra colonna 2: 50 px
• Imbottitura destra colonna 2: 50 px

Frontiera

Aggiungi '20px' a ciascuno dei bordi della riga.

Scatola ombra

Infine, aggiungi un'ombra sottile alla riga.

• Forza sfocatura ombra scatola: 45 px
• Forza di diffusione dell'ombra della scatola: -11px
• Colore ombra: rgba(0,0,0,0.3)

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere i moduli! Inizia con un modulo di testo nella prima colonna.

Impostazioni testo

Modifica le impostazioni del testo di questo modulo.

• Peso del carattere del testo: Ultra grassetto
• Stile del carattere del testo: maiuscolo
• Colore del testo: #562fef
• Testo Suze: 100 px (desktop), 80 px (tablet), 60 px (telefono)
• Spaziatura delle lettere del testo: -10px
• Altezza riga di testo: 1em

Spaziatura

Aggiungi anche un margine inferiore.

• Margine inferiore: 50 px

Aggiungi il modulo del modulo di contatto alla colonna 1

Elementi

Il secondo modulo di cui avremo bisogno nella prima colonna è un modulo di contatto. Dopo aver aggiunto il modulo, disabilita l'opzione "Visualizza Captcha".

• Visualizza Captcha: No

Impostazioni testo campo modulo

Successivamente, cambia il colore di sfondo del campo modulo.

• Colore sfondo campo modulo: #ffffff

Impostazioni dei pulsanti

Gioca anche con le impostazioni dei pulsanti per creare un pulsante icona invece di uno contenente testo.

• Usa stili personalizzati per il pulsante: Sì
• Dimensione del testo del pulsante: 73 px
• Colore del testo in basso: rgba(0,0,0,0)
• Colore di sfondo del pulsante di passaggio del mouse: rgba (255,255,255,0)
• Larghezza bordo pulsante: 0px
• Colore icona pulsante: #9932ff
• Mostra solo l'icona al passaggio del mouse per il pulsante: No

Scatola ombra

Infine, aggiungi un'ombra sottile a ciascuno dei campi.

• Forza sfocatura ombra scatola: 36px
• Forza sfocatura ombra scatola: -14px
• Colore ombra: rgba(0,0,0,0.3)

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto

Il primo modulo di cui avremo bisogno nella seconda colonna è un altro modulo di testo.

Impostazioni testo

Dopo aver aggiunto il contenuto, modifica le impostazioni del testo di questo modulo.

• Peso del carattere del testo: Ultra grassetto
• Colore del testo: #ffffff
• Dimensione del testo: 23px
• Spaziatura delle lettere del testo: -1px

Aggiungi il modulo Blurb n. 1 alla colonna 2

Aggiungi contenuto

Il secondo modulo di cui avremo bisogno è un modulo Blurb. Vai avanti e inserisci alcune informazioni di contatto.

Seleziona icona

Quindi, scegli un'icona corrispondente.

Impostazioni icona

Modifica le impostazioni di questa icona.

• Colore icona: #ffffff
• Posizionamento dell'icona: a sinistra

Impostazioni del testo del titolo

Continua apportando successivamente alcune modifiche alle impostazioni del testo del titolo.

• Dimensione del testo del titolo: 15px
• Spaziatura delle lettere del titolo: -0,5 px

Spaziatura

E aggiungi un margine superiore.

• Margine superiore: 120 px

Clona modulo Blurb due volte

Una volta che hai finito di modificare il primo modulo Blurb, puoi andare avanti e clonare il modulo due volte.

Cambia contenuto e icona di entrambi i duplicati

Modifica il contenuto e le icone di entrambi i duplicati per condividere diversi tipi di informazioni di contatto con i visitatori.

Cambia la spaziatura di entrambi i duplicati

Anche il margine superiore di entrambi i duplicati deve essere modificato.

• Margine superiore: 30px

Creazione del modulo di contatto n. 3

Aggiungi nuova sezione

Colore di sfondo

Al terzo esempio! Aggiungi una nuova sezione con il seguente colore di sfondo:

• Colore di sfondo: #3491CE

Spaziatura

Continua aggiungendo alcuni valori di riempimento personalizzati nelle impostazioni di spaziatura.

• Imbottitura superiore: 200 px
• Imbottitura inferiore: 200 px

Aggiungi riga n. 1

Struttura della colonna

Quindi, aggiungi una nuova riga utilizzando la seguente struttura di colonne:

Modulo Aggiungi testo

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Il primo modulo che dovremo aggiungere alla prima colonna è un modulo di testo. Inserisci alcuni contenuti a tua scelta.

Impostazioni testo

Quindi, modifica le impostazioni del testo.

• Peso del carattere del testo: Ultra grassetto
• Colore del testo: rgba (255,255,255,0.24)
• Dimensioni del testo: 100 px (desktop), 86 px (tablet), 60 px (telefono)
• Altezza riga di testo: 1em
• Orientamento del testo: al centro

Spaziatura

Aggiungi anche un margine inferiore negativo.

• Margine inferiore: -100 px

Aggiungi riga #2

Struttura della colonna

La seconda riga di cui abbiamo bisogno per completare questo esempio contiene la seguente struttura di colonne:

Sfondo sfumato

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi uno sfondo sfumato.

• Colore 1: #11CE84
• Colore 2: #10C77F
• Tipo di gradiente: lineare
• Direzione del gradiente: 160 gradi
• Posizione di partenza: 50%
• Posizione finale: 50%

Dimensionamento

Modifica anche le impostazioni di dimensionamento.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Spaziatura

Aggiungi successivamente alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 150 px
• Imbottitura inferiore: 100 px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Frontiera

Quindi, vai alle impostazioni del bordo e aggiungi "20px" a ciascuno degli angoli. Usa anche un bordo inferiore.

• Larghezza bordo inferiore: 10 px
• Colore bordo inferiore: #1ba35a

Scatola ombra

Completa le impostazioni della riga aggiungendo un'ombra sottile.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Forza di diffusione dell'ombra della scatola: -24px
• Colore ombra: rgba(0,0,0,0.3)

Aggiungi il modulo del modulo di contatto alla colonna 1

Abilita l'opzione "Crea larghezza intera" nel campo Nome ed e-mail

Il primo modulo di cui abbiamo bisogno nella prima colonna della riga è un modulo di contatto. Apri il campo del nome e dell'email e modifica le impostazioni del layout.

• Crea larghezza intera: Sì

Elementi

Disattiva il captcha successivo.

• Visualizza Captcha: No

Impostazioni dei pulsanti

E modificare le impostazioni del pulsante.

• Usa stili personalizzati per il pulsante: Sì
• Colore del testo del pulsante: #ffffff
• Colore 1: #3AA0E3
• Colore 2: #3491CE
• Tipo di gradiente: lineare
• Direzione gradiente: 155deg
• Posizione di partenza: 50%
• Posizione finale: 50%
• Larghezza bordo pulsante: 0px
• Raggio del bordo del pulsante: 10 px
• Forza di diffusione dell'ombra della scatola: -2px
• Colore ombra: #0a60af

Frontiera

Stiamo anche aggiungendo "5px" di angoli arrotondati a ciascuno dei campi.

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto

Nella seconda colonna, il primo modulo di cui avremo bisogno è un modulo di testo. Vai avanti e inserisci alcuni contenuti.

Colore di sfondo

Quindi, cambia il colore di sfondo.

• Colore di sfondo: rgba (255,255,255,0.13)

Impostazioni testo

Gioca anche con le impostazioni del testo.

• Peso del carattere del testo: leggero
• Colore del testo: #ffffff
• Dimensione del testo: 15px
• Spaziatura delle lettere del testo: -0,5 px

Spaziatura

E aggiungi un po' di imbottitura personalizzata per dare al modulo spazio per respirare.

• Imbottitura superiore: 12px
• Imbottitura inferiore: 12px
• Imbottitura sinistra: 10px
• Imbottitura destra: 10px

Frontiera

Stiamo anche aggiungendo "20px" agli angoli in alto a sinistra e in basso a sinistra. Inoltre, aggiungeremo un bordo sinistro.

• Larghezza bordo sinistro: 34 px
• Colore bordo sinistro: #edf000

Visibilità

Per fare in modo che questo design corrisponda alle diverse dimensioni dello schermo, disattiveremo il modulo di testo su telefono e tablet.

Clona modulo di testo due volte

Una volta che hai finito di modificare il primo modulo di testo, vai avanti e clona il modulo due volte.

Modifica il contenuto di entrambi i duplicati

Cambia il contenuto di entrambi i duplicati in qualcos'altro.

Cambia la spaziatura di entrambi i duplicati

E aggiungi un margine superiore per creare spazio tra ciascuno dei moduli.

• Margine superiore: 20px

Cambia bordo di entrambi i duplicati

Ultimo ma non meno importante, cambia il colore del bordo sinistro di ciascuno dei duplicati individualmente.

• Colore 1: #00faff
• Colore 2: #00f76f

Creazione del modulo di contatto n. 4

Aggiungi nuova sezione

Colore di sfondo

Al quarto esempio! Aggiungi una nuova sezione utilizzando il seguente colore di sfondo:

• Colore di sfondo: #FFBABD

Spaziatura

Rimuovi il riempimento predefinito di questa sezione.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Sfondo sfumato

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi uno sfondo sfumato.

• Colore 1: #ffffff
• Colore 2: RGB (41,196,169,0)
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 38%
• Posizione finale: 38%

Dimensionamento

Modificare le impostazioni di dimensionamento successivo.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

E aggiungi un po' di imbottitura personalizzata.

• Imbottitura superiore: 160 px
• Imbottitura inferiore: 160 px

Modulo Aggiungi testo

Aggiungi contenuto

Il primo modulo di cui abbiamo bisogno è un modulo di testo. Vai avanti e inserisci alcuni contenuti.

Impostazioni testo

Modificare le impostazioni del testo di conseguenza:

• Carattere del testo: Abril Fatface
• Colore del testo: #640076
• Dimensioni del testo: 45 px (desktop), 34 px (tablet), 20 px (telefono)
• Altezza riga di testo: 1em
• Orientamento del testo: al centro

Spaziatura

Aggiungi successivamente alcuni valori di spaziatura personalizzati.

• Margine superiore: 300 px
• Imbottitura superiore: 50px
• Imbottitura inferiore: 50 px

Aggiungi modulo modulo di contatto

Abilita l'opzione "Crea larghezza intera" nel campo Nome ed e-mail

Il secondo e ultimo modulo di cui abbiamo bisogno è un modulo di contatto. Apri entrambi i campi del nome e dell'email e modifica le impostazioni del layout.

• Crea larghezza intera: Sì

Elementi

Quindi, disabilita l'opzione captcha nelle impostazioni degli elementi.

• Visualizza Captcha: No

Impostazioni testo campo modulo

Apportare anche alcune modifiche alle impostazioni del testo del campo modulo.

• Colore sfondo campo modulo: #fff6f6
• Colore testo campo modulo: #ff7c7c

Impostazioni dei pulsanti

Modificare il pulsante in un pulsante a icona utilizzando le seguenti impostazioni:

• Usa stili personalizzati per il pulsante: Sì
• Dimensione del testo del pulsante: 88 px
• Colore del testo del pulsante: rgba (255,255,255,0)
• Colore di sfondo del pulsante di passaggio del mouse: rgba (255,255,255,0)
• Larghezza bordo pulsante: 0px
• Colore icona pulsante: #e60085
• Mostra solo l'icona al passaggio del mouse per il pulsante: Sì

Dimensionamento

E gioca con i valori di dimensionamento per far sì che il design corrisponda a tutte le dimensioni dello schermo.

• Larghezza: 42% (Desktop), 50% (Tablet), 77% (Telefono)
• Allineamento del modulo: Centro

Spaziatura

Continua aggiungendo alcuni valori di spaziatura personalizzati al modulo.

• Margine inferiore: 200 px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Frontiera

E aggiungi "10px" a ciascuno degli angoli.

Pulsante Margine

Ultimo ma non meno importante, premi il pulsante con l'icona a destra utilizzando la seguente riga di codice CSS nella scheda Avanzate:

margin-right: -100px;

Creazione del modulo di contatto n. 5

Aggiungi nuova sezione

Sfondo sfumato

All'ultimo esempio! Aggiungi una nuova sezione con il seguente sfondo sfumato:

• Colore 1: #4bf2d0
• Colore 2: #ffffff
• Tipo di gradiente: radiale
• Direzione radiale: sinistra
• Posizione di partenza: 36%
• Posizione finale: 36%

Spaziatura

Quindi, vai alle impostazioni di spaziatura e aggiungi un'imbottitura personalizzata.

• Imbottitura superiore: 250 px
• Imbottitura inferiore: 250 px

Aggiungi nuova riga

Struttura della colonna

Dopo aver modificato le impostazioni della sezione, aggiungi una nuova riga utilizzando la seguente struttura a colonne:

Colore di sfondo

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi un colore di sfondo.

• Colore di sfondo: #ffffff

Colore di sfondo della colonna 1

Aggiungi un altro colore di sfondo alla prima colonna.

• Colore di sfondo della colonna 1: #f9f9f9

Dimensionamento

Quindi, modifica le impostazioni di dimensionamento della riga.

• Usa larghezza personalizzata: Sì
• Unità: PX
• Larghezza personalizzata: 1730 px
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Spaziatura

E aggiungi alcuni valori di spaziatura personalizzati per abbinare tutte le dimensioni dello schermo.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px
• Imbottitura superiore della colonna 1: 200 px (desktop), 0 px (tablet e telefono)
• Imbottitura inferiore della colonna 1: 150 px (desktop), 0 px (tablet e telefono)
• Colonna 1 Imbottitura sinistra: 50 px
• Imbottitura destra colonna 1: 50 px
• Imbottitura superiore colonna 2: 200 px (desktop), 100 px (tablet e telefono)
• Imbottitura inferiore colonna 2: 150 px, 100 px (tablet e telefono)

Scatola ombra

L'ultima cosa che devi fare nelle impostazioni della riga è aggiungere un'ombra sottile.

• Intensità sfocatura ombra scatola: 56px
• Forza di diffusione dell'ombra della scatola: -17px
• Colore ombra: rgba(0,0,0,0.3)

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Aggiungi un modulo di testo alla prima colonna.

Impostazioni testo

Dopo aver aggiunto il contenuto, vai alle impostazioni del testo e apporta alcune modifiche.

• Carattere del testo: Cambay
• Colore del testo: #000000
• Dimensione del testo: 26px
• Spaziatura delle lettere del testo: -0,5 px
• Orientamento del testo: a destra

Spaziatura

Aggiungi anche un margine superiore.

• Margine superiore: 60 px

Visibilità

E nascondi il modulo sia sul telefono che sul tablet.

Clona modulo di testo due volte

Modifica il contenuto di entrambi i duplicati

Una volta che hai finito di modificare il primo modulo di testo, vai avanti e clona il modulo due volte. Modifica il contenuto di entrambi i duplicati.

Cambia la spaziatura di entrambi i duplicati

Modifica anche il margine superiore di entrambi i duplicati.

• Margine superiore: 80 px

Aggiungi il modulo del modulo di contatto alla colonna 2

Abilita l'opzione "Crea larghezza intera" nel campo Nome ed e-mail

L'unico modulo di cui abbiamo bisogno nella seconda colonna è un modulo di contatto. Apri i campi del nome e dell'email e modifica le impostazioni del layout.

• Crea larghezza intera: Sì

Elementi

Disattiva l'opzione captcha successiva.

• Visualizza Captcha: Sì

Impostazioni testo campo modulo

Quindi, vai alle impostazioni del testo del campo modulo e apporta alcune modifiche.

• Colore sfondo campo modulo: rgba(255,255,255,0)
• Carattere del campo modulo: Cambay

Impostazioni dei pulsanti

E crea un pulsante univoco utilizzando le seguenti impostazioni del pulsante:

• Usa stili personalizzati per il pulsante: Sì
• Dimensioni del testo del pulsante: 64 px (desktop), 50 px (tablet), 40 px (telefono)
• Colore del testo del pulsante: #000000
• Colore 1: #4bf2d0
• Colore 2: RGB (41,196,169,0)
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 25%
• Posizione finale: 25%
• Larghezza bordo pulsante: 0px
• Mostra solo il pulsante al passaggio del mouse per il pulsante: No

Spaziatura

Aggiungi anche un margine superiore a questo modulo.

• Margine superiore: 50 px

Frontiera

E usa un sottile bordo inferiore per ciascuno dei campi.

• Larghezza bordo inferiore: 0,5 px
• Colore bordo inferiore: #000000

Spaziatura campo individuale

Ultimo ma non meno importante, aggiungi il seguente margine inferiore a ciascuno dei campi individualmente e il gioco è fatto!

• Margine inferiore: 50 px

Anteprima

Desktop

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata ai progetti del modulo del modulo di contatto Divi sul desktop.

Mobile

E questo è ciò che puoi aspettarti dai design del modulo del modulo di contatto Divi su schermi di dimensioni più piccole:

Pensieri finali

In questo post, abbiamo condiviso 5 bellissimi modelli di moduli di contatto Divi che puoi facilmente utilizzare e modificare per qualsiasi sito web che crei. I moduli di contatto sono una parte vitale di molti siti web là fuori, quindi è importante assicurarsi che il tuo design convinca i tuoi visitatori a mettersi in contatto. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!