Risposta rapida
Apri la tabella nel builder, fai clic sulla scheda Responsive e attiva Enable Responsive Table. Seleziona il breakpoint Tablet (fino a 700px) o Mobile (fino a 375px), poi scegli Stack Direction (Row o Column), Items Per Head e se usare First Row As Header. Ogni breakpoint mantiene il proprio layout. Fai clic su Save. La modalità responsive è gratuita; disattivare un singolo breakpoint richiede Pro.
Una tabella responsive cambia layout sugli schermi piccoli per restare leggibile. Invece di restringere ogni colonna, WP Table Builder può impilare la tabella in blocchi più piccoli su tablet e telefoni, mentre i visitatori da desktop vedono la tabella esattamente come l’hai creata.
Requisiti #
| Voce | Dettagli |
|---|---|
| Piano | Gratis e Pro (Disable Breakpoint richiede Pro) |
| Versione del plugin | WP Table Builder 2.3.0 o successivo per il pannello mostrato qui |
| Tempo necessario | Circa 3 minuti |
Opzioni responsive #
| Impostazione | Cosa fa |
|---|---|
| Enable Responsive Table | Attiva i layout responsive per questa tabella |
| Width Target | Window usa la larghezza del browser per scegliere il breakpoint. Container usa la larghezza dell’area in cui si trova la tabella, più adatta per tabelle in barre laterali o colonne strette. |
| Preview Width | La larghezza usata per l’anteprima nel builder |
| Breakpoints | Desktop (tabella come creata), Tablet (fino a 700px), Mobile (fino a 375px) |
| Disable Breakpoint | Disattiva le modifiche responsive per il breakpoint selezionato (Pro) |
| Max Width | La larghezza massima dello schermo a cui si applica il breakpoint |
| First Row As Header | Ripete le etichette della prima riga accanto a ogni valore quando è impilata |
| Static First Row | Mantiene la prima riga come riga normale in alto invece di ripeterla |
| Stack Direction | Row impila ogni riga in un blocco. Column impila ogni colonna in un blocco. |
| Items Per Head | Quante righe o colonne vengono raggruppate sotto ogni intestazione quando è impilata |
Passo 1: Attiva la modalità responsive #
- Apri la tabella nel builder.
- Fai clic su Responsive (scheda) nel pannello a sinistra.
- Attiva Enable Responsive Table.
Passo 2: Imposta i layout per tablet e mobile #
- In Breakpoints, fai clic su Tablet o Mobile. L’area di lavoro passa a quella dimensione dello schermo.
- Scegli un valore di Stack Direction:
- Row per le tabelle di dati, dove ogni riga è un elemento (un prodotto, una persona, un evento).
- Column per le tabelle comparative e dei prezzi, dove ogni colonna è un prodotto o un piano.
- Lascia First Row As Header attivo così le etichette si ripetono accanto a ogni valore.
- Imposta Items Per Head (1 è l’ideale per la maggior parte dei telefoni).
- Ripeti per l’altro breakpoint, poi fai clic su Save.
Le modifiche su un breakpoint cambiano solo il layout di quel breakpoint. La nota in fondo al pannello conferma quale layout stai modificando.
Passo 3: Prova su dispositivi reali #
Usa Desktop, Tablet e Mobile (icone nella barra superiore) per vedere l’anteprima di ogni layout, poi apri la pagina pubblicata su un telefono.
Altre opzioni per mobile #
- Scorrimento orizzontale mantiene il layout desktop e permette ai visitatori di scorrere lateralmente.
- Nascondere una colonna su mobile rimuove le colonne meno importanti sui telefoni.
- Prima colonna fissa (Pro) mantiene visibili i nomi dei prodotti durante lo scorrimento laterale.
Domande frequenti #
Le tabelle di WP Table Builder sono responsive?
Sì. Attiva Enable Responsive Table nella scheda Responsive e imposta i layout per tablet e mobile. I visitatori da desktop continuano a vedere la tabella così come l’hai creata.
Devo impilare per riga o per colonna?
Impila per riga quando ogni riga è un elemento, come in un elenco di prodotti. Impila per colonna quando ogni colonna è un elemento, come in una tabella dei prezzi o comparativa.
Quali sono i breakpoint predefiniti?
Tablet si applica fino a 700px di larghezza e Mobile fino a 375px. Puoi cambiare il Max Width di ogni breakpoint.
Qual è la differenza tra Window e Container?
Window sceglie il layout in base alla larghezza del browser. Container lo sceglie in base alla larghezza dello spazio in cui si trova la tabella, ideale per tabelle dentro colonne o barre laterali.
Posso mantenere il layout desktop sui tablet?
Sì, con WP Table Builder Pro. Seleziona il breakpoint Tablet e attiva Disable Breakpoint.
Documenti correlati #
- Come far scorrere una tabella in orizzontale in WP Table Builder
- Come nascondere una colonna della tabella su mobile in WP Table Builder
- Come rendere fissa una riga o una colonna in WP Table Builder
- Come usare celle di intestazione th per la prima riga in WP Table Builder
- Come cambiare l’altezza delle righe e la larghezza delle colonne in WP Table Builder
