Come creare un'intestazione trasparente in Elementor
Pubblicato: 2022-05-02Puoi creare barre dei menu dinamiche dall'aspetto fantastico se sapessi come creare un'intestazione trasparente in Elementor.
A differenza delle intestazioni medie, un'intestazione trasparente di Elementor comporta un maggiore coinvolgimento dell'utente poiché i visitatori vedono il menu fluttuare insieme allo schermo quando scorrono verso il basso.
Creare tali intestazioni non è un compito difficile se conosci il modo giusto.
Quindi, impariamo che in questo articolo.
Perché l'intestazione è importante?
Il tuo sito web ha un obiettivo: attirare visitatori sul tuo sito e coinvolgerli con ciò che hai da offrire.
In effetti, hai bisogno di una solida base che i visitatori si sentano obbligati a esplorare, quindi è necessario aggiungere un elemento di qualità a ciò che costituisce la spina dorsale di qualsiasi sito: l'intestazione!
Proprio come una casa accoglie gli ospiti, una buona intestazione accoglie i visitatori mostrando chiaramente dove si trovano e cosa si può trovare nel tuo sito.
Un banner semplice ma ben posizionato per una facile navigazione è importante sia che tu possieda un negozio di e-commerce o un blog, un profilo di social media, un forum o semplicemente un sito Web portfolio.
Tuttavia, questo non significa che dovresti accontentarti di base!
Personalizzare la tua intestazione usando la tua immaginazione e aggiungere elementi avanzati che lasceranno davvero incantati i visitatori è ciò di cui hai bisogno.
Ad esempio, un'intestazione trasparente funge da menu permanente che segue il visitatore nel suo viaggio, indipendentemente da dove si aggira nel tuo sito.
Se il tuo sito web ha pagine lunghe e hai bisogno che le persone si muovano più velocemente, è meglio aggiungere un'intestazione trasparente.
Quindi, vediamo come creare un'intestazione trasparente in Elementor.
Perché scegliere un'intestazione trasparente
Un'intestazione porta l'identità del tuo sito, quindi è essenziale renderlo più attraente e visibile ai visitatori.
Nel caso di un'intestazione trasparente di Elementor, i visitatori potrebbero vederla muoversi con l'intero schermo, aggiungendo più valore al marchio.
Lo studio mostra un notevole miglioramento del traffico del sito e del tasso di conversione visualizzando costantemente il tuo marchio sull'intero sito web.
Un'intestazione trasparente si adatta perfettamente a questo ruolo.
Non solo, gli utenti possono spostarsi più velocemente sul tuo sito Web se ottengono un'intestazione adesiva sullo schermo superiore per aiutarli a navigare facilmente.
Quindi, un'intestazione trasparente aggiunge maggiore flessibilità ed esperienza utente.
Ciò significa anche che Google metterà il tuo sito al primo posto grazie all'esperienza utente e al sistema di navigazione migliorati.
Quindi, puoi ottenere un buon numero di vantaggi semplicemente trasformando la tua normale intestazione in un'intestazione trasparente appiccicosa.
Tutto ciò di cui hai bisogno per progettare la tua intestazione trasparente
Non un aereo, nemmeno un'astronave. Ma hai bisogno di queste cose per progettare un'intestazione trasparente in Elementor-
- Un sito WordPress
- Costruttore di siti Web Elementor (ex generatore di pagine Elementor)
- Pacchetto di elementi Lite
- Molto probabilmente 6 minuti sul tuo orologio
Ottenere un sito WordPress funzionante non richiede molto e puoi farlo ogni volta che vuoi.
Utilizzeremo la versione gratuita di Elementor Page Builder che non costa nulla.
Per la parte di progettazione, utilizzeremo Element Pack Lite, una versione gratuita del plug-in Element Pack Pro.
Puoi trovare Element Pack Lite nel campo di ricerca del plugin sul sito WordPress e installarlo.
Oppure puoi scaricare il plug-in dalla directory di WordPress e quindi installarlo manualmente.
Entrambi funzionano.
Ora, iniziamo con come creare un'intestazione trasparente in Elementor.
Passaggio 1: crea un menu nella dashboard di WordPress
Prima di tutto, devi creare un menu di intestazione in WordPress.
Puoi utilizzare la barra dei menu principale nel caso in cui soddisfi le tue esigenze.
Altrimenti, vai su Dashboard> Aspetto> Manus e crea una barra dei menu personalizzata per l'intestazione.
Questo è l'editor di menu principale fornito da WordPress per creare e personalizzare il contenuto del menu come desideri.
Puoi dare un nome di menu che creerai e quindi organizzare le voci di menu facendo clic e trascinando.
Una volta terminato, puoi richiamare il menu in qualsiasi punto del tuo sito Web WordPress.
D'altro canto,
Puoi progettare il menu utilizzando gli elementi o i widget forniti dal plug-in Element Pack.
Una volta aperta la pagina di destinazione nell'Editor di pagine, puoi vedere tutti gli otto widget di menu univoci che puoi utilizzare per creare la tua intestazione.
Qui puoi anche utilizzare il menu creato nella dashboard di WordPress in diversi tipi di layout di menu unici.
Oppure puoi creare il tuo menu di intestazione usando l'interfaccia e i controlli.
Passaggio 2: crea un modello di intestazione in WordPress Elementor
Poiché utilizzerai sempre l'intestazione delle tue pagine Web, trasformarla in un modello conserverà correttamente le impostazioni di layout.
Elementor offre flessibilità nella creazione e personalizzazione del layout del contenuto per i modelli.
Basta fare clic sulla sezione Modelli dalla dashboard di WordPress e selezionare il pulsante Aggiungi nuovo .
Ora devi dare un nome al modello e selezionare Intestazione come tipo di modello.
Per utilizzare il modello di intestazione per l'intero sito, scegli "Intero sito" come condizione.
Ora, fai clic sul pulsante Crea modello per iniziare a progettare l'intestazione.
Successivamente, vedrai una pagina vuota aperta all'interno di Elementor Page Builder in cui devi progettare il tuo modello di intestazione.
Passaggio 3: scegli un modello di intestazione pronto
Se vuoi creare un'intestazione trasparente in Elementor senza sudare una sola goccia, utilizzare i modelli pronti è il modo giusto.
Creare un'intestazione personalizzata va bene, ma per un flusso di lavoro più rapido, puoi semplicemente scegliere un modello e aggirarlo.
Sebbene lo stesso costruttore di siti Web fornisca alcuni modelli di intestazione di base, non sono sufficienti in termini di numeri.
D'altra parte, Element Pack fornisce molti blocchi e modelli per intestazioni con idee e design creativi.
Quindi, puoi facilmente scegliere un layout di intestazione univoco all'interno delle selezioni.
Innanzitutto, apri la pagina di destinazione nell'editor di pagine di Elementor e fai clic sul logo Element Pack su di essa.
Se non vedi l'icona, devi attivare la funzione dalla dashboard.
Basta andare su Dashboard> Element Pack> Altre impostazioni e attivare lo switcher Libreria modelli (nell'editor) e salvare le impostazioni.
Successivamente, vedrai una finestra popup con molti modelli predefiniti.
Quindi fai clic sulla sezione delle intestazioni e scorri centinaia di fantastici design di intestazioni fino a scegliere quello che ti piace.
Seleziona il design dell'intestazione e fai clic sul pulsante "Inserisci" su di esso.
Passaggio 4: fai in modo che il menu rimanga trasparente
Ora è il momento della parte principale.
Qui è dove imparerai esattamente come creare un'intestazione trasparente in Elementor.
Innanzitutto, fai clic sull'icona delle impostazioni della sezione dell'intestazione per visualizzare i controlli per la sezione.
Ora vai alla scheda Avanzate e fai clic sull'opzione Sezione Sticky lì.
Il controllo permanente della sezione di Element Pack fa sì che la sezione si attacchi alla parte superiore della pagina e si muova con lo scorrimento.
Questa opzione include un paio di personalizzazioni come colore, offset, z-index, ecc.
Ora hai un'intestazione appiccicosa.
Quindi vai alla scheda Stile all'interno delle impostazioni della sezione e guarda l'opzione del colore di sfondo qui.
Qui, fai clic sull'opzione del colore e trascina la barra dell'opacità fino in fondo sul lato sinistro.
Questo dovrebbe cancellare qualsiasi colore sotto l'intestazione e rendere trasparente il suo sfondo.
A questo punto, la tua intestazione è pronta.
Passaggio 5: prova l'intestazione trasparente adesiva
L'ultima parte dell'intestazione trasparente nel processo di creazione di Elementor è testarla nella pagina di anteprima.
Potrebbe essere necessario regolare un po' di riempimento o margine per dispositivi diversi, quindi ricontrolla la reattività dell'intestazione.
Tecnicamente, tutti i modelli di intestazione del plug-in Element Pack sono altamente reattivi e si adattano a tutti i dispositivi.
Lo stesso vale anche per gli elementi di intestazione.
Questo è tutto. La tua testata è pronta!!!
Crea fantastiche intestazioni con il componente aggiuntivo Element Pack
Si spera che tu ottenga l'intero processo di creazione di un'intestazione trasparente in Elementor.
Ora è il momento di provare i tuoi progetti utilizzando oltre 200 elementi essenziali del plug-in Element Pack.
Grazie per aver letto questo.