Come mostrare visivamente le categorie dei post del blog nell'intestazione Divi

Quando crei la tua intestazione globale, è molto probabile che includi una voce di menu del blog. Se non hai molte categorie di post di blog sul tuo sito web, scegliere una voce di menu del blog potrebbe essere sufficiente. Tuttavia, se disponi di una serie di categorie diverse e desideri evidenziare ognuna di esse, potresti provare un approccio diverso, ad esempio mostrare visivamente ogni categoria di blog all'interno di un menu a discesa.

In questo tutorial, ti mostreremo esattamente come farlo usando Divi's Theme Builder. Creeremo il menu a discesa utilizzando gli elementi e le opzioni incorporati di Divi e lo combineremo con del codice che ci consentirà di posizionare il menu a discesa all'interno della voce di menu del blog. Potrai anche scaricare gratuitamente il file JSON!

Andiamo ad esso.

Anteprima

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

Desktop

Mobile

Scarica l'intestazione globale GRATUITAMENTE

Per mettere le mani sull'intestazione globale gratuita, devi prima scaricarla 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!

Come caricare il file JSON

Decomprimi la cartella compressa che sei riuscito a scaricare sopra. Quindi, vai al tuo sito Web WordPress> Divi> Libreria Divi e carica il JSON.

Una volta salvato il layout nella libreria Divi, puoi accedere al Divi Theme Builder e importare il layout salvato facendo clic su "Aggiungi intestazione globale" o "Aggiungi intestazione personalizzata" e selezionando "Crea intestazione globale/personalizzata". Vai alla scheda "I tuoi layout salvati" nella libreria Divi, seleziona il layout che hai caricato nel passaggio precedente e salva tutte le modifiche di Divi Theme Builder.

Per avere un menu funzionante subito, ti verrà richiesto di seguire la prima parte di questo tutorial di seguito; aggiungendo le classi CSS alle voci di menu a livello individuale. Dovrai anche abilitare una delle classi CSS all'interno del Modulo Codice come mostrato nella parte 5 di questo tutorial.

1. Aggiungi la classe CSS alla voce di menu del blog

Vai a Menu in Aspetto

Nella prima parte di questo tutorial, aggiungeremo due classi CSS personalizzate alla voce di menu della pagina del blog all'interno del menu di WordPress. Per farlo, vai ai menu all'interno della dashboard di WordPress.

Abilita opzione classe CSS

Nella parte superiore della pagina, assicurati di abilitare l'opzione Classi CSS all'interno dell'opzione dello schermo.

Aggiungi classi CSS alla voce di menu del blog

Quindi, trova la voce di menu del tuo blog e aggiungi due classi CSS. Assicurati di lasciare uno spazio tra le classi CSS.

• Classi CSS: primo livello primo livello-1

2. Crea un'intestazione personalizzata con Divi's Theme Builder

Vai a Divi Theme Builder

Una volta che la voce di menu Classi CSS è a posto, è il momento di passare a Divi. Vai a Divi Theme Builder e seleziona "Aggiungi intestazione globale/personalizzata".

Inizia a creare un'intestazione globale

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

Impostazioni della sezione

Colore di sfondo

All'interno dell'editor del modello, noterai una sezione. Apri quella sezione e applica un colore di sfondo bianco.

• Colore di sfondo: #FFFFFF

Spaziatura

Passa alla scheda Design e rimuovi tutte le imbottiture superiori e inferiori predefinite.

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

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento di conseguenza:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 95%
• Larghezza massima: 100%

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

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

Aggiungi modulo menu alla riga

Seleziona Menu

Quindi, aggiungi un modulo menu e seleziona il menu che hai modificato nella prima parte di questo tutorial.

Carica logo

Carica un logo successivo.

Menu Impostazioni testo

Passa alla scheda Progettazione e modifica le impostazioni del testo del menu come segue:

• Carattere del menu: Roboto Mono
• Stile del carattere del menu: maiuscolo
• Colore del testo del menu: #000000
• Dimensione del testo del menu: 18px
• Spaziatura delle lettere del menu: -1px

Impostazioni del menu a discesa

Cambia anche il colore della linea del menu a discesa.

• Colore linea menu a discesa: #FFFFFF

Impostazioni icone

Quindi, cambia il colore dell'icona del menu dell'hamburger nelle impostazioni delle icone.

• Colore icona menu hamburger: #000000

Classe CSS

E completa le impostazioni del modulo aggiungendo una classe CSS.

• Classe CSS: menu di categoria

3. Crea un design a discesa per il blog

Aggiungi riga #2

Struttura della colonna

Una volta che la riga, contenente il modulo Menu, è a posto, è il momento di creare il menu a discesa contenente le categorie visual blog. Per fare ciò, aggiungi una nuova riga con due colonne di uguali dimensioni. L'intera riga sarà il nostro menu a discesa per la voce di menu del blog.

Colore di sfondo

Apri le impostazioni della riga e usa un colore di sfondo bianco.

• Colore di sfondo: #FFFFFF

Dimensionamento

Passa alla scheda Design e modifica le impostazioni di dimensionamento come segue:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì
• Larghezza: 80vw (desktop), 100% (tablet e telefono)
• Larghezza massima: 50vw (desktop), 100% (tablet e telefono)

Spaziatura

Modificare i valori di riempimento successivo.

• Imbottitura superiore: 10px
• Imbottitura inferiore: 10px
• Imbottitura sinistra: 10px
• Imbottitura inferiore: 10px

Scatola ombra

Stiamo usando anche un'ombra sottile della scatola.

• Forza sfocatura ombra scatola: 30 px
• Colore ombra: rgba(0,0,0,0.13) (Desktop), rgba(0,0,0,0) (Tablet e telefono)

Classe CSS

Quindi, aggiungeremo due classi CSS alla nostra riga. Queste classi CSS (in combinazione con del codice in seguito) ci aiuteranno a posizionare l'intero contenitore di righe all'interno della voce di menu del blog come un menu a discesa.

• Classe CSS: menu a discesa menu a discesa-1

Posizione

Passa alla scheda Avanzate e riposiziona anche la riga.

• Posizione: assoluta (desktop), relativa (tablet e telefono)
• Posizione: in alto a destra
• Offset verticale: 100 px (desktop), 0 px (tablet e telefono)
• Indice Z: 11

Elemento principale di entrambe le colonne

Ultimo ma non meno importante, completa le impostazioni della riga aggiungendo una riga di codice CSS all'elemento principale di ogni colonna. Questo ci aiuterà a mantenere la struttura a colonne su schermi di dimensioni più piccole.

width: 50% !important;

Aggiungi modulo di testo alla colonna 1

Aggiungi il nome della categoria

È ora di mostrare visivamente le categorie del nostro blog! Aggiungi un primo modulo di testo alla colonna 1 e aggiungi il titolo della categoria alla casella del contenuto.

Aggiungi il collegamento alla categoria

Aggiungi un collegamento alla tua categoria successiva.

Sfondo sfumato

Quindi, applica il seguente sfondo sfumato:

• Colore 1: rgba(0,0,0,0.08)
• Colore 2: #0a0a0a
• Posizione di partenza: 60%
• Posizione finale: 60%
• Posiziona il gradiente sopra l'immagine di sfondo: Sì

Immagine di sfondo

Carica un'immagine di sfondo a tua scelta. Se vuoi lo stesso risultato di questo tutorial, carica una delle illustrazioni che trovi nella cartella che hai potuto scaricare all'inizio di questo post.

• Dimensione dell'immagine di sfondo: dimensione reale
• Ripeti immagine di sfondo: Ripeti X (orizzontale)

Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Roboto Mono
• Peso del carattere del testo: grassetto
• Colore del testo: #ffffff
• Dimensione del testo: 1.9vw (desktop), 3vw (tablet), 3.5vw (telefono)
• Spaziatura delle lettere del testo: -0.1vw
• Altezza riga di testo: 1em

Dimensionamento

Modificare le impostazioni di dimensionamento successivo.

• Larghezza: 99%
• Allineamento del modulo: a sinistra

Spaziatura

Modifica anche le impostazioni di spaziatura.

• Margine inferiore: 10px
• Margine destro: 1% (tablet e telefono)
• Imbottitura superiore: 60% (desktop), 40% (tablet e telefono)
• Imbottitura inferiore: 4%
• Imbottitura sinistra: 2%

Elemento principale CSS

E completa le impostazioni del modulo aggiungendo una riga di codice CSS all'elemento principale del modulo.

cursor: pointer;

Clona modulo testo e posiziona duplicato nella colonna 2

Una volta completato il primo modulo di testo, clona il modulo e posiziona il duplicato nella colonna 2.

Modifica modulo testo nella colonna 2

Cambia il nome e il collegamento della categoria

Modifica il titolo della categoria e il link nel modulo duplicato.

Cambia immagine di sfondo

Cambia anche l'immagine di sfondo. Puoi trovare l'illustrazione nella cartella di download.

• Ripetizione immagine di sfondo: nessuna ripetizione

Cambia taglia

Modificare l'allineamento del modulo nelle impostazioni di dimensionamento successivo.

• Allineamento del modulo: a destra

Clona entrambi i moduli una volta

Una volta completati entrambi i moduli (uno in ogni colonna), puoi clonarli entrambi una volta.

Cambia i nomi e i collegamenti delle categorie

Modifica i nomi delle categorie e i collegamenti all'interno dei moduli duplicati.

Cambia le immagini di sfondo

Insieme alle immagini di sfondo. Puoi trovare le nuove illustrazioni nella cartella che hai potuto scaricare all'inizio di questo post.

• Dimensione immagine di sfondo: adatta
• Ripetizione immagine di sfondo: nessuna ripetizione

• Dimensione immagine di sfondo: adatta
• Posizione immagine di sfondo: in basso a destra

4. Aggiungi codice CSS e JQuery

Aggiungi modulo codice sotto il modulo menu nella riga n. 1

Una volta completata la riga contenente i nomi delle categorie del menu a discesa, aggiungi un modulo codice alla prima riga della sezione, proprio sotto il modulo menu.

Aggiungi codice CSS

Aggiungi le seguenti righe di codice CSS al Modulo di codice:

<style>
/* Enable class below once you're done editing the menu */  
  
/*  
.dropdown-menu {
visibility: hidden;
}*/
  
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;

-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);  
}
  
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}
  
.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
}  

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}

.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #00C995; 
}  
  
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\37';
color: black;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\36';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
visibility: visible;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
</style>

Aggiungi codice JQuery

Insieme ad alcuni coe JQuery che ti aiuteranno a posizionare la riga, contenente le categorie, all'interno della voce di menu del tuo blog. Assicurati di inserire il codice JQuery tra i tag di script come puoi notare nella schermata di stampa qui sotto.

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

$('.dropdown-menu').each(function(i){
  
i = i + 1;
  
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
  
});  
  
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');

$firstLevel.off('click').click(function() {

$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 

$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');

var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();

var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  

});      
  
});
});

5. Abilita la classe CSS una volta terminata la personalizzazione degli elementi del menu a discesa del blog

Non appena hai finito di personalizzare tutti gli elementi a discesa, ti rimane una cosa da fare: nascondere l'intera riga contenente gli elementi del menu a discesa. Questo, in combinazione con una funzione di caricamento all'interno del nostro codice, impedirà la visualizzazione del menu a discesa durante il caricamento della pagina. Una volta abilitata questa classe CSS, non vedrai più la seconda riga all'interno di Visual Builder, ma potrai accedervi in ​​modalità wireframe e/o disabilitare temporaneamente la classe CSS quando apporti modifiche al menu a discesa. Per abilitare la classe, rimuovi le parentesi '/* */' all'inizio e alla fine della classe CSS.

6. Aggiunta di altri menu a discesa di categorie di post

Clona riga categoria blog

Se stai cercando di aggiungere più menu a discesa di categoria, puoi clonare l'intera riga di menu a discesa che hai creato.

Accedi alla riga duplicata nel pannello dei livelli

Poiché stiamo utilizzando il posizionamento assoluto sul desktop, le righe verranno posizionate una sopra l'altra. Per accedere alle righe singolarmente, apri il pannello dei livelli all'interno di Divi Builder e apri le impostazioni della riga duplicata.

Modifica classe CSS riga duplicata

Modifica la seconda classe CSS nella riga duplicata. Assicurati che il numero che stai utilizzando sia consecutivo.

• Classe CSS: menu a discesa menu a discesa-2

Aggiungi classi CSS alle voci di menu in Aspetto

Quindi, torna al menu di WordPress all'interno della dashboard e aggiungi le seguenti classi CSS a un'altra voce di menu e il gioco è fatto:

• Classi CSS: primo livello primo livello-2

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 post, ti abbiamo mostrato come essere creativo con l'intestazione Divi e la voce di menu del blog. Più specificamente, ti abbiamo mostrato come includere visivamente le categorie del blog come voci di menu a discesa che hanno un bell'aspetto su tutte le dimensioni dello schermo. Questo approccio ti aiuterà a evidenziare ogni diversa categoria di blog pur mantenendo un aspetto minimale a prima vista. 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.