---
url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/tutorial/tabella-prezzi'
title: 'Crea una tabella prezzi | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-23T23:57:14+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Qui crei una tabella prezzi: tre piani fianco a fianco, ciascuno un pannello con prezzo, elenco di funzionalità e pulsante a tutta larghezza, e il piano centrale evidenziato. Usala in una pagina prezzi o dentro una pagina prodotto. Per la pagina prodotto intera intorno, segui Crea una pagina prodotto.
  Il video crea tre piani per uno strumento di reportistica.
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Crea una tabella prezzi'
      description: |-
        Qui crei una tabella prezzi: tre piani fianco a fianco, ciascuno un pannello con prezzo, elenco di funzionalità e pulsante a tutta larghezza, e il piano centrale evidenziato. Usala in una pagina prezzi o dentro una pagina prodotto. Per la pagina prodotto intera intorno, segui Crea una pagina prodotto.
        Il video crea tre piani per uno strumento di reportistica.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T23:57:14+0000'
      dateModified: '2026-10-24T17:19:22+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/documentazione/impara-dxpr-builder/tutorial/tabella-prezzi'
      articleSection: 'Segui un tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/tutorial/tabella-prezzi'
      description: |-
        Qui crei una tabella prezzi: tre piani fianco a fianco, ciascuno un pannello con prezzo, elenco di funzionalità e pulsante a tutta larghezza, e il piano centrale evidenziato. Usala in una pagina prezzi o dentro una pagina prodotto. Per la pagina prodotto intera intorno, segui Crea una pagina prodotto.
        Il video crea tre piani per uno strumento di reportistica.
      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/documentazione) /[Impara DXPR Builder](/it/hc/documentation/learn-dxpr-builder) /[Crea le pagine](/it/hc/documentation/learn-dxpr-builder/build) /[Segui un tutorial](/it/hc/documentation/learn-dxpr-builder/tutorials/overview) # Crea una tabella prezzi.

 Impara DXPR BuilderCrea le pagineSegui un tutorial

   ## In questa guida

 Guide correlate

- [Crea una pagina prodotto](/it/hc/documentazione/impara-dxpr-builder/tutorial/pagina-prodotto)
- [Aggiungere una Card](/it/hc/documentazione/impara-dxpr-builder/elementi/card)
- [Aggiungere un pannello](/it/hc/documentazione/impara-dxpr-builder/elementi/pannello)

Qui crei una tabella prezzi: tre piani fianco a fianco, ciascuno un pannello con prezzo, elenco di funzionalità e pulsante a tutta larghezza, e il piano centrale evidenziato. Usala in una pagina prezzi o dentro una pagina prodotto. Per la pagina prodotto intera intorno, segui [Crea una pagina prodotto](/it/hc/documentazione/impara-dxpr-builder/tutorial/pagina-prodotto).

Il video crea tre piani per uno strumento di reportistica.

  ## Prima di iniziare

- Il tuo ruolo ha il permesso **Edit with DXPR Builder**.
- La pagina è aperta nel builder. Per una nuova, vai in **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) e fai clic su **Save**.
- I nuovi elementi arrivano in cima al loro contenitore, quindi in ogni pannello il pulsante va inserito prima del prezzo.

## Passaggio 1: aggiungi la sezione e le colonne

1. Fai clic su **Add Elements** sulla pagina vuota e scegli **Section** dalla scheda **Layout**.
2. Passa sopra alla sezione e apri **More** > **Settings**. In **HTML classes** scegli **Align text center**. Apri il pannello **Style**, scegli un **Background** grigio chiaro e fai clic su **Save**.
3. Fai clic su **+** sulla sezione e scegli **Row**; arriva con due colonne uguali.
4. Fai clic sull’icona griglia della riga (**Column layout**), scegli il preset **1/3 + 1/3 + 1/3** e fai clic su **Save**.

## Passaggio 2: crea il primo piano

1. Fai clic su **+** nella prima colonna e scegli **Panel** dalla scheda **Content**.
2. Passa sopra al pannello e apri **More** > **Settings**. Imposta il **Title** su "Starter", tieni il **Type** su **DXPR** e fai clic su **Save**.
3. Fai clic su **+** sul pannello e scegli **Button**. Imposta **Title** su "Choose plan", **Link** su `/signup` e **Type** su **Primary**. Attiva **Block button** così riempie la colonna, poi fai clic su **Save**.
4. Fai di nuovo clic su **+** sul pannello e scegli **Text**; arriva sopra il pulsante. Digita il prezzo come **Heading 2**, aggiungi le funzionalità una per riga e fai clic su **Save**.

## Passaggio 3: crea gli altri piani

1. Ripeti il passaggio 2 nella seconda colonna per "Professional". Nel pannello **Style** del pannello scegli il **Background** viola, e imposta il **Type** del pulsante su **Success**, così il piano risalta.
2. Ripeti il passaggio 2 nella terza colonna per "Enterprise", con "Custom pricing" come prezzo.

**Suggerimento**

La colonna centrale attira l’occhio. Metti lì il piano che vuoi vendere di più.

## Passaggio 4: aggiungi l’intestazione

1. Fai clic su **+** sulla sezione e scegli **Text**; arriva sopra la riga.
2. Digita "Choose your plan" come **Heading 2**, aggiungi una riga come "Simple monthly pricing. Cancel any time." e fai clic su **Save**.

## Passaggio 5: salva e vedi l’anteprima

1. Fai clic su **Save** nella barra degli strumenti del builder.
2. Apri il menu vista (l’**icona occhio**) e scegli **Preview**.

## Per approfondire

Non mostrato nel video:

- **Quattro piani**: scegli invece il preset **1/4 + 1/4 + 1/4 + 1/4** e crea una quarta colonna.
- **Badge più popolare**: aggiungi un elemento **Text** in cima al pannello evidenziato con "Most popular" in grassetto.
- **Annuale e mensile**: aggiungi una riga **Text** sopra la riga come "Monthly \| Annual (save 20%)". La riga è statica; un selettore live richiede l’elemento **HTML** con il tuo script.
- **Spunte delle funzionalità**: incolla un segno di spunta prima di ogni riga di funzionalità, oppure aggiungi un elemento **Icon** sopra l’elenco.

## Cosa vedi

"Choose your plan" sta centrato sopra tre piani su una banda grigia. Ogni pannello mostra il suo nome nella barra del titolo, il prezzo, tre funzionalità e un pulsante **Choose plan** a tutta larghezza. Il piano centrale risalta in viola con un pulsante verde.

## Se non vedi i piani come mostrati

- **Un pannello si apre senza finestra impostazioni.** I pannelli si aprono vuoti, senza finestra. Passa sopra al pannello e apri **More** > **Settings** per impostarne il **Title**.
- **Un Type di pannello come Primary non mostra colore.** Il tuo tema non stilizza quel tipo di pannello. Tieni **Type** su **DXPR** e scegli un **Background** nel pannello **Style** del pannello, come nel passaggio 3.
- **I pulsanti sono larghi solo quanto il loro testo.** **Block button** è spento. Apri le impostazioni di ogni pulsante e attivalo.
- **Le tue modifiche non ci sono più dopo un ricaricamento.** Hai lasciato la pagina prima di fare clic su **Save** nella barra degli strumenti del builder. Se Save mostra un errore, vedi [Le modifiche non si salvano](/it/hc/documentazione/impara-dxpr-builder/risoluzione-problemi/salvataggio-non-riuscito).

## E adesso?

- [Pagina prodotto](/it/hc/documentazione/impara-dxpr-builder/tutorial/pagina-prodotto) per una pagina intera con funzionalità e prezzi
- [Elemento Card](/it/hc/documentazione/impara-dxpr-builder/elementi/card) per un altro stile di card
- [Elemento Panel](/it/hc/documentazione/impara-dxpr-builder/elementi/pannello) per ogni impostazione dei pannelli