Barra di avanzamento è un elemento efficace nel design web che informa in modo accattivante i tuoi visitatori sul progresso di un progetto o obiettivo. Elementor, come uno dei plugin Page Builder più popolari per WordPress, ti offre la possibilità di integrare facilmente barre di avanzamento sulle tue pagine web. Questa guida ti porterà attraverso i passaggi necessari per creare e personalizzare una barra di avanzamento in Elementor.
Punti chiave
- Le barre di avanzamento offrono una rappresentazione visiva del progresso e degli obiettivi.
- Puoi personalizzare titoli, valori e colori in modo individuale.
- Il testo interno può essere mostrato o nascosto facoltativamente.
- Sono disponibili stili e opzioni di personalizzazione differenti per adattare la barra al tuo design.
Guida passo passo
Per prima cosa apri la tua pagina WordPress e vai all'editor di Elementor. Da lì puoi aggiungere un nuovo elemento e selezionare la barra di avanzamento.
Ora sei pronto per inserire il titolo della tua barra di avanzamento. Pensa a un titolo appropriato, come ad esempio "Obiettivo di vendita". Questo darà ai tuoi visitatori un primo indizio su cosa si tratta.
Nel passaggio successivo, devi definire l'obiettivo o l'avviso di successo. Pensa a cosa desideri mostrare esattamente e scrivilo nel campo designato. Questo passaggio aiuta a rendere la tua barra di avanzamento più comprensibile per gli utenti.
Ora puoi definire il colore della barra di avanzamento. Questo non è strettamente necessario, ma è un'ottima opportunità per personalizzare il design. Puoi scegliere una tonalità che si armonizza con il resto del tuo sito web.
Poi passa alle percentuali. Qui puoi impostare il tuo progresso, ad esempio al 40%. Ricorda che puoi impostare il valore massimo al 100% e il minimo al 0%. Questo feedback aiuta i tuoi visitatori a percepire rapidamente il progresso.
La percentuale può essere mostrata o nascosta. Spesso appare più accattivante nascondere il testo, specialmente se preferisci un design pulito. Rifletti su quale opzione sia più adatta al tuo progetto.
Se desideri, puoi anche aggiungere un testo interno che includa i numeri percentuali. Questa funzione è particolarmente utile se desideri mostrare il progresso istantaneo. Se scegli di non avere un testo interno, puoi nascondere anche il numero qui.
Ora passiamo allo stile della barra di avanzamento. Puoi personalizzare il colore della barra, il colore dello sfondo dell'area non riempita e l'altezza della barra in modo individuale. Scegli una tonalità verde scuro per l'area riempita e un colore neutro per lo sfondo per un look pulito.
Inoltre, puoi arrotondare gli angoli della barra di avanzamento in modo che abbia una forma più accattivante. Ricorda che gli angoli possono essere arrotondati solo sul fronte finché il progresso non raggiunge il 100%.
Se desideri personalizzare il testo interno, puoi anche cambiare il colore e il carattere qui. Potresti decidere di disattivare il font per mettere in risalto il tuo progresso.
Infine, passa alle impostazioni avanzate, dove puoi personalizzare il colore del testo e lo stile del titolo. Un titolo nero e grassetto con un'eventuale ombra assicura che il tuo titolo risalti.
Salva le tue modifiche ora e vai alla tua pagina per vedere il risultato. Potresti decidere se sia utile mostrare la percentuale. In caso contrario, la barra di avanzamento sarà comunque visualizzata in modo accattivante.
La tua barra di avanzamento mostra ora il valore stabilito, senza che venga animato da 0 a salire. Invece, il progresso viene visualizzato immediatamente.
Se stai utilizzando la versione Pro di Elementor, ti verranno offerte funzionalità avanzate. Questa funzione è particolarmente utile per personalizzare le barre di avanzamento in base a dati esterni o addirittura a valori basati su database.
Riepilogo
In questa guida hai imparato come creare e personalizzare una barra di avanzamento in Elementor. Puoi definire titoli e progressi, selezionare colori e apportare varie personalizzazioni per integrare una barra di avanzamento accattivante ed efficace.
Domande frequenti
Come posso creare una barra di avanzamento in Elementor?Selezioni la barra di avanzamento in Elementor e inserisci il titolo e i valori di avanzamento.
Posso cambiare i colori della barra di avanzamento?Sì, puoi personalizzare sia il colore della barra di avanzamento che dello sfondo in modo individuale.
Qual è il vantaggio di un testo interno nella barra di avanzamento?Il testo interno visualizza chiaramente il progresso e aiuta a rendere le informazioni comprensibili a colpo d'occhio.
Come posso salvare le modifiche apportate?Dopo aver apportato tutte le personalizzazioni, puoi salvare le tue modifiche per renderle visibili sul tuo sito web.
Ci sono funzioni speciali nella versione Pro di Elementor?Sì, la versione Pro offre opzioni avanzate come attributi dinamici che puoi utilizzare per ulteriori personalizzazioni della tua barra di avanzamento.
