Aggiungere un contatore circolare.

Ottieni un anello animato che si riempie per mostrare un numero chiave, come un tasso o un punteggio. Usalo per far risaltare una statistica in una landing page o in una pagina chi siamo.

Aggiungere un contatore circolare

Apri la tua pagina dopo aver effettuato l’accesso: i controlli del builder appaiono quando passi sopra l’area di contenuto. La tua prima pagina spiega le basi.

1. Passa sopra la colonna e fai clic su + nella sua barra di controllo, oppure fai clic su Aggiungi elementi in una pagina vuota. Apri la scheda Contenuto e fai clic su Contatore circolare. Arriva in cima alla colonna e si apre la sua finestra delle impostazioni.
2. Trascina il cursore Percentuale per impostare quanto si riempie l’anello, oppure digita il valore nel riquadro accanto. Qui impostiamo 78.
3. Scegli il colore dell’arco in Colore di primo piano.
4. Apri la sezione Contenuto del cerchio e digita un’etichetta Testo per la metrica.
5. Nel campo Icona sotto, digita chart nel riquadro Cerca e fai clic su un’icona nella griglia.
6. Fai clic su Salva nella finestra. Poi fai clic su Salva nella barra in cima all’area di contenuto per conservare la pagina.

Cosa vedi

Un anello si riempie fino alla percentuale impostata, con icona ed etichetta in mezzo. Nel video, è viola, si riempie al 78 percento e dice Tasso di rinnovo. L’anello si anima quando scorre nella vista. I visitatori lo vedono quando salvi la pagina ed è pubblicata.

Configurare il contatore circolare

Passa sopra l’elemento e apri Altro > Impostazioni nella sua barra di controllo. Opzioni:

• Percentuale: quanto si riempie l’anello, da 0 a 100.
• Dimensione: la dimensione del cerchio in pixel, da 100 a 500.
• Colore di primo piano: il colore dell’arco riempito.
• Colore di sfondo: il colore della traccia vuota.
• Colore di riempimento: il colore dentro il cerchio.
• Spessore dell’arco: lo spessore dell’arco.
• Animazione: riempie l’arco da zero. Durata dell’animazione e Ritardo dell’animazione impostano i tempi in millisecondi.
• Animazione nella vista: attende di animare finché il cerchio scorre nella vista.

Ogni cursore ha un riquadro numerico accanto per valori esatti. La sezione Contenuto del cerchio imposta cosa si mostra in mezzo:

• Mostra avanzamento: mostra il numero della percentuale invece del tuo testo e della tua icona. È disattivato per impostazione predefinita.
• Testo: un’etichetta corta. Dimensione del carattere e Colore del testo lo stilizzano.
• Info: una seconda riga più piccola sotto il testo.
• Icona: un’icona davanti al testo. Il menu a discesa accanto a Cerca limita la griglia a un set di icone. Dimensione dell’icona e Colore dell’icona la stilizzano.

Se non lo vedi

• Contatore circolare non è nella scheda Contenuto. Il tuo profilo utente lo nasconde. Chiedi a un amministratore di abilitarlo in Profili utente.
• Non c’è più dopo un ricaricamento. La pagina non è stata salvata. Aggiungilo di nuovo e fai clic su Salva nella barra in cima all’area di contenuto.
• L’anello è pallido o manca. Colore di primo piano e Colore di sfondo sono troppo vicini al colore della pagina. Passa sopra l’elemento e apri Altro > Impostazioni, poi scegli colori con più contrasto.
• L’anello non si anima. Animazione è disattivata, oppure l’anello attende di scorrere nella vista. Attiva Animazione e scorri il cerchio nella vista.
• Testo e icona non si mostrano. Mostra avanzamento è attivo, così l’anello mostra la percentuale. Spegni Mostra avanzamento sotto Contenuto del cerchio.

Passi successivi

Scheda Stile per cambiare spaziatura e sfondo del contatore circolare.