Crea una tabella prezzi.

Learn DXPR BuilderBuild pagesVolg een tutorial

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.

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.

E adesso?