Vuoi sapere come personalizzare il carrello e le icone di ricerca del modulo Divi Fullwidth Menu?
Il menù del tuo sito web è una delle parti più importanti del tuo sito web a causa dell'impatto diretto che può avere sul modo in cui gli utenti navigano nel tuo sito contenuto.
Una barra dei menu ben progettata può fare una grande differenza semplificando la navigazione, evidenziando le pagine chiave e migliorando l'esperienza utente complessiva.
Il modulo "Menu a larghezza intera" di Divi offre una grande flessibilità consentendo di personalizzare il carrello degli acquisti e le icone di ricerca come meglio credi.
In questo tutorial, ti mostreremo tre diversi design per il modulo "Menu a larghezza intera" con uno stile diverso per il carrello e le icone di ricerca.
Cominciamo!
Panoramica
Ecco un'anteprima di ciò che andremo a progettare.
Primo disegno
Per il primo disegno, posizioniamo una delle icone a sinistra e l'altra a destra selezionando una struttura di menu centrata. Cambieremo anche il colore al passaggio del mouse.
Secondo disegno
Per il secondo disegno, posizioniamo le due icone sul lato destro e cambiamo il colore al passaggio del mouse.
Terzo disegno
Per il terzo design, utilizziamo CSS aggiuntivi per personalizzare le icone.
Leggi anche: Divi: come personalizzare il modulo "Countdown Timer" con una GIF
Personalizzazione del carrello e delle icone di ricerca del modulo "Menu a larghezza intera" di Divi
Crea l'intestazione globale
Per ciascuno dei tre modelli di menu, inizieremo aprendo il generatore di temi di Divi.
Per fare ciò, dalla dashboard di WordPress, vai a Divi > Generatore di temi
quindi fare clic su Aggiungi intestazione globale
Quindi scegli Crea intestazione globale
Inserisci una nuova sezione a larghezza intera.
Quindi elimina la sezione precedente.
Inserisci il modulo Menu a larghezza intera.
Carica il tuo logo dal menu.
Ora siamo pronti per continuare.
Primo disegno
Il nostro primo progetto incorporerà gli effetti al passaggio del mouse integrati di Divi per cambiare il colore del testo e delle icone al passaggio del mouse. Iniziamo.
Guarda anche: Divi: come aggiungere l'icona di un hamburger al modulo Menu
Inizia aprendo le impostazioni del modulo e aggiungendo uno sfondo.
- Sfondo: #fbf9f4
Vai alla scheda Design e seleziona il layout del logo.
- Stile: logo centrato in linea
Ora cambiamo alcune delle impostazioni del testo del menu.
- Colore collegamento attivo: #09148c
- Carattere del menu: rubino
- Peso del carattere del menu: grassetto
- Stile carattere: TT e U (In maiuscolo e sottolineato)
Quindi, imposta il colore del testo del menu, la dimensione del testo e la spaziatura delle lettere.
- Colore testo menu: #000000
- Dimensione testo menu: 21px
- Spaziatura lettere: 1px
Vogliamo aggiungere effetti al passaggio del mouse a questo menu, quindi cambia il colore del testo del menu al passaggio del mouse. Imposta un colore del testo del menu diverso al passaggio del mouse.
- Colore del testo del menu (al passaggio del mouse): #b70018
Quindi vai alle impostazioni Menu a discesa sotto la scheda Design.
- Colore di sfondo del menu a discesa: #fbf9f4
- Colore della linea del menu a discesa: #b70018
- Colore testo menu: #000000
Vogliamo che anche il colore del testo del menu a discesa cambi al passaggio del mouse, quindi seleziona le opzioni al passaggio del mouse per questa impostazione e imposta un colore del testo diverso.
- Colore del testo del menu a discesa (al passaggio del mouse): #b70018
- Colore del collegamento attivo del menu a discesa: #b70018
- Colore di sfondo del menu mobile: #fbf9f4
- Colore testo menu mobile: #000000
Ancora una volta, vogliamo che il colore del testo del menu mobile cambi al passaggio del mouse. Seleziona le opzioni al passaggio del mouse per questa impostazione, quindi imposta un colore del testo diverso al passaggio del mouse.
- Colore del testo del menu mobile (al passaggio del mouse): #b70018
Personalizzazione del carrello e dell'icona di ricerca
Ora aggiungiamo e personalizziamo il carrello degli acquisti e le icone di ricerca. Sotto la scheda Contenuti, vai a Elementi e abilita l'icona del carrello e l'icona di ricerca.
- Mostra icona carrello: SÌ
- Mostra icona di ricerca: SÌ
Torna alla scheda Design e apri le impostazioni dell'icona. Ciascuna delle nostre icone sarà nera e rossa al passaggio del mouse. Innanzitutto, imposta il colore nero.
- Colore icona carrello: #000000
- Colore icona ricerca: #000000
- Colore icona menu hamburger: #000000
Quindi, seleziona l'icona al passaggio del mouse e aggiungi il colore al passaggio del mouse.
- Colore dell'icona del carrello (al passaggio del mouse): #b70018
- Colore icona di ricerca (al passaggio del mouse): #b70018
- Colore icona menu hamburger (al passaggio del mouse): #b70018
Imposta la dimensione dell'icona.
- Dimensione carattere icona carrello: 25 px
- Dimensione carattere icona di ricerca: 25 px
Vai alla sezione Spaziatura, quindi impostare il riempimento superiore e inferiore.
- Imbottitura (superiore e inferiore): 5px
Infine, aggiungeremo un bordo nella parte superiore e inferiore del modulo Menu. Apri le impostazioni del bordo.
- Larghezza bordo superiore: 3px
- Larghezza bordo inferiore: 3px
Disegno finale
Ed ecco il nostro progetto finale.
Secondo disegno
Il nostro secondo progetto utilizzerà gli effetti al passaggio del mouse integrati di Divi per modificare le dimensioni delle icone del menu e del testo al passaggio del mouse. Iniziamo.
Innanzitutto, aggiungeremo una sfumatura di sfondo al modulo Menu. La pendenza ha tre fermate, le impostazioni sono le seguenti:
- Gradiente si ferma:
- 0%: RGB(255,255,255,0)
- 23%: RGB(252,199,76,0.65)
- 82%: RGB(232,119,255,0.32)
Imposta il tipo di sfumatura e la posizione della sfumatura.
- Tipo di gradiente: conico
- Posizione gradiente: in basso
Quindi vai alla scheda Design e imposta il layout (disposizione).
- Stile: centrato
Vai alla sezione Testo del menu per personalizzare il design del testo del menu.
- Colore collegamento attivo: #FFFFFF
- Menu dei caratteri: Syne
- Peso del carattere: grassetto
- Stile carattere menu: TT (maiuscolo)
- Menu Colore testo: #FFFFFF
Ora imposta la dimensione del testo del menu e la spaziatura delle lettere.
- Dimensione testo menu: 20px
- Spaziatura lettere menu: 2px
Poiché desideriamo che la dimensione del testo del menu aumenti al passaggio del mouse, seleziona l'opzione al passaggio del mouse.
- Dimensione testo menu: 22px
Quindi, modifica le impostazioni di progettazione dal menu a discesa.
- Colore di sfondo del menu a discesa: #fcda90
- Colore della riga del menu a discesa: #FFFFFF
- Menu Colore testo: #FFFFFF
- Colore del collegamento attivo del menu a discesa: #FFFFFF
Imposta lo sfondo del menu mobile e il colore del testo.
- Colore di sfondo del menu mobile: #fcda90
- Colore testo menu mobile: #FFFFFF
Personalizzazione del carrello e dell'icona di ricerca
Ora iniziamo a personalizzare le nostre icone di menu. Vai a Elementi sotto la scheda Contenuti e abilita l'icona del carrello e l'icona di ricerca.
- Icona del carrello della scrofa: SÌ
- Mostra icona di ricerca: SÌ
Torna alla scheda Design e apri le impostazioni dell'icona.
- Colore icona carrello: #ffffff
- Colore icona di ricerca: #ffffff
- Colore icona menu hamburger: #ffffff
Le icone avranno un colore arancione scuro al passaggio del mouse. Seleziona l'opzione di copertina e imposta il colore.
- Colore dell'icona del carrello (al passaggio del mouse): #fcac00
- Colore icona di ricerca (al passaggio del mouse): #fcac00
- Colore dell'icona del menu dell'hamburger (al passaggio del mouse): #fcac00
Quindi, imposta la dimensione del carattere per il carrello e le icone di ricerca.
- Dimensione carattere icona carrello Shoppin: 25 px
- Dimensione carattere icona di ricerca: 25 px
Per aumentare la dimensione dell'icona al passaggio del mouse, seleziona l'opzione al passaggio del mouse.
- Dimensione carattere icona carrello (al passaggio del mouse): 30 px
- Dimensione carattere icona di ricerca (al passaggio del mouse): 30 px
Infine, vai alla sezione Spaziatura e impostare l'imbottitura superiore e inferiore.
- Imbottitura (superiore e inferiore): 5px
Disegno finale
Ecco il design finale del nostro secondo layout di menu.
Terzo disegno
Per il nostro progetto finale, aggiungeremo un cerchio di sfondo dietro le icone del carrello usando CSS personalizzato.
Leggi anche: Divi: come creare un menu al passaggio del mouse appiccicoso ed espandibile
Cominciamo.
Innanzitutto, aggiungi un colore di sfondo al modulo.
- Sfondo: #efb6ac
Quindi vai alla scheda Design e apri l'opzione Testo del menu.
- Colore collegamento attivo: #e84322
- Carattere del menu: Cinzel
- Menu Peso carattere: Ultra grassetto
Vogliamo che il colore del testo del menu cambi al passaggio del mouse. Innanzitutto, imposta il colore del testo del menu.
- Menu colore testo (desktop): #e7644a
Fare clic sull'icona al passaggio del mouse e impostare il colore del testo al passaggio del mouse.
- Colore del testo del menu (al passaggio del mouse): #e84322
Quindi, imposta la dimensione del testo del menu e la spaziatura delle lettere.
- Dimensione testo menu: 21px
- Spaziatura lettere menu: 1px
Vogliamo anche che la spaziatura delle lettere si estenda al passaggio del mouse, quindi seleziona l'opzione al passaggio del mouse per le impostazioni.
- Spaziatura lettere menu: 2px
Imposta l'allineamento del testo a sinistra.
- Allineamento del testo: a sinistra
Quindi, modifica le seguenti impostazioni dal menu a discesa.
- Colore di sfondo del menu a discesa: #efb6ac
- Colore della linea del menu a discesa: #e7644a
Leggi anche: Divi: come creare una sezione Testimonianze sotto forma di griglia
- Colore del testo del menu a discesa
- Desktop: #e7644a
- Passa il mouse: #e84322
- Colore del collegamento attivo del menu a discesa: #e84322
Imposta lo sfondo del menu mobile e il colore del testo.
- Colore di sfondo del menu mobile: #efb6ac
- Colore testo menu mobile:
- Desktop: #e7644a
- Passa il mouse: #e84322
Personalizzazione del carrello e dell'icona di ricerca
Per prima cosa, vai su Elementi sotto la scheda Contenuti e abilita l'icona del carrello e l'icona di ricerca.
- Mostra icona carrello: SÌ
- Mostra icona shopping: SÌ
Quindi torna alla scheda Design e apri le impostazioni dell'icona. Imposta il colore dell'icona.
- Colore icona carrello: #e7644a
- Colore icona ricerca: #e7644a
- Colore icona menu hamburger: #e7644a
Il colore di queste icone cambierà al passaggio del mouse. Abilita le opzioni al passaggio del mouse e imposta il colore.
- Colore dell'icona del carrello (al passaggio del mouse): #e84322
- Colore icona di ricerca (al passaggio del mouse): #e84322
- Colore icona menu hamburger (al passaggio del mouse): #e84322
Vogliamo anche che la dimensione dell'icona aumenti al passaggio del mouse. Innanzitutto, imposta la dimensione del carattere dell'icona.
- Dimensione carattere icona carrello: 22 px
- Dimensione carattere icona di ricerca: 22 px
Quindi, imposta la dimensione del carattere dell'icona al passaggio del mouse.
- Dimensione carattere icona carrello (al passaggio del mouse): 26 px
- Dimensione carattere icona di ricerca (al passaggio del mouse): 26 px
Allora vai alla sezione Spaziatura e aggiungi imbottitura superiore e inferiore.
- Imbottitura (superiore e inferiore): 5px
Infine, possiamo aggiungere CSS personalizzati all'intestazione globale per aggiungere i cerchi dietro il carrello e l'icona di ricerca.
Puoi personalizzare questo CSS come desideri in modo che corrisponda al design del tuo modulo Menu.
Apri le impostazioni del modello di intestazione, quindi vai alla scheda Tecnologia e inserisci il seguente CSS personalizzato.
.et_pb_menu__icon.et_pb_menu__cart-button,
.et_pb_menu__icon.et_pb_menu__search-button {
padding: 2% 2% 2% 2%;
background-color:#F7D5C2;
border-radius: 50%;
}
Disegno finale
Questo completa il design del nostro terzo e ultimo layout del menu.
Risultato finale
Ora diamo un'occhiata al design finale dei tre diversi menu.
Primo disegno
Scarica DIVI ora!!!
Secondo disegno
Terzo disegno
Scarica DIVI ora!!!
Conclusione
Il modulo Menu di Divi, il carrello e le icone di ricerca sono facili da personalizzare per creare layout e design unici per il tuo sito web.
Puoi facilmente migliorare l'aspetto dei tuoi moduli Menu utilizzando le impostazioni Divi integrate come effetti al passaggio del mouse e CSS personalizzati.
Speriamo che questo tutorial ti ispiri per i tuoi prossimi progetti Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet.
Non esitate a consultare anche la nostra guida sul Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
