Manuale completo Progress Bar

In questo manuale completo, vedrai come modificare il widget Progress Bar sul sito one-page di Veg Navigator.

Il widget Progress Bar è un elemento grafico che mostra visivamente il progresso o il completamento di un’attività tramite una barra colorata. Può essere impostato in orizzontale o a forma di cerchio.

1. Login e avvio di Elementor

Se sei già sul tuo sito, vai nel menu principale in alto e clicca su “Entra”.

Fai il login, quindi seleziona il link “Modifica con Elementor” nella barra nera in alto.

Se invece non sei sul tuo sito o non ricordi l’URL, segui le istruzioni qui di seguito:
Come accedere al sito passando dal network

2. Impostazioni

Anche in questo caso, come per tutti gli altri widget del sito one page, per accedere alle impostazioni vai sopra l’elemento e fai clic sul quadratino color lilla.

Poi sulla sottoscheda “Generale” della scheda “Contenuto“

3. Contenuto all’interno dell’animazione

Nell’immagine seguente è illustrato come posizionare Prefisso, Contatore e Suffisso all’interno dell’animazione.

1. Imposta il campo “Layout“ su “Circle“;
2. il “Counter Prefix“ su “%“;
3. assegna a “Counter Value“ e “Max Value“ i valori 90 e 100, rispettivamente.

In questo modo il widget mostrerà un cerchio con una barra animata che partirà da 0 e arriverà al 90% della circonferenza, lasciando il 10% finale incompleto. Nel campo “Suffisso“ puoi inserire qualsiasi termine rappresentativo dell’animazione, oppure lasciarlo vuoto. Nel campo opzionale “Title Position” puoi scegliere se posizionare il Title all’interno o all’esterno dell’animazione.

4. Contenuto all’esterno dell’animazione

Nell’immagine seguente è illustrato come posizionare il contatore e il prefisso sotto l’animazione:

1. Fai clic sul quadratino color lilla;
2. imposta “Layout” su “Circle“;
3. imposta i valori di “Max Value” e “Counter Value“;
4. per inserire il titolo all’interno dell’animazione, imposta il “Title Position” su “Inside“
5. imposta “Counter Position” su “Outside“: in questo modo il contatore resterà sotto l’animazione;
6. inserisci un “Counter Suffix” se desideri aggiungere un suffisso al contatore.

Per mostrare o nascondere il contatore, utilizza il selettore “Show Counter“.

5. Altre impostazioni

Nell’immagine seguente è mostrato come inserire tutti gli elementi all’interno dell’animazione:

1. Imposta un valore di migliaia in “Max Value” (es. 1500) e un valore inferiore in “Counter Value” (es. 1000).
2. Inserisci il titolo nel campo “Title” e imposta “Title Position” su “Inside“.
3. Inserisci il sottotitolo nel campo “Subtitle“.
4. Imposta “Counter Position” su “Inside“.
5. Aggiungi un prefisso in “Counter Prefix“.
6. Se vuoi mostrare il separatore delle migliaia, attiva il selettore “Show Thousand Separator” su “Sì“: vedrai che nel risultato del contatore comparirà la virgola.”

6. Lo stile generale di Progress Bar

Nell’immagine seguente ti mostriamo come impostare il widget in modalità orizzontale, così da creare barre di progressione lineari. In questa sezione applicheremo anche lo stile alle barre (queste impostazioni sono valide anche per il “Layout” impostato su “Circle“).

Fai clic sulla scheda “Contenuto” e, nel menù a scelta del “Layout“, seleziona “Horizontal Line“

Come per tutti i widget del sito one page, per modificare colori, font, spaziature o dimensioni, accedi alla scheda “Stile“. In questo caso:

1. Fai clic sul quadratino color lilla;
2. vai su “Stile“;
3. seleziona “Generale” per aprire le relative impostazioni.

Le impostazioni di questa scheda sono:

• “Background Color“: per applicare un colore di sfondo su tutta l’area della barra.
• “Box Shadows“: per applicare un ombra sotto la barra e dare un effetto di sollevamento.
• “Border Type“: per applicare un bordo.
• “Border Radius“: serve ad arrotondare gli angoli della barra. Se vuoi arrotondare solo 2 angoli sblocca l’icona della catena ( 🔗 ) – per impostazione predefinita tutti gli angoli sono collegati.
• “Tipo di sfondo“: serve per applicare un colore di sfondo sull’intero elemento.
• “Colore“: per applicare il colore alla barra interna che avanza.
• “Rounded Line“: serve ad arrotondare solo la barra interna che avanza.

7. Immagine nella Progress Bar

Se in “Layout” hai scelto di visualizzare “Horizontal Line”, potrai applicare un’immagine di sfondo. Vediamo come fare:

1. Posizionati sul widget e fai clic sul quadratino color lilla per aprire le impostazioni.
2. Vai nella scheda “Contenuto” e in “Layout” seleziona “Horizontal Line”.
3. Vai nella scheda “Stile” e poi nella sottoscheda “General”.
4. Fai clic nel riquadro “Immagine” per scegliere un’immagine dalla libreria del tuo sito oppure caricala dal tuo dispositivo.
5. Sempre nella scheda “General” troverai numerose impostazioni per adattare l’immagine a tuo piacimento.

Per impostare l’altezza della barra, la velocità dell’animazione e altre opzioni, vai su “Contenuto” → “General” → “Settings”, come mostrato nel seguente video.

Se hai bisogno di assistenza, contatta il nostro team all’indirizzo e-mail:
vegnavigator@esserevegan.it