Come aggiungere un'etichetta angolare "Nuovo" o "In primo piano" a una voce di menu nell'intestazione Divi personalizzata

Quando crei l'intestazione del tuo sito web, prestare particolare attenzione al comportamento dei tuoi visitatori può aiutare ad aumentare le percentuali di clic. Non solo la tua intestazione dovrebbe avere un bell'aspetto, ma dovrebbe anche aiutare a guidare i visitatori alle pagine più importanti del tuo sito web. Una tecnica utilizzata di frequente consiste nell'aggiungere un invito all'azione all'interno dell'intestazione globale, ma non è l'unica opzione disponibile. Puoi anche optare per un'etichetta d'angolo sulle voci di menu che vuoi mettere in evidenza. In questo tutorial, ti mostreremo come aggiungere un'etichetta "in primo piano" o "nuova" a voci di menu specifiche. Queste etichette angolari aiuteranno a enfatizzare le voci di menu nell'elenco, il che aumenta il cambiamento dei visitatori che sono curiosi e fanno clic. Potrai anche scaricare il modello di intestazione globale!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al concetto di tutorial su schermi di diverse dimensioni.

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. Aggiungi etichette alle voci di menu di WordPress

Vai a Menu in Aspetto

La prima parte di questo tutorial è dedicata all'impostazione delle etichette all'interno del menu di WordPress. Per farlo, vai alla dashboard di WordPress > Menu > Apri il menu principale che stai utilizzando o creane uno nuovo.

Aggiungi etichetta alla voce di menu in primo piano

Successivamente, aggiungeremo un'etichetta in primo piano a una voce di menu di nostra scelta posizionando i tag HTML dell'etichetta davanti alla voce di menu.

• <label class="menu-label featured-label">Featured</label>

  Servizi

Aggiungi etichetta alla nuova voce di menu

Faremo la stessa cosa per un'altra voce di menu a nostra scelta e cambieremo la classe CSS all'interno dei tag insieme alla copia dell'etichetta.

• <label class="menu-label new-label">New</label>

  Corsi gratuiti

2. Vai a Divi Theme Builder

Vai a Divi Theme Builder e aggiungi un'intestazione globale

Ora che le etichette sono state impostate, è ora di passare a Divi. Vai al Divi Theme Builder del tuo sito web e fai clic su "Aggiungi intestazione globale".

Inizia a costruire da zero

Quindi, seleziona "Crea intestazione globale" per essere reindirizzato all'editor del modello.

3. Crea intestazione globale

Impostazioni della sezione

Colore di sfondo

Una volta all'interno dell'editor dei modelli, noterai una sezione. Apri quella sezione e aggiungi un colore di sfondo. Il design dell'intestazione che creeremo va bene con il Tutor Layout Pack, ma sentiti libero di creare qualsiasi design dell'intestazione che desideri, purché includa il Modulo codice (in seguito) in esso.

• Colore di sfondo: #2a3749

Spaziatura

Passa alla scheda di progettazione della sezione e rimuovi tutto il riempimento superiore e inferiore predefinito nelle impostazioni di spaziatura.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Visibilità

A causa della sovrapposizione che aggiungeremo alla nostra riga (come puoi notare nell'anteprima), dovremo impostare gli overflow della sezione su visibili.

• Overflow orizzontale: visibile
• Overflow verticale: visibile

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Colore di sfondo

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e applica un colore di sfondo bianco.

• Colore di sfondo: #FFFFFF

Dimensionamento

Passa alla scheda Progettazione e modifica le impostazioni di dimensionamento di conseguenza:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Applicheremo anche alcuni valori di riempimento personalizzati alle impostazioni di spaziatura.

• Imbottitura superiore: 25px
• Imbottitura inferiore: 25px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Frontiera

Insieme ad alcuni angoli arrotondati.

• Tutti gli angoli: 6px

Scatola ombra

E una sottile ombra di scatola.

• Posizione verticale dell'ombra del riquadro: 16 px
• Colore ombra: rgba(0,0,0,0.07)

Trasforma Traduci

Successivamente, riposizioneremo la riga utilizzando le impostazioni di conversione della trasformazione nella scheda Progettazione.

• Trasforma Traduci a destra: 50 px

straripamenti

Per assicurarci che i nostri menu a discesa vengano visualizzati su schermi di dimensioni più piccole, completeremo le impostazioni delle righe impostando gli overflow su visibili.

• Overflow orizzontale: visibile
• Overflow verticale: visibile

Aggiungi modulo menu alla colonna

Seleziona Menu

È ora di aggiungere il modulo Menu. Seleziona il menu che hai modificato nella prima parte di questo tutorial.

Carica logo

Carica un logo successivo.

Menu Impostazioni testo

Quindi, passa alla scheda Design e modifica le impostazioni del testo del menu come segue:

• Carattere del menu: PT Sans
• Colore del testo del menu: #000000
• Dimensione del testo del menu: 16px
• Allineamento del testo: a destra

Impostazioni del menu a discesa

Modifica anche il colore della linea del menu a discesa.

• Colore linea menu a discesa: #007aff

Icone

Continua modificando il colore dell'icona del menu dell'hamburger nelle impostazioni delle icone.

• Colore icona menu hamburger: #007aff

Dimensionamento

E completa le impostazioni del modulo assegnando una larghezza massima del logo alle impostazioni di dimensionamento.

• Larghezza massima logo: 40%

Aggiungi modulo codice alla colonna

Dopo aver completato l'aspetto generale del tuo modulo menu, continua aggiungendo un modulo codice proprio sotto di esso.

Aggiungi codice CSS

Il seguente codice CSS ci aiuterà a modellare individualmente le etichette dei menu e a creare un design reattivo:

<style>
 
.menu-label {
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;   
border-radius: 5px;    
font-size: 10px;  
padding: 5px 10px;  
}  
  
.featured-label {
background-color: #F9654D;
}
.new-label {
background-color: #007AFF;
}
 
.et_pb_menu .et_pb_menu__menu, 
.et_pb_menu .et_pb_menu__menu>nav, 
.et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu>nav>ul {
width: 100% !important;
}

.et_pb_menu .et_pb_menu__menu>nav>ul>li
{
padding-left: 15px !important;
padding-right: 15px !important;
}

@media all and (min-width: 980px) {
.menu-label {  
position: absolute;
top: -10px;  
padding: 8px 15px;
}

}
@media all and (max-width: 980px) {  
.menu-label {
position: relative;
float: right;
font-size: 12px;  
padding: 5px 20px;   
}
}
  
</style>

4. Salva tutte le modifiche del generatore di temi e il risultato dell'anteprima

Una volta completato il design dell'intestazione, assicurati di salvare tutte le modifiche di Divi Theme Builder prima di visualizzare il risultato sul tuo sito web!

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Pensieri finali

In questo post, ti abbiamo mostrato come evidenziare elementi di menu specifici all'interno dell'intestazione globale creata da Divi. Più specificamente, abbiamo incluso le etichette angolari nel nostro menu WordPress, che vengono visualizzate all'interno di un modulo menu. Questo è un ottimo modo per evidenziare diverse voci di menu all'interno del tuo menu senza creare un viaggio di navigazione travolgente. Sei stato anche in grado di scaricare 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.