Le intestazioni adesive sono un ottimo modo per mantenere sempre visibile il menu di navigazione del tuo sito Web, garantendo un facile accesso a collegamenti e informazioni importanti. Tuttavia, un'intestazione statica può diventare monotona nel tempo e potresti voler cambiare il suo colore sullo scorrimento per creare un'esperienza utente più dinamica e coinvolgente. In questa guida, ti mostreremo come cambiare il colore di un'intestazione adesiva sullo scorrimento in Elementor , utilizzando passaggi semplici e facili da seguire. Che tu sia un principiante o un utente esperto di Elementor, puoi facilmente implementare questo effetto e dare al tuo sito web un aspetto fresco e moderno.

Metodo di progettazione

Se non l'hai già fatto, dovrai utilizzare il generatore di temi per creare un modello di intestazione personalizzato. Inizia inserendo il tuo logo in un widget immagine e un widget di navigazione in una sezione di intestazione a due colonne.

La scheda Avanzate

La scheda Avanzate nella sezione Controlli verrà utilizzata per i seguenti passaggi.

Impostazioni margine

Il modo più comune per creare un'intestazione trasparente è dare alla sezione un margine negativo pari alla sua altezza. Sblocca i controlli dei margini nella scheda Avanzate e imposta la parte inferiore su un valore negativo (esempio: -125px). Questo sposterà la sezione sotto l'intestazione nella parte superiore della pagina.

L'indice Z

Dovrai anche aumentare lo Z-index della sezione per assicurarti che sia sempre in cima al contenuto. Puoi inserire qualsiasi numero maggiore del resto del contenuto del tuo sito web, ma molti designer usano 1.000.

Impostazioni permanenti

Seleziona l'opzione Sticky dalla fisarmonica Motion Effects e impostala su Top.

Aggiunta di effetto

Ora che abbiamo creato una sezione di intestazione trasparente di base, aggiungeremo l'effetto di scorrimento.

Scheda Stile

La scheda Stile nei Controlli sezione verrà utilizzata per i seguenti passaggi.

Colore finale

Imposta il colore dello sfondo o della sfumatura finale nel selettore colore.

Effetto scorrimento

Attiva o disattiva il selettore Effetti di scorrimento nel pannello di controllo.

Imposta i valori

Ora dobbiamo regolare i valori nei cursori del viewport per ottenere l'effetto desiderato. Scorri fino alla posizione della tua pagina in cui desideri l'opacità completa e riduci il valore Top finché l'intestazione non è completamente opaca (esempio: 25%). Ora puoi aumentare il valore del Bottom. Nell'esempio precedente, vogliamo che l'effetto si verifichi rapidamente, quindi impostiamo i valori molto vicini tra loro (esempio: 22%). Ciò comporterà l'effetto che si verifica su uno scorrimento di pagina 3%.

Avvolgendo

In conclusione, la modifica del colore dell'intestazione adesiva sullo scorrimento in Elementor può migliorare l'aspetto visivo e l'esperienza utente del tuo sito web. È un modo semplice ed efficace per far risaltare il tuo sito web e creare un'impressione memorabile sui tuoi visitatori. Tuttavia, tieni presente che dovrai adattare o prendere in considerazione i dispositivi mobili e tablet poiché il comportamento dell'intestazione può variare a seconda delle dimensioni dello schermo. Trovare quel punto debole richiederà alcuni test e modifiche, ma il risultato finale varrà la pena. Quindi, vai avanti e prova questa tecnica per dare al tuo sito web un aspetto fresco e moderno.