È necessario aggiungere un modulo di contatto a un'intestazione globale?
Quando crei un'intestazione personalizzata per il tuo sito web Utilizzando Divi Theme Builder, ti ritrovi a cercare il modo perfetto per aggiungere un CTA (Call to Action). Un modo per farlo è aggiungere a modulo di contatto scorrimento.
Questo ti aiuterà a mantenere pulito l'aspetto generale della tua intestazione fornendo al contempo la possibilità di entrare contatti senza dover scorrere.
In questo tutorial ti mostreremo come creare un file modulo di contatto scorrevole utilizzando Divi, JQuery e codice CSS.
Cominciamo!
Panoramica
Prima di immergerci in questo tutorial, diamo un'occhiata in anteprima al risultato che otterremo.
Crea un'intestazione globale
Vai a Generatore di temi
Vai a Theme Builder dal menu Divi presente nella dashboard di WordPress e fai clic su "Aggiungi un'intestazione globale".
Seleziona "Crea intestazione globale".
Crea uno stile di intestazione
Impostazioni della sezione
Colore di sfondo
Una volta nell'editor dei modelli, noterai una sezione. Apri questa sezione e cambia il colore di sfondo.
- Sfondo: #FFFFFF
spaziatura
Quindi rimuovere i margini interni superiore e inferiore predefiniti dalla sezione.
- Vertice del margine interno: 0px
- Margine interno inferiore: 0px
Scatola delle ombre
Applica anche un'ombra sottile.
- Box Shadow Blue Forza: 50px
- Colore carattere sottotitoli: rgba(0,0,0,0.15)
Aggiungi una nuova riga
Struttura della colonna
Aggiungi una nuova riga alla sezione utilizzando la seguente struttura di colonne:
dimensionamento
Senza aggiungere moduli, apri le impostazioni della riga e modifica le impostazioni del dimensionamento come segue:
- Usa larghezza grondaia personalizzata: Sì
- Spaziatura delle colonne: 1
- Armonizzare le altezze delle colonne: Sì
- Larghezza massima: 95%
- Larghezza massima: 100%
spaziatura
Quindi aggiungi un'imbottitura superiore e inferiore personalizzata.
- Margine interno del picco: 1vw
- Margine interno inferiore: 1vw
elemento principale
Allinea il contenuto di tutte le colonne aggiungendo una singola riga di codice CSS all'elemento della riga principale.
align-items: center;
Pedice Z della colonna 2
Ci assicuriamo inoltre che la seconda colonna abbia un valore z-index più alto per il design reattivo.
- Indice Z: 12
Aggiungi il modulo immagine alla colonna 1
Scarica il logo
È ora di iniziare ad aggiungere moduli! A partire da un modulo Immagine nella colonna 1. Carica un logo.
allineamento
Quindi modificare l'allineamento del modulo.
- Allineamento immagine: centrato
dimensionamento
Cambia anche la larghezza.
- Larghezza massima: 3vw (desktop), 5vw (tablet), 7vw (telefono)
Aggiungi il modulo Menu alla colonna 2
Seleziona Menù
Nella seconda colonna aggiungeremo un modulo Menu.
Fornitura
Passa alla scheda Stile modulo e modifica lo stile del layout.
- Stili: centrato
Impostazioni del testo del menu
Quindi modificare le impostazioni del testo nel menu del modulo.
- Menu Font: Apri Nessuno
- Menù luci soffuse: semigrassetto
- Colore testo menu: #000000
- Dimensione testo menu: 0,8 vw (desktop), 2 vw (tablet), 3 vw (telefono)
- Spaziatura delle lettere del menu: 1px
Impostazioni del testo del menu a discesa
Quindi, cambia il colore della linea dal menu a discesa.
- Colore della riga del menu a discesa: #007dff
Icone
Cambia il colore dell'icona del menu dell'hamburger.
- Colore icona menu hamburger: #007dff
Aggiungi il modulo di testo alla colonna 3
Aggiungi un messaggio
Al terzo modulo! Aggiungi un modulo di testo con un messaggio a tua scelta.
Colore di sfondo
Aggiungi un colore di sfondo.
- Colore di sfondo: #007dff
Impostazioni del testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Open Sans
- Testo a luce soffusa: grassetto
- Colore del testo Testo: #ffffff
- Testo Dimensione testo: 0,8 vw (desktop), 2 vw (tablet), 3 vw (telefono)
- Allineamento del testo: centrato
dimensionamento
Quindi modificare i parametri di dimensionamento del modulo.
- Larghezza massima: 33%
- Allineamento modulo: centro
spaziatura
Quindi, aggiungi padding superiore e inferiore personalizzati.
- Margine interno superiore: 0,8 vw (desktop), 2 vw (tablet e telefono)
- Margine interno basso: 0,8 vw (desktop), 2 vw (tablet e telefono)
confine
E completa i parametri del modulo aggiungendo un raggio del bordo.
- Rettangolo arrotondato: 100px
Aggiungi un altro modulo di testo alla colonna 3
Aggiungi un simbolo all'area del contenuto
Passiamo al modulo successivo, che è un altro modulo di testo. Aggiungi il seguente simbolo di freccia nell'area del contenuto: '▼'.
Impostazioni del 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
- Testo Dimensione testo: 3vw
- Altezza della riga di testo: 0em
- Allineamento del testo: centrato
Indice Z
Aumentiamo anche lo z-index del modulo.
- Indice Z: 11
Aggiungi il modulo Modulo di contatto alla colonna 3
Aggiungi campi a larghezza intera di tua 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 un titolo
Usa anche un titolo.
Colore di sfondo
Quindi, cambiamo il colore di sfondo.
- Colore di sfondo: #e7f2ff
Impostazioni sul campo
Andiamo alla scheda Stile del modulo e cambiamo le impostazioni del campo.
- Campi colore di sfondo: #ffffff
- Colore del testo del campo: #dddddd
- Colore testo focus: #007dff
- Campi di riempimento dei vertici: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Campi di riempimento inferiori: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Campi carattere: aperto Nessuno
- Campi Dimensione testo: 0,7 vw (desktop), 1,8 vw (tablet), 3 vw (telefono)
Impostazioni del testo del titolo
Modifica le impostazioni del testo del titolo.
- Inserisci il titolo tre: H3
- Titolo a luci soffuse: testo in grassetto
- Allineamento del testo: centrato
- Colore del testo del titolo: #007dff
- Titolo Dimensione testo: 1 vw (desktop), 2,5 vw (tablet), 3,5 vw (telefono)
- Altezza della riga del titolo: 1,6 em
Impostazioni del testo Captcha
Con le impostazioni del testo captcha.
- Font Captcha: Open Sans
- Colore del testo Captcha: #007dff
Impostazioni dei pulsanti
Continua personalizzando il pulsante.
- Usa stili personalizzati per Button: Sì
- Dimensione testo pulsante: 0,8 vw (desktop), 2 vw (tablet), 3 vw (telefono)
- Colore testo pulsante: #ffffff
- Pulsante sfondo: #007dff
- Pulsante Larghezza bordo: 0 pixel
- Raggio bordo pulsante: 100 px
- Pulsante Font: Apri Nessuno
- Pulsante Luce soffusa: testo in grassetto
- Margine pulsante: 1vw
- Pulsante di riempimento superiore: 1vw (desktop), 2vw (tablet e telefono)
- Pulsante di imbottitura inferiore: 1vw (desktop), 2vw (tablet e telefono)
- Pulsante sinistro del pad: 2vw (desktop), 7vw (tablet e telefono)
- Pulsante destro del pad: 2vw (desktop), 7vw (tablet e telefono)
spaziatura
Usa valori di riempimento personalizzati su schermi di diverse dimensioni.
- Altezza interna di picco: 4vw (desktop), 6vw (tablet e telefono)
- Margine interno inferiore: 4vw (desktop), 6vw (tablet e telefono)
- Margine interno sinistro: 2vw (desktop), 6vw (tablet e telefono)
- Margine interno destro: 2vw (desktop), 6vw (tablet e telefono)
confine
Quindi modificare le impostazioni del bordo.
- Rettangolo arrotondato di input: 10px
Elemento principale, titolo del contatto e CSS Captcha
Completa le impostazioni del modulo aggiungendo alcune piccole modifiche CSS alla scheda avanzata.
Elemento principale:
| 01 | border-radius: 20px; |
Titolo del contatti :
| 01 | margin-bottom: 1vw; |
Captcha:
| 01 | margin-top: 1.5vw; |
Personalizza gli elementi per creare un modulo di contatto in un clic
Aggiungi l'altezza della colonna 3
Una volta che hai tutti i moduli a posto, è il momento di creare l'effetto. Il primo passo per ottenere il risultato desiderato è aprire le 3 impostazioni della colonna e aggiungere un'altezza reattiva personalizzata nella scheda Avanzate.
Ufficio :
| 01 | height: 3vw; |
tablet:
| 01 | height: 5vw; |
Telefono:
| 01 | height: 6vw; |
Aggiungi una classe CSS al pulsante e alla freccia
Successivamente, aggiungeremo la stessa classe CSS ai primi due moduli di testo nella colonna 3.
- Classe CSS: mostra-contatti
Aggiungi una classe CSS al modulo di contatto
Avremo anche bisogno di una classe CSS personalizzata per il modulo del modulo di contatto.
- Classe CSS: modulo di contatto
Nascondi modulo modulo di contatto
Continua aggiungendo una riga aggiuntiva di codice CSS all'elemento principale del modulo del modulo di contatto. Questo ci consentirà di nascondere il modulo prima di fare clic.
| 01 | display: none; |
Aggiungi il modulo di codice alla colonna 3 con codice JQuery e CSS
E per creare la funzione click, avremo bisogno del codice JQuery. Utilizzeremo anche 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;
}
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata al risultato.
Conclusione
In questo articolo, ti abbiamo mostrato come aggiungere un modulo di contatto a discesa all'intestazione personalizzata.
Se hai domande o suggerimenti, sentiti libero di lasciare un commento nella sezione commenti qui sotto.
