Una lunga pagina con specifiche, recensioni e istruzioni: gli utenti scorrono, si perdono e se ne vanno. Gli store hanno risolto questo problema molto tempo fa suddividendo descrizioni, parametri e recensioni in tab. Nessun ricaricamento, nessuno scorrimento fino alla sezione desiderata.

Ma i tab non sono utili solo per i negozi online. Guarda una qualsiasi pagina di plugin su WordPress.org: informazioni, recensioni, installazione, tutto è separato in tab. Gli utenti vedono subito la struttura e passano dove serve.

Ecco due metodi funzionanti per aggiungere tab a post e pagine WordPress. Il primo, tramite un page builder, se ne hai già uno installato. Il secondo, tramite il plugin gratuito Tabs Responsive, se ti servono i tab senza vincolarti a un builder specifico.

💡 Panoramica rapida:

• Verifica se il tuo page builder ha un modulo tab
• Installa il plugin gratuito Tabs Responsive dalla directory di WordPress.org
• Crea i tab nel builder drag-and-drop e riempili di contenuti
• Inserisci lo shortcode generato nella pagina desiderata o in un widget

Come si differenziano i tab dagli accordion

I tab non vanno confusi con gli accordion, hanno scopi diversi. Un accordion espande un blocco e comprime gli altri: comodo per FAQ e schermi mobile. I tab mantengono tutte le schede visibili e cambiano il contenuto all'istante. Gli utenti vedono sempre la struttura e possono saltare rapidamente a qualsiasi sezione.

Secondo il Nielsen Norman Group, gli accordion sono appropriati quando gli utenti hanno bisogno di una sola sezione tra diverse. I tab funzionano quando è probabile che i visitatori passino da una scheda all'altra in una sola visita. Per le pagine prodotto, i tab vincono: gli acquirenti confrontano specifiche e descrizione in un'unica finestra senza perdere il contesto.

Attenzione: se il contenuto di un tab supera una schermata, un accordion potrebbe essere più comodo. Un tab lungo costringe a scorrere proprio come una pagina normale.

Metodo 1: tab tramite un page builder

Se stai già usando un page builder, sei fortunato. La maggior parte dei builder più diffusi include un modulo tab di serie.

Elementor

🔗 Elementor su WordPress.org

Elementor, il page builder più diffuso per WordPress: oltre 10 milioni di installazioni attive e il 40-50% del mercato dei page builder, secondo i dati Colorlib per il 2026. Il modulo Tabs è incluso nella versione gratuita. Trascina l'elemento «Tabs» sulla pagina, modifica le intestazioni e i contenuti delle schede, personalizza lo stile per adattarlo al design del tuo sito.

Il vantaggio è che le schede di Elementor ereditano gli stili globali: font, colori e spaziatura vengono applicati automaticamente. Non serve modificare i CSS separatamente.

WPBakery

🔗 WPBakery, sito ufficiale

WPBakery (in precedenza Visual Composer), un builder premium spesso incluso nei temi. A differenza di Elementor, qui il modulo Tabs parte vuoto: aggiungi elementi separati a ogni scheda, testo, immagini, icone, pulsanti. Questo offre maggiore flessibilità ma richiede qualche passaggio in più in fase di configurazione.

Se ti servono istruzioni dettagliate per WPBakery, abbiamo una guida dedicata.

Metodo 2: plugin Tabs Responsive, configurazione passo passo

Nessun page builder, e installare un builder solo per le schede è sproporzionato. Tabs Responsive, un plugin gratuito dalla directory di WordPress.org, fa esattamente ciò che promette: aggiunge schede a qualsiasi articolo o pagina tramite shortcode o widget.

🔗 Tabs Responsive su WordPress.org

Il plugin è attivo e aggiornato: oltre 20.000 installazioni attive, valutazione 4,7 su 5, più di 500 recensioni, ultimo aggiornamento maggio 2026, compatibile con WordPress 6.8.3. La versione gratuita include un modello di design, stili orizzontale e verticale, supporto per le icone Font Awesome. La versione Pro aggiunge oltre 20 modelli, più di 500 Google Font e animazioni per i contenuti.

Step 1: installazione

Nell'area di amministrazione di WordPress, vai su Plugin → Aggiungi nuovo, inserisci tabs responsive nella ricerca. Trova il plugin di wpshopmart, clicca Installa ora, poi Attiva.

Dopo l'attivazione, nel menu a sinistra compare la voce "Tabs Responsive".

Step 2: creare le prime tab

Vai su Tabs Responsive → Aggiungi nuove tab. Si aprirà un builder drag-and-drop.

Per prima cosa, assegna al set di tab un nome descrittivo, ad esempio "Specifiche prodotto" o "Tab homepage". Ti sarà utile quando avrai più set per pagine diverse.

Il builder ha un aspetto imponente, ma la logica è semplice:

Ora compila le tab vere e proprie. Nella sezione Aggiungi tab, configura per ciascuna scheda:

• Titolo tab, ciò che l'utente vedrà sulla scheda: "Descrizione", "Specifiche", "Recensioni".
• Descrizione tab, il contenuto della scheda. È disponibile un editor WYSIWYG completo: puoi inserire immagini, video, musica, altri shortcode.
• Icona tab, scegli un'icona dalla libreria Font Awesome integrata nel plugin.
• Mostra sopra l'icona, l'opzione posiziona il titolo sopra l'icona oppure disabilita l'icona, lasciando solo il testo.
• Rimuovi, pulsante per eliminare una scheda specifica.
• Aggiungi nuove tab, aggiunge una scheda vuota al set.
• Rimuovi tutto, azzera tutte le tab in un colpo solo.

Le tab possono essere trascinate per cambiarne l'ordine. Clicca Salva bozza durante il lavoro: se esci accidentalmente dalla pagina, le modifiche non andranno perse.

Step 3: design e stili

L'aspetto delle tab si configura nella barra laterale destra del builder.

La versione gratuita offre un modello di design:

La versione Pro aggiunge altri 19 modelli. Ma anche nella versione gratuita puoi personalizzare: colore di sfondo e del testo, famiglia di font, padding, bordi, allineamento delle icone, animazione di transizione.

Se le impostazioni standard non bastano, il plugin dispone di un campo per il CSS personalizzato:

Qui trovi anche il pulsante Aggiorna impostazioni predefinite: cliccaci sopra per fare in modo che tutti i nuovi set di tab vengano creati con i parametri di stile correnti.

Step 4: pubblicare le tab su una pagina

Quando contenuti e stile sono pronti, clicca Pubblica in alto nella schermata.

Il plugin genererà uno shortcode simile a [TABS_R id=443]. Copialo.

Apri l'articolo o la pagina in cui devi aggiungere le tab e incolla lo shortcode nella posizione desiderata. Funziona con qualsiasi editor, sia classico che Gutenberg.

Se devi aggiungere le tab a una sidebar o al footer, utilizza il widget Tabs Responsive. Vai su Aspetto → Widget:

Clicca sul link «Clicca qui» e arriverai alla schermata dei widget, dove potrai trascinare il widget in qualsiasi area:

Il risultato dopo 5-7 minuti di configurazione si presenta così:

I colori e gli stili qui sono basilari; se lo desideri, puoi modificarli nel pannello destro del builder o tramite CSS personalizzato.

Guarda il video per vedere l'intero processo, dall'installazione alle tab finite sulla pagina:

⁉️🤔 Domande frequenti

Le tab funzionano sui dispositivi mobili?

Sì. Il plugin Tabs Responsive è basato su Bootstrap, quindi le tab si adattano a qualsiasi schermo. Su schermi stretti, le tab orizzontali possono trasformarsi in un elenco verticale o in un accordion, a seconda del template scelto. Dopo la configurazione, verifica l'aspetto delle tab su telefono: se il testo delle tab è lungo, lo stile verticale potrebbe essere più comodo di quello orizzontale.

Si possono aggiungere tab al corpo di un articolo senza un plugin?

Senza un plugin o un builder, no, a meno che non si scriva codice JavaScript e CSS personalizzato. WordPress di base non offre una soluzione pronta per le tab nei contenuti. Il plugin Tabs Responsive risolve il problema senza codice: installazione e configurazione richiedono pochi minuti, il risultato si ottiene tramite shortcode. È un compromesso tra «non voglio installare un plugin» e «non voglio scrivere codice da zero».

Le tab influiscono sulla SEO?

Con un'implementazione corretta, no. Il contenuto di tutte le tab viene caricato nell'HTML della pagina al primo rendering, Google lo vede e lo indicizza. Il plugin Tabs Responsive fornisce tutto il contenuto nel codice sorgente, senza caricamento asincrono, e questo è sicuro per la SEO. Possono sorgere problemi solo con tab caricate via AJAX (il contenuto della tab si carica solo al click): usa queste soluzioni con cautela.

Cosa fare se le tab sono in conflitto con il tema?

Il conflitto di stile è il problema più comune. Per prima cosa prova il campo CSS personalizzato nelle impostazioni del plugin: di solito bastano un paio di righe per correggere il colore di sfondo o il padding per il tema. Se non funziona, passa dallo stile orizzontale a quello verticale nelle impostazioni del template, a volte il problema si presenta solo in una delle due modalità. Come ultima risorsa, forum di supporto del plugin su WordPress.org: lo sviluppatore risponde e aiuta con i conflitti.

In cosa Tabs Responsive differisce dalle tab di un builder?

Il plugin non è legato a un builder specifico. Se decidi di cambiare builder o di passare all'editor a blocchi nativo, le tab via shortcode continueranno a funzionare. Con le tab di Elementor o WPBakery non c'è questa flessibilità: cambiando builder, le tab spariscono insieme a esso. Inoltre, Tabs Responsive supporta stile verticale, widget e icone, cosa che non tutti i builder offrono nella versione gratuita.

Cosa scegliere per il tuo progetto

Se un page builder è già installato, usa il suo modulo tab. È più veloce: un drag-and-drop e le tab sono sulla pagina.

Se non c'è un builder, usa il plugin Tabs Responsive. È gratuito, aggiornato e non ti vincola a un builder specifico. Shortcode e widget funzionano con qualsiasi tema e qualsiasi editor.

Per i negozi online WooCommerce, il plugin aggiunge una tab separata con la descrizione alla scheda prodotto, cosa non disponibile con le tab di Elementor.

Prova Tabs Responsive su un sito di test: l'installazione richiede un minuto e creerai le tue prime tab in 5 minuti. Se ti blocchi a un certo passaggio, guarda il video qui sopra o scrivi nei commenti, risolviamo insieme.