Come aggiungere due pulsanti affiancati al tuo Divi Global Header

Avere inviti all'azione chiari 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 Divi's Theme Builder. Uno dei pulsanti è primario, l'altro secondario. Potrai anche scaricare gratuitamente il file JSON dell'intestazione globale!

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 i file

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.

SCARICA

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 crea un'intestazione globale

Vai a Divi Theme Builder

Inizia andando su Divi Theme Builder e fai clic su "Aggiungi intestazione globale".

Crea intestazione globale

Continua facendo clic su "Crea intestazione globale".

2. Crea un design dell'intestazione globale

Aggiungi 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

Indice Z

Assicurati di aumentare anche l'indice z della sezione nelle impostazioni di visibilità. Ciò assicurerà che il contenuto dell'intestazione globale appaia in cima a tutta la pagina e al contenuto del post.

• Indice Z: 99999

Aggiungi nuova riga

Struttura della colonna

Una volta completate le impostazioni della sezione, aggiungi una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza del contenitore della sezione.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Modifica anche i valori di riempimento sinistro e destro della riga.

• Imbottitura sinistra: 2vw (desktop), 10vw (tablet e telefono)
• Imbottitura destra: 2vw (desktop), 10vw (tablet e telefono)

Elemento principale

Per centrare tutto il contenuto della colonna, aggiungeremo queste due righe di codice CSS all'elemento principale della riga.

display: flex;
align-items: center;

Rimuovi la proprietà di visualizzazione desktop su tablet e dispositivi mobili.

display: block;

Colonna 1

Frontiera

Continua aprendo le impostazioni della colonna 1 e aggiungi un bordo destro solo sul desktop.

• Larghezza bordo destro: 1 px (desktop), 0 px (tablet e telefono)
• Colore bordo destro: # d8d8d8

Indice Z

Aumenta anche l'indice z della colonna.

• Indice Z: 11

Colonna 2

Elemento principale

Quindi, apri le impostazioni della colonna 2 e aggiungi le seguenti righe di codice CSS all'elemento principale della colonna per trasformarlo in due colonne.

display: grid;
grid-template-columns: 50% 50%;

Aggiungi modulo menu alla colonna 1

Seleziona Menu

È ora di iniziare ad aggiungere moduli! Aggiungi un modulo menu alla colonna 1 e seleziona un menu a tua scelta.

Carica logo

Carica un logo successivo.

Disposizione

Passa alla scheda Progettazione del modulo e assicurati che siano applicate le seguenti impostazioni di layout:

• Stile: allineato a sinistra
• Direzione del menu a discesa: verso il basso

Testo del menu

Modificare le impostazioni del testo del menu successivamente.

• Colore collegamento attivo: #ef6f49
• Carattere del menu: Montserrat
• Peso del carattere del menu: semi grassetto
• Stile del carattere del menu: maiuscolo
• Colore del testo del menu: #333333 (predefinito), #ef6f49 (al passaggio del mouse)
• Dimensione del testo del menu: 0.7vw (desktop), 1.8vw (tablet), 2.5vw (telefono)
• Spaziatura delle lettere del menu: 1px

Testo del menu a discesa

Apporta anche alcune modifiche alle impostazioni del testo del menu a discesa.

• Colore di sfondo del menu a discesa: #ffffff
• Colore linea 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 alle impostazioni di dimensionamento.

• Larghezza massima logo: 9vw (desktop), 12vw (tablet), 15vw (telefono)

Menu Logo CSS

E completa le impostazioni del modulo aggiungendo una riga di codice CSS al logo del menu nella scheda Avanzate.

margin-right: 10vw;

Aggiungi modulo codice alla colonna 1

Aggiungi codice CSS personalizzato al modulo

Il modulo successivo e ultimo 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 modulo pulsante n. 1 alla colonna 2

Aggiungi copia

Al prossimo modulo! Aggiungi il primo modulo pulsante e inserisci una copia a tua scelta.

Aggiungi collegamento

Aggiungi un collegamento al modulo pulsante successivo.

Allineamento

Passa alla scheda di progettazione del modulo e modifica l'allineamento del pulsante.

• Allineamento dei pulsanti: a destra

Impostazioni dei pulsanti

Stile anche il pulsante.

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 0.8vw (desktop), 1.7vw (tablet), 2.5vw (telefono)
• Colore del testo del pulsante: #000000
• Colore di sfondo del pulsante: #edeef0 (predefinito), #d6d7d8 (al passaggio del mouse)
• Larghezza bordo pulsante: 0px

• Raggio bordo pulsante: 0px
• Spaziatura delle lettere dei pulsanti: 2px
• Carattere pulsante: Montserrat
• Peso del carattere del pulsante: semi grassetto
• Stile carattere pulsante: maiuscolo

Spaziatura

Completa le impostazioni del modulo aggiungendo alcuni valori di riempimento personalizzati su schermi di diverse dimensioni.

• Imbottitura superiore: 1vw (Desktop), 2vw (Tablet), 3vw (Telefono)
• Imbottitura inferiore: 1vw (desktop), 2vw (tablet), 3vw (telefono)
• Imbottitura sinistra: 2vw (Desktop), 4vw (Tablet), 6vw (Telefono)
• Imbottitura destra: 2vw (Desktop), 4vw (Tablet), 6vw (Telefono)

Modulo Pulsante Clona

Una volta completato il primo modulo pulsante, clonalo.

Cambia collegamento

Apri il modulo pulsante duplicato e modifica l'URL.

Cambia allineamento

Modifica anche l'allineamento del modulo.

• Allineamento dei pulsanti: a sinistra

Modifica le impostazioni dei pulsanti

Apportare anche alcune modifiche alle impostazioni dei pulsanti.

• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #ef6f49 (predefinito), #e06945 (al passaggio del mouse)

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%
• Fondo: 110%

3. Salva le modifiche del generatore di temi e visualizza l'anteprima dei risultati

Una volta completata l'intestazione globale, salva tutte le modifiche al generatore di temi e visualizza il risultato sul tuo sito web!

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 tutorial, ti abbiamo mostrato come aggiungere due pulsanti affiancati all'intestazione globale utilizzando il generatore di temi di Divi. Uno dei pulsanti che abbiamo aggiunto è quello principale, l'altro è secondario. L'aggiunta di pulsanti all'intestazione globale ti aiuta a enfatizzare alcuni dei più importanti CTA del tuo sito web. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande, 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.