Divi: Come personalizzare il modulo "Modulo di contatto".

Vuoi creare un file modulo di contatto al tuo sito web grazie al modulo Modulo di Contatto di Divi? Ecco 3 idee di personalizzazione...

I forme I dettagli di contatto sono una parte essenziale di molti siti web. Il loro obiettivo principale è essere intuitivi e aiutare i visitatori a mettersi in contatto facilmente.

Ma questo non significa che tutto forme i contatti devono avere un aspetto preciso e predefinito. Puoi combinare facilmente un'esperienza intuitiva con un bel design. Questo è esattamente ciò che faremo in questo tutorial.

Condivideremo 3 design unico del modulo Modulo di Contatto de Divi che puoi creare utilizzando solo le opzioni integrate di Divi.

Andiamo!

Panoramica dei design del modulo Modulo di contatto Divi

Versioni desktop

Cominciamo dando un'occhiata alla versione desktop dei diversi design del modulo Modulo di Contatto che progetteremo in questo tutorial.

aggiungi un modulo di contatto al tuo sito web utilizzando il modulo Modulo di contatto di Divi

Versioni mobili

Ed ecco come appaiono su schermi di dimensioni più piccole:

Scarica DIVI ora!!!

Come personalizzare il modulo Modulo di contatto Divi: 3 esempi

Leggi anche: Divi: come creare una sezione dei membri del team come un carosello

Creazione del modulo di contatto #1

Aggiungi una nuova sezione

Sfondo sfumato

Partiamo dal primo esempio! Aggiungi una nuova sezione, vai alle impostazioni dello sfondo e aggiungi uno sfondo sfumato.

Gradiente si ferma
- 34%: #4c00ff
- 34%: #ffd400
Tipo: rotondo
Direzione del gradiente: in basso a sinistra

spaziatura

Successivamente, vai all'opzione Spaziatura nella scheda Progettazione e modifica le impostazioni come segue.

Imbottitura (superiore e inferiore): 200px

Aggiungi una nuova linea

Struttura della colonna

Aggiungi una nuova riga utilizzando la seguente struttura di colonne:

Colonna 1: colore di sfondo

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga, quindi le impostazioni della colonna 1 e aggiungi il colore di sfondo di seguito

Sfondo: RGB(255,255,255,0.55)

Colonna 1: Immagine di sfondo

Aggiungi anche un'immagine di sfondo alla prima colonna.

Ripeti immagine di sfondo: nessuna ripetizione
Miscela immagine di sfondo: Schermo

Colonna 2: Immagine di sfondo

E un colore di sfondo bianco alla seconda colonna.

Sfondo: #ffffff

dimensionamento

Quindi modificare i parametri di dimensionamento.

Equalizza altezze colonne: SÌ

spaziatura

Rimuovi anche tutti i padding personalizzati predefiniti.

Imbottitura (superiore e inferiore): 0px

Raggio del bordo della colonna

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

border-radius: 10px;

Aggiungi un modulo di testo alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere i diversi moduli! Aggiungi un modulo di testo alla prima colonna con il contenuto di tua scelta.

Impostazioni del testo

Successivamente, vai alla scheda Progettazione del modulo Testo e apporta alcune modifiche.

Testo :
- Tipo di carattere: Soddisfare
- Colore del testo: #333333
- Dimensioni: 100px
- Altezza della linea: 1 em
- Allineamento: Centro

spaziatura

Aggiungi anche valori di riempimento personalizzati.

Imbottitura (in alto): 600 px
Imbottitura (inferiore): 100px

Scatola delle ombre

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

Intensità sfocatura ombra scatola: 80px
Box Shadow Spread Forza: -16px
Colore ombra: rgba(0,0,0,0.3)

Aggiungi un modulo Immagine alla colonna 2

Carica un'immagine

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

dimensionamento

Modifica le impostazioni di dimensionamento per questo modulo.

Larghezza: 25% (desktop), 50% (tablet), 60% (telefono)
Allineamento modulo: centro

spaziatura

Crea una sovrapposizione utilizzando un margine superiore negativo.

Margine (superiore): -60%

confine

Modifica i bordi dell'immagine come segue:

Angoli arrotondati: 100px (tutti gli angoli)

Aggiungi il modulo Testo n. 1 alla colonna 2

Aggiungi contenuto

Appena sotto il modulo Immagine, aggiungi un modulo Testo con contenuto.

Impostazioni del testo

Modifica le impostazioni del testo per questo modulo.

Testo :
- Tipo di carattere: Soddisfare
- Colore del testo: #333333
- Dimensione del testo: 44px
- Orientamento: Centro

Aggiungi il modulo Testo n. 2 alla colonna 2

Aggiungi contenuto

Quindi aggiungi un altro modulo di testo.

Impostazioni del testo

Modifica anche le impostazioni del testo per questo modulo.

Testo :
- Carattere: Arial
- Colore testo: #ffd400
- Colore del testo: 18px
- Spaziatura lettere: 2px
- Orientamento: Centro

spaziatura

Quindi aggiungi un margine inferiore.

Margine (in basso): 100px

Aggiungi il modulo Modulo di contatto alla colonna 2

Attiva l'opzione "Make Fullwidth" nel campo Nome ed email

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

Crea larghezza intera: sì

Aggiungi un campo oggetto

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

Protezione Spam

Quindi disabilita l'opzione captcha.

Usa Captcha di base: NO

Impostazioni del testo del campo modulo

Apporta alcune modifiche alle impostazioni del testo del campo modulo di questo modulo di contatto

Campi :
- Colore di sfondo: rgba(255,255,255,0)
- Carattere: Arial
- Peso del carattere: leggero
- Dimensione del testo: 16px
- Spaziatura lettere: 2px

Impostazioni dei pulsanti

Stiamo anche cambiando l'aspetto dei pulsanti.

Usa la dimensione personalizzata per il pulsante: SÌ
Pulsante:
- Colore testo: #ffd400
- Larghezza bordo: 0 pixel
- Spaziatura lettere: 2px
- Carattere: Arial
- Stile carattere: U
- sottolineato Colore: #4c00ff

spaziatura

Quindi aggiungi alcuni valori di riempimento personalizzati.

Imbottitura (inferiore): 100px
Imbottitura (sinistra e destra): 50px

confine

E aggiungi un sottile bordo inferiore a ciascuno dei campi.

Input Larghezza bordo inferiore: 2px
Colore del bordo inferiore degli ingressi: #efefef

Spaziatura dei singoli campi

Infine, aggiungi un margine inferiore a ciascuno dei singoli campi tranne quello del messaggio.

Margine (in basso): 20px