Cambiare il tuo logo su un'intestazione fissa in Divi

È sempre una buona idea creare diverse versioni del tuo logo con colori e dimensioni diverse. Ad esempio, probabilmente dovresti avere una versione chiara e scura del tuo logo in modo che appaia bene su diversi colori di sfondo. E avere una versione più piccola (meno verticale e più orizzontale) del logo per quelle aree anguste del tuo sito web. Uno dei posti migliori per utilizzare una versione diversa del tuo logo è sull'intestazione fissa (o adesiva).

In molti casi, l'intestazione fissa avrà bisogno di uno stile diverso dall'intestazione principale. Se mantieni lo stesso logo, sei limitato nello stile dell'intestazione fissa. È qui che torna utile avere un logo personalizzato. Con un logo separato personalizzato appositamente per l'intestazione fissa, puoi modellarlo come preferisci. Questo ti dà un maggiore controllo sul design del tuo sito.

In questo post ti mostrerò come:

1. Cambia il tuo logo con uno diverso quando l'intestazione fissa è attiva. (Questo può essere fatto con una singola riga di CSS)
2. Inverti il ​​colore del tuo logo sulla tua intestazione fissa.
3. Aggiungi un fantastico effetto di transizione quando cambi il tuo logo sull'intestazione fissa.
4. Cambia e sposta il logo dell'intestazione centrato sul layout predefinito (allineato a sinistra) sull'intestazione fissa.

Iniziamo.

Sbirciata

Ecco una piccola anticipazione di ciò che realizzeremo in questo tutorial.

Ecco come appare un semplice interruttore del logo.

Ecco l'interruttore del logo con un effetto di transizione.

Ecco il logo che cambia posizione rispetto allo stile dell'intestazione centrata.

Il set up

Prima di fare qualsiasi altra cosa, assicurati di completare quanto segue:

1. Installa l'ultima versione di Divi.
2. Implementa un tema Divi Child attivo. Se hai bisogno di aiuto con l'impostazione di un tema figlio, è trattato in questo post. Se hai bisogno di ulteriore aiuto. Si prega di contattare il nostro team di supporto.
3. 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.

   

4. Imposta il tuo menu principale con le voci di menu.

Una volta completati questi passaggi, sei pronto per iniziare.

Cambiare il tuo logo su un'intestazione fissa in Divi

Iscriviti al nostro canale Youtube

Cambiare il logo sulla tua intestazione fissa usando i CSS

Prima di arrivare al nostro CSS personalizzato, impostiamo le impostazioni del nostro menu all'interno del personalizzatore del tema. 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.

Quindi torna alle impostazioni di intestazione e navigazione nel personalizzatore 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

Puoi aggiungere il resto delle tue impostazioni per adattarle al design del tuo sito. Potrebbe essere necessario regolare l'altezza del menu e del logo in base alle proprie esigenze. Tuttavia, ti suggerisco di mantenere queste impostazioni se desideri aggiungere l'effetto di transizione in modo che il dimensionamento sia accurato. Puoi sempre tornare indietro e cambiarlo più tardi.

Inserisci snippet CSS per cambiare logo su intestazione fissa

Uno dei modi più semplici per cambiare l'immagine del tuo logo con un'altra sull'intestazione fissa è utilizzare la proprietà CSS "contenuto". Se hai familiarità con i CSS, questo è normalmente ciò che viene utilizzato quando si aggiunge contenuto a uno pseudo elemento :before o :after. In questo caso lo useremo per inserire nuovi contenuti (l'immagine del tuo logo) per sostituire l'immagine del logo corrente.

Per fare ciò, vai su Personalizzatore di temi > CSS aggiuntivo e inserisci il seguente CSS.

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL);
}

Ora sostituisci il testo che dice "INSERIRE NUOVA IMMAGINE LOGO" con l'immagine del tuo logo reale.

Per ottenere l'URL, vai alla tua libreria multimediale dalla dashboard di WordPress e fai clic sull'immagine che desideri aggiungere. Puoi trovare l'URL in alto a destra nella schermata che si apre.

Questo è tutto. Questa semplice soluzione sostituirà il tuo logo con uno nuovo solo quando l'intestazione fissa è attiva mentre scorri la pagina. Il logo predefinito tornerà quando si torna all'inizio della pagina.

Invertire il colore del tuo logo

Se stai solo cercando di aggiungere una versione scura o chiara dello stesso logo sull'intestazione fissa, questa soluzione potrebbe piacerti.

Usando la proprietà invert CSS, puoi invertire il colore del tuo logo con poche righe di CSS. Ad esempio, se il tuo logo è nero, invertendo il colore del logo lo farebbe diventare bianco. E se il logo è bianco, si invertirà in nero. Per aggiungere questo stile al tuo logo, vai su Personalizzatore tema> CSS aggiuntivo e aggiungi il seguente CSS (assicurati di eliminare o commentare il CSS aggiunto in precedenza):

/*********************************
Invert Logo color on fixed header
*********************************/
.et-fixed-header #logo {
-webkit-filter: invert(100%);
filter: invert(100%);
}

Controlla il risultato. Questo è un logo nero che viene invertito in una versione bianca.

Aggiunta di un effetto di transizione quando si cambia il logo sull'intestazione fissa

Probabilmente ti starai chiedendo perché tratterò un altro modo (più solido) per cambiare il tuo logo su un'intestazione fissa. Il motivo principale è che possiamo aggiungere un fantastico effetto di transizione al logo quando "passa" all'intestazione fissa. Per fare ciò abbiamo bisogno di entrambe le immagini del logo l'una accanto all'altra per lo styling.

Aggiungere il tuo nuovo logo al file Header.php

Per aggiungere un'altra immagine del logo alla tua intestazione, dobbiamo aggiungerla al file header.php. Usando un client FTP (come FileZilla), vai alla radice dei tuoi file Divi Theme e fai una copia del file header.php.

Incolla la copia del file header.php nella radice della cartella del tema figlio.

Successivamente, utilizzando il tuo editor di testo preferito, apri il file header.php. Individua il codice html per il collegamento che contiene l'immagine del logo avvolta nel div con la classe "logo_container".

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

Aggiungeremo uno snippet di codice simile per visualizzare un'altra immagine nell'intestazione. Copia e incolla il seguente codice direttamente sotto di esso.

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="INSERT NEW LOGO IMAGE URL" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" class="second-logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

Nota che questa è una copia aggiornata del codice originale sopra con due differenze. Innanzitutto, ha un nuovo URL di origine dell'immagine che dovrai aggiungere. E in secondo luogo, è una classe chiamata "secondo logo".

Dalla dashboard di WordPress, vai alla tua libreria multimediale e ottieni l'URL per la nuova immagine del logo che desideri aggiungere.

Quindi torna al tuo file header.php. Trova lo snippet di codice che hai appena creato e sostituisci il testo che dice "INSERIRE QUI URL IMMAGINE LOGO NUOVO" con l'URL dell'immagine reale.

Salva il tuo file header.php.

Ora hai due loghi che verranno visualizzati uno accanto all'altro sul tuo sito. È probabile che tu non voglia lasciarlo così, quindi aggiungiamo il CSS personalizzato necessario per rendere il nostro effetto di transizione.

Aggiunta di una transizione interessante quando il logo si accende sull'intestazione fissa

Vai a Theme Customizer > CSS aggiuntivo ed elimina (o commenta) il codice dalla sezione precedente di questo post (se applicabile). Quindi aggiungi il seguente CSS personalizzato:

@media all and (min-width: 980px){
/*********************************
show, hide, and transition logos for primary and fixed nav;
must have second logo in header.php file for this to work
**********************************/
#logo {
opacity:1;
display:inherit;
margin: 0 0 0 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#logo.second-logo {
opacity:0;
margin: 0 0 -200px -130px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.et-fixed-header #logo {
opacity: 0;
margin: -200px 0px 0 0px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;

}
.et-fixed-header #logo.second-logo {
opacity:1;
margin: 0 0 0 -90px !important;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

/*********************************
hides overflow on header container so logo doesn't show outsite header on transition
*********************************/
#main-header {
overflow: hidden;
}
}

Ho commentato il codice CSS per farti sapere cosa sta facendo il codice. In breve, il CSS sta diminuendo e aumentando l'opacità di ciascuno dei loghi spostandoli al di fuori dell'intestazione. Quindi, hai un effetto di transizione piuttosto interessante per il tuo logo quando vai alla tua intestazione fissa.

Modifica della posizione del logo dell'intestazione centrata a sinistra per l'intestazione fissa

Se ti piace lo stile dell'intestazione centrata per visualizzare l'intestazione, potresti voler controllare la posizione di quel logo sull'intestazione fissa. Per me, preferisco avere lo stile di intestazione predefinito (con il logo allineato a sinistra) sulla mia intestazione fissa. Il motivo principale è che avere il logo nella parte superiore della navigazione tende a rendere l'intestazione fissa un po' troppo alta quando si scorre per visualizzare una pagina.

Per effettuare il passaggio da un logo centrato a un logo allineato a sinistra, puoi aggiungere il seguente CSS personalizzato nella casella CSS aggiuntivo nella Personalizzazione del tema. Per prima cosa aggiungi il codice per cambiare il logo in modo semplice e veloce:

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL HERE);
}

Non dimenticare di aggiungere l'URL dell'immagine del tuo logo.

Quindi aggiungi quanto segue per regolare il posizionamento del logo:

@media all and (min-width: 980px){
/*********************************
change centered logo on centered header style to default layout when fixed header is active
*********************************/
.et_header_style_centered header#main-header.et-fixed-header .logo_container {
float: left;
width: 20%;
}

.et_header_style_centered #main-header.et-fixed-header div#et-top-navigation {
width: 80%;
float: right;
height: 70px;
line-height: 70px;
text-align: right;
}
.et-fixed-header #top-menu-nav {
float: none!important;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
}

Nota: assicurati di eliminare qualsiasi CSS precedente da questo post che sarebbe in conflitto.

Questo è tutto. Controlla il risultato.

In chiusura

È difficile non essere orgogliosi di un buon logo. Quindi, non accontentarti di una piccola versione non idonea o, peggio ancora, di nascondere il tuo logo sull'intestazione fissa. Sostituiscilo per una versione personalizzata con una transizione graduale che i tuoi clienti apprezzeranno.

in arrivo

Per impostazione predefinita, Divi non include un'intestazione fissa sui dispositivi mobili. Ma aggiungerne uno è davvero semplice. Nel mio prossimo post ti mostrerò come aggiungere un'intestazione fissa personalizzata con un logo diverso sul cellulare. Ecco una piccola anticipazione.

Non vedo l'ora.

Non dimenticare di pubblicare i tuoi commenti qui sotto. In caso di problemi relativi all'impostazione e alla modifica dei file del tema figlio, contattare il nostro team di supporto.

Saluti.