Deseja oferecer aos seus usuários uma maneira rápida e limpa de alternar entre diferentes conteúdos ou opções de preços no seu site WordPress? Um botão de alternância é a solução perfeita!
Com um botão de alternância, os visitantes podem alternar instantaneamente entre duas ou mais opções, como preços mensais ou anuais, modo claro ou escuro ou até mesmo seções de conteúdo completamente diferentes, sem sobrecarregar a página.
Nesta postagem, você descobrirá duas maneiras simples de adicionar botões de alternância ao seu site WordPress:
- Método 1: Adicionar um botão de alternância para qualquer tipo de conteúdo (texto, imagens, formulários, etc.)
- Método 2: Adicionar um botão de alternância para tabelas de preços ou qualquer tipo de dados tabulares
Vamos mergulhar de cabeça!
Método 1: Adicionar um botão de alternância para qualquer tipo de conteúdo
Se quiser permitir que seus usuários alternem entre diferentes blocos de conteúdo, como Perguntas frequentesdetalhes do produto ou conjuntos de recursos diferentes, este método é para você.
Usaremos o Blocos definitivos que oferece um bloco Content Toggle (Conteúdo com abas) versátil que funciona para todos os tipos de conteúdo.
Etapa 1: Instalar o plug-in Ultimate Blocks
- Vá para o painel de controle do WordPress.
- Navegue até Plugins > Adicionar novo.
- Pesquise "Ultimate Blocks" e instale/ative-o.
Etapa 2: Adicionar o bloco de conteúdo com guias
- Abra um post ou uma página no editor do WordPress.
- Tipo
/conteúdo da abaou use o ícone + para adicionar o bloco Tabbed Content.
O bloco "Tabbed Content" terá a seguinte aparência
Etapa 3: Personalizar o bloco para a funcionalidade de alternância
Selecione o bloco e escolha a opção Estilo de pílulas nas configurações (isso faz com que as guias se pareçam com botões).
Centralize o alinhamento para obter um visual clássico de alternância.
Clique no botão + sinal ao lado da primeira guia para adicionar outra guia. Adicione pelo menos duas guias (por exemplo, "Monthly" (Mensal) e "Yearly" (Anual) ou "Details" (Detalhes) e "Summary" (Resumo)). Renomeie as guias para que correspondam às suas opções de alternância.
Use as Configurações de cores para definir cores contrastantes, de modo que fique claro qual guia está ativa.
Etapa 4: Adicione seu conteúdo
Clique dentro de cada guia para adicionar o conteúdo de sua preferência (texto, imagens, listas, formulários ou até mesmo outros blocos).
Personalize ainda mais, se necessário: altere os planos de fundo das guias, as cores do conteúdo e muito mais.
Etapa 5: Visualizar e publicar
- Use a opção Preview para testar a alternância.
- Quando estiver satisfeito, publique ou atualize a página.
É isso aí! Agora você tem um botão de alternância flexível para qualquer tipo de conteúdo em seu site WordPress.
Método 2: Adicionar um botão de alternância para tabelas de preços (e mais)
Deseja permitir que os usuários alternem entre tabelas de preços mensais e anuais ou comparem diferentes conjuntos de dados lado a lado? O Alternância para Tableberg no plug-in Tableberg foi projetado exatamente para isso!
Com Tableberg Provocê pode organizar qualquer número de tabelas em guias organizadas e clicáveis, perfeitas para planos de preços, comparações de produtos, tabelas em vários idiomas ou qualquer cenário em que várias tabelas façam sentido.
Etapa 1: Insira o bloco "Toggle for Tableberg
- Abra sua postagem ou página no editor do WordPress.
- Clique no ícone + (mais) e pesquise por "Toggle for Tableberg".
- Adicione o bloco à sua página.
Etapa 2: Configure e personalize suas guias
- Por padrão, você verá três guias rotuladas como "Guia 1", "Guia 2" e "Guia 3".
- Adicione ou remova guias conforme necessário usando os ícones + ou -.
- Renomeie cada guia (por exemplo, "Monthly", "Yearly" ou "Basic Plan", "Pro Plan").
- Use o painel de opções do lado direito para ajustar os títulos das guias, o alinhamento, as cores e as bordas para obter uma aparência de marca.
Etapa 3: Adicione suas tabelas
- Clique em cada guia para adicionar uma tabela exclusiva em seu interior.
- Crie uma nova tabela do zero ou insira um padrão de tabela Tableberg pré-criado.
- Cada guia pode conter uma tabela completamente diferente - excelente para comparações de recursos, níveis de preços, conjuntos de dados e muito mais.
Casos de uso populares
- Tabelas de preços: Permita que os usuários alternem entre preços mensais e anuais ou entre planos diferentes.
- Comparações de dados: Mostre dados regionais, especificações de produtos diferentes ou métricas de desempenho em guias separadas.
- Conteúdo educacional: Organize as lições ou o material do curso para facilitar a navegação.
- Tabelas em vários idiomas: Exibir os mesmos dados em diferentes idiomas para visitantes internacionais.
Etapa 4: Visualizar e publicar
- Visualize suas guias de alternância para ter certeza de que tudo parece e funciona como esperado.
- Publique ou atualize seu post/página quando estiver pronto.
Veja um exemplo de como a alternância se parece com uma tabela de preços.
Conclusão
Adicionar um botão de alternância ao seu site WordPress é uma ótima maneira de melhorar a navegação, economizar espaço e dar aos visitantes acesso instantâneo ao conteúdo que lhes interessa - seja alternando entre planos de preços, visualizando detalhes ou comparando dados.
- Para qualquer tipo de conteúdo, use Blocos definitivos para criar alternâncias flexíveis em segundos.
- Para tabelas de preços e layouts de tabela mais avançados, experimente Bloco de alternância do Tableberg Pro para uma experiência perfeita com guias.
Experimente esses métodos em seu site e torne seu conteúdo mais interativo e fácil de usar. Tem dúvidas ou precisa de ajuda? Entre em contato conosco nos comentários!
