Quando crei un'intestazione personalizzata per il tuo sito web, utilizzando il generatore di temi di Divi, ti ritroverai a cercare il modo perfetto per aggiungere un AAL (invito all'azione). 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 con te, senza dover scorrere verso il basso. In questo tutorial, ti mostreremo come creare un file modulo di contatto menu a discesa utilizzando il codice Divi e JQuery e CSS. Potrai anche scaricare gratuitamente il file JSON!
Andiamo.
Panoramica
Prima di immergerci nel tutorial, diamo un'occhiata al risultato su schermi di dimensioni diverse.
1. Vai a Divi Theme Builder e inizia a creare un'intestazione globale
Vai a Divi Theme Builder
Inizia andando su Divi Theme Builder nel backend del tuo sito WordPress.
Crea un'intestazione globale
Fai clic su "Aggiungi intestazione globale" e seleziona "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 generale, noterai una sezione. Apri questa sezione e usa un colore di sfondo bianco.
- Colore di sfondo: #FFFFFF
spaziatura
Quindi rimuovere l'imbottitura superiore e inferiore predefinita dalla sezione.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Scatola delle ombre
Applicare anche una leggera tonalità di scatola.
- Resistenza della sfocatura dell'ombra della scatola: 50px
- Colore dell'ombra: rgba (0,0,0,0,15)
Aggiungi una nuova linea
Struttura a colonne
Continua ad aggiungere una nuova riga alla sezione utilizzando la seguente struttura di colonne:
dimensionamento
Senza aggiungere più moduli, aprire i parametri di linea e modificare i parametri di dimensionamento come segue:
- Usa una larghezza della grondaia personalizzata: Sì
- Larghezza della grondaia: 1
- Equalizza le altezze delle colonne: Sì
- Larghezza: 95%
- Larghezza massima: 100%
spaziatura
Quindi aggiungi un'imbottitura superiore e inferiore personalizzata.
- 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;
Colonna 2 Z Index
Ci assicuriamo inoltre che la seconda colonna abbia un valore z-index più alto per scopi reattivi.
- Indice Z: 12
Aggiungi un modulo immagine alla colonna 1
Scarica il logo
È ora di iniziare ad aggiungere moduli! Inizia con un modulo immagine nella colonna 1. Carica un logo.
allineamento
Quindi modificare l'allineamento del modulo.
- Allineamento dell'immagine: centro
dimensionamento
Cambia anche la larghezza.
- Larghezza: 3vw (desktop), 5vw (tablet), 7vw (telefono)
Aggiungi un modulo menu alla colonna 2
Seleziona il menu
Nella seconda colonna, aggiungeremo un modulo di menu.
Fornitura
Passa alla scheda di progettazione del modulo e modifica lo stile del layout.
- Stile: centrato
Impostazioni del testo del menu
Quindi modificare le impostazioni del testo nel menu del modulo.
- Carattere menu: Apri senza
- Peso carattere menu: Semi grassetto
- Colore testo menu: # 000000
- Dimensione testo menu: 0.8vw (desktop), 2vw (tablet), 3vw (telefono)
- Spaziatura lettere menu: 1px
Impostazioni del testo del menu a discesa
Quindi cambia il colore della linea nel menu a discesa.
- Colore della riga del menu a discesa: # 007dff
Icone
Con il colore dell'icona del menu hamburger.
- Colore icona menu hamburger: # 007dff
Aggiungi il modulo di testo 1 alla colonna 3
Aggiungi una copia
Passiamo al terzo modulo! Aggiungi un modulo di testo con una copia a tua scelta.
Colore di sfondo
Quindi 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 testo: Apri Sans
- Carattere del testo: grassetto
- Colore del testo: #ffffff
- Dimensioni del testo: 0.8vw (desktop), 2vw (tablet), 3vw (telefono)
- Allineamento del testo: centro
dimensionamento
Quindi modificare i parametri di dimensionamento del modulo.
- Larghezza: 33%
- Allineamento del modulo: centro
spaziatura
Quindi aggiungi un'imbottitura superiore e inferiore personalizzata.
- Imbottitura superiore: 0.8vw (desktop), 2vw (tablet e telefono)
- Imbottitura inferiore: 0.8vw (scrivania), 2vw (tablet e telefono)
confine
E completa i parametri del modulo aggiungendo un raggio del bordo.
- Tutti gli angoli: 100 px
Aggiungi il modulo di testo 2 alla colonna 3
Aggiungi un simbolo all'area del contenuto
Passiamo al modulo successivo, che è un altro modulo di testo. Aggiungi la seguente freccia nell'area dei contenuti: "▼".
Impostazioni del testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:
- Carattere testo: Apri Sans
- Colore del testo: # 007fff
- Dimensione del testo: 3vw
- Altezza della riga di testo: 0em
- Allineamento del testo: centro
Z Index
Aumentiamo anche l'indice z del modulo.
- Indice Z: 11
Aggiungi il modulo del modulo di contatto alla colonna 3
Ora puoi aggiungere un modulo di contatto proprio nella parte inferiore del modulo di testo che contiene la freccia. Questo modulo è abbastanza semplice da usare, quindi dovrai personalizzare quali campi vuoi rendere visibili.
3. Personalizza gli elementi per creare un modulo di contatto con un clic
Aggiungi l'altezza della colonna 3
Una volta che tutte le mod sono a posto, è il momento di creare l'effetto. Il primo passo per ottenere il risultato desiderato è aprire le impostazioni nella colonna 3 e aggiungere un'altezza personalizzata reattiva nella scheda avanzata.
Ufficio:
height: 3vw;
tablet:
height: 5vw;
Telefono:
height: 6vw;
Aggiungi una classe CSS al pulsante e alla freccia
Quindi 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 Modulo di contatto.
- Classe CSS: contatti-modulo-form
Nascondi il modulo del modulo di contatto
Continua aggiungendo un'ulteriore riga di codice CSS all'elemento principale del modulo Modulo di contatto. Questo ci permetterà di nascondere il modulo prima di fare clic.
display: none;
Aggiungi un modulo di codice alla colonna 3 con JQuery e codice CSS
E per creare la funzione clic, avremo bisogno di un po 'di codice JQuery. Useremo 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 a come appare su schermi di dimensioni diverse.
ufficio
Cosa ricordare
In questo articolo, ti abbiamo mostrato come aggiungere un modulo di contatto a discesa alla tua intestazione personalizzata. È un ottimo modo per attivare subito l'azione.
