Costruisci i bei siti Web WordPress utilizzando Divi e Divi Builder

Come aggiungere il menu di hamburger Attivare l'intestazione con Divi

Rifat Tutorial Divi Jun 9, 2021

Divi è un tema estremamente personalizzabile perché ci sono molte opportunità in ogni sezione per implementare nuovi design unici. Un sito Web ha molte sezioni come intestazione, piè di pagina, corpo, ecc. Tra queste, la sezione dell'intestazione è una delle più importanti perché contiene collegamenti a pagine importanti del tuo sito che i potenziali clienti vorranno spesso visitare. Inoltre, fornisce punti chiave sul tuo sito web che incoraggiano il tuo cliente a esplorare ulteriormente. Nel tutorial di oggi, vedrai come puoi aggiungere un menu di hamburger al menu dell'intestazione di navigazione in alto. In genere sappiamo che il menu dell'hamburger viene utilizzato per schermi di piccole dimensioni. Ma oggi lo vedremo in modalità desktop. Non perdiamo altro tempo e iniziamo il nostro tutorial di oggi.

Sbirciata

Oggi creeremo questo design in cui il menu di navigazione sarà nascosto dietro il menu dell'hamburger.

Parte prima: modello di intestazione globale.

Inizieremo andando sul generatore di temi Divi e facendo clic su "Aggiungi intestazione globale". Verrà visualizzato un menu e selezionare "Crea intestazione globale".

Seleziona "Costruisci da zero" e vai avanti.

Scarica Divi Il miglior tema WordPress

Il tema di WordPress più popolare nel mondo e l'ultimo generatore di pagine di wordpress

Scarica Divi

Parte seconda: progettazione globale dell'intestazione

Impostazioni: Sezione principale

Colore di sfondo

Inizieremo ora a progettare l'intestazione. Innanzitutto, cambia il colore di sfondo della sezione iniziale.

  • Colore di sfondo: #f6f9fb

Spaziatura

Quindi, passa alle impostazioni di spaziatura nella scheda Progettazione e azzera l'imbottitura superiore e inferiore.

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

Aggiunta: nuova riga

Andiamo oltre aggiungendo una nuova riga al nostro design. Scegli la citazione della riga nell'immagine.

Dimensionamento

Prima di aggiungere altri moduli, modificare le dimensioni delle righe.

  • Larghezza massima: 1280 px

Spaziatura

Regola l'imbottitura superiore e inferiore.

  • Imbottitura superiore: 5px
  • Imbottitura inferiore: 5px

Aggiunta: Modulo Menu a Colonna

Selezione del menu

Ora aggiungi un modulo menu alla colonna della nuova riga e seleziona un menu.

Aggiungi logo

Ora aggiungi un logo al modulo.

Rimuovi colore di sfondo

Quindi, rimuovi il colore di sfondo predefinito del modulo.

Impostazioni: testo del menu

Dalla scheda Progettazione di questo modulo e modifica le impostazioni del testo del menu di conseguenza:

  • Carattere del menu: Poppins
  • Peso del carattere del menu: semi grassetto
  • Colore del testo del menu: #003e51
  • Dimensione del testo del menu: 16px
  • Allineamento del testo: a destra

Impostazioni: menu a discesa

Modifica le impostazioni del menu a discesa successivamente.

  • Colore linea menu a discesa: #7159c8

Impostazioni: Icone

Modifica anche le impostazioni delle icone.

  • Colore icona carrello: #670fff
  • Colore icona di ricerca: #670fff
  • Colore icona menu hamburger: #670fff

Dimensionamento

Dalle impostazioni di dimensionamento, modifica la larghezza massima per il logo.

  • Larghezza massima logo: 60 px

Spaziatura

Apportare alcune modifiche alla spaziatura.

  • Margine inferiore: 0px

Rendi la sezione appiccicosa

Il nostro manu è stato sistemato ora. Quindi, è il momento di rendere la sezione appiccicosa. Dalle impostazioni della sezione, vai alla scheda Avanzate ed esegui l'impostazione indicata di seguito.

  • Posizione appiccicosa: bastone in alto
  • Offset da elementi appiccicosi circostanti: Sì
  • Stili di transizione predefiniti e permanenti: Sì

Colore di sfondo: modalità adesiva

Ora, modifica il colore di sfondo dell'intera sezione in condizioni adesive.

  • Colore di sfondo: #ffffff

Ombra: modalità adesiva

Applicare un'ombra di riquadro alla sezione anche dalla scheda di progettazione.

  • Colore ombra predefinito: rgba (0,0,0,0)
  • Colore ombra appiccicoso: rgba(0,0,0,0.04)

Parte terza: icona dell'hamburger Toggle

ID CSS modulo menu Menu

Ci concentreremo sulla creazione dell'icona dell'icona dell'hamburger desktop nella parte successiva del tutorial. Innanzitutto, apri le impostazioni del Modulo Menu, vai alla scheda Avanzate e assegna un ID CSS.

  • ID CSS: divi-menu

Aggiungi modulo codice

Ora aggiungi un modulo di codice sotto il modulo del menu.

Codice CSS

Ora aggiungi il tag Style e inserisci il codice all'interno del tag.

.toggle-icon:after {
content: "\61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
 
#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
   
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
   
transform: translateY(50%);  
}
   
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
   
.icon-switch:after {
content: '\4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;    
}

Codice JQuery

Quindi, aggiungi il tag Script e inserisci il codice all'interno del tag.

jQuery(function($){
$(document).ready(function(){

var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');

toggleIcon.insertAfter(desktopMenu);

toggleIcon.click(function(){
    desktopMenu.toggleClass('reveal-menu-items');
  $(this).toggleClass('icon-switch');
});
 
});
});

Ora salva i progressi e torna all'opzione divi builder premendo la croce in alto a destra.

Risultato finale

Poiché abbiamo superato con successo tutti i passaggi, questo è l'aspetto del nostro design di oggi.

Pensieri finali

Puoi essere creativo in molti modi con Divi. Ti dà la completa libertà di progettare il tuo sito web proprio come ne hai bisogno. Oggi hai visto aggiungere un menu di navigazione in alto all'interno del menu dell'hamburger nella vista desktop. Spero che questo ti aiuti a creare titoli più creativi e, se trovi utile questo tutorial, una condivisione con i tuoi amici sarà INCREDIBILE!