Vuoi creare un'intestazione che si rimpicciolisce man mano che la pagina viene caricata? Quando un visitatore scorre la pagina, un'intestazione che si restringe sarà un bell'effetto per impressionare il visitatore. Anche se non prevedi di utilizzare questo effetto, vale la pena pensare se sarebbe una buona aggiunta al tuo sito web.
Qui ti insegneremo esattamente come utilizzare Elementor Pro per ridurre l'intestazione del tuo sito WordPress. Con l'aiuto di alcuni CSS personalizzati, ti mostreremo esattamente cosa devi fare per portare a termine il lavoro.
Che cos'è un'intestazione restringente?
Un'intestazione che si restringe è la stessa identica intestazione che vedi quando viene visualizzato un sito Web, ma diventa un po' più piccola quando inizi a scorrere. Per iniziare, c'è un'intestazione superiore standard. L'intestazione si "rimpicciolirà" mentre l'utente scorre la pagina verso il basso e puoi regolare quanto si restringe e quanto diventa traslucido.
Anche se diventa più piccolo, l'intestazione è ancora lì quando scorri la pagina verso il basso. Ci sono varie opzioni, come seppellire completamente l'intestazione e rivelarla solo quando l'utente scorre il backup.
Create Amazing Websites
Con il miglior generatore di pagine gratuito Elementor
Parti oraVantaggi di un'intestazione restringente
Se utilizzi un'intestazione rimpicciolita, avrai più spazio per il tuo contenuto stesso. C'è meno concorrenza per l'attenzione dall'intestazione completa, il che significa che puoi concentrarti sul tuo contenuto principale.
Se nascondi completamente l'intestazione mentre un utente scorre verso il basso, non sarai in grado di fornire agli utenti l'accesso all'intero menu di navigazione in ogni momento.
In una certa misura, questo ti dà spazio extra per i tuoi contenuti consentendoti comunque di visualizzare il tuo menu completo. Per finire, questo effetto è esteticamente gradevole e aggiunge un po' di gioia visiva in più per i visitatori del tuo sito web mentre lo esplorano.
Come creare un'intestazione restringente
Quando hai il tuo premadeheader pronto, sei a posto. Il resto del post ti guiderà a ridurlo. Beneficerai di molti CSS personalizzati. Tuttavia, ti forniremo il codice di cui hai bisogno e ti mostreremo come cambiarlo in modo che corrisponda al tuo sito.
Modifica con Elementor
Per iniziare, modifica il modello di intestazione con Elementor Theme Builder.
Per modificare il tuo modello di intestazione utilizzando Elementor, vai su Templates Theme Builder nella dashboard di WordPress e seleziona Modifica con Elementor.
Pulizie CSS di base
Dovrai ripulire un po' la tua intestazione prima di applicare il codice CSS che vedrai nelle prossime sezioni.
Il primo passo è accedere alle impostazioni della sezione dell'intestazione. Imposta l'elenco a discesa Tag HTML sull'intestazione della scheda Layout.
Non dovrebbe esserci un'altezza minima e l'allineamento verticale dovrebbe essere impostato al centro nella scheda del layout.
Vai alla scheda Avanzate e cambia la classe CSS della sezione dell'intestazione in stick-header.
Infine, apri il widget immagine contenente il tuo logo e seleziona l'opzione Avanzate dal menu a tendina. Quindi, nell'area Classi CSS dell'immagine del tuo logo, inserisci logo:
Effetti di movimento per rendere il tuo bastone di intestazione
La funzionalità Effetti di movimento di Elementor può essere utilizzata per mantenere l'intestazione nella parte superiore della pagina mentre gli spettatori scorrono verso il basso.
Puoi accedere alle impostazioni dell'intestazione della sezione facendo clic su di esse. Successivamente, fai clic sulla pagina Avanzate e controlla le opzioni Effetti di movimento
- Supponiamo che Top sia selezionato in Sticky nel menu a discesa.
- Elimina tutti gli altri dispositivi che non sono elencati nella casella "Sticky On".
- L'Offset effetti dovrebbe essere impostato su 90 (l'altezza dell'intestazione).
CSS personalizzato
L'ultimo passaggio prima di finire è l'aggiunta del codice CSS personalizzato. Ecco il codice di base che utilizzerai. Vedremo come personalizzarlo nelle prossime sezioni:
Il seguente codice CSS:
- Per accedere al menu dell'hamburger, vai nell'angolo in alto a sinistra dell'interfaccia di Elementor e fai clic su di esso.
- Lo stile del tema può essere selezionato dal menu a discesa Stile globale.
- Seleziona CSS personalizzato (sarà blu invece del "normale" Elementor rosso una volta aperta l'interfaccia Stile tema)
/***
* class: .sticky-header
*/
header.sticky-header {
--header-height: 100px;
--shrink-header-to: 0.6;
--transition: .45s cubic-bezier(.4, 0, .2, 1);
background-color: rgba(244, 245, 248, 1);
transition: background-color var(--transition),
backdrop-filter var(--transition),
box-shadow var(--transition);
}
/***
* Sticky header activated
*/
header.sticky-header.elementor-sticky--effects {
background-color: rgba(244, 245, 248, .8);
box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
header.sticky-header > .elementor-container {
min-height: var(--header-height);
transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
min-height: calc( var(--header-height) * var(--shrink-header-to) );
}
/***
* Shorter header on mobile (70px instead of 100px)
*/
@media only screen and (max-width: 767px) {
header.sticky-header {
--header-height: 70px;
}
}
/***
* class: .logo
*/
header.sticky-header .logo img {
transition: transform var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
transform: scale(.8);
}
Personalizza CSS
Questo CSS può essere personalizzato per soddisfare le tue esigenze specifiche, quindi esaminiamo ora come farlo. Si consiglia di utilizzare un editor di codice come Visual Studio Code o Atom rispetto alla modifica di CSS direttamente nell'interfaccia di Elementor. Gli utenti Windows, Mac e Linux possono tutti trarre vantaggio da questi editor open source.
Le proprietà personalizzate CSS saranno il nostro strumento preferito (o variabili CSS). Questi controlli consentono di ottimizzare l'effetto di intestazione decrescente. Se apporti una singola modifica a una proprietà personalizzata, l'intero codice CSS verrà aggiornato per riflettere tale modifica.
Ci sono un totale di cinque fattori che puoi regolare, in totale. Non devi nemmeno cambiarli se non vuoi – mantienili così come sono se ti piace il modo in cui funzionano!
Per aiutarti, abbiamo incluso le cinque variabili CSS e i loro valori predefiniti di seguito:
- –altezza intestazione: 90px;
- –opacità: 0,90;
- –shrink-header-to: 0,80;
- –colore di sfondo appiccicoso: #0e41e5;
- Transizione –: 300 ms di allentamento in entrata e uscita;
Se guardi il nostro codice di esempio, noterai che abbiamo incluso alcune proprietà personalizzate al posto del doppio trattino "–". Dopo i due punti e prima del punto e virgola, tutto ciò che resta da fare è apportare una piccola modifica.
La modifica dell'altezza dell'intestazione a 100px, ad esempio, apparirà in questo modo prima e dopo:
- Prima : –altezza intestazione: 90px;
- Dopo : –altezza intestazione: 100px;
Veniamo introdotti con queste variabili.
Colore di sfondo appiccicoso (--sticky-background-color)
Il colore di sfondo dell'intestazione "rimpicciolita", che viene visualizzato quando i visitatori scorrono verso il basso, è controllato dalla proprietà Colore di sfondo permanente. La modifica del colore non deve corrispondere al colore dell'intestazione se non è quello che preferisci.
Nel modello Agenzia digitale, ad esempio, lo sfondo dell'intestazione ha inizialmente una sfumatura. Il colore dell'intestazione diventa blu fisso mentre i visitatori scorrono verso il basso e l'intestazione diventa più piccola (puoi vederlo nel video di esempio dall'inizio).
Altezza intestazione (--altezza-intestazione)
In Elementor, l'attributo Header Height determina l'altezza dell'intestazione: deve corrispondere all'altezza della sezione dell'intestazione. L'impostazione su 90px è stato un buon punto di partenza nelle istruzioni.
Tuttavia, se decidi di modificare l'altezza, assicurati di farlo nella proprietà CSS e nelle impostazioni della sezione dell'intestazione.
Per evitare problemi con l'effetto di restringimento, non sosteniamo altezze dell'intestazione superiori a 100px.
Opacità (--opacità)
Il grado di traslucenza dell'intestazione decrescente è controllato dalla proprietà Opacity:
- 0 significa che l'intestazione sarà invisibile.
- 1 significa che non ci sarà alcuna intestazione visibile (nessuna trasparenza)
L'opacità è impostata su 0.9 nel nostro codice di esempio, rendendolo quasi completamente opaco. Questo numero può essere modificato in base alle proprie esigenze. Riduci il valore a zero per renderlo più ovvio.
Riduci intestazione a (--shrink-header-to)
Quando un visitatore inizia a scorrere verso il basso, l'attributo Riducimi determina di quanto si ridurranno l'intestazione e il logo. Ciò significa che l'intestazione e il logo diminuiranno a 80% della loro dimensione iniziale, ad esempio.
Transizione (--transizione)
Se l'attributo Transizione è impostato su "ridotto", l'intestazione si ridurrà dalla dimensione originale a quel valore.
È meglio lasciare qualcosa così com'è, ma hai la possibilità di cambiarlo se necessario.
Quindi il CSS aggiornato per l'intestazione ridotta sarà -
header.sticky-header {
--header-height: 100px; /* Set your own header height */
--shrink-header-to: 0.6; /* Shrinks to 60%, values: 0.1 to 1 */
--transition-timing: .45s cubic-bezier(.4, 0, .2, 1); /* values: .1s to 0.5s (or more), replace "cubic-bezier(.4, 0, .2, 1)" with "ease" if you need a simpler transition */
background-color: rgba(244, 245, 248, 1); /* Set your own background color */
transition: background-color var(--transition-timing),
backdrop-filter var(--transition-timing),
box-shadow var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects {
background-color: rgba(244, 245, 248, .8); /* Set your own background color on scroll */
box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07); /* Delete this line if you don't want shadow on scroll */
-webkit-backdrop-filter: saturate(180%) blur(20px); /* Delete this line if you don't use transparency on scroll */
backdrop-filter: saturate(180%) blur(20px); /* Delete this line if you don't use transparency on scroll */
}
header.sticky-header > .elementor-container {
min-height: var(--header-height);
transition: min-height var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
min-height: calc( var(--header-height) * var(--shrink-header-to) );
}
/***
* class: .logo
* Add the class "logo" to your logo to scale your logo to 80% on scroll
*/
header.sticky-header .logo img,
header.sticky-header .logo.elementor-widget-theme-site-logo img,
header.sticky-header .logo .elementor-icon svg {
transition: transform var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects .logo img,
header.sticky-header.elementor-sticky--effects .logo.elementor-widget-theme-site-logo img,
header.sticky-header.elementor-sticky--effects .logo .elementor-icon svg {
transform: scale(.80); /* Shrinks logo to 80%, values: 0.10 to 1 */
}
header.sticky-header .logo .elementor-icon svg {
width: auto;
}Pensieri finali
È molto facile lavorare con Elementor poiché è diventato uno dei page builder più ricercati da tonnellate di sviluppatori web in tutto il mondo. Avere un tale design interattivo porterà più visitatori al tuo sito. Se avete domande non esitate a chiedere. Abbiamo un vasto numero di tutorial di Elementor sul nostro sito, vai a controllarli e facci sapere cosa dovremmo coprire dopo.
