Come utilizzare l'intestazione fissa e gli effetti di scorrimento con Elementor

Un'intestazione è generalmente la prima cosa che una persona vede quando visita il tuo sito web e funge da base per il modo in cui lo esplora.

Che tu abbia un sito web di e-commerce, un sito web personale, un sito web per l'istruzione, un forum comunitario o un sito web per i media, l'intestazione è ciò che lo rende semplice da navigare e piacevole da usare.

Le intestazioni permanenti stanno diventando sempre più popolari tra i web designer per organizzare e strutturare un sito Web per migliorare la navigazione dell'utente.

Ti mostreremo come creare la tua intestazione fissa utilizzando Elementor in questo tutorial.

Le intestazioni permanenti consentono agli utenti di visualizzare l'intestazione della pagina e la sezione del menu indipendentemente da quanto scorrono verso il basso.

• Passaggio 1: creare un menu
• Passaggio 2: creazione dell'intestazione in Elementor
• Passaggio 3: utilizzo di Elementor per creare un modello di intestazione
• PASSO 4: Come rendere adesiva l'intestazione di Elementor
• Passaggio 5: personalizza il nostro CSS
• Conclusione

Passaggio 1: creare un menu

Per aggiungere un'intestazione fissa al tuo sito web, vai su wp-admin > Aspetto > Menu e crea un menu principale. Nell'intestazione, digita la sezione che desideri visualizzare.

Passaggio 2: creazione dell'intestazione in Elementor

Vai su Modelli Elementor > Theme Builder quando hai finito di costruire il menu principale. Seleziona l'area Intestazione nella pagina del generatore di temi e fai clic su " Aggiungi nuova intestazione ".

Assegna un nome al modello di intestazione e fai clic su " Crea modello " nella schermata pop-up.

Successivamente verrai indirizzato alla pagina di modifica di Elementor. Puoi utilizzare uno dei modelli di intestazione predefiniti o progettarne uno tuo da zero.

Inizieremo da zero con la nostra intestazione adesiva Elementor in questo tutorial.

Puoi vedere vari widget di intestazione nell'editor di Elementor prima di iniziare a progettare un modello. Possiamo progettare rapidamente e facilmente un'intestazione utilizzando queste sezioni.

Passaggio 3: utilizzo di Elementor per creare un modello di intestazione

Crea un layout a due colonne. Assicurati che la larghezza del contenuto della sezione sia impostata su " In scatola ".

Nelle impostazioni della larghezza del contenuto nella sezione Modifica di Elementor, imposta la larghezza della prima colonna al 20% nella colonna " Modifica ".

Posiziona il logo del sito del tuo sito web nella prima colonna e allinealo a sinistra.

Aggiungi un menu di navigazione nella seconda colonna e seleziona il menu principale creato nel passaggio 1. Allinea il menu di navigazione a destra.

Manterremo l'intestazione semplice per questo tutorial. Puoi rendere la tua intestazione più dettagliata aggiungendo un colore di sfondo, effetti di animazione al passaggio del mouse, pulsanti e altri elementi.

PASSO 4: Come rendere adesiva l'intestazione di Elementor

Ora che abbiamo creato la nostra intestazione Elementor di base, è ora di trasformarla in un'intestazione fissa.

Per fare ciò, vai alla sezione Modifica (sezione Intera intestazione). Seleziona Avanzate > Effetti di movimento dal menu a discesa.

Seleziona " adesivo in alto " sotto gli effetti di movimento, quindi " dispositivi " nel punto in cui desideri che appaia l'intestazione fissa.

Un'intestazione fissa è quasi sempre indesiderabile sui dispositivi delle dimensioni di un tablet ed è quasi sempre indesiderabile anche sugli schermi dei dispositivi mobili. Di conseguenza, fai clic sulla "x" accanto a entrambe le opzioni in Sticky On, lasciando selezionato solo "Desktop".

Quando sei soddisfatto del tuo lavoro, clicca su “ Pubblica ”; questo attiverà l'intestazione fissa, ma al momento non sostituirà l'intestazione del tema corrente.

Elementor ti chiede di aggiungere una condizione per la tua intestazione dopo averla pubblicata. Puoi mostrare l'intestazione dove vuoi sul sito aggiungendo condizioni.

Volevamo che questa intestazione apparisse su tutto il sito, omettendo la pagina 404. Di conseguenza, abbiamo incluso l'intero sito nella scelta tralasciando la pagina 404.

Come puoi vedere, utilizzare Elementor per creare la tua intestazione adesiva personalizzata è semplice e indolore!

Rendi la tua intestazione fissa Elementor molto migliore utilizzando CSS personalizzati Elementor ti consente di personalizzare un'intestazione fissa aggiungendo una classe CSS per renderla più elegante.

Qui puoi personalizzare l'altezza dell'intestazione fissa, il colore dello sfondo, la transizione e gli effetti permanenti.

Torna all'area Modifica per rendere più elegante la tua intestazione fissa (intera sezione dell'intestazione). Seleziona Avanzate > Effetti di movimento dal menu a discesa.

In questo caso, impostare " Offset effetti Quando un visitatore utilizza il tuo sito web, questa è la distanza di scorrimento alla quale si verifica l'effetto di scorrimento.

Imposta l' offset del movimento su 100.

Tieni presente che le opzioni Effetti di compensazione funzioneranno solo se viene utilizzato CSS personalizzato. Di conseguenza, se non stai aggiungendo alcun CSS personalizzato, puoi saltare l'ultima opzione.

Prima di pubblicare l'intestazione fissa finale, puoi facoltativamente aggiungere condizioni all'ultima intestazione fissa. Un esempio amp condizione di intestazione fissa è dove desideri che venga mostrata l'intestazione fissa. Ad esempio amp puoi scegliere il criterio " intero sito ".

Ora ti consigliamo di includere alcuni CSS personalizzati sul tuo sito web. Il CSS personalizzato è abbastanza flessibile e puoi includere tutto ciò che desideri se hai familiarità con il suo funzionamento.

Abbiamo completato la pulizia; passiamo ora alle complessità del sito web, inclusa l'aggiunta del codice CSS personalizzato. Dimostreremo sia i fondamenti che le tecniche avanzate per ottenere effetti di intestazione adesiva gratuiti per Elementor. Se utilizzi Elementor 2.9 o versione successiva, puoi utilizzare le Regole di stile globali per incorporare questo CSS nel tuo sito.

Seguire le procedure descritte di seguito per includere il CSS personalizzato:

• Per accedere al menu dell'hamburger, individualo nell'angolo in alto a sinistra del menu Elementor e selezionalo.
• Seleziona Scegli stili tema dal menu a discesa sotto la sezione Stile globale.
• Seleziona CSS personalizzato dal menu a discesa in quella sezione (il colore cambierà in blu rispetto al precedente colore rosso genetico).

Successivamente, incolla il codice CSS di seguito.

header.sticky-header { --header-height: 90px; --opacità: 0,90; --riducimi: 0,80; --sticky- background-color: #0e41e5; --transizione: .3s facilità di entrata-uscita; transizione: colore di sfondo var(--transition), immagine di sfondo var(--transition), filtro di sfondo var(--transition), opacità var(--transition); } header.sticky-header.elementor-sticky--effects { background-color: var(--sticky- background-color) ; immagine di sfondo: nessuna; opacità: var(--opacità) ; -filtro-fondale-webkit: sfocatura (10px); filtro sfondo: sfocatura (10px); } header.sticky-header > .elementor-container { transizione: min-height var(--transition); } header.sticky-header.elementor-sticky--effects > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me)); altezza: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item { transizione: riempimento var(--transition); } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {imbottitura-bottom: 10px; imbottitura superiore: 10px; } header.sticky-header > .elementor-container .logo img { transizione: max-width var(--transition); } header.sticky-header.elementor-sticky--effects .logo img { max-width: calc(100% * var(--shrink-me)); } 

Passaggio 5: personalizza il nostro CSS

Le istruzioni sopra elencate ti guideranno attraverso il processo di creazione di un'intestazione fissa decrescente in Elementor. Se desideri conoscere più dettagli su come personalizzare ulteriormente l'intestazione, puoi consultare il codice CSS fornito di seguito, che ti consentirà di essere più creativo con il design dell'intestazione. A seconda delle tue esigenze, puoi personalizzare l'intestazione fissa di Elementor modificando numerose impostazioni e rendendola più o meno fissa. Ti consigliamo di utilizzare un editor di codice per incorporare questa modifica CSS direttamente in Elementor. Puoi utilizzare Visual Studio Code o Atom, che ti aiuterà a mettere insieme rapidamente il codice e a trarne vantaggi. Questi editor sono gratuiti e sono accessibili da vari sistemi, inclusi Windows, Mac OS X e Linux.

Questa sezione dimostrerà come regolare gli effetti dell'intestazione restringente di Elementor utilizzando il foglio di stile CSS. Se apporti una sola modifica alla proprietà personalizzata, questa verrà immediatamente modificata per corrispondere al resto del codice CSS.

Le opzioni di personalizzazione per l'intestazione decrescente sono disponibili in un totale di cinque modi diversi. Non tutte le variabili devono essere personalizzate, ma hai la possibilità di farlo se lo desideri. Non appena hai deciso quali variabili desideri modificare, puoi modificare solo quelle variabili e lasciare invariato il resto dei parametri.

Ecco le cinque variabili CSS, con i valori predefiniti per ciascuna variabile mostrati in rosso.

Il colore di sfondo appiccicoso è #0e41e5 e l'altezza dell'intestazione è 90px. Altre opzioni di stile includono: opacità di 0,90, restringimento di 0,80, opacità di 0,90 e transizione facilita-in/ease-out di 300 ms.

Le proprietà personalizzate sono gli elementi che appaiono dopo il doppio trattino “–” nel nostro codice di amp e puoi trovarli elencati nella parte superiore del nostro codice di amp . Tutto ciò che serve è modificare il valore che appare dopo i due punti e prima del punto e virgola nella frase.

Ad amp , se desideri aumentare l'altezza dell'intestazione a 100 px, ecco come apparirebbe prima e dopo la modifica dell'altezza:

Prima l'altezza dell'intestazione era di 90 pixel; successivamente, l'altezza dell'intestazione era di 100 pixel.

Utilizzando Elementor, puoi progettare un menu di intestazione fissa in diversi modi. Non solo puoi costruire un'intestazione adesiva Elementor gratuita, ma puoi anche personalizzare l'intestazione aggiungendovi CSS personalizzati. È possibile ottenere indicazioni dettagliate su come costruire un'intestazione Elementor adesiva decrescente utilizzando Elementor e modificare il tuo CSS con questa guida passo passo.

Elementor include una varietà di modelli di intestazione; ognuno è distinto ed elegante e aiuta i tuoi spettatori a navigare nel tuo sito web.

Con Elementor, hai il controllo completo sullo stile delle intestazioni del tuo sito web. Ad amp , potresti posizionare il logo del sito al centro della pagina e il menu principale sotto di esso. Puoi aggiungere un'intestazione sopra l'intestazione principale per visualizzare il numero di telefono, i collegamenti ai social media e altre informazioni.

Ecco solo alcuni amp delle numerose opzioni di progettazione dell'intestazione disponibili per gli utenti di Elementor.

Conclusione

Includere un'intestazione fissa sul tuo sito web può consentire ai visitatori di attraversare facilmente il tuo sito e aumentare i clic in tutte le aree del tuo sito.

Elementor elimina la necessità di generare manualmente intestazioni permanenti con Javascript e CSS, che in precedenza era richiesto. Creare un'intestazione fissa per il tuo sito web non è mai stato così semplice come lo è ora, grazie alle intestazioni fisse di Elementor.