Come utilizzare Elementor per creare un'intestazione trasparente?

Le intestazioni trasparenti possono essere un ottimo modo per migliorare l'aspetto del tuo sito. Fa risaltare il design del tuo sito web e sembra più interattivo per i visitatori del tuo sito.

Ma puoi usare Elementor per creare un'intestazione trasparente su WordPress senza conoscere alcun linguaggio di programmazione? La risposta è si! Puoi sicuramente. Questo articolo ti mostrerà le istruzioni per creare facilmente un'intestazione trasparente di Elementor.

I vantaggi dell'utilizzo di intestazioni trasparenti

Puoi creare facilmente intestazioni trasparenti di Elementor accattivanti. Ma se lo desideri, puoi fare un ulteriore passo avanti e risolverlo mentre i visitatori scorrono il contenuto della pagina. Di seguito sono riportati i vantaggi:

Eccellente per pagine Web lunghe

L'uso di un'intestazione adesiva trasparente è un modo elegante e veloce per garantire ai tuoi visitatori un'esperienza piacevole.

Possono aiutare il tuo sito web ad avere un sistema di navigazione più intuitivo. Se il contenuto del tuo sito è molto lungo, questo vantaggio sarà molto vantaggioso.

Ideale per siti Web utilizzabili

Le intestazioni adesive trasparenti funzionano meglio su siti Web utilizzabili, come siti di vendita al dettaglio o di e-commerce. È perché vuoi che i visitatori eseguano un'azione specifica mentre sono ancora sul contenuto della pagina.

Quando l'intestazione viene mostrata magnificamente durante la navigazione nel tuo sito Web, i visitatori lo troveranno più comodo da esplorare.

Inoltre, poiché l'intestazione è trasparente, non ridurrà la leggibilità del contenuto. Pertanto, l'aggiunta di un'intestazione trasparente può ridurre la frequenza di rimbalzo del tuo sito e aiutare a guidare i visitatori in modo efficiente.

Migliora la tua capacità di navigazione del sito

L'utilizzo di un'intestazione adesiva trasparente sul tuo sito incoraggia i tuoi visitatori ad agire immediatamente. Consente loro di risparmiare tempo durante la ricerca di una particolare opzione.

E invece di mettere il logo del tuo marchio ovunque sulla home page, puoi mostrarlo elegantemente su un'intestazione adesiva trasparente.

Come utilizzare Elementor Pro per creare un'intestazione trasparente?

Ora impariamo come creare e personalizzare un'intestazione trasparente utilizzando Elementor Pro.

Installa e attiva il plug-in Elementor Pro

Se il tuo sito non ha ancora avuto Elementor Pro, devi installarlo e attivarlo.

1. Dalla dashboard di WordPress, vai su Plugin > Aggiungi nuovo .

2. Trova il plugin inserendo 'Elementor'. Vedrai quindi Elementor Website Builder elencato come opzione.
3. Fare clic rispettivamente sul pulsante Installa ora e sul pulsante Attiva .
4. Dopo aver acquistato Elementor Pro con successo, vai su my.elementor.com.
5. Accedi con le informazioni che hai ricevuto nell'e-mail dopo l'acquisto.
6. Successivamente, verrai indirizzato alla pagina del profilo . Fai clic sul pulsante Scarica plug -in nell'angolo in alto a destra per scaricare il file .zip sul tuo computer.

7. Dalla dashboard di WordPress del tuo sito, fai clic su Plugin > Aggiungi nuovo . Quindi, fai clic sul pulsante Carica plug -in nell'angolo in alto a sinistra.
8. Fare clic sul pulsante Scegli file . Seleziona il file .zip appena scaricato. Quindi, fai clic su Attiva .
9. Nella parte superiore della dashboard del sito, riceverai una notifica che ti chiede di attivare la tua chiave di licenza.

Crea un menu per il tuo sito

Successivamente, devi creare un menu di intestazione utilizzando la dashboard di WordPress se non l'hai ancora fatto. Di seguito una guida introduttiva.

1. Dalla dashboard di WordPress, vai su Aspetto > Menu .

2. Immettere il nome del menu nella casella di testo Nome menu . Quindi, fai clic sul pulsante Crea menu .
3. Concentrati sul pannello di sinistra. Qui puoi aggiungere al menu le pagine, i post, le categorie e i collegamenti personalizzati del sito.

4. Puoi trascinare e rilasciare le voci di menu per riorganizzarle o creare sottomenu sul pannello di destra.

5. Quando sei felice, ricorda di fare clic sul pulsante Salva menu .

Usa Elementor Pro per creare un'intestazione normale

1. Vai a Modelli > Aggiungi nuovo dalla dashboard di WordPress.

2. Apparirà una finestra pop-up. Seleziona il modello di intestazione di Elementor dal menu a discesa e inserisci il suo nome nella casella di testo Assegna un nome al modello . Quindi, fai clic sul pulsante CREA MODELLO .

3. La Galleria dei modelli di Elementor apparirà in un pop-up. Puoi navigare attraverso tutti gli stili di intestazione di Elementor. Dopo aver scelto un preferito, sposta il cursore su di esso e fai clic sul pulsante Inserisci . Puoi anche visualizzarli in anteprima tutti.

Crea un'intestazione appiccicosa trasparente utilizzando Elementor Pro

1. Ora devi rendere trasparente l'intestazione usando Elementor Pro. Per fare ciò, fai clic sul pulsante a sei punti sopra l'intestazione.

2. Nella sezione "Layout", scegli il menu che desideri nel menu a discesa Menu.

3. Vai alla scheda Stile per modificare il colore di sfondo dell'intestazione e il valore della trasparenza. Nella sezione "Sfondo", scegli il tipo di sfondo Classico (indicato da un pennello).

4. Fare clic sul pulsante Selettore colore . Quindi, scegli un colore e un valore di trasparenza che desideri.
5. Puoi modificare ulteriormente l'aspetto generale dell'intestazione, inclusi tipografia, sovrapposizione di sfondo, bordo e divisore. Sentiti libero di sperimentare.
6. Quindi, vai alla scheda Avanzate . Quindi, scorri fino alla sezione Effetti di movimento . Abilita l'opzione Effetti di scorrimento .

7. Scegli l'opzione Pagina intera dal menu a discesa Effetti relativi a .
8. Infine, scegli l'opzione Top dal menu a discesa Sticky .
9. Quando sei soddisfatto, fai clic sul pulsante Pubblica per applicare le modifiche.

Il risultato sarà simile al seguente:

Come utilizzare Elementor per creare gratuitamente un'intestazione trasparente ?

Se hai poco budget e non vuoi spendere soldi per Elementor Pro, hai bisogno di un altro plugin per creare intestazioni trasparenti.

In questo articolo, utilizzeremo i componenti aggiuntivi essenziali per il plug-in Elementor. Questa è la libreria di widget più popolare con oltre un milione di utenti attivi.

Riceverai molti widget gratuiti per far risaltare un sito web ed essere il più coinvolgente possibile. Tieni presente che non è necessaria la versione premium per creare intestazioni trasparenti.

Installa e attiva i componenti aggiuntivi Elementor ed Essential per il plug-in Elementor

1. Dalla dashboard di WordPress, vai su Plugin > Aggiungi nuovo .

2. Trova il plugin inserendo ' Elementor '. Vedrai quindi il plug-in Elementor elencato come opzione.
3. Fare clic rispettivamente sul pulsante "Installa ora" e sul pulsante "Attiva".
4. Ripeti la procedura sopra con il plug-in Essential Addons per Elementor.

Crea un menu per il tuo sito

Ne abbiamo già parlato sopra. Si prega di scorrere fino a know-how.

Usa i componenti aggiuntivi essenziali per Elementor per creare un'intestazione adesiva trasparente

1. Passa a Componenti aggiuntivi essenziali > Elementi . Qui, attiva il widget Menu semplice . Ricordarsi di fare clic sul pulsante SALVA IMPOSTAZIONI .

2. Crea una nuova pagina/post o aprine una esistente con Elementor.
3. Fare clic sul pulsante Impostazioni (indicato da un ingranaggio) nell'angolo in basso a sinistra. Seleziona l'"Elementor Canvas" nel menu a discesa Layout di pagina . In questo modo, puoi eliminare l'intestazione fornita con il tema.

4. Torna al menu del widget facendo clic sull'icona a nove quadrati. Cerca il widget Menu semplice . Trascinalo e rilascialo nella posizione desiderata.

5. Nella sezione Generale , scegli il menu che desideri nel menu a discesa Seleziona menu.

6. Vai alla scheda Stile per modificare il colore di sfondo dell'intestazione e il valore della trasparenza.

7. Nella sezione Sfondo , scegli il tipo di sfondo Classico (indicato da un pennello).
8. Fare clic sul pulsante Selettore colore . Quindi, scegli un colore e un valore trasparente che desideri.
9. Puoi modificare ulteriormente l'aspetto generale dell'intestazione, inclusi tipografia, sovrapposizione di sfondo, bordo e divisore. Sentiti libero di sperimentare.
10. Quindi, vai alla scheda Avanzate . Quindi, scorri fino alla sezione Posizionamento . Scegli l'opzione Fissa nel menu a discesa Posizione .

11. Torna al menu del widget facendo clic sull'icona a nove quadrati. Cerca il widget Spacer . Trascinalo e rilascialo proprio sotto il widget Menu semplice .

12. Nella sezione Spacer , regola il valore Space in modo che corrisponda all'altezza dell'intestazione.

13. Quando sei soddisfatto, fai clic sul pulsante Pubblica per applicare le modifiche.

Come creare un'intestazione trasparente per gli utenti Woostify?

Se stai utilizzando il tema Woositfy, anche la versione gratuita, puoi applicare rapidamente una bellissima intestazione trasparente per l'intero sito in pochi minuti. Segui le istruzioni seguenti per conoscere:

1. Vai su Aspetto > Personalizza dalla dashboard di WordPress.

2. Quindi, vai su Layout > Intestazione trasparente .

3. Attiva l' opzione Abilita intestazione trasparente .

4. Nella nuova scheda Generale e Design , puoi personalizzare la nuova intestazione trasparente in base alle tue esigenze. Ad esempio, puoi abilitarlo/disabilitarlo su pagine particolari, come 404, post, ecc.,

5. Non dimenticare di fare clic sul pulsante Pubblica quando sei soddisfatto del risultato.

Parole finali

La creazione di un'intestazione trasparente di Elementor è un approccio elegante per aiutare gli utenti a navigare nel tuo sito.

L'intestazione che abbiamo creato è completamente reattiva. Pertanto, non devi preoccuparti molto di questo problema. Per coloro che utilizzano Woostify, dovresti scegliere la terza via. È anche il modo più semplice e veloce quando vuoi creare una bella intestazione trasparente.