Come creare un'intestazione trasparente appiccicosa di Elementor (guida passo passo)

L'intestazione è la prima cosa che le persone notano quando visitano il tuo sito web. Evidenzia il logo del tuo marchio, i collegamenti alle pagine e molte importanti funzionalità che creano una rapida impressione nella psicologia dei visitatori. Non solo organizza il tuo sito web, ma crea anche un'esperienza positiva tra gli utenti.

L'intestazione trasparente adesiva può essere un ottimo modo per portare l'esperienza dell'utente al livello successivo . Consente ai visitatori del Web di navigare nell'intero sito Web senza dover scorrere verso l'alto ogni volta che desiderano visitare una nuova pagina. Rende anche il tuo sito web visivamente più attraente .

Elementor è un potente plug-in per la creazione di pagine con il quale puoi creare straordinarie intestazioni adesive trasparenti senza alcuna esperienza di codifica. Nelle parti seguenti di questo articolo, ti mostreremo come creare intestazioni trasparenti adesive di Elementor in due semplici modi.

Puoi adottare il metodo che è relativamente facile ed economico per te. Entriamo nella discussione senza perdere altro tempo.

Sommario

• Che cos'è un'intestazione e un esempio trasparenti appiccicosi?
• Perché dovresti usare intestazioni trasparenti adesive sui tuoi siti web?
• Come creare un'intestazione trasparente appiccicosa di Elementor: guida passo passo
• Domande frequenti su come creare un'intestazione trasparente appiccicosa di Elementor
• Conclusioni finali sull'intestazione trasparente appiccicosa di Elementor

Che cos'è un'intestazione e un esempio trasparenti appiccicosi?

Un'intestazione trasparente appiccicosa è una barra di navigazione che rimane fissa nella parte superiore dello schermo quando gli utenti scorrono verso il basso la pagina web. Viene in genere utilizzato su siti Web con pagine lunghe come articoli, post di blog, pagine di recensioni di prodotti e siti Web di una pagina.

Un'intestazione trasparente appiccicosa è spesso semitrasparente, il che consente agli utenti di vedere il resto del contenuto della pagina. Consente ai proprietari di siti Web di fondere l'intestazione con il colore di sfondo del sito Web, conferendogli un aspetto più lucido.

Il video seguente mostra un esempio di come funziona l'intestazione trasparente adesiva.

Perché dovresti usare intestazioni trasparenti adesive sui tuoi siti web?

Le intestazioni trasparenti appiccicose sono diventate una tendenza comune nel moderno web design. Perché aggiunge un grande valore grafico a un sito Web che aiuta ad attirare l'attenzione dei lettori. Di seguito sono riportati alcuni motivi chiave per cui dovresti considerare di avere intestazioni trasparenti adesive sul tuo sito web.

1. Aumenta la consapevolezza del marchio

Le intestazioni trasparenti e appiccicose consentono ai proprietari di siti Web di mostrare il logo del marchio, lo slogan, il messaggio commerciale e l'offerta promozionale finché i visitatori sono sul sito Web. Aiuta ad aumentare la consapevolezza del marchio nella mente subconscia dei visitatori del web.

2. Migliora l'esperienza dell'utente

Se hai un sito affiliato, un portale di notizie o un sito di e-commerce in cui la maggior parte delle pagine è così lunga, le intestazioni trasparenti e appiccicose possono garantire un'esperienza piacevole per i visitatori del web. È ugualmente efficace per gli utenti di telefoni cellulari e dispositivi con schede la cui dimensione dello schermo è relativamente piccola.

3. Migliora la navigazione facile

Se hai intestazioni trasparenti e adesive sul tuo sito web, gli utenti non dovranno scorrere verso l'alto ogni volta che vogliono agire. Possono visitare istantaneamente la sezione del carrello, il mio account o qualsiasi pagina desiderino. Rende anche un sito Web altamente fruibile.

4. Rende attraente la sezione degli eroi

Dopo l'intestazione, la sezione dell'eroe è il secondo elemento più importante che cattura immediatamente l'attenzione dei visitatori. L'intestazione trasparente appiccicosa ti consente di fondere il colore di sfondo con la sezione dell'eroe per dargli un aspetto super stupendo.

Come creare un'intestazione trasparente appiccicosa di Elementor: guida passo passo

Ottenere la massima autorità sulle intestazioni web è qualcosa che tutti i proprietari web desiderano. Quando installi un tema, viene automaticamente fornito con un'intestazione. A seconda del tema, potresti avere alcune opzioni per modificare parti particolari dell'intestazione.

Ma è piuttosto frustrante per molti utenti web perché non possono ricostruirlo come vogliono. Con il plug-in per la creazione di pagine Elementor, puoi superare questa preoccupazione. Usando questo plugin, puoi creare e progettare qualsiasi tipo di intestazione web che desideri. Puoi anche renderlo appiccicoso e trasparente.

Qui ti mostreremo due metodi per creare intestazioni trasparenti adesive con il plug-in per la creazione di pagine di Elementor. Continua a leggere!

Metodo 01: crea un'intestazione adesiva trasparente con Elementor

Devi avere installato sia Elementor Pro che la sua versione Lite per creare l'intestazione trasparente adesiva sul tuo sito. Se li hai già sul tuo sito, va bene. Ma se non lo fai, puoi scaricarli facendo clic sui seguenti collegamenti.

• Elementor
• Elementor Pro

Una volta installati, inizia a seguire i passaggi spiegati di seguito.

Passaggio 01: crea prima un menu

Il menu è una parte importante di qualsiasi intestazione web. Include collegamenti a diverse pagine Web e sezioni importanti di un sito Web. Quindi, prima di creare un'intestazione, devi prima creare un elenco di menu.

• Passa a Aspetto > Menu .
• Dai un nome al menu.
• Tik mark Intestazione su Visualizza posizione.
• Fare clic sul pulsante Crea menu .

• Tik contrassegna le pagine, i post o le categorie dalle voci di menu Aggiungi .
• Fare clic sul pulsante Aggiungi al menu per aggiungere gli elementi contrassegnati da tik all'elenco dei menu.
• Fare clic sul pulsante Salva menu . Il tuo menù sarà pronto!

Passaggio 02: seleziona un modello di intestazione dalla Libreria di modelli di Elementor

Gli utenti di Elementor Pro hanno accesso alla sezione della libreria Elementor. Lì troverai tonnellate di modelli già pronti utili per la progettazione di diverse sezioni del sito web. Otterrai anche una varietà di modelli di intestazione lì.

• Vai a Modelli > Aggiungi nuovo .

• Vedrai un modale pop-up
• Seleziona l'opzione Intestazione dal tipo di modello su cui vuoi lavorare
• Fare clic sul pulsante Crea modello alla fine

Dopo aver selezionato "Crea modello", troverai un altro pop-up modale come fase successiva. Lì vedrai una varietà di modelli di intestazione. Esplorali per decidere quello che desideri utilizzare.

• Una volta scelto un modello, fai clic sul pulsante INSERT sotto di esso.

• Vedrai l'apertura del modello di intestazione su Elementor Canvas.

Passaggio 03: imposta la funzione permanente sul modello di intestazione

La funzione Sticky manterrà l'intestazione fissa sullo schermo anche quando un utente web scorre la pagina verso il basso.

• Per abilitare la funzione permanente, fai prima clic sull'icona a sei punti sul modello di intestazione.
• Selezionerà l'intera sezione dell'intestazione.

• Vai su Avanzate > Effetti di movimento > Appiccicoso .
• Dal menu a discesa Sticky, puoi impostare se la tua intestazione verrà visualizzata in alto o in basso.
• È possibile specificare i dispositivi su cui verrà visualizzata l'intestazione adesiva dalla casella Sticky On ,

Ciò abiliterà la funzione adesiva sull'intestazione web.

Passaggio 04: rendi trasparente l'intestazione di Elementor

Seleziona l'intera sezione dell'intestazione facendo clic sull'icona a sei punti come hai fatto prima. Segui la guida qui sotto.

• Vai alla scheda Stile dal pannello Elementor.
• Vieni all'opzione colore nella sezione Sfondo .
• Fare clic sull'icona del colore e portare la sua opacità a zero.

Il video qui sotto spiega il processo.

Una volta che l'intestazione è trasparente, del testo potrebbe diventare invisibile a causa del contrasto del colore. Ad esempio, il video sopra mostra che i testi dei nostri menu sono scomparsi. Perché i testi dei menu sono stati progettati con il colore bianco.

Quindi, il testo non può creare un contrasto con l'intestazione trasparente. Dobbiamo cambiarne la tonalità di colore per renderlo visibile.

• Fare clic sulla barra dei menu per selezionarla.
• Passa all'opzione Colore testo dalla scheda Stile.
• Imposta il colore che desideri.
• Fare clic sul pulsante Aggiorna alla fine.

Passaggio 05: apri l'intestazione su una pagina Web

Una volta che hai finito con la creazione di un'intestazione trasparente adesiva di Elementor, devi controllare le tue pagine web. Se tutto funziona bene, va bene. A volte potrebbe essere necessario modificare il colore degli elementi dell'intestazione per farlo funzionare bene con lo sfondo.

Guarda l'intestazione che abbiamo creato sul nostro sito Web nel video qui sotto.

Metodo 02: crea intestazioni adesive trasparenti con HappyAddons

Se sei un utente di Elementor Pro e vuoi mantenerlo, va bene. Ma se stai cercando una soluzione aggiuntiva per rendere il tuo sito web più potente, puoi dare un'occhiata al plugin HappyAddons. È un potente componente aggiuntivo del plug-in Elementor, che offre molte funzionalità e widget esclusivi.

Quindi, se hai entrambi i plug-in Elementor e HappyAddons, puoi fare magie al tuo sito web. Ora ti mostreremo come creare un'intestazione con il widget Nav Manu di HappyAddons e renderlo appiccicoso e trasparente. Plugin necessari per questa parte del tutorial:

• Elementor
• Happy Addons
• Happy Addons Pro

Una volta installati, inizia a seguire i passaggi spiegati di seguito.

Passaggio 01: attiva il widget Menu felice

Dopo aver installato i plugin di cui sopra, devi prima abilitare il widget Happy Menu. Fare quello:

• Vai a HappyAddons > Widget .
• Attiva il widget Menu felice .
• Scorri verso l'alto e fai clic su Salva impostazioni .

Nota: puoi disattivare i widget inutilizzati da qui per rendere leggero il tuo sito web.

Passaggio 02: crea un menu

Poiché abbiamo creato un menu nel primo metodo, non è necessario crearne uno nuovo. Devi solo attivare l'icona Menu felice dalla sezione Aspetto > Menu . Fare clic sul pulsante Salva menu alla fine.

Passaggio 03: apri la tua pagina Web su Elementor Canvas

Apri una pagina web nuova o esistente con Elementor Canvas. Rimuoverà i testi di intestazione forniti con il tema installato e renderà la tua pagina completamente fresca.

Passaggio 04: crea una nuova intestazione

Devi creare una nuova sezione nella parte superiore della pagina per creare una nuova intestazione.

• Fai clic sull'icona Aggiungi sezione nella parte superiore della pagina.

• Seleziona la struttura del layout che desideri.
• Trascina e rilascia il widget Happy Menu nella tua nuova sezione.

• Vai a Contenuto> Menu di navigazione sul pannello Elementor.
• Seleziona il menu che hai creato sul tuo back-end.

Stilizza il menu e la barra dell'intestazione come desideri. Puoi visitare questa documentazione sulla stilizzazione dell'intestazione di Elementor con Happy Menu.

Passaggio 05: rendi la tua intestazione appiccicosa

Un aspetto positivo dell'utilizzo di HappyAddons è che puoi aggiungere la funzione adesiva agli elementi dell'intestazione (logo, menu, barra di ricerca) separatamente. Supponiamo di voler rendere la barra dei menu solo appiccicosa.

• Fare clic sulla barra dei menu.
• Vai su Avanzate > Layout dal pannello Elementor.
• Impostare la posizione Fissa .

Renderà la barra dei menu appiccicosa in alto. Puoi applicare la stessa funzione anche al tuo logo.

Ora, scorri la pagina per vedere se gli elementi dell'intestazione sono stati davvero appiccicosi.

Passaggio 06: rendi trasparente la tua intestazione

Il processo è lo stesso che abbiamo spiegato nel metodo uno.

• Seleziona la sezione dell'intestazione facendo clic sull'icona a sei punti.
• Vai a Stile > Sfondo > Colore .
• Riduci l'opacità del colore come desideri.

Renderà trasparente la tua intestazione.

Passaggio 07: porta la sezione del tuo eroe sopra

Se i testi dell'intestazione scompaiono a causa della trasparenza dello sfondo, non preoccuparti. Basta portare la sezione del tuo eroe web sopra. Ti darà una visione contrastante.

• Seleziona la sezione dell'eroe facendo clic sull'icona a sei punti.
• Vai su Avanzate > Avanzate > Margine .
• Deseleziona il collegamento facendo clic.
• Metti un valore meno(-) nella sezione Top .

Porterà la sezione dell'eroe in alto e creerà contrasto tra i testi dell'intestazione.

Quindi, la tua intestazione trasparente adesiva Elementor è pronta con l'aiuto di HappyAddons. Se riscontri problemi mentre lo fai sul tuo sito web, inviaci un messaggio o un commento qui sotto. Ti risponderemo molto presto con le soluzioni.

Domande frequenti su come creare un'intestazione trasparente appiccicosa di Elementor

Qui, risponderemo ad alcune domande più frequenti relative all'intestazione trasparente adesiva di Elementor che si trova comunemente sul Web.

Conclusioni finali sull'intestazione trasparente appiccicosa di Elementor

Secondo Standford Web Credibility Research, il 75% delle persone giudica la credibilità di un sito Web in base al suo aspetto . E i visitatori guardano l'intestazione subito dopo essere atterrati su un sito web. Diventa difficile estendere la sessione dei visitatori su qualsiasi sito web senza dare un aspetto accattivante all'intestazione web.

Le intestazioni trasparenti appiccicose possono aiutarti molto in questo caso. Ci auguriamo che questo articolo sia stato in grado di soddisfare le tue esigenze su come creare intestazioni trasparenti adesive con Elementor. Se hai altre domande su questo argomento, ti chiediamo di farcelo sapere attraverso la sezione commenti. Il nostro team ti risponderà presto.

Se ti piace ricevere articoli più interessanti come questo, iscriviti e segui i nostri canali Facebook e Twitter.