L'intestazione di a sito web è la prima informazione percepita da Visitatori del tuo sito. Ti consente di evidenziare il logo del tuo marchio, organizzare le pagine del tuo sito e fornire altre importanti funzionalità (ricerca, connessione, ecc.). Inoltre, è necessario disporre di un'intestazione mobile e trasparente in quanto migliora l'esperienza dell'utente.

In questo articolo ti mostreremo come creare un'intestazione e renderla trasparente con Elementor. Ma prima vedremo cos'è un'intestazione mobile e trasparente.

Cos'è un'intestazione mobile e trasparente?

Un'intestazione mobile è una barra di navigazione che rimane sempre fissa anche quando il visitatore scorre la pagina web. È molto adatto per siti che hanno pagine con articoli lunghi, recensioni e siti di una pagina. E il suo aspetto trasparente ti consente di vedere il colore di sfondo della pagina e il suo contenuto.

Perché utilizzare intestazioni mobili e trasparenti

I siti Web moderni utilizzano sempre più intestazioni mobili e trasparenti perché hanno un impatto visivo sul Visitatori del sito. Le motivazioni per la loro adozione sono finalizzate a:

• Aumenta la notorietà del tuo marchio,
• Potenzia l'esperienza dell'utente,
• Migliora la navigazione

Scopri Come creare un titolo a due colori in Elementor

Aggiungi e rendi trasparente un'intestazione con Elementor

Per creare un'intestazione trasparente e mobile, devi disporre di entrambe le versioni diElementor (Pro e Lite). Altrimenti, scarica il (Elementor, Elementor Pro) prima di cominciare.

Una volta installato, segui i passaggi successivi.

Passo 1: crea un menu con Elementor

Per creare un menu, attenersi alla seguente procedura:

• selezionare successivamente Aspetto >> Menu
• Assegna un nome al menu
• Indicare la posizione del menu
• Convalida facendo clic sul pulsante salva menu

• Controlla le pagine, gli articoli o i post nel gruppo Aggiungi elementi al menu
• Fare clic Aggiungi al menu per aggiungere le voci contrassegnate al menu
• Infine fare clic su Salva Menu

Leggi anche Elementor: come visualizzare il testo sopra un'immagine

Passaggio 2: seleziona il modello di intestazione dalla libreria di modelli di Elementor

Utenti diElementor I professionisti hanno accesso a una libreria di modelli pronti all'uso utili per progettare diverse sezioni di un file sito web. Qui troverai anche una varietà di modelli di intestazione. Per farlo,

• Vai successivamente a Modelli >> Aggiungi

• Vedrai un pop-up modale
• selezionare testata
• Infine fare clic su Crea un modello

Da quel momento in poi, viene visualizzata la libreria. Per impostazione predefinita, visualizza i blocchi di intestazione. Sfoglia i modelli offerti, quindi inserisci il modello che ti interessa.

Il modello di intestazione si aprirà nella tela di Elementor.

Passo 3: Pin header con Elementor

Per bloccare l'intestazione, procedi nel seguente modo:

• Fare clic sul pulsante Modifica sezione intestazione
• Quindi seleziona la scheda Avance
• Poi Effetto movimento

• Espandi il menu Spillo e selezionare il valore In alto, questo bloccherà l'intestazione del tuo sito mentre il visitatore scorre le pagine.
• Per impostazione predefinita, l'intestazione verrà bloccata automaticamente su supporti come desktop, tablet e dispositivi mobili

Sfoglia anche Elementor: come esportare e importare modelli

Passo 4: Rendi l'intestazione trasparente con Elementor

Per ottenere ciò, ripetere il metodo seguente:

• Vai su stile >> sfondo >> selettore colore

• Quindi cambia l'opacità dello sfondo

Se vuoi rendere l'intestazione completamente trasparente, cambia il tipo di sfondo selezionando il tipo classico. Pertanto, i menu di navigazione saranno invisibili a causa del contrasto del colore del testo (bianco).

Per rimediare a questa situazione, procedere come segue:

• Successivamente cliccare su Modifica Menu di sfoglia >> stili
• Poi sul color Picker
• Scegli il colore desiderato (nel nostro caso non è stato necessario cambiarlo).

Una volta fatto, puoi pubblicare la tua pagina web. Ma prima, vediamo come sostituire i menu di navigazione nel nostro template con quelli che abbiamo creato. Ricordiamo che il nome assegnato al nostro è menu di intestazione (vedi punto 1):

• Seleziona la scheda contenuto
• Quindi modificare il menu selezionando il nome della tua intestazione

Ed ecco fatto :).

Conclusione

Le intestazioni trasparenti e mobili possono esserti utili in diversi casi. Ci auguriamo che questo articolo sia stato in grado di soddisfare le tue esigenze su come creare intestazioni trasparenti e mobili con Elementor. Se hai altri dubbi su questo argomento, faccelo sapere nei commenti.