What’s the very first thing you notice while visiting a website? The header, right? Yes! We’re all the same!
L'intestazione è la prima cosa che attira l'attenzione dei visitatori del tuo sito. Puoi considerare l'intestazione come la spina dorsale di qualsiasi sito web.
Non importa se possiedi un sito di e-commerce, un blog, un social media, un forum o un sito di portfolio personale, devi aggiungere un menu trasparente di Elementor semplice e facile da navigare.
However, adding a simple header with the menu isn’t enough now! You must customize the header to provide the best user experience to your audience. And you can do that by making the Elementor transparent header background and sticky!
In questo articolo, ti mostrerò il metodo più avanzato ma che fa risparmiare tempo su come aggiungere un'intestazione adesiva trasparente in WordPress con Elementor!
Creiamo un'intestazione adesiva Elementor che faccia amare il tuo sito web ai visitatori a prima vista.
Sapevi che con Elementskit puoi creare un'intestazione trasparente Elementor personalizzata per Elementor in pochi minuti? Andiamo prova Elementskit gratuitamente
Quick Overview: How to Create a Sticky Elementor Transparent Header
Creating a sticky Elementor transparent header can easily be done with the use of a plugin like ElementsKit. You can build a header template, enable the sticky option so it stays at the top while scrolling, and remove the background color to make it transparent over page content.
Steps to Create a Sticky Elementor Transparent Header:
✅ Create a menu first – Go to Appearance → Menus in WordPress and create a primary menu.
✅ Create a header template in ElementsKit – Go to ElementsKit → Header Footer → Add New, choose “Header”, set its title and display condition, and activate it.
✅ Edit with Elementor – Click Edit with Elementor to start customizing the header.
✅ Choose a header design – Open the ElementsKit header library, pick a design, and insert it into your header.
✅ Stick the Elementor transparent menu – In the Advanced tab, open ElementsKit Appiccicoso and set the header to Sticky → Top.
✅ Make the header transparent over content – In the Style tab under Menu Wrapper, remove the background color (e.g., set to #00000000) and adjust header‑over‑content settings.
✅ Test the header – Add sections under the header and scroll the page to confirm it stays fixed and transparent.
Per esempio, you can design a homepage with a full‑width hero image, then build an Elementor sticky header using ElementsKit plugin, set it to stick at the top, remove its background color, and it stays fixed and transparent over the hero when scrolling.
Riepilogo
A sticky transparent header is a fixed, see-through navigation bar that improves usability while allowing page content to remain visible underneath.
Che cos'è un'intestazione trasparente appiccicosa in WordPress?
Un'intestazione trasparente adesiva definisce un'intestazione che rimane fissa e trasparente quando qualcuno scorre verso il basso o verso l'alto. Questa intestazione ti consente di visualizzare senza interruzioni lo sfondo del tuo sito quando lo scorri.
Cose di cui avrai bisogno
Per seguire questo blog tutorial, avrai bisogno di:
- Un sito WordPress
- Generatore di pagine Elementor
- ElementsKit, an Elementor sticky header plugin
- 5-10 minuti del tuo tempo.
Hai tutto? Ottimo, sei pronto per partire.
Progettiamo uno sfondo trasparente per l'intestazione di Elementor!
Puoi creare un'intestazione tramite un nuovo modello di intestazione o una nuova pagina. Ma preferisco sempre creare una nuova pagina per progettare un'intestazione adesiva trasparente utilizzando Elementor.
Una volta terminato il design dell'intestazione, puoi semplicemente copiare e incollare il modello nel modello di intestazione. Facile, vero?
Passiamo alla guida su come creare un'intestazione trasparente adesiva in WordPress con Elementor.
Passaggio #1: crea prima un menu
Per aggiungere un'intestazione fissa Elementor, devi iniziare creando prima un menu. Per creare un nuovo menu, vai su wp-admin > Aspetto > Menu.
Once you’re done creating the menu, give the menu name “Primary” or anything you want and click on “Save Menu”. If you’ve created a menu already, It will look somewhat like this –
Potresti notare il "Megamenù"sezione sopra. Fondamentalmente, è una delle funzionalità più utili di ElementsKit. Se desideri aggiungere molte categorie o opzioni nella sezione del menu, puoi utilizzare questa funzione Megamenu.
⭐ ⭐ Check out a detailed guide on come creare un megamenu in Elementor.
Passaggio #2: creare un modello di intestazione
Go to the “Piè di pagina dell'intestazione” section of your ElementsKit. Add a New Header Template by clicking on “Aggiungere nuova”.
Now the template settings will appear. Here you have to do the following tasks:
- Dai un titolo all'intestazione.
- From the “Tipo” setting dropdown, choose “Header”
- Scegli la condizione che preferisci. Ho scelto "Intero sito" dal menu a discesa.
- Attiva il modello di intestazione attivando l'interruttore.
Passaggio #3: modifica con Elementor
Una volta completate tutte le attività sopra menzionate, fai clic sul pulsante "Modifica con Elementor" in basso a sinistra.
Passaggio #4: scegli un design per l'intestazione
In questa sezione puoi scegliere un design di intestazione dalla libreria di intestazioni integrata di ElementsKit.
To proceed, click on the ElementsKit icon, choose a beautiful design, and click the ‘Inserire’ button to import the header in Elementor.
Passaggio #5: incolla il menu trasparente di Elementor
We’ve already selected our header design. Now, it’s time to stick the header on the top position. Browse the ‘Advanced’ tab of Elementor for this task. From the advanced tab, find “ElementsKit Appiccicoso”. Make the menu Sticky at the Top from the dropdown.
Note that you can choose to make the header sticky until a certain section. In that case, define the Appiccicoso fino a quando. You can also apply Sticky Offset to the header, ranging from 0 to 100.
Step #6: Make the Elementor Transparent header over the content
Now, hop into the ‘Stile’ tab. From the “Menu Wrapper” section, set the Elementor transparent menu height of your choice.
Choose the menu wrapper background type ‘Classic’ and remove color by using the slider to the left end. You can also put the color code manually. In that case, enter #00000000 to get a transparent background. Moreover, you can also adjust the Elementor header over content from the content tab.
Per rendere l'intestazione più raffinata e attraente, puoi anche sfruttare una delle seguenti impostazioni:
Passaggio #7: test l'intestazione trasparente di Elementor
Bene, abbiamo progettato questa intestazione trasparente utilizzando Elementor e un altro Plug-in aggiuntivo intestazione trasparente Elementor chiamato ElementsKit. Ora è il momento di controllare il risultato.
Puoi aggiungere qualche altra sezione sotto l'intestazione per avere una migliore comprensione della trasparenza. In questo tutorial, ho aggiunto due immagini sotto la sezione dell'intestazione. Ecco l'output finale.
Questo è tutto! Abbiamo creato con successo uno sfondo trasparente per l'intestazione di Elementor. Ora puoi copiare questa intestazione e applicarla a qualsiasi pagina del tuo sito web.
Ancora confuso? Guarda questo video tutorial:
Diversi design di intestazioni per gli utenti di ElementsKit
ElementsKit comes with numerous built-in header designs out of the box. All of these are stylish, unique, and help the user to navigate throughout your entire website.
Dai un'occhiata ad alcuni progetti di intestazione di ElementsKit.
Illustrazione 1 – Intestazione adesiva Elementor
Illustrazione 2 – Intestazione adesiva Elementor
Illustrazione 3 – Intestazione adesiva Elementor
Illustrazione 4 – Intestazione adesiva Elementor
Illustrazione 5 – Intestazione adesiva Elementor
Aren’t these designs awesome? Yes, you can access a huge list of premium Elementor stcky header designs like this by using ElementsKit collegare.
Perché dovresti usare a Trasparente Intestazione adesiva Elementor?
Che ti piacciano o meno queste intestazioni trasparenti adesive per Elementor, devi provarle. Queste intestazioni bellissime e alla moda aggiungono grande valore al tuo sito web. Qui ho elencato i quattro principali motivi per utilizzare un'intestazione adesiva trasparente per il tuo sito web.
Migliore marchio
Migliaia di aziende hanno inserito il proprio logo nell'intestazione principale. Pensi che sia solo una coincidenza?
No!
UN Il rapporto di Lucidpress mostra che la presentazione coerente del logo di un marchio aumenta fatturato di circa il 33%. Significa che puoi aumentare le entrate della tua azienda solo mostrando al pubblico il logo del marchio.
Se inserisci il logo su un'intestazione fissa per Elementor, sarà visibile in tutto il sito web. Pertanto, le persone noteranno il tuo logo più a lungo. Renderà il tuo marchio familiare a più persone e aumenterà le entrate.
Migliore esperienza utente
Un'intestazione fissa consente agli utenti di navigare più velocemente nel tuo sito web. Possono trovare le informazioni desiderate con il minimo sforzo.
D'altra parte, l'utilizzo di un'intestazione fissa richiede più tempo agli utenti per trovare le informazioni. Nessuno vuole scorrere sempre verso l'alto per utilizzare l'intestazione principale. Di conseguenza, gli utenti lasciano il tuo sito web.
Beh, potresti attaccare l'intestazione in alto. Ma non è la fine del tuo dovere. Al giorno d'oggi, la maggior parte delle persone naviga sui siti Web tramite un dispositivo mobile. Se attacchi l'intestazione in alto, si occupa spazio e si mostra meno contenuto. Non è facile da usare.
Per risolvere questo problema, dovresti utilizzare l'intestazione trasparente di Elementor. Pertanto, puoi mantenere visibile l'intestazione e anche mostrare più contenuti ai visitatori. È semplicemente una situazione vantaggiosa per entrambi, non è vero?
Migliora il posizionamento nei motori di ricerca
Essendo un webmaster, probabilmente saprai che anche i motori di ricerca tengono molto all'esperienza dell'utente. È uno dei fattori di ranking più importanti di Google. Significa che solo un'intestazione fissa ti aiuterà a migliorare il posizionamento del tuo sito web su Google e ad attirare più potenziali clienti.
Vuoi perdere i tuoi clienti? Non penso!
Ti capita mai di avere problemi nella navigazione di un sito web?
Beh, l'ho affrontato molto!
Scorrere sempre verso l'alto è la cosa più noiosa o tremendamente noiosa da fare mentre si visita un sito web. Se non vuoi creare ulteriori problemi al tuo pubblico, dovresti eliminare subito l'intestazione standard.
Invece, progetta un'intestazione trasparente personalizzata Elementor e offri un'esperienza di navigazione più fluida ai tuoi clienti. Inoltre, puoi anche rendere la navigazione estremamente intuitiva con navigazione di una pagina WordPress.
Expert Insights
Transparent sticky headers look great, but need careful design. Here are quick expert tips:
Ensure Readability
- Use contrasting text colors or subtle shadows so your menu is always visible.
- Adjust colors when the header overlaps different backgrounds.
Smart Transparency
- Use partial transparency (80–90%) instead of fully clear.
- Consider adding a subtle background when users scroll.
Test Responsiveness
- Check the header on desktop, tablet, and mobile.
- On mobile, use a smaller header or hamburger menu to save space.
Keep it Simple
- Limit menu items and highlight key links.
How to Change the Header Color on Scroll?
Transitioning a transparent header to a solid color as the user scrolls is one of the most effective ways to keep navigation readable against varying page content. You can achieve this dynamic effect natively within the ElementsKit ecosystem without writing custom CSS.
Follow these exact steps to apply the background color change:
Activate the Module: First, ensure the core functionality is active by navigating to ElementsKit > Modules in your WordPress dashboard and toggling the Contenuto appiccicoso module to ON.
Access the Header: Open your header template via “Edit with Elementor” and click the handle for the main header section or container.
Enable Sticky Top: Passare a Avanzate tab, expand the ElementsKit Appiccicoso panel, and select Superiore from the drop-down menu. This ensures the header remains fixed at the top of the viewport.
Set the Scroll Offset: Assign an Compensare value (for example, 50px). This dictates the exact scroll distance required before the transparent background switches to your new color.
Assign the New Color: Within the same ElementsKit Sticky panel, locate the background color option—typically found just under the Appiccicoso fino a quando settings. Select the solid color you want the header to become once the offset distance is reached.
Publish and Test: Click update and test the live page. Your header will load completely transparent over your hero section, then seamlessly transition to the solid background color once the user scrolls past your designated offset point.
Domande frequenti (FAQ)
Quali sono gli elementi di un'intestazione ideale?
Una buona intestazione deve includere alcuni elementi essenziali che rendano la navigazione fluida e flessibile. Ecco gli elementi necessari di un'intestazione ideale:
- Logo
- Barra di ricerca
- Dettagli del contatto
- Commutazione della lingua
- Menu di navigazione
- Icone dei social media
- CTA
- Icona del carrello
Come si può rendere appiccicosa l'intestazione trasparente per diversi tipi di dispositivi?
Fortunatamente, puoi scegliere il tipo di dispositivo su cui desideri mantenere attiva l'intestazione fissa. Hai la libertà assoluta di impostare se desideri impostare l'intestazione adesiva trasparente per utenti mobili, tablet o desktop. Se desideri impostare l'intestazione trasparente permanente per tutti i tipi di dispositivi, assicurati di averla attivata per tutti i dispositivi.
Cosa rende una buona intestazione?
Una buona intestazione deve essere facile da leggere e includere tutte le pagine essenziali del tuo sito. Inoltre, anche il contrasto dei colori e i caratteri svolgono un ruolo significativo nel renderlo visibile. È necessario renderlo espandibile anziché includere troppi elementi nell'intestazione. Includere elementi essenziali costituisce anche una buona intestazione che mantiene con successo l'identità del marchio e stabilisce una navigazione semplice.
Hai bisogno di utilizzare CSS personalizzati per impostare l'intestazione fissa Elementor?
No. If you use ElementsKit pro, you’ll get almost everything you want from the ElementsKit Sticky settings. You are not required to use any custom CSS to build a transparent sticky header for Elementor. However, if you still want to add custom CSS, just leverage “Add kit-sticky-effects Class Offset” and a functional theme to get your work done with CSS code.
Puoi utilizzare un'intestazione Elementor che sia appiccicosa ma non trasparente?
Sì, puoi farlo. se vuoi rendere l'intestazione fissa senza renderla trasparente, imposta semplicemente l'intestazione fissa su 'in alto' e poi cambia il colore dello sfondo con quello desiderato dalle impostazioni "Colore sfondo fisso".
È necessario Elementor Pro per utilizzare l'intestazione adesiva Elementor?
No, if you have the free version of Elementor with ElementsKit Pro, you are all set to make your Elementor header both transparent and sticky. Also, you can make any website element sticky.
Quindi, affrettati e crea un'intestazione fissa per Elementor nel tuo sito WordPress con ElementsKit. Quando puoi rendere la tua intestazione appiccicosa e trasparente allo stesso tempo, perché perdere l'occasione?
Parole finali
A questo punto, devi aver capito quanto trarrai vantaggio solo dall'utilizzo di uno sfondo trasparente per l'intestazione di Elementor. Aggiungi oggi stesso un'intestazione adesiva trasparente al tuo sito web e ottieni il massimo dal tuo sito web.
Si spera che tu possa progettare molte intestazioni adesive trasparenti personalizzate con Componente aggiuntivo ElementsKit Elementor ed Elementor seguendo queste linee guida.
Se hai ulteriori domande sull'intestazione trasparente adesiva per Elementor, faccelo sapere nella sezione commenti. Stiamo aspettando con impazienza di risolvere i tuoi problemi.
Buona giornata!
Lascia un commento