{"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":"como-criar-uma-tabela-de-precos-no-wordpress-com-alternancia","status":"publish","type":"post","link":"https:\/\/tableberg.com\/pt\/how-to-create-a-wordpress-pricing-table-with-toggle\/","title":{"rendered":"Como criar uma tabela de pre\u00e7os no WordPress com altern\u00e2ncia"},"content":{"rendered":"

A cria\u00e7\u00e3o de uma tabela de pre\u00e7os \u00e9 obrigat\u00f3ria se voc\u00ea quiser vender seus produtos e servi\u00e7os pelo site. Mas para exibir v\u00e1rios planos de pre\u00e7os que os clientes possam comparar facilmente sem sair da p\u00e1gina, voc\u00ea deve adicionar o recurso de altern\u00e2ncia \u00e0 tabela.<\/p>\n\n\n\n

O recurso de altern\u00e2ncia permite que os usu\u00e1rios naveguem ou alternem entre diferentes conjuntos de op\u00e7\u00f5es de pre\u00e7os, criando uma interface interativa. Por exemplo, os usu\u00e1rios podem alternar entre planos de assinatura mensais, anuais e vital\u00edcios.<\/p>\n\n\n\n

Nesta postagem do blog, mostraremos um guia passo a passo sobre como criar uma tabela de pre\u00e7os no WordPress com um bot\u00e3o de altern\u00e2ncia usando o Tableberg. Vamos come\u00e7ar.<\/p>\n\n\n\n

Etapa 1: Instalar e ativar o Tableberg<\/h3>\n\n\n\n

Primeiro, instale e ative o Tableberg<\/a><\/strong> em seu site WordPress. Se voc\u00ea ainda n\u00e3o o instalou, obtenha o plug-in aqui<\/a>.<\/p>\n\n\n\n

Depois de instalado e ativado, voc\u00ea estar\u00e1 pronto para come\u00e7ar a criar sua tabela de pre\u00e7os.<\/p>\n\n\n\n

Observa\u00e7\u00e3o: Embora o Tableberg tenha um vers\u00e3o gratuita<\/a>No entanto, o recurso de altern\u00e2ncia s\u00f3 est\u00e1 dispon\u00edvel na vers\u00e3o profissional.<\/p>\n\n\n\n

\n\n\n\n

Etapa 2: Adicionar a altern\u00e2ncia para o bloco Tableberg<\/h3>\n\n\n\n

O Tableberg Pro vem com um poderoso Altern\u00e2ncia para Tableberg<\/strong> que permite organizar tabelas em guias sem esfor\u00e7o.<\/p>\n\n\n\n

Para adicionar esse bloco:<\/p>\n\n\n\n

    \n
  1. Abra o editor do WordPress e clique no bot\u00e3o + bot\u00e3o<\/strong> para adicionar um novo bloco.<\/li>\n\n\n\n
  2. Procurar por Altern\u00e2ncia para Tableberg<\/strong> e selecione-o.<\/li>\n\n\n\n
  3. O bloco de altern\u00e2ncia ser\u00e1 adicionado ao seu editor.<\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n\n\n\n

    Etapa 3: Criar uma tabela de pre\u00e7os na primeira guia<\/h3>\n\n\n\n

    Dentro do Altern\u00e2ncia para Tableberg<\/strong> bloco, voc\u00ea pode criar uma tabela do zero ou escolher uma tabela pr\u00e9-criada. Para fins deste tutorial, escolheremos uma tabela pr\u00e9-criada. <\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
      \n
    1. Dentro do Altern\u00e2ncia para Tableberg<\/strong> bloco, voc\u00ea pode <\/li>\n\n\n\n
    2. Clique no bot\u00e3o + bot\u00e3o<\/strong> dentro da guia e procure o Tableberg<\/strong> bloco.<\/li>\n\n\n\n
    3. Defina o n\u00famero de linhas e colunas de sua tabela de pre\u00e7os (por exemplo, 3\u00d73 para tr\u00eas planos).<\/li>\n\n\n\n
    4. O layout da tabela ser\u00e1 gerado instantaneamente.<\/li>\n<\/ol>\n\n\n\n
      \n\n\n\n

      Etapa 4: Adicionar\/Editar conte\u00fado \u00e0 tabela<\/h3>\n\n\n\n

      Agora, \u00e9 hora de adicionar ou editar o conte\u00fado de sua tabela de pre\u00e7os.<\/p>\n\n\n\n

      # Adicionar t\u00edtulos de coluna<\/strong><\/h4>\n\n\n\n
        \n
      • Clique na primeira linha e digite os nomes dos planos de pre\u00e7os (por exemplo, Basic, Standard, Premium).<\/li>\n\n\n\n
      • Alinhe-os centralmente e aumente o tamanho da fonte para melhorar a visibilidade.<\/li>\n<\/ul>\n\n\n\n

        # Adicionar planos de pre\u00e7os<\/strong><\/h4>\n\n\n\n
          \n
        • Na segunda linha, insira o pre\u00e7o de cada plano.<\/li>\n\n\n\n
        • Use o Op\u00e7\u00e3o de destaque<\/strong> para diferenciar os pre\u00e7os.<\/li>\n<\/ul>\n\n\n\n

          Lista de recursos do produto #<\/strong><\/h4>\n\n\n\n
            \n
          • Cada coluna deve incluir uma lista de recursos para o respectivo plano.<\/li>\n\n\n\n
          • O Tableberg permite que voc\u00ea insira um Bloco de listas<\/strong> diretamente dentro da tabela.<\/li>\n<\/ul>\n\n\n\n

            # Adicionar bot\u00f5es de CTA<\/strong><\/h4>\n\n\n\n
              \n
            • Use o Bloco de bot\u00f5es<\/strong> dentro do Tableberg para criar bot\u00f5es de chamada para a\u00e7\u00e3o (por exemplo, \"Buy Now\" ou \"Get Started\").<\/li>\n\n\n\n
            • Personalize o texto, a cor e o estilo do bot\u00e3o.<\/li>\n<\/ul>\n\n\n\n
              \n\n\n\n

              Etapa 5: Adicionar outra tabela de pre\u00e7os a uma nova guia<\/h3>\n\n\n\n

              Clique no bot\u00e3o Aba 2<\/strong> no bloco Toggle for Tableberg para adicionar uma nova tabela em outra guia. Em seguida, repita as mesmas etapas acima para criar outra tabela de pre\u00e7os para a nova guia.<\/p>\n\n\n\n

              Depois de concluir essas etapas, sua tabela de pre\u00e7os com funcionalidade de altern\u00e2ncia estar\u00e1 pronta. Visualize sua tabela para verificar se tudo est\u00e1 funcionando sem problemas.<\/p>\n\n\n\n

              \n\n\n\n

              Etapa 6: Personalizar a altern\u00e2ncia para o bloco Tableberg<\/h3>\n\n\n\n

              Para tornar sua tabela de pre\u00e7os mais atraente visualmente e alinhada com sua marca, voc\u00ea pode personalizar o Altern\u00e2ncia para Tableberg<\/strong> bloco:<\/p>\n\n\n\n

              Renomear as altern\u00e2ncias<\/strong>: Clique em cada guia e altere o r\u00f3tulo para corresponder aos seus planos de pre\u00e7os, como Mensal, Anual ou Vital\u00edcio.<\/p>\n\n\n\n

              \"\"<\/figure>\n\n\n\n

              Alterar o alinhamento da guia<\/strong>: No painel de configura\u00e7\u00f5es do bloco, escolha alinhar as guias \u00e0 esquerda, ao centro ou \u00e0 direita, de acordo com sua prefer\u00eancia de design.<\/p>\n\n\n\n

              \"\"<\/figure>\n\n\n\n

              Estilizar as guias<\/strong>: Na guia Styles (Estilos), personalize a cor do plano de fundo, a cor do texto e a borda dos bot\u00f5es de altern\u00e2ncia para torn\u00e1-los visualmente consistentes com o design do seu site.<\/p>\n\n\n\n

              \"\"<\/figure>\n\n\n\n

              Essas personaliza\u00e7\u00f5es simples podem melhorar muito a experi\u00eancia do usu\u00e1rio e garantir que a tabela de pre\u00e7os combine perfeitamente com a apar\u00eancia geral do seu site.<\/p>\n\n\n\n

              \n\n\n\n

              Conclus\u00e3o<\/h3>\n\n\n\n

              A cria\u00e7\u00e3o de tabelas de pre\u00e7os com um recurso de altern\u00e2ncia \u00e9 essencial para uma experi\u00eancia de usu\u00e1rio perfeita. Com Tableberg Toggle do Pro para Tableberg<\/strong> bloco, agora voc\u00ea pode criar tabelas de pre\u00e7os interativas diretamente no WordPress sem a necessidade de plug-ins adicionais.<\/p>\n\n\n\n

              Experimente e conte-nos sua opini\u00e3o nos coment\u00e1rios abaixo!<\/p>","protected":false},"excerpt":{"rendered":"

              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 […]<\/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\/pt\/author\/wpx_irayhan\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/1514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/comments?post=1514"}],"version-history":[{"count":4,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/1514\/revisions"}],"predecessor-version":[{"id":8134,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/1514\/revisions\/8134"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media\/8135"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media?parent=1514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/categories?post=1514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/tags?post=1514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}