Aggiungere una barra di avanzamento.

Impara DXPR BuilderCrea le pagineAggiungi contenutiDati e movimento

Ottieni una barra colorata con etichetta che mostra a colpo d’occhio a che punto è qualcosa. Usala per stato di progetti, obiettivi di raccolta fondi, avanzamento di corsi o livelli di competenza.

Barra di avanzamento viola a strisce al 73% con etichetta Riprogettazione del sito web

Aggiungere una barra di avanzamento

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 Barra di avanzamento. Arriva in cima alla colonna e si apre la sua finestra delle impostazioni.
  2. Digita un’Etichetta per la barra, come “Riprogettazione del sito web”.
  3. Trascina Avanzamento per impostare quanto si riempie la barra, oppure digita il valore nel riquadro accanto al cursore. Qui scegliamo il 73 percento.
  4. Scegli un Colore frontale per la parte riempita dalla tavolozza.
  5. Più in basso nella stessa finestra, scegli se la barra riceve Strisce. Qui spuntiamo Aggiungi motivo a strisce alla barra.
  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

Una barra con la tua etichetta si riempie fino al valore impostato, nel colore scelto. L’etichetta sta dentro la parte riempita. Nel video, la barra a strisce dice Riprogettazione del sito web e riempie il 73% della barra. I visitatori la vedono quando salvi la pagina ed è pubblicata.

Configurare la barra di avanzamento

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

  • Etichetta: il testo sulla barra. Puoi anche fare clic sull’etichetta nella pagina e modificarla lì.
  • Avanzamento: quanto si riempie la barra, da 0 a 100 percento. Il predefinito è 50.
  • Altezza della barra: l’altezza della barra in pixel. Il predefinito è 45.
  • Colore di fondo: il colore della parte vuota.
  • Colore frontale: il colore della parte riempita.
  • Animazione di crescita: disattivata per impostazione predefinita. Quando è attiva, la barra parte vuota e si riempie quando metà di essa è nella vista.
  • Strisce: Aggiungi motivo a strisce alla barra aggiunge strisce diagonali. Anima le strisce (richiede motivo a strisce) le fa muovere.

Se non la vedi

  • Barra di avanzamento non è nella scheda Contenuto. Il tuo profilo utente la nasconde. Chiedi a un amministratore di abilitarla in Profili utente.
  • Non c’è più dopo un ricaricamento. La pagina non è stata salvata. Aggiungila di nuovo e fai clic su Salva nella barra in cima all’area di contenuto.
  • La barra sembra vuota. Avanzamento è 0, oppure Animazione di crescita è attiva e la barra non è ancora metà nella vista. Scorri giù fino alla barra, oppure passa sopra l’elemento e apri Altro > Impostazioni per alzare Avanzamento.
  • Non ci sono strisce, o non si muovono. Aggiungi motivo a strisce alla barra non è spuntato, e Anima le strisce (richiede motivo a strisce) ne ha bisogno. Spunta Aggiungi motivo a strisce alla barra sotto Strisce.
  • La parte riempita si confonde con la parte vuota. Colore frontale e Colore di fondo sono troppo simili. Scegli un Colore frontale più scuro o un Colore di fondo più chiaro.

Passi successivi

Scheda Stile per cambiare spaziatura e sfondo della barra di avanzamento.