Le intestazioni permanenti sono un ottimo modo per mantenere il menu di navigazione del tuo sito web sempre visibile, 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 fissa 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 lo 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 passaggi seguenti.
Impostazioni dei margini
Il modo più comune per creare un'intestazione trasparente è dare alla sezione un margine negativo uguale alla sua altezza. Sblocca i controlli del margine nella scheda Avanzate e imposta il fondo su un valore negativo (esempio: -125px). Ciò sposterà la sezione sotto l'intestazione nella parte superiore della pagina.
Create Amazing Websites
Con il miglior generatore di pagine gratuito Elementor
Parti oraL'indice Z
Dovrai anche aumentare lo Z-index della sezione per assicurarti che sia sempre in cima al contenuto. Puoi inserire qualsiasi numero maggiore rispetto al resto del contenuto del tuo sito web, ma molti designer utilizzano 1.000.
Impostazioni permanenti
Seleziona l'opzione Sticky dalla fisarmonica Motion Effects e impostala su Top.
Aggiunta di effetti
Ora che abbiamo creato una sezione di intestazione trasparente di base, aggiungeremo l'effetto di scorrimento.
Scheda Stile
La scheda Stile nella sezione Controlli verrà utilizzata per i passaggi seguenti.
Colore finale
Imposta il colore dello sfondo o della sfumatura finale nel selettore colori.
Effetto scorrimento
Attiva/disattiva il selettore degli effetti di scorrimento nel pannello di controllo.
Imposta i valori
Ora dobbiamo regolare i valori nei cursori della vista per ottenere l'effetto desiderato. Scorri fino alla posizione della pagina in cui desideri l'opacità completa e riduci il valore Superiore finché l'intestazione non sarà 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 della pagina del 3%.
Avvolgendo
In conclusione, cambiare il colore dell'intestazione fissa sullo scorrimento in Elementor può migliorare l'attrattiva visiva 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 modificare o fare delle concessioni per i dispositivi mobili e tablet poiché il comportamento dell'intestazione può variare a seconda delle dimensioni dello schermo. Trovare il punto giusto 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.
