Come aggiungere un modulo di contatto a discesa alla tua intestazione globale
Pubblicato: 2020-02-19Quando crei un'intestazione personalizzata per il tuo sito Web, utilizzando il generatore di temi di Divi, ti ritroverai a cercare il modo ideale per aggiungere un CTA. Un modo per farlo è aggiungere un modulo di contatto a discesa. Questo ti aiuterà a mantenere pulito l'aspetto generale della tua intestazione, pur fornendo la possibilità di entrare in contatto senza la necessità di scorrere. In questo tutorial, ti mostreremo come creare un modulo di contatto a discesa utilizzando Divi e del codice JQuery e CSS. Potrai anche scaricare gratuitamente il file JSON!
Andiamo ad esso.
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Scarica il modello di intestazione globale GRATUITAMENTE
Per mettere le mani sul modello di intestazione globale gratuito, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
1. Vai a Divi Theme Builder e inizia a creare un'intestazione globale
Vai a Divi Theme Builder
Inizia andando al Divi Theme Builder nel backend del tuo sito Web WordPress.
Crea intestazione globale
Fare clic su "Aggiungi intestazione globale" e selezionare "Crea intestazione globale" per iniziare a creare un'intestazione globale personalizzata.
2. Costruisci il design dell'intestazione
Impostazioni della sezione
Colore di sfondo
Una volta all'interno del modello di intestazione globale, noterai una sezione. Apri quella sezione e usa un colore di sfondo bianco.
- Colore di sfondo: #FFFFFF
Spaziatura
Successivamente, rimuovi l'imbottitura superiore e inferiore predefinita della sezione.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Scatola ombra
Applica anche un'ombra sottile.
- Forza sfocatura ombra scatola: 50 px
- Colore ombra: rgba(0,0,0,0.15)
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
Dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Equalizza le altezze delle colonne: Sì
- Larghezza: 95%
- Larghezza massima: 100%
Spaziatura
Aggiungi successivamente un'imbottitura personalizzata in alto e in basso.
- Imbottitura superiore: 1vw
- Imbottitura inferiore: 1vw
Elemento principale
E allinea tutto il contenuto della colonna aggiungendo una singola riga di codice CSS all'elemento principale della riga.
align-items: center;
Indice Z della colonna 2
Ci stiamo anche assicurando che la seconda colonna abbia un valore di indice z più alto per scopi reattivi.
- Indice Z: 12
Aggiungi modulo immagine alla colonna 1
Carica logo
È ora di iniziare ad aggiungere moduli! Iniziare con un modulo immagine nella colonna 1. Carica un logo.
Allineamento
Modificare l'allineamento del modulo successivo.
- Allineamento immagine: centro
Dimensionamento
Modifica anche la larghezza.
- Larghezza: 3vw (desktop), 5vw (tablet), 7vw (telefono)
Aggiungi modulo menu alla colonna 2
Seleziona Menu
Nella seconda colonna, aggiungeremo un Modulo Menu.
Disposizione
Passa alla scheda di progettazione del modulo e modifica lo stile del layout.
- Stile: centrato
Menu Impostazioni testo
Successivamente, modifica le impostazioni del testo del menu del modulo.
- Carattere del menu: Open Sans
- Peso del carattere del menu: semi grassetto
- Colore del testo del menu: #000000
- Dimensione del testo del menu: 0.8vw (desktop), 2vw (tablet), 3vw (telefono)
- Spaziatura delle lettere del menu: 1px
Menu a discesa Impostazioni testo
Quindi, cambia il colore della linea del menu a discesa.
- Colore linea menu a discesa: #007dff
Icone
Insieme al colore dell'icona del menu dell'hamburger.
- Colore icona menu hamburger: #007dff
Aggiungi il modulo di testo 1 alla colonna 3
Aggiungi copia
Al terzo modulo! Aggiungi un modulo di testo con una copia a tua scelta.
Colore di sfondo
Aggiungi un colore di sfondo successivo.
- Colore di sfondo: #007dff
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Open Sans
- Peso del carattere del testo: grassetto
- Colore del testo: #ffffff
- Dimensione del testo: 0.8vw (desktop), 2vw (tablet), 3vw (telefono)
- Allineamento del testo: Centro
Dimensionamento
Successivamente, modifica le impostazioni di dimensionamento del modulo.
- Larghezza: 33%
- Allineamento del modulo: Centro
Spaziatura
Quindi, aggiungi un'imbottitura personalizzata superiore e inferiore.
- Imbottitura superiore: 0.8vw (desktop), 2vw (tablet e telefono)
- Imbottitura inferiore: 0.8vw (desktop), 2vw (tablet e telefono)
Frontiera
E completa le impostazioni del modulo aggiungendo un raggio di bordo.
- Tutti gli angoli: 100 px
Aggiungi il modulo di testo 2 alla colonna 3
Aggiungi simbolo alla casella del contenuto
Al modulo successivo, che è un altro modulo di testo. Aggiungi il seguente simbolo di freccia alla casella del contenuto: '▼'.
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Open Sans
- Colore del testo: #007fff
- Dimensione del testo: 3vw
- Altezza riga di testo: 0em
- Allineamento del testo: Centro
Indice Z
Stiamo anche aumentando l'indice z del modulo.
- Indice Z: 11
Aggiungi il modulo del modulo di contatto alla colonna 3
Aggiungi campi a tutta larghezza di scelta
Il prossimo e ultimo modulo di cui abbiamo bisogno nella terza colonna è un modulo di contatto. Aggiungi tutti i campi a larghezza intera di cui hai bisogno.
Aggiungi titolo
Usa anche un titolo.
Colore di sfondo
Stiamo cambiando il colore di sfondo successivo.
- Colore di sfondo: #e7f2ff
Impostazioni dei campi
Quindi, passa alla scheda di progettazione del modulo e modifica le impostazioni dei campi.
- Colore di sfondo dei campi: #ffffff
- Colore del testo dei campi: #dddddd
- Colore testo focus campi: #007dff
- Imbottitura superiore dei campi: 1vw (Desktop), 2vw (Tablet), 3vw (Telefono)
- Imbottitura inferiore dei campi: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Carattere dei campi: Open Sans
- Dimensioni del testo dei campi: 0.7vw (desktop), 1.8vw (tablet), 3vw (telefono)
Impostazioni del testo del titolo
Modifica le impostazioni del testo del titolo in seguito.
- Livello titolo titolo: H3
- Peso del carattere del titolo: grassetto
- Allineamento del testo del titolo: al centro
- Colore del testo del titolo: #007dff
- Dimensione del testo del titolo: 1vw (desktop), 2.5vw (tablet), 3.5vw (telefono)
- Altezza della riga del titolo: 1,6 em
Impostazioni testo captcha
Insieme alle impostazioni del testo captcha.
- Carattere Captcha: Open Sans
- Colore testo captcha: #007dff
Impostazioni dei pulsanti
Continua stilizzando il pulsante.
- Usa stili personalizzati per pulsante: Sì
- Dimensione del testo del pulsante: 0.8vw (desktop), 2vw (tablet), 3vw (telefono)
- Colore del testo del pulsante: #ffffff
- Colore di sfondo del pulsante: #007dff
- Larghezza bordo pulsante: 0px
- Raggio del bordo del pulsante: 100 px
- Carattere pulsante: Open Sans
- Peso del carattere del pulsante: grassetto
- Pulsante Margine superiore: 1vw
- Imbottitura superiore dei pulsanti: 1vw (desktop), 2vw (tablet e telefono)
- Imbottitura inferiore del pulsante: 1vw (desktop), 2vw (tablet e telefono)
- Imbottitura pulsante sinistra: 2vw (desktop), 7vw (tablet e telefono)
- Imbottitura pulsante destro: 2vw (desktop), 7vw (tablet e telefono)
Spaziatura
Quindi, utilizza alcuni valori di riempimento personalizzati su diverse dimensioni dello schermo.
- Imbottitura superiore: 4vw (desktop), 6vw (tablet e telefono)
- Imbottitura inferiore: 4vw (desktop), 6vw (tablet e telefono)
- Imbottitura sinistra: 2vw (desktop), 6vw (tablet e telefono)
- Imbottitura destra: 2vw (desktop), 6vw (tablet e telefono)
Frontiera
Modifica le impostazioni del bordo in seguito.
- Tutti gli angoli: 10px
Elemento principale, titolo del contatto e CSS Captcha
Completa le impostazioni del modulo aggiungendo alcune piccole modifiche CSS alla scheda Avanzate.
Elemento principale:
border-radius: 20px;
Titolo del contatto:
margin-bottom: 1vw;
Captcha:
margin-top: 1.5vw;
3. Personalizza gli elementi per creare un modulo di contatto al clic
Aggiungi altezza colonna 3
Una volta posizionati tutti i moduli, è il momento di creare l'effetto. Il primo passo verso il raggiungimento del risultato desiderato è aprire le impostazioni della colonna 3 e aggiungere un'altezza personalizzata reattiva nella scheda avanzata.
Scrivania:
height: 3vw;
Tavoletta:
height: 5vw;
Telefono:
height: 6vw;
Aggiungi la classe CSS a pulsante e freccia
Quindi, aggiungeremo la stessa classe CSS a entrambi i primi moduli di testo nella colonna 3.
- Classe CSS: mostra-contatto
Aggiungi la classe CSS al modulo di contatto
Avremo bisogno di una classe CSS personalizzata anche per il modulo di contatto.
- Classe CSS: modulo-contatto
Nascondi modulo modulo di contatto
Continua aggiungendo un'ulteriore riga di codice CSS all'elemento principale del modulo di contatto. Questo ci permetterà di nascondere il modulo prima del clic.
display: none;
Aggiungi modulo codice alla colonna 3 con JQuery e codice CSS
E per creare la funzione clic, avremo bisogno di codice JQuery. Useremo anche del codice CSS personalizzato. Aggiungi un nuovo modulo di codice alla colonna 2 con il codice. Assicurati di inserire il codice JQuery tra i tag di script e il codice CSS tra i tag di stile.
jQuery(function($){
$(".show-contact").click(function() {
$('.contact-form-module').slideToggle();
});
});.show-contact {
cursor: pointer;
}
.et-menu>li {
padding-left: 0.7vw !important;
padding-right: 0.7vw !important;
}
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Pensieri finali
In questo post, ti abbiamo mostrato come aggiungere un modulo di contatto a discesa alla tua intestazione personalizzata. Questo è un ottimo modo per attivare l'azione fin dall'inizio. Abbiamo anche condiviso il file JSON gratuitamente! Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto.
Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.