Come visualizzare la barra di avanzamento di lettura in wordpress con elementori

Una barra di avanzamento di lettura è un indicatore visivo su un sito Web che mostra ai lettori fino a che punto sono stati scortati attraverso la pagina o il post sullo schermo. Questo in genere visualizza una barra sottile che si riempie con il progredire dei lettori, scorrendo attraverso la pagina. È uno strumento semplice ma efficace per blog e siti Web pesanti.

Un recente studio sul coinvolgimento degli utenti suggerisce che i segnali visivi possono aumentare il tempo trascorso su una pagina fino al 20% rendendo i contenuti più gestibili . Allo stesso modo, la barra di avanzamento può aiutare gli utenti a tenere traccia del loro viaggio di lettura, che può aumentare la soddisfazione e incoraggiarli a esplorare di più.

Con Element, è facile aggiungere una barra di avanzamento di lettura a WordPress. Quindi, in questo articolo, tratteremo una guida passo-passo su come visualizzare la barra di avanzamento di lettura in WordPress con Elementor.

Vantaggi della visualizzazione della barra di avanzamento del lettore in WordPress

L'aggiunta di una barra di avanzamento di lettura a un sito WordPress offre diversi vantaggi. Ciò non solo migliora l'esperienza dell'utente, ma anche il coinvolgimento. Dai un'occhiata ad alcuni vantaggi chiave dell'aggiunta della barra di avanzamento di lettura in WordPress di seguito.

• Migliora il coinvolgimento degli utenti

Una barra di avanzamento di lettura può mantenere i lettori motivati ​​mostrando visivamente fino a che punto hanno progredito attraverso un post. Ciò incoraggia gli utenti a continuare a leggere, soprattutto per contenuti a lungo termine. Dai un'occhiata ad alcuni punti rapidi su come migliorare il coinvolgimento degli utenti sul tuo sito Web.

• Migliora la chiarezza di navigazione

Per lunghi articoli o tutorial, una barra di avanzamento fornisce una chiara indicazione di quanto contenuto rimane. Questo aiuta gli utenti a indovinare se hanno tempo per finire o meno.

• Riduce le velocità di rimbalzo

Offrendo un segnale visivo che rompe i contenuti in un viaggio tracciabile, una barra di avanzamento può far sembrare i lunghi post meno schiaccianti. Questo può essere notevolmente più bassi tassi di rimbalzo. Ecco una guida su come ridurre la frequenza di rimbalzo su WordPress.

• Migliora il fascino estetico

Una barra di avanzamento ben progettata aggiunge un moderno fascino al tuo sito. Puoi personalizzare l'aspetto della barra di lettura per abbinare il marchio del tuo sito per creare un look lucido.

• Supporta l'usabilità mobile

Sui dispositivi mobili, dove lo scorrimento può sembrare infinito, una barra di progresso fornisce un senso di controllo e contesto. Rassicura gli utenti che stanno facendo progressi attraverso il post o la pagina.

Come visualizzare la barra di avanzamento di lettura in wordpress con elementori

In questo tutorial passo-passo, ti guideremo attraverso il processo di aggiunta e personalizzazione di una barra di avanzamento di lettura sul tuo sito WordPress usando Elementor e la versione gratuita di HappyAddons. Ma potresti chiedere: perché HappyAddons e cos'è questo ?

In realtà, HappyAddons è un noto addon del plug-in Elementor. Viene fornito con molte caratteristiche e widget intraprendenti per superare i limiti di Element. Leggere la barra del progresso è uno dei. E la buona notizia è che la funzione di barra del progresso di lettura è completamente gratuita.

Prerequisiti per l'aggiunta della barra di avanzamento di lettura

• Elemento
• HappyAddons

Assicurati che i plugin siano installati e attivati ​​sul tuo sito. Una volta che sono pronti sul tuo sito, inizia a seguire i passaggi spiegati nel tutorial di seguito.

Passaggio 01: Abilita la funzione di barra di avanzamento di lettura

Vai al tuo dashboard WordPress e naviga su HappyAddons> Funzionalità .

Quando arrivi alla pagina delle funzionalità , individuare l'opzione di barra di avanzamento di lettura . Attiva abilitare la funzione.

Passaggio 02: Apri una pagina con Element

Ora, per configurare la funzione di barra di avanzamento di lettura, apri una pagina con Element.

Passaggio 03: vai alle impostazioni del sito di Element

Fai clic sull'icona di hamburger nell'angolo in alto a sinistra del pannello Element.

Vai all'opzione Impostazioni del sito facendo clic su di essa.

Scorrendo il pannello Element, individuare la barra di avanzamento di lettura e fare clic su di essa .

Attiva alterni per abilitare l'opzione di barra di avanzamento di lettura .

Passaggio 04: configurare l'opzione barra di avanzamento di lettura

Dopo aver abilitato l'opzione di barra di avanzamento di lettura, otterrai numerose opzioni per configurare la funzione.

# Seleziona dove visualizzare la barra di avanzamento

Puoi scegliere di visualizzare la barra di avanzamento in tutto il tuo sito, che significa su tutti i post e le pagine. Oppure, puoi scegliere di visualizzarlo selettivamente.

Se si desidera visualizzarlo sia su post che su pagine, selezionali nella casella accanto a visualizzare.

# Seleziona un tipo di barra di avanzamento

HappyAddons ti consente di scegliere tra tre tipi di barre di avanzamento: orizzontale, verticale e cerchio . Quindi, scegli uno di essi, fai clic sull'opzione a discesa accanto a Digita .

Vedrai le opzioni. Scegli un tipo che desideri. Per il tutorial, andremo con il tipo orizzontale.

# Seleziona una posizione per la barra di avanzamento

È possibile visualizzare la barra di avanzamento in cima o in basso. Quindi, scegli dove si desidera visualizzarlo dall'opzione di posizione accanto ad essa.

Dato che abbiamo scorrere la pagina, puoi vedere una barra di avanzamento appare in cima alla pagina.

# Stilizzare la barra di avanzamento

Dallo stesso pannello Element, è possibile personalizzare l' altezza, il colore della barra di avanzamento, il colore di sfondo e la descrizione percentuale della funzione della barra di avanzamento.

Spero che tu possa fare questa personalizzazione da solo.

Passaggio 05: anteprima della barra di avanzamento

Una volta terminato, vai al frontend del tuo sito. Controlla se la barra di avanzamento funziona bene o no scorrendo lo schermo.

Pertanto, puoi facilmente aggiungere la barra di avanzamento di lettura a WordPress usando i plugin Element e HappyAddons.

Come appare la barra di progresso verticale

Sopra, ti abbiamo mostrato il processo di creazione di una barra di avanzamento orizzontale. Allo stesso modo, puoi abilitare e visualizzare la barra di avanzamento verticale sul tuo sito. Una volta abilitato, la barra di avanzamento sembrerà quella mostrata nel video allegato di seguito.

Come appare la barra del progresso del cerchio

Anche in questo caso, seguendo lo stesso processo, è possibile visualizzare la barra di avanzamento del cerchio sul tuo sito WordPress, configurando la sua stilizzazione e le sue impostazioni. Puoi guardare come appare sul frontend dal video allegato di seguito. La barra di avanzamento del cerchio appare nell'angolo in alto a destra.

Cos'altro puoi fare con HappyAddons?

Una volta che hai HappyAddons, non solo puoi superare le carenze di Element, ma goderti anche molte più interessanti funzionalità e widget. Dai un'occhiata a cosa puoi fare di più con il plugin HappyAddons.

UN. Usa un builder a tema

Il costruttore di temi di HappyAddons ti consente di personalizzare ogni aspetto delle parti del modello del tuo sito WordPress, tra cui intestazioni, piè di pagina, pagine singole, singoli post e pagine di archivio. La grande notizia è che la funzionalità del builder a tema è completamente gratuita, che è una funzione premium in Element. Controlla come accedere a HappyAddons Theme Builder.

B. Migliora i siti WooCommerce

HappyAddons Pro offre una potente suite di widget WooCommerce per migliorare la progettazione e la funzionalità del tuo negozio di e -commerce. I widget WooCommerce offerti da HappyAddon sono la rete del prodotto, la giostra del prodotto, la griglia della categoria dei prodotti, la carosello della categoria di prodotti, il prodotto singolo, il mini carrello, il carrello, il checkout e la barra di spedizione.

C. Crea contenuti creativi

HappyAddons offre oltre 130 widget e due dozzine di funzionalità entusiasmanti per rendere un sito Web altamente eccitante. Usandoli, puoi evidenziare informazioni preziose sul tuo sito in modo estremamente creativo che sembra sia buono che attraente per gli utenti.

D. Crea post/pagine infografiche

HappyAddons consente la creazione di post e pagine in stile infografico visivamente accattivante che utilizzano widget come grafico a barre, barra di abilità, grafici interattivi e post griglia. Di conseguenza, è possibile visualizzare confronti come i risultati delle vendite o del sondaggio con colori ed etichette personalizzabili. Scopri come creare una pagina Web infografica con Elementor.

e. Pasta copiata a dominio

La funzione di pasta di copia incrociata in HappyAddons Pro consente di copiare widget, sezioni o intere pagine da un dominio e incollarle a un altro, mantenendo tutti gli stili e le impostazioni. Questo è un risparmio di tempo per gli sviluppatori o le agenzie che gestiscono più siti.

Oltre a tutti questi, avrai una biblioteca di modelli intraprendenti, chat dal vivo, documentazione completa e una playlist di tutorial su YouTube per rendere il tuo viaggio di web design con HappyAddon estremamente piacevole.

Pensieri finali!

Spero ti sia piaciuto questo tutorial. Abbiamo costantemente scritto post di blog sempre più basati su tutorial sul nostro sito Web per rendere il tuo percorso di web design senza codice più utile ed efficiente. Mentre hai letto l'intero post, ovviamente hai un'idea di cosa puoi fare di più con il plugin HappyAddons.

Se hai sia Elementor che HappyAddons sul tuo sito, puoi fare una vera magia. Puoi controllare le recensioni su HappyAddons su wordpress.org e altri siti di recensioni per esplorare quanto i nostri utenti sono soddisfatti. Dopo tutto questi, se hai in mente domande, puoi lasciare un commento qui sotto o dare un bussare alla nostra casella di chat di supporto.