Come includere un modulo di contatto nel piè di pagina Divi

Il piè di pagina di Divi è un ottimo posto per aggiungere un modulo di contatto. Fortunatamente, questo è facile da fare con Divi Theme Builder. Ovviamente, non vogliamo semplicemente aggiungerlo da nessuna parte perché ci sono alcune cose da tenere a mente per l'usabilità. In questo post vedremo come includere un modulo di contatto nel footer di Divi. Esamineremo un paio di esempi per aiutarti a iniziare.

Iniziamo!

Anteprima

Desktop Divi Footer Modulo di contatto Esempio uno

Telefono Divi Footer Modulo di contatto Esempio uno

Desktop Divi Footer Modulo di contatto Esempio due

Telefono Divi Footer Modulo di contatto Esempio due

Informazioni sul modulo di contatto nel piè di pagina Divi

Perché includere un modulo di contatto nel piè di pagina Divi?

Il piè di pagina è una posizione in cui i visitatori cercheranno informazioni specifiche. Ciò include i modi per contattarti. L'aggiunta di un modulo di contatto al piè di pagina non solo rende visive le informazioni di contatto, ma semplifica anche il processo.

Dove aggiungere il modulo di contatto

Quando scegli una posizione per il modulo di contatto, guarda gli altri elementi del piè di pagina per vedere cosa potrebbe entrare in conflitto per attirare l'attenzione.

È meglio posizionare il modulo di contatto vicino ad altre informazioni di contatto, ma non vuoi che combatta il modulo di posta elettronica. Posizionare due moduli uno accanto all'altro può confondere i visitatori. Posiziona il modulo di contatto in una riga o sezione diversa dal modulo di posta elettronica. Aggiungi abbastanza spazio bianco attorno al modulo di contatto in modo che si distingua dal resto del contenuto.

L'esempio seguente è tratto dal modello di intestazione e piè di pagina gratuito per Divi's Stone Factory Layout Pack . Questo è un ottimo esempio di come utilizzare un modulo di contatto nel piè di pagina. Questo layout include un modulo di contatto e un modulo di posta elettronica. Il modulo di contatto viene inserito con le informazioni di contatto in una riga diversa dai collegamenti e dal modulo e-mail. È anche di un colore diverso rispetto al modulo e-mail ed è etichettato bene, quindi i visitatori sapranno a colpo d'occhio quale modulo è quale.

Come includere un modulo di contatto nel footer di Divi

Il modo migliore per aggiungere un modulo di contatto al tuo piè di pagina Divi è creare il piè di pagina in Divi Theme Builder. Un modulo di contatto può anche essere aggiunto a qualsiasi piè di pagina esistente. Il processo di aggiunta del modulo è lo stesso.

Importa il layout del piè di pagina Divi

Nella dashboard di WordPress, vai su Divi > Theme Builder . Seleziona Aggiungi piè di pagina globale se non disponi di un piè di pagina globale, seleziona Aggiungi nuovo modello o scegli il modello di piè di pagina a cui desideri aggiungere il modulo di contatto. Importeremo un nuovo piè di pagina. Per questo esempio, aggiungeremo un modulo di contatto all'intestazione e al piè di pagina per il pacchetto di layout dei servizi finanziari di Divi .

Seleziona l'icona Portabilità nell'angolo in alto a destra di Theme Builder. Passare al modello di intestazione e piè di pagina sul computer, selezionarlo e fare clic su Importa modelli Divi Theme Builder . Salva le modifiche.

Successivamente, seleziona l'icona Modifica per il modello di piè di pagina. Questo aprirà il modello di piè di pagina nel builder in cui apporteremo le nostre modifiche.

Come aggiungere il modulo di contatto a piè di pagina Divi

Successivamente, aggiungeremo il modulo di contatto al layout del piè di pagina. Innanzitutto, dovremo apportare alcune modifiche al design del layout. Vediamo che il layout ha due sezioni. La sezione superiore ha un titolo per identificare che si tratta delle informazioni di contatto. Questa sezione include tre tipi di informazioni di contatto allineate orizzontalmente.

Metteremo in pila le informazioni di contatto sulla destra, sopra il modulo di iscrizione via e-mail. Quindi, posizioneremo un modulo modulo di contatto Divi sulla sinistra. Ciò aumenta le dimensioni di questa sezione e bilancia il piè di pagina con un modulo su ciascun lato.

Sposta le informazioni di contatto

Innanzitutto, trascina e rilascia i moduli di testo nella colonna di destra. Impilali per mostrare l'e-mail in alto, l'ufficio al centro e il telefono in basso.

Regola la riga

Quindi, regola la riga per mostrare due colonne invece di tre.

Aggiungi il modulo di contatto

Infine, aggiungi un modulo modulo di contatto alla colonna di sinistra.

Ora abbiamo un modulo di contatto aggiunto al nostro layout Divi. Il modulo di contatto si bilancia bene con il modulo e-mail sull'altro lato del layout. Certo, funziona ma non si adatta bene al design del layout fino a quando non lo stiliamo.

Come modellare il modulo di contatto del footer Divi

Ora, vediamo come modellare il modulo del modulo di contatto Divi in ​​modo che corrisponda al layout. Vedremo due esempi, incluso quello che abbiamo già iniziato. Useremo spunti di progettazione dal layout stesso.

Divi Footer Modulo di contatto Esempio uno

Per questo, stiliamo il modulo che abbiamo aggiunto nella sezione precedente.

Testo

Apri le impostazioni del Modulo modulo di contatto . Inserisci il testo per il titolo e il pulsante di invio .

• Titolo: Contattaci oggi
• Pulsante Invia: contattaci

Campi

Successivamente, vai alla scheda Progettazione . Cambia il colore di sfondo dei campi in #ffba52 e cambia il colore del testo dei campi in #0f1154. Lascia i colori di messa a fuoco alle loro impostazioni predefinite. Ciò consente loro di utilizzare gli stessi colori dei campi regolari.

• Colore di sfondo: #ffba52
• Colore testo: #0f1154

Quindi, cambia il carattere dei campi in Montserrat. Imposta il Peso su Grassetto e la Dimensione su 16px.

• Fonte: Montserrat
• Peso: grassetto
• Dimensioni: 16px

Titolo Testo

Successivamente, scorri verso il basso fino a Testo del titolo . Scegli H3 per il livello di intestazione . Il titolo di questa sezione utilizza H2, quindi selezionando H3 verrà creata la struttura della pagina corretta. Seleziona Montserrat per il carattere . Seleziona Grassetto per il peso e cambia il colore in # 1d4eff.

• Livello di intestazione: H3
• Fonte: Montserrat
• Peso: grassetto
• Colore: #1d4eff

Captcha Testo

Successivamente, scorri verso il basso fino a Captcha Text . Apporteremo modifiche al testo Captcha in questa impostazione, ma aggiungeremo anche alcuni CSS per cambiare il colore del campo. Cambia il carattere in Roboto, il peso in medio e il colore in # 1d4eff. Aggiungeremo il CSS alla fine.

• Carattere: Roboto
• Peso: Medio
• Colore: #1d4eff

Pulsante

Successivamente, scorri verso il basso fino a Button e attiva Use Custom Styles for Button . Cambia la dimensione del carattere in 16px, il colore del carattere in bianco e il colore di sfondo in # 1d4eff.

• Usa stili personalizzati per il pulsante: Sì
• Dimensioni: 16px
• Colore testo: #ffffff
• Colore di sfondo: #1d4eff

Imposta la larghezza del bordo e il raggio del bordo su 0px per entrambi. Cambia il carattere in Roboto e il peso in medio.

• Raggio del bordo: 0px
• Larghezza bordo: 0px
• Carattere: Roboto
• Peso: Medio

Successivamente, scorri verso il basso fino a Button Padding . Inserisci 14px per il riempimento superiore e inferiore e 24px per il riempimento sinistro e destro.

• Imbottitura: 14px in alto e in basso, 24px a sinistra e a destra

Captcha Sfondo

Infine, vai alla scheda Avanzate e scorri verso il basso fino al campo Captcha . Inserisci il CSS di seguito nel campo. Ciò conferisce allo sfondo un colore diverso dal resto del modulo, quindi gli utenti sapranno che è diverso. Ora chiudi il modulo e salva le tue impostazioni.

• Campo Captcha CSS:

  background-color:rgba(255,186,82,0.2)

Divi Footer Modulo di contatto Esempio due

Diamo un'occhiata a un altro esempio. Per questo, sto usando il piè di pagina globale dall'Intestazione e piè di pagina gratuito per Divi's Podcaster Layout Pack . Sostituiremo l'e-mail di contatto con un modulo di contatto.

Elimina modulo di testo e-mail

Per prima cosa, elimina i moduli di testo Contattaci ed e-mail. Sostituiremo il titolo con quello del modulo di contatto.

Modifica la larghezza della colonna della riga

Successivamente, modifica il layout delle colonne per visualizzare due colonne uguali. Questo ci dà più spazio per il modulo di contatto.

Regola colonna

Successivamente, cambieremo lo sfondo della colonna per il modulo di contatto. Questo ci dà un maggiore controllo sul design del modulo. Apri le impostazioni per la colonna di destra.

Scorri verso il basso fino a Sfondo e seleziona la scheda Gradiente di sfondo . Imposta il colore del primo Gradient Stop su #f52791 e lascialo nella sua posizione di 0%. Imposta il colore del secondo Gradient Stop su # 3742fb e lascia la sua posizione al 100%. Cambia la direzione a 120 gradi.

• Prima fermata del gradiente: #f52791, 0%
• Seconda fermata del gradiente: #3742fb, 100%
• Direzione: 120 gradi

Successivamente, vai alla scheda Progettazione . Cambia il riempimento superiore e inferiore a 40px e il riempimento sinistro e destro a 30px.

• Imbottitura: 40px in alto e in basso, 30px a sinistra e a destra.

Quindi, scorri verso il basso fino a Bordo e regola gli Angoli arrotondati . Imposta in alto a sinistra su 0px, in alto a destra su 15px, in basso a sinistra su 15px e in basso a destra su 0px. Chiudi le impostazioni Colonna e Riga.

Angoli arrotondati:

• In alto a sinistra: 0px
• In alto a destra: 15px
• In basso a sinistra: 15px
• In basso a destra: 0px

Aggiungi un modulo modulo di contatto

Successivamente, aggiungi un modulo modulo di contatto al posto dei moduli di testo.

Modulo di contatto Contenuto

Aggiungi il contenuto del titolo .

• Titolo: Contattaci

Protezione da spam

Scorri verso il basso fino a Protezione antispam e disabilitala.

• Usa Captcha di base: No

Campi

Vai alla scheda Progettazione . Cambia il colore di sfondo dei campi in rgba (255,255,255,0.12) e cambia il colore del testo in bianco.

• Colore di sfondo dei campi: rgba(255,255,255,0.12)
• Colore testo campi: #ffffff

Cambia il carattere dei campi in Sarabun. Imposta il Peso su Grassetto, lo Stile su TT e la Spaziatura lettere su 2px.

• Carattere dei campi: Sarabun
• Peso: grassetto
• Stile: TT
• Spaziatura lettere: 2px

Titolo Testo

Successivamente, scorri verso il basso fino a Testo del titolo . Cambia il carattere del titolo in Sarabun, il peso in grassetto, lo stile in TT e il colore in bianco.

• Livello di intestazione: H3
• Carattere dei campi: Sarabun
• Peso: grassetto
• Stile: TT
• Colore: #ffffff

Pulsante

Successivamente, scorri verso il basso fino a Button e attiva Use Custom Styles for Button . Cambia la dimensione del carattere in 14px, il colore del carattere in bianco e il colore di sfondo in nero.

• Usa stili personalizzati per il pulsante: Sì
• Dimensioni: 14px
• Colore testo: #ffffff
• Colore di sfondo: #000000

Cambia la larghezza del bordo a 0px e il raggio del bordo a 50px. Imposta la spaziatura delle lettere su 2px, il carattere su Sarabun, il peso su grassetto e lo stile su TT.

• Larghezza bordo: 0px
• Raggio del bordo: 50px
• Spaziatura lettere: 2px
• Fonte: Sarabun
• Peso: grassetto
• Stile: TT

Successivamente, scorri verso il basso fino a Button Padding . Inserisci 15px per il riempimento superiore e inferiore e 45px per il riempimento sinistro e destro. Chiudi il modulo e salva le impostazioni.

• Imbottitura: 15 px in alto e in basso, 45 px a sinistra e a destra

Risultati

Desktop Divi Footer Modulo di contatto Esempio uno

Telefono Divi Footer Modulo di contatto Esempio uno

Desktop Divi Footer Modulo di contatto Esempio due

Telefono Divi Footer Modulo di contatto Esempio due

Pensieri finali

Questo è il nostro sguardo su come includere un modulo di contatto nel piè di pagina Divi. Il modulo modulo di contatto Divi è semplice da aggiungere a qualsiasi layout di piè di pagina Divi ed è facile da modellare per adattarsi a qualsiasi layout Divi. Seguire alcuni principi di progettazione ti garantirà di ottenere il massimo dallo spazio del piè di pagina.

Vogliamo sentire da voi. Includete un modulo di contatto nel footer di Divi? Fateci sapere nei commenti.