Come aggiungere una barra superiore in WordPress con Elementor

Una barra superiore fornisce un modo efficace per evidenziare messaggi, promozioni e inviti importanti su WordPress. È posizionato nella parte superiore della pagina web con l'obiettivo di attirare l'attenzione dei visitatori senza ostacolare l'esperienza di navigazione degli utenti.

Una barra di alto livello ben progettata può aumentare significativamente le conversioni in quanto può attirare istantaneamente l'attenzione dei visitatori e guidarli verso azioni come iscriversi alle newsletter, afferrare offerte a tempo limitato ed esplorare nuovi contenuti. Funziona come un promemoria persistente senza disturbare gli utenti.

L'aggiunta di barre superiori a WordPress è molto semplice con Elementor. In questo articolo, tratteremo una guida passo-passo su come aggiungere una barra superiore in WordPress con Element. Resta con noi fino alla fine.

Cos'è una barra di alto livello?

Una barra superiore è una sezione orizzontale stretta visualizzata nella parte superiore di un sito Web sopra l'intestazione principale. A differenza di pop-up o striscioni, viene utilizzato per esibire dettagli di contatto, descrizioni di collegamenti, annunci importanti, offerte promozionali e messaggi. Puoi migliorare il coinvolgimento degli utenti con ampie personalizzazioni, come colori, caratteri e pulsanti specifici del marchio.

La barra superiore non viene sempre visualizzata nella parte superiore di un sito Web 24/7. Invece, di solito viene mostrato durante i periodi della campagna per scopi promozionali. È definito da nomi diversi a seconda dei casi d'uso. Ne discuteremo nella sezione seguente. Continua a leggere.

Come si chiama la barra superiore su un sito web?

Come detto solo un minuto fa, la barra superiore su un sito Web è definita da nomi diversi in base al suo scopo e funzionalità. Dai un'occhiata ad alcuni termini comuni utilizzati per la barra superiore, che sono elencati di seguito.

• Barra degli annunci: utilizzato per condividere annunci, notifiche di eventi e importanti aggiornamenti.

• Barra di notifica: mostra offerte a tempo limitato, notizie di manutenzione del sistema e messaggi urgenti.

• Promo Bar - Evidenzia promozioni speciali, sconti esclusivi e campagne per aumentare le vendite.

• Info Bar - Mostre di contatto, dettagli dello shopping, indirizzi locali e orari di lavoro.

• Sticky Bar: rimane fissa nella parte superiore del sito Web anche quando gli utenti scorrono post e pagine.

• Barra mobile: si muove quando scorri pali e pagine per garantire una presenza evidente.

Come aggiungere una barra superiore in WordPress con Elementor

La parte teorica è finita. Ora, copriremo la parte tutorial in questa sezione, spiegando una guida passo-passo su come aggiungere una barra superiore in WordPress usando Element.

Prerequisito: installa elemento o happyaddons

Per creare una barra di alto livello sull'intero sito Web, è necessario avere accesso al Builder del tema Element, che è una funzione premium. Se si desidera utilizzare la versione premium del plug -in e stai cercando un'opzione gratuita, devi provare il plug -in HappyAddons.

HappyAddons è in realtà un componente aggiuntivo al plug -in Elementor con molte funzionalità gratuite che sono normalmente premium in Element. Ad esempio, HappyAddons ha anche un costruttore di temi, che è abbastanza simile a Elementor, ma è completamente libero da usare.

Quindi, in questa sezione, useremo il plugin HappyAddons per spiegare il tutorial. Installa e attiva i seguenti plugin sul tuo sito.

• Elemento
• HappyAddons

Una volta installati e attivati ​​sul tuo sito, inizia a seguire il tutorial spiegato di seguito. Ti mostreremo come creare una barra superiore su WordPress come quella che puoi vedere nell'immagine qui sotto.

Passaggio 01: vai a HappyAddons Theme Builder

Naviga su HappyAddons> Tema Builder . Come il plug -in Elementor, è possibile creare una intestazione, un piè di pagina, un modello di post sul blog e una pagina di archivio con il builder a tema del plugin HappyAddons.

Passaggio 02: vai alla sezione di intestazione

Poiché la barra superiore viene visualizzata sopra l'intestazione Web, devi personalizzarla dalla sezione di intestazione. Quindi, apri l'intestazione con l'opzione Modifica con Element.

Scopri come creare contenuti off-canvas in Element.

Passaggio 03: Aggiungi un nuovo contenitore sopra l'intestazione

Il broncio del cursore sull'intestazione mostrerà l' icona Plus (+) . Facendo clic su questa icona ti permetterà di aggiungere un nuovo contenitore all'intestazione sopra. Fallo.

Passaggio 04: personalizza la barra in alto e aggiungi contenuti ad essa

È necessario aggiungere un colore contrastante allo sfondo della barra superiore. Per fare ciò, fai clic sull'icona a sei punteggio sul contenitore> Vai alla scheda Style > Trova l'opzione colore > Seleziona un colore.

Aggiungi il widget dell'editor di testo alla sezione della barra in alto. Ciò ti consentirà di aggiungere contenuto di testo alla sezione.

Sotto l'editor di testo nella barra laterale destra, puoi scrivere il contenuto di testo desiderato che verrà visualizzato sulla barra in alto in tempo reale.

Dall'opzione di seguito nella sezione Editor di testo, è possibile modificare il colore e l'audacia del testo che hai aggiunto alla barra superiore.

Puoi anche aggiungere spazi tra le parole e sottolineare determinate parole. Abbiamo fatto questo al nostro testo per questo tutorial. Puoi vederli sotto.

HappyAddons ti consente di aggiungere effetti di particelle allo sfondo della barra superiore. L' effetto delle particelle Happy è una tecnica di animazione visiva in cui piccole particelle luminose si muovono dinamicamente su una pagina web, creando un'esperienza utente vivace e coinvolgente.

Per aggiungere questo, navigare su Style> felici effetti di particelle . Successivamente, alternare per abilitare lo sfondo delle particelle .

Successivamente, puoi scegliere uno stile di particelle, un colore delle particelle, l'opacità, il numero di particelle, le dimensioni delle particelle e la velocità di spostamento . Spero che tu possa farli da soli.

Abbiamo aggiunto una breve clip in modo da poter controllare come funziona la funzione di particelle felice. Questo rende davvero la barra superiore così bella da guardare.

Espandere la sezione di confine . Puoi impostare una larghezza del bordo e un colore come vuoi. Tuttavia, pensiamo che l'aggiunta di un bordo non sia importante per la barra superiore. Quindi, puoi evitarlo.

Ora, espandi la sezione del divisore di forma . L'opzione Divisore di forma consente di aggiungere forme personalizzabili e dinamiche nella parte superiore o inferiore delle sezioni.

Tuttavia, questa opzione non è anche importante per la barra superiore. Quindi, è meglio che tu lo eviti. Ma se hai voglia di aggiungere questa funzione alla barra superiore, puoi farlo.

Ecco una guida su come creare una pagina Web infografica con Elementor.

Passaggio 05: configurare le impostazioni avanzate per la barra superiore

Infine, vieni alla scheda Advanced . Riceverai numerose opzioni qui per personalizzare il margine, l'imbottitura, l'allineamento, l'ordine, la posizione, l'altezza, l'effetto di movimento, il reattivo e altro ancora. Fai tu stesso le personalizzazioni necessarie.

Passaggio 06: nascondere la barra superiore su un tipo di dispositivo

Puoi nascondere la barra superiore su qualsiasi rispettivo dispositivo desiderato. Ad esempio, vogliamo nascondere la barra superiore sui dispositivi tablet. Per fare ciò, espandi la sezione reattiva. Quindi, disattiva l'opzione della modalità dispositivo in cui si desidera nascondere la barra superiore.

Passaggio 07: Rendi reattiva la barra top mobile

Fare clic sull'opzione Modalità reattiva sul piè di pagina del pannello Element. Quindi, selezionare la modalità di ritratto mobile .

Puoi vedere che il contenuto della barra superiore appare in tre righe e non è perfettamente allineato, a differenza di come lo vedi in modalità desktop.

Per rendere il testo buono per le dimensioni dello schermo, eseguire le personalizzazioni di cui hai bisogno rimanendo in modalità ritratto mobile.

Abbiamo allineato i testi centralmente. Non sembra meglio adesso? Puoi personalizzarlo ulteriormente nel modo in cui desideri.

Passaggio 08: pubblicare/aggiornare le modifiche

Quando tutte le personalizzazioni vengono eseguite, fare clic sul pulsante Publish/Aggiorna nella parte inferiore del pannello Element per preservare tutte le modifiche.

Esplora come creare un Lightbox in WordPress con Element.

Passaggio 09: Anteprima la barra superiore sul sito Web

Ora, vieni al frontend del tuo sito web. Vedrai che la barra superiore viene visualizzata in cima al tuo sito.

Pertanto, è possibile creare facilmente una barra superiore su WordPress utilizzando gratuitamente il plug -in Elementor.

Pensieri finali

Spero ti sia piaciuto questo tutorial. Ma per ottenere il meglio dalla barra superiore, ci sono diverse cose chiave che devi seguire attentamente. Concentrati sul mantenimento di un design pulito e visivamente accattivante che si allinea al marchio del tuo sito Web. Scegli i colori contrastanti per la leggibilità, usa un testo chiaro e conciso e mantieni il messaggio pertinente per il tuo pubblico.

Inoltre, ottimizza per la reattività mobile in modo che la barra superiore rimanga funzionale su tutti i dispositivi senza ostruire l'esperienza dell'utente. Evita di sovraccaricare la barra superiore con troppe informazioni, in quanto può sopraffare i visitatori. Se si utilizza animazioni o effetti, mantienili sottili per mantenere la professionalità.

Se hai ancora confusione o domande in mente, facci sapere loro attraverso la casella dei commenti qui sotto.