Come utilizzare l'intestazione adesiva 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 della comunità o un sito Web per i media, l'intestazione è ciò che lo rende semplice da navigare e piacevole da usare.

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

Ti mostreremo come creare la tua intestazione adesiva usando 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 in basso.

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

Passaggio 1: creare un menu

Per aggiungere un'intestazione adesiva 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 Elementir Templates > Theme Builder quando hai finito di costruire il menu principale. Seleziona l'area dell'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 a comparsa.

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

In questo tutorial inizieremo da zero con la nostra intestazione adesiva Elementor.

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 " Boxed ".

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 tuo sito web nella prima colonna e allinealo a sinistra.

Aggiungi un menu di navigazione nella seconda colonna e seleziona il menu principale che hai 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.

FASE 4: Come rendere appiccicosa l'intestazione di Elementor

Ora che abbiamo creato la nostra intestazione Elementor di base, è il momento di trasformarla in un'intestazione Sticky.

Per farlo, vai alla sezione Modifica (sezione di intestazione intera). Seleziona Avanzate > Effetti di movimento dal menu a discesa.

Seleziona " appiccicoso in alto " sotto gli effetti di movimento, quindi " dispositivi " dove desideri che appaia l'intestazione adesiva.

Un'intestazione appiccicosa è quasi sempre indesiderabile sui dispositivi di dimensioni tablet ed è quasi sempre indesiderabile anche sugli schermi 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 permanente, ma in questo 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 comparisse su tutto il sito, omettendo la pagina 404. Di conseguenza, abbiamo incluso l'intero sito nella scelta lasciando fuori la pagina 404.

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

Rendi la tua intestazione appiccicosa Elementor molto meglio L'utilizzo di CSS personalizzato Elementor ti consente di personalizzare un'intestazione adesiva aggiungendo una classe CSS per renderla più elegante.

Puoi personalizzare l'altezza, il colore di sfondo, la transizione e gli effetti permanenti dell'intestazione adesiva qui.

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

impostare " Offset effetti " su 100. Quando un visitatore utilizza il tuo sito Web, questa è la distanza di scorrimento in cui si verifica l'effetto di scorrimento.

Imposta l' offset del movimento su 100.

Tieni presente che le opzioni degli effetti di offset 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 permanente finale, puoi facoltativamente aggiungere condizioni all'ultima intestazione permanente. Un esempio amp adesiva è il punto in cui si desidera visualizzare l'intestazione adesiva. Ad esempio amp scegliere il criterio " intero sito ".

Ora vorrai includere alcuni CSS personalizzati sul tuo sito web. Il CSS personalizzato è abbastanza flessibile e puoi includere quello che vuoi 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 adesivi gratuiti per Elementor. Se stai utilizzando Elementor 2.9 o versioni successive, puoi utilizzare le Regole di stile globali per incorporare questo CSS nel tuo sito.

Segui 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 dal suo 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 easy-in-out; transizione: colore di sfondo var(--transizione), immagine di sfondo var(--transizione), filtro di sfondo var(--transizione), opacità var(--transizione); } header.sticky-header.elementor-sticky--effects { background-color: var(--sticky-background-color) !important; immagine di sfondo: nessuna !important; opacità: var(--opacity) !important; -filtro-sfondo-webkit: sfocatura (10px); filtro sfondo: sfocatura (10px); } header.sticky-header > .elementor-container { transizione: altezza minima var(--transizione); } header.sticky-header.elementor-sticky--effects > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me))!important; altezza: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item { transizione: padding var(--transition); } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item { padding-bottom: 10px!important; padding-top: 10px!importante; } 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 adesiva decrescente in Elementor. Se vuoi saperne di più su come personalizzare ulteriormente l'intestazione, puoi guardare 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 adesiva di Elementor modificando numerose impostazioni e rendendola più o meno appiccicosa. 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 aiuteranno a mettere insieme il codice rapidamente e a trarne i vantaggi. Questi editor sono gratuiti e sono accessibili da vari sistemi, inclusi Windows, Mac OS X e Linux.

Questa sezione dimostrerà come è possibile regolare gli effetti dell'intestazione di restringimento di Elementor utilizzando il foglio di stile CSS. Se apporti solo una modifica alla proprietà personalizzata, verrà immediatamente modificata in modo che corrisponda 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 è 90 px. Altre opzioni di stile includono: opacità di 0,90, rimpicciolimento di 0,80, opacità di 0,90 e transizione di allentamento in entrata/uscita di 300 ms.

Le proprietà personalizzate sono gli elementi che compaiono dopo il doppio trattino “-” nel nostro ex amp le code, ed è possibile trovarli elencati nella parte superiore della nostra s amp del codice. Tutto ciò che serve è regolare il valore che appare dopo i due punti e prima del punto e virgola nella frase.

Per ex amp le, se si vuole aumentare l'altezza dell'intestazione a 100px, ecco come dovrebbe apparire prima e dopo aver cambiato l'altezza:

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

Usando Elementor, puoi progettare un menu di intestazione appiccicoso in diversi modi. Non solo puoi costruire un'intestazione appiccicosa Elementor gratuita, ma puoi anche personalizzare l'intestazione aggiungendovi CSS personalizzati. È possibile ottenere indicazioni dettagliate su come costruire un'intestazione Elementor appiccicosa 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. Per ex amp le, è possibile inserire il logo del sito al centro della pagina e il menu principale di sotto di essa. 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 design delle intestazioni disponibili per gli utenti di Elementor.

Conclusione

Includere un'intestazione adesiva sul tuo sito web può facilitare ai visitatori l'attraversamento del 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 era precedentemente richiesto. La creazione di un'intestazione adesiva per il tuo sito Web non è mai stata così semplice come lo è ora, grazie alle intestazioni adesive di Elementor.