Come aggiungere un'intestazione fissa personalizzata per dispositivi mobili utilizzando Divi
Pubblicato: 2017-09-01Avere un'intestazione (o navigazione) fissa sul cellulare può aumentare l'usabilità del tuo sito se eseguita correttamente. La navigazione fissa in generale sembra essere il 22% più veloce da navigare rispetto alle intestazioni standard. In questo mondo tecnologico ad alta velocità, questa è una statistica considerevole anche se era la metà.
E, con Divi, l'aggiunta di un'intestazione fissa al tuo sito può essere eseguita con poche righe di CSS. Divi ti consente già di personalizzare le tue intestazioni mobili utilizzando il Personalizzatore di temi, ma attualmente non esiste un'impostazione integrata per la distribuzione di un'intestazione fissa per dispositivi mobili. In questo tutorial, ti mostrerò come aggiungere un'intestazione fissa personalizzata su dispositivi mobili che includa quanto segue:
- Un logo diverso (più adatto ai dispositivi mobili) rispetto alla versione desktop.
- Un'intestazione più corta per consentire più spazio di visualizzazione disponibile.
- Un'icona di navigazione ad hamburger cliccabile più grande per semplificare l'implementazione del navigatore mobile.
- Uno sfondo semitrasparente che rende l'intestazione ancora più invadente durante la visualizzazione del sito.
Ecco una piccola anticipazione di come sarà l'intestazione.
Il set up
Questa configurazione è simile al mio post precedente su Cambiare il tuo logo su un'intestazione fissa. Prima di iniziare, assicurati di completare quanto segue:
- Assicurati di avere l'ultima versione di Divi installata.
- Crea un menu principale attivo per il tuo sito.
- Dal backend del tuo sito WordPress, vai su Personalizzatore temi > Intestazione e navigazione > Formato intestazione e assicurati di aver selezionato lo stile di intestazione predefinito.
- Crea due versioni del tuo logo che sono entrambe 200×131 e aggiungile alla tua libreria multimediale di WordPress. Un logo verrà utilizzato per l'intestazione principale e uno verrà utilizzato per l'intestazione fissa. Se puoi, rendi la versione dell'intestazione fissa del logo più orizzontale in modo che non venga schiacciata verticalmente sull'intestazione fissa più piccola. Ecco un esempio del logo dell'intestazione principale che sto usando.
Ecco un esempio del mio logo di intestazione fissa. Nota che ho ritagliato il testo per creare un logo più semplice e orizzontale che si adatti bene a un'intestazione con meno altezza. Non è probabile che qualcuno sia comunque in grado di leggere quel testo e il marchio è ancora rappresentato. 
- Imposta il tuo menu principale con le voci di menu.
Poiché aggiungeremo CSS personalizzati per realizzare l'intestazione fissa, non è necessario personalizzare l'intestazione standard o le opzioni dell'intestazione fissa nel Personalizzatore di temi. Ma, se vuoi duplicare le impostazioni per le dimensioni del menu e del logo nel mio esempio, completa quanto segue (questo è completamente facoltativo):
Vai alle impostazioni di intestazione e navigazione nella personalizzazione del tema. Seleziona la barra dei menu principale e aggiorna quanto segue:
Altezza del menu: 105
Altezza massima del logo: 80
Dimensione del testo: 20
Ora torna a Intestazione e navigazione. Seleziona Impostazioni di navigazione fisse e aggiorna quanto segue:
Altezza del menu fisso: 60
Dimensione del testo: 20
Una volta completati questi passaggi, sei pronto per iniziare.
Come aggiungere un'intestazione fissa personalizzata per dispositivi mobili utilizzando Divi
Iscriviti al nostro canale Youtube
Iniziare
Implementeremo questo design inserendo CSS personalizzati nella sezione CSS aggiuntivi in Divi Theme Customizer. Poiché ci rivolgeremo solo ai dispositivi mobili, racchiuderemo tutto il nostro CSS in una media query che limita lo stile a larghezze del browser inferiori a 980 px. Vai avanti e inizia inserendo quanto segue nella casella CSS aggiuntivo:
@media (max-width: 980px) {
}
Creare la tua intestazione fissa mobile usando i CSS
Poiché Divi aggiunge già una classe chiamata "et-fixed-header" quando l'utente scorre la pagina, possiamo usare quel selettore nel nostro CSS personalizzato per creare e modellare la nostra intestazione fissa mobile.
Questo primo gruppo di CSS di seguito rende l'intestazione fissa (o fissa) nella parte superiore della pagina e quindi regola l'altezza dell'intestazione fissa a 55 px. Aggiunge anche un colore di sfondo bianco semitrasparente. Aggiungi quanto segue al tuo CSS aggiuntivo nel Personalizzatore di temi all'interno delle parentesi di Media Query.
/*********************************
style mobile fixed header
*********************************/
.et_fixed_nav #main-header.et-fixed-header {
position: fixed;
background: rgba(255,255,255,0.8); /*change header background color here*/
height: 55px;
}
.et-fixed-header .logo_container {
height: 55px;
}
.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}
Apple suggerisce che tutti gli elementi dell'interfaccia utente cliccabili per le loro app siano di almeno 44 × 44 pixel in modo che i nostri pollici e le nostre dita possano fare clic su di essi facilmente. Questa sarebbe una buona guida per gli elementi nell'intestazione fissa mobile. Il seguente CSS rende l'icona di navigazione 45px.
/*********************************
make mobile fixed header navigation icon larger
*********************************/
.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}
.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
Infine, aggiungiamo più altezza per il nostro logo sull'intestazione fissa in modo da poterlo vedere meglio. Inserisci il seguente CSS:
/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}
Questo è tutto! Abbiamo finito.
Ecco la raccolta finale di CSS per creare la tua intestazione fissa mobile:
@media (max-width: 980px) {
/*********************************
style mobile fixed header
*********************************/
.et_fixed_nav #main-header.et-fixed-header {
position: fixed;
background: rgba(255,255,255,0.8);
height: 55px;
}
.et-fixed-header .logo_container {
height: 55px;
}
.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}
/*********************************
make mobile fixed header navigation icon larger
*********************************/
.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}
.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}
}
Salva le tue impostazioni. Ora hai un'intestazione fissa mobile funzionante.
Cambiare il tuo logo sulla tua intestazione fissa mobile
Se desideri utilizzare un logo diverso per l'intestazione fissa mobile, puoi farlo abbastanza facilmente con alcuni jQuery. Tutto ciò di cui hai bisogno sono gli URL di entrambi i loghi che utilizzerai. Il primo URL dell'immagine del logo dovrebbe essere il logo predefinito che stai già utilizzando per il tuo sito. Il secondo URL dell'immagine del logo dovrebbe essere il logo che desideri utilizzare per l'intestazione fissa per dispositivi mobili. Assicurati di caricare entrambi i loghi nella libreria multimediale e di recuperare gli URL.
Una volta che hai entrambi gli URL, vai alla dashboard di WordPress e vai a Divi > Opzioni del tema > Integrazioni. Trova la casella di input "Aggiungi codice all'inizio del tuo blog" e inserisci il seguente script jQuery:
<script>
var imageUrl = [
'ENTER DESKTOP LOGO IMAGE URL',
'ENTER MOBILE LOGO IMAGE URL',
];
jQuery(window).on('scroll', function() {
var $header = jQuery('header');
var $logo = jQuery('#logo');
if ((jQuery(window).width() < 981) &&
($header.hasClass('et-fixed-header'))) {
return $logo.attr('src', imageUrl[1]);
};
return $logo.attr('src', imageUrl[0])
});
</script>
Ora sostituisci il testo “INSERISCI URL IMMAGINE LOGO DESKTOP” con l'URL del logo che stai attualmente utilizzando per il tuo sito.
Quindi sostituisci il testo “INSERISCI MOBILE LOGO IMAGE URL” con l'url del logo che desideri utilizzare solo per i dispositivi mobili.
Salva le impostazioni e controlla i risultati.
Supporto browser
In questo post, ho creato l'intestazione fissa utilizzando solo CSS, basandomi molto sulla proprietà CSS "position:fixed". Questa proprietà CSS può non essere coerente con le versioni precedenti dei browser mobili, in particolare su iOS Safari e Android. Ma in questi giorni "position:fixed" è abbastanza ben supportato sulle versioni più recenti dei browser mobili (ad eccezione di Opera Mini).
Ci sono altri plugin più robusti e soluzioni JavaScript là fuori, ma ho pensato che fosse meglio darti la semplice versione CSS. Considera di esplorare queste opzioni se questa soluzione non funziona per te.
Pensieri finali
Vale la pena ricordare che le intestazioni fisse mobili possono essere dannose per l'usabilità. Poiché continuano a bloccare la parte superiore del tuo browser in ogni momento, se non stai attento, potresti sprecare preziosi beni immobili senza una buona ragione. Ricorda, non tutti hanno un phablet come questo ragazzo.
Ecco perché è importante personalizzare l'intestazione fissa per i dispositivi mobili assegnandole un'altezza più corta, un logo diverso e un pulsante di navigazione più grande. E aggiungendo alcune righe di CSS al tuo sito web Divi, puoi avere un'intestazione fissa sul cellulare senza dover utilizzare un plug-in di terze parti. Quindi, se ha senso aggiungerne uno al tuo prossimo progetto, fallo. Avere questo tipo di funzionalità può migliorare l'interfaccia utente del tuo sito web.
Non vedo l'ora di sentirti nei commenti.
Saluti!