{"id":1514,"date":"2025-03-21T10:03:44","date_gmt":"2025-03-21T10:03:44","guid":{"rendered":"https:\/\/tableberg.com\/?p=1514"},"modified":"2025-03-21T10:18:43","modified_gmt":"2025-03-21T10:18:43","slug":"come-creare-una-tabella-prezzi-in-wordpress-con-toggle","status":"publish","type":"post","link":"https:\/\/tableberg.com\/it\/how-to-create-a-wordpress-pricing-table-with-toggle\/","title":{"rendered":"Come creare una tabella dei prezzi in WordPress con i pulsanti"},"content":{"rendered":"<p>La creazione di una tabella dei prezzi \u00e8 indispensabile se si vogliono vendere prodotti e servizi attraverso il proprio sito web. Ma per visualizzare pi\u00f9 piani tariffari che i clienti possano confrontare facilmente senza lasciare la pagina, \u00e8 necessario aggiungere la funzione \"toggle\" alla tabella.<\/p>\n\n\n\n<p>La funzione \"toggle\" consente agli utenti di navigare o passare tra diverse serie di opzioni di prezzo, creando un'interfaccia interattiva. Ad esempio, gli utenti possono passare da un piano di abbonamento mensile, annuale o a vita.<\/p>\n\n\n\n<p>In questo post, vi mostreremo una guida passo passo su come creare una tabella dei prezzi di WordPress con una levetta utilizzando Tableberg. Iniziamo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Passo 1: installare e attivare l'Tableberg<\/h3>\n\n\n\n<p>Per prima cosa, installare e attivare il programma <strong><a href=\"https:\/\/tableberg.com\/it\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tavolo di lavoro<\/a><\/strong> sul vostro sito WordPress. Se non l'avete ancora installato, procuratevi il plugin <a href=\"https:\/\/tableberg.com\/it\/determinazione-dei-prezzi\/\" target=\"_blank\" rel=\"noreferrer noopener\">qui<\/a>.<\/p>\n\n\n\n<p>Una volta installata e attivata, siete pronti per iniziare a costruire la vostra tabella dei prezzi.<\/p>\n\n\n\n<p class=\"has-primary-alt-background-color has-background\">Nota: anche se l'Tableberg ha un <a href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" target=\"_blank\" rel=\"noreferrer noopener\">versione gratuita<\/a>La funzione \"toggle\" \u00e8 disponibile solo nella versione pro.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Passo 2: aggiungere il selettore per il blocco Tableberg<\/h3>\n\n\n\n<p>Tableberg Pro \u00e8 dotato di un potente <strong>Aletta per Tableberg<\/strong> che consente di organizzare le tabelle in schede senza alcuno sforzo.<\/p>\n\n\n\n<p>Per aggiungere questo blocco:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Aprite l'editor di WordPress e fate clic sulla voce <strong>+ pulsante<\/strong> per aggiungere un nuovo blocco.<\/li>\n\n\n\n<li>Ricerca di <strong>Aletta per Tableberg<\/strong> e selezionarlo.<\/li>\n\n\n\n<li>Il blocco toggle verr\u00e0 aggiunto all'editor.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"583\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Inserting-Toggle-for-Tableberg-Block-1024x583.png\" alt=\"\" class=\"wp-image-8117\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Inserting-Toggle-for-Tableberg-Block-1024x583.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Inserting-Toggle-for-Tableberg-Block-300x171.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Inserting-Toggle-for-Tableberg-Block-768x437.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Inserting-Toggle-for-Tableberg-Block-1536x875.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Inserting-Toggle-for-Tableberg-Block-2048x1167.png 2048w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Inserting-Toggle-for-Tableberg-Block-18x10.png 18w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Fase 3: Creare una tabella dei prezzi nella prima scheda<\/h3>\n\n\n\n<p>All'interno del <strong>Aletta per Tableberg<\/strong> \u00c8 possibile creare una tabella da zero o scegliere una tabella precostituita. Per questo tutorial, sceglieremo una tabella precostituita. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1800\" height=\"1013\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Adding-a-Table-inside-the-Toggle-for-Tableberg-Block.gif\" alt=\"\" class=\"wp-image-8130\" style=\"border-width:1px;border-radius:3px\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>All'interno del <strong>Aletta per Tableberg<\/strong> \u00e8 possibile <\/li>\n\n\n\n<li>Fare clic sul pulsante <strong>+ pulsante<\/strong> all'interno della scheda e cercare la voce <strong>Tavolo di lavoro<\/strong> blocco.<\/li>\n\n\n\n<li>Definire il numero di righe e colonne della tabella dei prezzi (ad esempio, 3\u00d73 per tre piani).<\/li>\n\n\n\n<li>Il layout della tabella verr\u00e0 generato istantaneamente.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Passo 4: Aggiungere\/modificare il contenuto della tabella<\/h3>\n\n\n\n<p>Ora \u00e8 il momento di aggiungere o modificare il contenuto della tabella dei prezzi.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong># Aggiungi titoli di colonna<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Fare clic sulla prima riga e inserire i nomi dei piani tariffari (ad esempio, Basic, Standard, Premium).<\/li>\n\n\n\n<li>Allineateli al centro e aumentate le dimensioni dei caratteri per una migliore visibilit\u00e0.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong># Aggiungi piani tariffari<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nella seconda riga, inserire i prezzi per ciascun piano.<\/li>\n\n\n\n<li>Utilizzare il <strong>Opzione di evidenziazione<\/strong> per differenziare i prezzi.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong># Elenco caratteristiche del prodotto<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ogni colonna deve includere un elenco di caratteristiche per il rispettivo piano.<\/li>\n\n\n\n<li>Tableberg consente di inserire un <strong>Blocco elenco<\/strong> direttamente all'interno della tabella.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong># Aggiungere pulsanti CTA<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utilizzare il <strong>Blocco di pulsanti<\/strong> all'interno di Tableberg per creare pulsanti di invito all'azione (ad esempio, \"Acquista ora\" o \"Inizia\").<\/li>\n\n\n\n<li>Personalizzare il testo, il colore e lo stile del pulsante.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Passo 5: Aggiungere un'altra tabella dei prezzi a una nuova scheda<\/h3>\n\n\n\n<p>Fare clic sul pulsante <strong>Scheda 2<\/strong> nel blocco Toggle for Tableberg per aggiungere una nuova tabella in un'altra scheda. Ripetere quindi le stesse operazioni di cui sopra per creare un'altra tabella dei prezzi per la nuova scheda.<\/p>\n\n\n\n<p>Una volta completati questi passaggi, la tabella dei prezzi con funzionalit\u00e0 di selezione sar\u00e0 pronta. Visualizzate l'anteprima della tabella per verificare che tutto funzioni correttamente.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Passo 6: personalizzazione della levetta per il blocco Tableberg<\/h3>\n\n\n\n<p>Per rendere la tabella dei prezzi pi\u00f9 accattivante e in linea con il proprio marchio, \u00e8 possibile personalizzare la tabella <strong>Aletta per Tableberg<\/strong> blocco:<\/p>\n\n\n\n<p><strong>Rinominare le levette<\/strong>: Fare clic su ciascuna scheda e modificare l'etichetta per adattarla ai propri piani tariffari, ad esempio mensile, annuale o a vita.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"571\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-the-Tabs-Name-1024x571.png\" alt=\"\" class=\"wp-image-8131\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-the-Tabs-Name-1024x571.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-the-Tabs-Name-300x167.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-the-Tabs-Name-768x428.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-the-Tabs-Name-1536x856.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-the-Tabs-Name-2048x1141.png 2048w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-the-Tabs-Name-18x10.png 18w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Modifica dell'allineamento delle schede<\/strong>: Dal pannello delle impostazioni del blocco, scegliere di allineare le schede a sinistra, al centro o a destra in base alle preferenze di progettazione.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"625\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-Tab-Alignment-1024x625.png\" alt=\"\" class=\"wp-image-8132\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-Tab-Alignment-1024x625.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-Tab-Alignment-300x183.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-Tab-Alignment-768x469.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-Tab-Alignment-1536x938.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-Tab-Alignment-2048x1250.png 2048w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-Tab-Alignment-18x12.png 18w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Stile delle schede<\/strong>: Dalla scheda Stili, personalizzare il colore di sfondo, il colore del testo e il bordo delle levette per renderle visivamente coerenti con il design del sito.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"656\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Styles-Tab-1024x656.png\" alt=\"\" class=\"wp-image-8133\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Styles-Tab-1024x656.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Styles-Tab-300x192.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Styles-Tab-768x492.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Styles-Tab-1536x984.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Styles-Tab-2048x1312.png 2048w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Styles-Tab-18x12.png 18w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Queste semplici personalizzazioni possono migliorare notevolmente l'esperienza dell'utente e garantire che la tabella dei prezzi si integri perfettamente con l'aspetto generale del sito web.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusione<\/h3>\n\n\n\n<p>La creazione di tabelle di prezzi con una funzione \"toggle\" \u00e8 essenziale per un'esperienza utente senza soluzione di continuit\u00e0. Con <strong>Tableberg Toggle del professionista per Tableberg<\/strong> Ora \u00e8 possibile creare tabelle di prezzi interattive direttamente in WordPress, senza dover ricorrere a plugin aggiuntivi.<\/p>\n\n\n\n<p>Provate e fateci sapere cosa ne pensate nei commenti qui sotto!<\/p>","protected":false},"excerpt":{"rendered":"<p>Creating a pricing table is a must if you want to sell your products and services through your website. But to display multiple pricing plans that customers can compare easily without leaving the page, you must add the toggle feature to the table. The toggle feature allows users to navigate or switch between different sets [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":8135,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[8,86],"class_list":["post-1514","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-create-a-table","tag-pricing-tables"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/How-to-Create-a-Pricing-Table-With-Toggle-Switch.png","author_info":{"display_name":"Istiak Rayhan","author_link":"https:\/\/tableberg.com\/it\/author\/wpx_irayhan\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/posts\/1514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/comments?post=1514"}],"version-history":[{"count":4,"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/posts\/1514\/revisions"}],"predecessor-version":[{"id":8134,"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/posts\/1514\/revisions\/8134"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/media\/8135"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/media?parent=1514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/categories?post=1514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/tags?post=1514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}