Come usare l'elemento Tabella Prezzi
Scopri il nuovo elemento Tabella Prezzi in HITLEAD — un modo versatile per mostrare piani, pacchetti e livelli di servizio. Scegli tra più layout, applica modelli di prezzo flessibili e aggiungi dettagli orientati alla conversione come badge e prezzi precedenti barrati. Con CTA chiari e comportamento ottimizzato per mobile, questo elemento aiuta i visitatori a confrontare le opzioni e ad agire rapidamente.
INDICE DEI CONTENUTI
- Cos'è l'elemento Tabella Prezzi?
- Vantaggi principali dell'elemento Tabella Prezzi
- Come configurare l'elemento Tabella Prezzi
- Domande frequenti
- Articoli correlati
Cos'è l'elemento Tabella Prezzi?
L'elemento Tabella Prezzi ti permette di presentare uno o più piani in un layout pulito e comparabile. Supporta più modalità di visualizzazione (griglia, carosello, tabella classica, tabella comparativa), diversi modelli di prezzo e azioni configurabili, così puoi adattare l'esperienza alla tua offerta, al design della pagina e al tuo pubblico.
- Dove è disponibile: nei builder di Funnel, Siti web, Blog e E-Commerce Store in HITLEAD.
Vantaggi principali dell'elemento Tabella Prezzi
Conoscere i vantaggi principali ti aiuta a decidere quando e come usare l'elemento per massimizzare l'impatto su conversioni e chiarezza.
- Flessibilità di layout: scegli tra Griglia, Carosello, Tabella Classica o Tabella Comparativa per adattarti al contenuto e all'obiettivo della pagina.
- Confronto chiaro dei piani: usa lo scorrimento orizzontale, le frecce e la colonna intestazione fissa (modalità Comparativa) per mantenere le funzionalità leggibili.
- Più modelli di prezzo: comunica prezzi una tantum, ricorrenti, a scaglioni o variabili senza workaround.
- Segnali di conversione: aggiungi il prezzo precedente (barrato), badge sconto e didascalie che evidenziano le offerte.
- Controllo delle azioni: indirizza i pulsanti a URL, apri popup, salta a sezioni, scarica file o non assegna alcuna azione.
- Coerenza del brand: personalizza colori, spaziatura e gap tra colonne per integrarti con il design del tuo sito.
- Ottimizzazione mobile: le colonne si adattano agli schermi più piccoli preservando la chiarezza del confronto.
Come configurare l'elemento Tabella Prezzi
Un flusso di configurazione rapido e ripetibile riduce i tempi di costruzione e mantiene i prezzi coerenti tra le pagine.
- Vai al Page Builder: nel menu laterale sinistro della dashboard del tuo sub-account, clicca su Sites e apri il funnel o il sito scelto. Clicca il pulsante blu Edit della pagina per avviare il page builder.
- Aggiungi l'elemento: trascina la Pricing Table dal pannello Elements sul canvas.
- Scegli un layout: seleziona Grid, Carousel, Classic o Comparison dalla barra delle impostazioni a destra.
- Configura il Layout (prezzi, funzionalità, pulsanti ecc.) e lo Stile della tabella prezzi.
- Anteprima e pubblicazione: usa l'anteprima Desktop/Mobile per verificare la responsività, poi Save e Publish.
Modalità di layout dinamico
Scegliere il layout giusto aiuta i visitatori a capire le differenze tra i piani e accelera il processo decisionale.
| Modalità | Descrizione / Ideale per | Colonne e spaziatura | Navigazione / Controlli | Animazione e opzioni |
|---|---|---|---|---|
| Grid | Layout a schede pulito per confronto affiancato. | Gap tra colonne: 0–100 px; Colonne per riga: fino a 5. | — | — |
| Carousel | Presentazione a slide con avanzamento automatico opzionale. | Colonne per slide: 1–5. | Intervallo avanzamento automatico; pausa al passaggio del mouse; loop infinito. | Animazione Fade o Slide. |
| Classic Table | Tabella tradizionale per confronti ampi e dettagliati. | Usa la larghezza orizzontale; ideale per lunghe liste di funzionalità. | Scorrimento orizzontale con controlli a freccia. | — |
| Comparison Table | Confronti approfonditi con molte colonne dove il contesto è importante. | Tabelle larghe; colonna intestazione fissa sempre visibile. | Scorrimento orizzontale con controlli a freccia; colonna intestazione fissa per il contesto. | — |
Suggerimenti
- Preferisci Grid per livelli semplici (es. 3–4 piani).
- Usa Carousel se vuoi mettere in evidenza i piani un gruppo alla volta o risparmiare spazio verticale.
- Scegli Classic/Comparison per lunghe liste di funzionalità che non entrano in schede a larghezza fissa.
Modelli di prezzo e formattazione
Scegliere il modello di prezzo giusto chiarisce le aspettative di costo ed evita sorprese, aumentando fiducia e conversioni.
| Modello di prezzo | Descrizione |
|---|---|
| Fixed Price | Pagamento una tantum. |
| Subscription | Fatturazione ricorrente con periodi: giornaliero, settimanale, mensile, annuale. |
| Price From | Mostra un prezzo "A partire da" per servizi variabili. |
| Price Range | Mostra min–max per servizi personalizzabili. |
| Per Unit | Prezzo per articolo, ora, giorno, posto, persona, ecc. |
| Free | Evidenzia offerte gratuite (con possibilità di mostrare il prezzo precedente). |
| Custom | Inserisci testo di prezzo personalizzato per casi specifici. |
Liste funzionalità
Liste di funzionalità chiare e scorrevoli aiutano gli acquirenti a riconoscere cosa è incluso e a confrontare i livelli rapidamente.
- Aggiungi, riordina o rimuovi funzionalità per ogni piano (Columns)
- Raggruppa gli elementi correlati e mantieni una formulazione coerente tra i piani (Columns)
- Per liste lunghe, preferisci i layout Classic o Comparison per sfruttare la navigazione orizzontale.
Funzionalità di prezzo avanzate
I segnali visivi sul prezzo guidano l'attenzione e rendono le offerte percepite come urgenti o di valore senza aggiungere confusione.
- Visualizzazione prezzo precedente (barrato) per evidenziare uno sconto.
- Badge testo sconto per enfatizzare le promozioni.
- Didascalie prezzo opzionali per note di fatturazione, tasse o disclaimer.
Pulsanti e azioni
Il call-to-action è il punto in cui i confronti si trasformano in conversioni. Configura le azioni che corrispondono alla tua strategia di funnel.
Tipi di azione
- Open URL (esterna o interna).
- Open Popup (apre un popup specifico sulla pagina).
- Step/Anchor Navigation (salta a una sezione della pagina).
- No action (utile per piani teaser o stati disabilitati).
Contenuto del pulsante
- Testo personalizzato: etichette chiare e orientate all'azione (es. "Inizia la prova gratuita") per pulsanti call-to-action personalizzati.
- Didascalia opzionale: aggiungi testo di supporto sotto il pulsante.
- Controlli Show/Hide per la visibilità di pulsante e didascalia.
Aspetto e stile
Lo stile garantisce che la Tabella Prezzi si integri con il tuo brand rimanendo leggibile e accessibile.
- Regola colori, tipografia, spaziatura, bordi e gap tra colonne (0–100 px).
- Mantieni un contrasto adeguato per testo, badge e pulsanti.
- Tieni il padding delle schede coerente per evitare salti visivi tra i piani.
Mobile e responsività
L'ottimizzazione per schermi piccoli preserva la leggibilità e garantisce che gli utenti possano comunque confrontare i piani e agire senza difficoltà.
- I layout multi-colonna possono collassare a un numero inferiore di colonne su mobile per la leggibilità.
- I layout Classic/Comparison mantengono lo scorrimento orizzontale con frecce quando il contenuto supera la larghezza del viewport.
- La colonna intestazione fissa rimane visibile in modalità Comparison per mantenere il contesto dei nomi dei piani.
- Visualizza in anteprima sia la vista Desktop che Mobile e regola spaziatura/tipografia secondo necessità.
Domande frequenti
D: Dove posso usare la Tabella Prezzi?
Nei builder di Funnel, Siti web, Blog e E-Commerce Store.
D: Quante colonne posso mostrare contemporaneamente?
Grid supporta fino a 5 colonne per riga; Carousel supporta 1–5 colonne per slide.
D: Posso mostrare il vecchio prezzo rispetto al nuovo?
Sì. Abilita Previous price (barrato) e aggiungi opzionalmente un Discount badge.
D: Il pulsante di un piano può aprire un popup per il checkout o un Form?
Sì. Imposta l'azione su Open Popup e scegli il popup che hai creato per quella pagina.
D: Cosa succede su mobile?
Le colonne possono collassare e i layout a tabella permettono lo scorrimento orizzontale con frecce. In modalità Comparison, la colonna intestazione fissa rimane visibile.
D: Quali modelli di prezzo sono inclusi?
Fixed, Subscription (giornaliero, settimanale, mensile, annuale), Price From, Price Range, Per Unit, Free e Custom.
D: Posso nascondere pulsanti o didascalie?
Sì. Usa i controlli Show/Hide nelle impostazioni del pulsante.
Articoli correlati
Questo articolo è stato utile?