---
url: 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/elements/progress-bar'
title: 'Aggiungere una barra di avanzamento | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T13:43:25+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: '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.'
tags:
  - 'Data and motion'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T13:43:25+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Aggiungere una barra di avanzamento'
      description: '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.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T13:43:25+0000'
      dateModified: '2026-10-24T13:43:25+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/elements/progress-bar'
      articleSection: 'Dati e movimento'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/elements/progress-bar'
      description: '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.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/it'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: it
---
[Centro assistenza](/it/hc)/[Documentazione](/it/hc/documentation) /[Impara DXPR Builder](/it/hc/documentation/learn-dxpr-builder) /[Crea le pagine](/it/hc/documentation/learn-dxpr-builder/build) /[Aggiungi contenuti](/it/hc/documentation/learn-dxpr-builder/elements) /[Dati e movimento](/it/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Aggiungere una barra di avanzamento.

 Impara DXPR BuilderCrea le pagineAggiungi contenutiDati e movimento

   ## In questa guida

 Guide correlate

- [Cambiare l’aspetto di un elemento nel pannello Stile](/it/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

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.

## 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](/hc/documentation/learn-dxpr-builder/getting-started/first-page) 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](/it/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **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](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) per cambiare spaziatura e sfondo della barra di avanzamento.