Avere chiari inviti all'azione sulle tue pagine è una necessità per la maggior parte dei siti web. E quale modo migliore per attirare l'attenzione su alcuni dei tuoi CTA più importanti se non inserendoli nell'intestazione?
Nel tutorial di oggi, ti mostreremo come aggiungere due pulsanti affiancati all'intestazione globale utilizzando Button Builder. temi da Divi. Uno dei pulsanti è primario, l'altro secondario. Potrai anche scaricare gratuitamente il file JSON dell'intestazione globale!
Panoramica
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di dimensioni diverse.
ufficio
1. Accedi a Divi Theme Builder e crea un'intestazione globale
Vai a Divi Theme Builder
Inizia andando su Divi Theme Builder e fai clic su "Aggiungi un'intestazione globale".
Crea un'intestazione globale
Continua facendo clic su "Crea intestazione globale".
2. Costruisci un progetto di intestazione generale
Aggiungi una nuova sezione
spaziatura
Una volta all'interno dell'editor dei modelli, noterai una sezione. Apri le impostazioni della sezione e rimuovi tutto il riempimento superiore e inferiore predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Z Index
Assicurati inoltre di aumentare lo z-index della sezione nelle impostazioni di visibilità. Ciò garantirà che il contenuto l'intestazione globale apparirà nella parte superiore dell'intera pagina e pubblicherà il file contenuto.
- Indice Z: 99999
Aggiungi una nuova linea
Struttura a colonne
Dopo aver completato le impostazioni della sezione, aggiungi una nuova riga alla sezione utilizzando la seguente struttura di colonne:
dimensionamento
Senza aggiungere moduli, aprire i parametri della linea e lasciare che la linea occupi l'intera larghezza del contenitore della sezione.
- Usa una larghezza della grondaia personalizzata: Sì
- Larghezza della grondaia: 1
- Equalizza le altezze delle colonne: Sì
- Larghezza: 100%
- Larghezza massima: 100%
spaziatura
Modifica anche i valori di riempimento a sinistra e a destra della linea.
- Imbottitura sinistra: 2vw (scrivania), 10vw (tablet e telefono)
- Imbottitura destra: 2vw (scrivania), 10vw (tablet e telefono)
Elemento principale
Per centrare tutto contenuto columns, aggiungeremo queste due righe di codice CSS all'elemento principale della riga.
display: flex;align-items: center;
Rimuovi la proprietà di visualizzazione del desktop su tablet e dispositivi mobili.
display: block;
Colonna 1
confine
Continua aprendo le impostazioni nella colonna 1 e aggiungi un bordo destro solo sul desktop.
- Larghezza del bordo destro: 1px (scrivania), 0px (tablet e telefono)
- Colore bordo destro: # d8d8d8
Z Index
Aumenta anche l'indice z della colonna.
- Indice Z: 11
Colonna 2
Elemento principale
Quindi apri le impostazioni per la colonna 2 e aggiungi le seguenti righe di codice CSS all'elemento della colonna principale per trasformarlo in due colonne.
display: grid;grid-template-columns: 50% 50%;
Aggiungi un modulo menu alla colonna 1
Seleziona il menu
È ora di iniziare ad aggiungere moduli! Aggiungi un modulo menu alla colonna 1 e seleziona un menu a tua scelta.
Scarica il logo
Quindi carica un logo.
Fornitura
Passare alla scheda di progettazione del modulo e assicurarsi che vengano applicate le seguenti impostazioni di layout:
- Stile: allineato a sinistra
- Direzione del menu a discesa: in basso
Testo del menu
Quindi modificare le impostazioni del testo del menu.
- Colore link attivo: # ef6f49
- Carattere del menu: Montserrat
- Peso carattere menu: Semi grassetto
- Stile carattere menu: maiuscolo
- Colore testo menu: # 333333 (impostazione predefinita), # ef6f49 (passaggio del mouse)
- Dimensione testo menu: 0.7vw (desktop), 1.8vw (tablet), 2.5vw (telefono)
- Spaziatura lettere menu: 1px
Testo del menu a discesa
Apporta anche modifiche alle impostazioni del testo nel menu a discesa.
- Colore di sfondo del menu a discesa: #ffffff
- Colore della linea nel menu a discesa: # ef6f49
Icone
Quindi, cambia il colore dell'icona del menu dell'hamburger.
- Colore icona menu hamburger: # 000000
dimensionamento
Aggiungi anche una larghezza massima del logo ai parametri di dimensionamento.
- Larghezza massima del logo: 9vw (scrivania), 12vw (tablet), 15vw (telefono)
Menu del logo CSS
E completa le impostazioni del modulo aggiungendo una riga di codice CSS al logo del menu nella scheda avanzata.
margin-right: 10vw;
Aggiungi un modulo di codice alla colonna 1
Aggiungi un codice CSS personalizzato al modulo
Il prossimo e ultimo modulo di cui abbiamo bisogno nella colonna 1 è un modulo di codice. Aggiungi le seguenti righe di codice CSS per personalizzare lo spazio tra le voci di menu:
<style>.et-menu>li {padding-left: 1.5vw !important;padding-right: 1.5vw !important;}</style>
Aggiungi il primo modulo pulsanti alla colonna 2
Aggiungi una copia
Passiamo al modulo successivo! Aggiungi il primo modulo pulsanti e inserisci una copia a tua scelta.
Aggiungi un collegamento
Quindi aggiungere un collegamento al modulo pulsanti.
allineamento
Passare alla scheda di progettazione del modulo e modificare l'allineamento dei pulsanti.
- Allineamento dei pulsanti: a destra
Impostazioni dei pulsanti
Disegna anche il pulsante.
- Usa stili personalizzati per il pulsante: Sì
- Dimensione testo pulsante: 0.8vw (desktop), 1.7vw (tablet), 2.5vw (telefono)
- Colore testo pulsante: # 000000
- Colore di sfondo del pulsante: # edeef0 (predefinito), # d6d7d8 (hover)
- Larghezza bordo pulsante: 0px
- Raggio bordo pulsante: 0px
- Spaziatura lettere pulsante: 2px
- Carattere pulsante: Montserrat
- Peso carattere pulsante: Semi grassetto
- Stile carattere pulsante: maiuscolo
spaziatura
Completa le impostazioni del modulo aggiungendo valori di riempimento personalizzati su schermi di dimensioni diverse.
- Imbottitura superiore: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Imbottitura inferiore: 1vw (scrivania), 2vw (tablet), 3vw (telefono)
- Imbottitura sinistra: 2vw (desktop), 4vw (tablet), 6vw (telefono)
- Imbottitura destra: 2vw (scrivania), 4vw (tablet), 6vw (telefono)
Modulo pulsante clone
Una volta completato il primo modulo pulsante, clonalo.
Modifica collegamento
Apri il modulo dei pulsanti duplicati e modifica l'URL.
Modifica l'allineamento
Modificare anche l'allineamento del modulo.
- Allineamento dei pulsanti: a sinistra
Modifica le impostazioni dei pulsanti
Apporta anche modifiche alle impostazioni dei pulsanti.
- Colore testo pulsante: #ffffff
- Colore di sfondo del pulsante: # ef6f49 (predefinito), # e06945 (hover)
Scala di trasformazione al passaggio del mouse
Completa le impostazioni del pulsante aggiungendo un effetto al passaggio del mouse della scala di trasformazione.
- Destra: 110%
- Basso: 110%
3. Salvare le modifiche al generatore di temi e il risultato dell'anteprima
Una volta completata l'intestazione globale, salva tutte le modifiche apportate al generatore di temi e visualizza il risultato sul tuo sito web!
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.
Considerazioni finali
In questo tutorial, ti abbiamo mostrato come aggiungere due pulsanti affiancati all'intestazione generale utilizzando il generatore di temi di Divi.
Uno dei pulsanti che abbiamo aggiunto è primario, l'altro è secondario. L'aggiunta di pulsanti all'intestazione generale ti aiuta a evidenziare alcune delle CTA più importanti nel tuo sito web. Sei stato anche in grado di scaricare gratuitamente il file JSON! Se hai domande, sentiti libero di lasciare un commento nella sezione commenti qui sotto.
