Che vogliate mostrare sul vostro sito web gli obiettivi di raccolta fondi o le tappe di un progetto, una barra di avanzamento può trasformare le vostre pubblicazioni su WordPress da noiose a dinamiche.
Sappiamo che l’aggiunta di elementi visivi come le barre di avanzamento al vostro sito web WordPress può sembrare scoraggiante, soprattutto se non siete esperti di tecnologia. Ma fortunatamente non sono necessarie competenze di codifica o costosi plugin per realizzarle.
In questa guida vi mostreremo come aggiungere facilmente barre di avanzamento alle vostre pubblicazioni su WordPress.
Quando aggiungere una barra di avanzamento nelle vostre pubblicazioni su WordPress
Ci sono diversi scenari in cui l’aggiunta di una barra di avanzamento può migliorare i vostri blog WordPress e renderli più d’impatto.
Ad esempio, le barre di avanzamento sono eccellenti per visualizzare lo stato di completamento di un progetto.
Se gestite un blog che documenta progetti a lungo termine, l’aggiunta di barre di avanzamento può fornire ai lettori un rapido aggiornamento visivo sul vostro stato di avanzamento.
Anche lecampagne di raccolta fondi sul vostro sito WordPress possono trarre grande beneficio dalle barre di avanzamento. Esse forniscono una rappresentazione visiva immediata di quanto si è vicini al raggiungimento dell’obiettivo, incoraggiando così un maggior numero di donazioni.
Per i contenuti educativi, le barre di avanzamento possono illustrare le tappe dell’apprendimento o la complessità dei diversi argomenti. In questo modo, i lettori possono vedere il livello di difficoltà dei vari argomenti di cui vi occupate nei vostri blog.
Se il vostro sito web è incentrato su argomenti di fitness o salute, le barre di avanzamento possono essere utilizzate per mostrare i livelli di intensità dell’allenamento, le informazioni nutrizionali o i progressi verso gli obiettivi di salute.
Oltre a questo, l’aggiunta di una barra di avanzamento alle pubblicazioni su statistiche o risultati di sondaggi può rendere i dati più digeribili e coinvolgenti. Invece di elencare solo le percentuali, potete rappresentare visivamente i dati con barre di avanzamento colorate.
Per questo motivo, abbiamo pensato a due modi semplici per aggiungere una barra di avanzamento al vostro sito web WordPress. Potete usare i link rapidi qui sotto per passare al metodo che preferite:
Nota: state cercando invece un tutorial sulla barra di avanzamento della lettura? Verificate il nostro articolo su come add-on una barra di avanzamento della lettura nei post di WordPress per motivare gli utenti a finire di leggere i vostri contenuti.
Metodo 1: Aggiungere una barra di avanzamento con un builder di pagina (più personalizzabile)
Un modo efficace per aggiungere una barra di avanzamento al vostro sito WordPress è quello di utilizzare un builder di pagina con una caratteristica di barra di avanzamento incorporata. Questo approccio fa sì che la barra di avanzamento si integri perfettamente con il design generale del tema.
Per questo metodo, utilizzeremo Thrive Architect, un potente builder di pagine che offre molti template diversi per i temi e un’interfaccia trascina e rilascia facile da usare. È una scelta eccellente sia per i principianti che per gli utenti esperti che desiderano un modo semplice per personalizzare il design del proprio sito web WordPress.
Tuttavia, tenete presente che questo metodo comporta la modifica del tema. Se siete soddisfatti del vostro tema attuale e non volete cambiarlo, potreste preferire il secondo metodo.
Inoltre, Thrive Architect non ha una versione gratuita. Detto questo, è possibile utilizzare il nostro codice coupon Thrive Themes per ottenere uno sconto fino al 50% sul primo acquisto.
Chi è interessato può approfondire la piattaforma nella nostra recensione di Thrive Architect.
Passo 1: Installare il Thrive Theme Builder
Per iniziare, è necessario impostare Thrive Architect. Iniziate accedendo al vostro account Thrive Themes e scaricando il plugin Thrive Product Manager.
Dopodiché, scaricare e installare il plugin Thrive Product Manager. Potete selezionare la nostra guida per principianti su come installare un plugin di WordPress per avere istruzioni passo dopo passo.
A questo punto, fate clic su Product Manager nell’area di amministrazione di WordPress.
Una volta fatto questo, potete cliccare sul pulsante “Accedi al mio account” per collegare il vostro sito WordPress con il vostro account Thrive Themes.
A questo punto dovrebbe apparire un elenco di tutti i prodotti Thrive Themes disponibili all’interno del vostro account.
È sufficiente selezionare “Thrive Architect” e selezionare la casella “Installa prodotto”.
Dopodiché, scorriamo giù fino alla sezione ‘Thrive Theme Builder’ e selezioniamo la casella ‘Install Theme’. Dobbiamo farlo perché Thrive Architect funziona meglio con un tema Thrive.
Quindi, fate clic sul pulsante “Installa i prodotti selezionati”.
Ora si dovrebbe vedere che il Thrive Product Manager sta impostando i plugin Thrive Architect e Thrive Theme Builder.
Al termine, fare clic su “Vai alla Bacheca del builder”.
A questo punto, potete scegliere un tema per WordPress.
È anche possibile fare clic sul pulsante “Anteprima” per vedere l’aspetto del tema prima di fare clic su “Scegli”.
Una volta impostato il tema, si dovrebbe arrivare alla procedura guidata per la creazione del builder.
Questa procedura guidata vi aiuterà a caricare il vostro logo, a scegliere i colori del brand da aggiungere al tema e a impostare le diverse strutture e template del vostro tema.
È sufficiente completare l’onboarding per passare alla fase successiva.
Fase 2: Aggiungere una barra di avanzamento alle pubblicazioni di WordPress
Aggiungiamo ora una barra di avanzamento alle nostre pubblicazioni su WordPress. Per iniziare, aprite l’editor a blocchi per una nuova pubblicazione o per una esistente.
Quindi, digitate il titolo della vostra nuova pubblicazione. Dopodiché, fare clic sul pulsante ‘Launch Thrive Architect’.
Ora è possibile utilizzare Thrive Architect per creare il contenuto della pubblica del blog. Il funzionamento è simile a quello dell’editor a blocchi.
In altre parole, è possibile fare clic sul pulsante ‘+’ e trascina e rilascia qualsiasi elemento desiderato nella sezione che dice “Fai clic per aggiungere testo o trascina e rilascia un elemento dal pannello di destra”.
Ecco un esempio di aggiunta di un blocco di testo tramite l’editor:
La procedura per aggiungere una barra di avanzamento è praticamente la stessa. Basta fare clic di nuovo sul pulsante ‘+’ e trovare il blocco ‘Barra di avanzamento’.
Dopodiché, basta aggiungerlo alla pubblica.
Successivamente, apparirà una finestra pop-up che chiederà di scegliere il design della barra di avanzamento.
Ce ne sono decine tra cui scegliere e si possono sempre modificare in seguito, se necessario.
Una volta effettuata la scelta, si restituisce l’interfaccia principale dell’editor.
Passo 3: Personalizzare la barra di avanzamento
A questo punto, si dovrebbe vedere una barra laterale sul pannello sinistro con opzioni personalizzate per la barra di avanzamento.
Ci sono molte impostazioni da configurare e noi copriremo le principali per mostrare come modificare la barra di avanzamento.
Nel menu Opzioni principali è possibile modificare il design della barra di avanzamento da semplice a con nodi. I nodi sono icone che mostrano il punto di avanzamento. Abbiamo scelto questo tipo di design a titolo di esempio.
È inoltre possibile modificare la posizione delle etichette della barra di avanzamento, l’altezza della barra e il livello attuale della barra di avanzamento.
Scendendo nel pannello, si trovano le opzioni per modificare le etichette dei nodi.
Per modificarle, fare clic sull’icona della matita “Modifica” accanto all’etichetta.
A questo punto, è sufficiente digitare la nuova etichetta.
Una volta fatto, cliccate sull’icona “Salva”.
L’aspetto positivo di Thrive è che vi permette di personalizzare ogni altra parte della barra di avanzamento, in modo da poterla progettare nel modo che preferite.
Per vedere in azione le opzioni di personalizzazione, si può passare al mouse su uno degli elementi della barra di avanzamento e fare clic su di esso.
Qui abbiamo selezionato la parte della barra di avanzamento che mostra i progressi incompleti.
Ora è comparsa una nuova serie di opzioni nella barra laterale sinistra.
Facendo clic sul menu a discesa “Stile attuale” in alto, è possibile modificare parti specifiche della barra, come le etichette di avanzamento, le icone, i nodi e altro ancora.
Esplorate ogni parte per vedere cosa è possibile personalizzare.
Proviamo a fare qualche esempio. Per disabilitare l’animazione delle strisce di caramelle nella barra di sfondo, selezionare “Sfondo a righe raggruppate” nel menu Attualmente in stile.
Quindi, attivare/disattivare il pulsante “Animazione Candy Stripe”.
Se si desidera modificare le icone all’interno dei nodi di avanzamento, passare a “Icone di avanzamento” nel menu a discesa Attualmente in stile.
Quindi, nel menu “Stato” in alto, selezionare “Normale”.
Ora si dovrebbero vedere alcune impostazioni per modificare le icone della barra di avanzamento.
Qui, fare clic su “Modifica icona”.
Thrive Architect ha molte icone nella sua libreria per vari settori. Detto questo, assicuratevi che l’icona scelta sia adatta a una barra di avanzamento.
Una volta fatta la scelta, basta fare clic su “Seleziona”.
Per modificare lo stile dell’icona, basta fare clic sul pulsante “Cambia stile”.
Da qui, si vedranno alcuni disegni di icone preconfezionate che si possono scegliere.
Per modificare l’aspetto dell’etichetta di avanzamento, selezionare l’opzione “Etichetta di avanzamento” nel menu a discesa Stile attuale.
Qui vengono visualizzate alcune opzioni per personalizzare il colore, l’evidenziazione, la formattazione e così via dell’etichetta.
Una volta soddisfatti dell’aspetto della barra di avanzamento, fare clic su “Salva lavoro” per memorizzare le modifiche.
Assicuratevi di vedere l ‘anteprima del vostro blog su mobile, desktop e tablet, in modo che tutto sia perfetto.
Ecco come appare il nostro sito demo:
Alternativa: Aggiungere una barra di avanzamento circolare
Thrive Architect ha anche un altro tipo di barra di avanzamento nella sua collezione di blocchi, chiamata contatore di riempimento. Il blocco Contatore di riempimento ha l’aspetto di una barra di avanzamento circolare, ideale per visualizzare le statistiche.
Per aggiungerlo, basta fare clic sul pulsante ‘+’ nella barra laterale destra e trovare l’elemento ‘Fill Counter’. Quindi, trascina e rilascia l’elemento in qualsiasi punto della pubblicazione.
Una volta aggiunto, verranno visualizzate alcune opzioni per personalizzare il contatore di riempimento.
Principalmente, è possibile modificare le dimensioni del contatore di riempimento, la percentuale di riempimento, i colori e se il valore percentuale deve corrispondere al valore presentato visivamente nel contatore.
È anche possibile fare clic sul numero all’interno del contatore di riempimento per modificarne l’aspetto.
Sentitevi liberi di modificare i colori, il tipo di font, la visibilità su diversi dispositivi e altro ancora.
Se si desidera modificare il testo sotto la percentuale, è sufficiente fare clic sul testo stesso.
Successivamente, è possibile digitare una descrizione per il contatore di riempimento.
Non dimenticate di salvare il vostro lavoro quando avete finito.
Alternativa: Non siete fan di Thrive Architect? Il builder di pagine SeedProd ha anche un blocco di barre di avanzamento che si può aggiungere al tema o alle pagine personalizzate.
Per ulteriori informazioni su come utilizzare SeedProd, consultate la nostra guida su come creare un tema personalizzato per WordPress.
Metodo 2: utilizzare un plugin gratuito per le barre di avanzamento (facile e veloce)
Questo metodo è il migliore se non si vuole usare un builder di pagina e si ha bisogno di un plugin per barre di avanzamento di WordPress semplice e gratuito.
A tale scopo, utilizzeremo il plugin gratuito Ultimate Blocks, che aggiunge tonnellate di blocchi Gutenberg all’editor di WordPress.
L’aspetto positivo di chi siamo è che il blocco della barra di avanzamento è disponibile gratuitamente. Detto questo, è possibile passare alla versione pro del plugin per ottenere più blocchi Gutenberg e opzioni personalizzate.
Chi siamo può approfondire la conoscenza del plugin nella nostra recensione di Ultimate Blocks.
Innanzitutto, installate e attivate il plugin di WordPress sul vostro sito web. Una volta fatto, è possibile aprire l’editor a blocchi per creare una nuova pubblicazione o modificarne una esistente.
A questo punto, fare clic sul pulsante ‘+’ in un punto qualsiasi della pagina e selezionare il blocco ‘Barra di avanzamento’.
Ora avete aggiunto con successo una barra di avanzamento alla vostra pubblicazione. Cerchiamo di personalizzarla ulteriormente per soddisfare le nostre esigenze.
Se si guarda la barra laterale delle impostazioni del blocco sulla destra, si vedranno alcune opzioni personalizzate. Nella scheda “Generale”, è possibile modificare la posizione percentuale della barra di avanzamento, passando dall’alto all’interno o al basso della barra.
È inoltre possibile disabilitare o abilitare il design “Stripe” e modificare il valore dell’avanzamento corrente.
Successivamente, è possibile personalizzare le impostazioni del numero.
In questo caso, abbiamo scelto di non mostrare il numero percentuale perché non lo riteniamo utile per il nostro esempio.
Ma se si sceglie di mostrarlo, è possibile modificare il prefisso del numero (un simbolo che appare prima del numero, come il segno meno) e il suffisso del numero (un simbolo che appare dopo il numero, come il segno di valuta).
Il prossimo è il Controllo responsive.
Poiché le barre di avanzamento possono occupare un po’ di spazio nella pubblicazione, si consiglia di nasconderle quando la pubblicazione viene visualizzata da una schermata più piccola, ad esempio su tablet o dispositivi mobili.
Volete rendere la barra di avanzamento più interattiva? Considerate l’aggiunta di un’animazione di ingresso. Abilitando questa caratteristica, la barra di avanzamento apparirà con un effetto animato quando l’osservatore scorrerà verso il basso.
È anche possibile scegliere uno stile di animazione e impostare il periodo di ritardo, in modo che la barra di avanzamento appaia al momento giusto.
Passiamo alla scheda ‘Stile’, dove è possibile personalizzare il design della barra di avanzamento.
In alto, è possibile modificare il design della barra di avanzamento da una linea a un cerchio o a un semicerchio. È anche possibile aggiungere un raggio del bordo al design della barra, in modo che abbia un aspetto più circolare anziché rettangolare e netto.
In questo caso, abbiamo deciso di mantenere la barra di avanzamento della linea.
Ma ecco come appaiono le barre di avanzamento a cerchio e a semicerchio:
Scorrendo verso il basso, è possibile modificare lo spessore della barra di avanzamento in modo che risalti ancora di più.
Si può anche modificare il colore della barra di avanzamento, della barra di sfondo e dell’etichetta della barra di avanzamento per adattarla al design del sito web.
Un altro elemento che si può modificare è la spaziatura interna e il margine della barra di avanzamento.
Entrambe le impostazioni controllano essenzialmente la distanza tra la barra di avanzamento e gli altri blocchi che la circondano.
È possibile aumentare il valore di entrambi se non si vuole che la barra di avanzamento sia troppo vicina agli altri blocchi sopra o sotto di essa.
Successivamente, si potrebbe aggiungere un’etichetta o una descrizione alla barra di avanzamento, in modo che i lettori ottengano un contesto più ampio dalla visualizzazione.
In alto alla barra di avanzamento, è sufficiente digitare del testo. È possibile modificare l’allineamento e lo stile del testo utilizzando le impostazioni della barra degli strumenti del blocco.
Quando si è soddisfatti dell’aspetto della barra di avanzamento, basta fare clic su “Pubblica” o “Aggiorna” nell’editor a blocchi.
Volete davvero visualizzare la pubblicazione su mobile, desktop e tablet per assicurarvi che la barra di avanzamento appaia correttamente su tutti i dispositivi.
Ecco fatto! Avete aggiunto con successo una barra di avanzamento alle vostre pubblicazioni su WordPress.
Ecco come appare la barra di avanzamento sul nostro sito web demo:
Elementi di design bonus per il vostro sito WordPress
Volete aggiungere altri elementi visivi al vostro sito web WordPress? Verificate questi articoli qui sotto:
- Come aggiungere i cappucci a goccia nelle pubblicazioni di WordPress
- Come aggiungere un widget per il conto alla rovescia in WordPress
- Come aggiungere un ticker di notizie a scorrimento in WordPress
- Come aggiungere uno sfondo animato in WordPress
- Come mostrare un’animazione per il conteggio dei numeri in WordPress
- Modi per portare gli effetti di Halloween sul vostro sito WordPress
- Come aggiungere testimonianze a rotazione in WordPress
- Come aggiungere box di caratteristiche con icone in WordPress
- Come aggiungere un video di YouTube come sfondo a schermo intero in WordPress
Speriamo che questo tutorial vi abbia aiutato a capire come aggiungere una barra di avanzamento alle vostre pubblicazioni su WordPress. Potreste anche voler selezionare le nostre verifiche sui migliori builder di temi WordPress e la nostra guida su come modificare un sito web WordPress.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Sachiko Ishikawa
Hello! I have a question
How can I adjust the size (width) of the progress bar? I’m putting it on my sidebar menu, but unfortunately, it’s too wide…
Apologies for the inconveniences.