Resumo: Como Criar Abas no WordPress
Existem 3 maneiras de adicionar conteúdo em abas a qualquer página do WordPress, sem necessidade de codificação.
- Instale o SeedProd – Baixe e ative o SeedProd (plano pago necessário para o bloco de Abas), em seguida, insira sua chave de licença
- Adicione abas com o SeedProd – Abra qualquer página com “Editar com SeedProd”, arraste o bloco de Abas, configure seu conteúdo e salve
- Use o Editor de Blocos – Instale o Ultimate Blocks (gratuito), abra qualquer post ou página e adicione o bloco de Abas no inseridor de blocos
- Use um plugin gratuito – Instale o Tabs Responsive, crie um conjunto de abas, copie o shortcode e cole-o em qualquer post ou página
- Escolha seu método – O SeedProd oferece controle visual completo; o Editor de Blocos e o Tabs Responsive funcionam com qualquer tema existente
Adicionar abas a uma página do WordPress parece simples, mas a maioria dos tutoriais assume que você é um desenvolvedor ou que deseja instalar três plugins apenas para começar.
A maioria dos guias ensina a construir um tema personalizado completo do zero. Eles pulam a opção do Editor de Blocos inteiramente, ou cobrem apenas um plugin.
O SeedProd é meu método preferido para conteúdo em abas, mas neste guia também mostrarei a abordagem do Editor de Blocos e uma opção de plugin gratuito. Sem necessidade de codificação.
O Que São Abas no WordPress e Por Que Elas Ajudam?
Abas do WordPress são painéis de conteúdo clicáveis que organizam o conteúdo da página em seções entre as quais os visitantes podem alternar sem rolar.
Abas são um tipo de sistema de navegação que organiza o conteúdo, tornando mais fácil para os visitantes navegarem em seu site. Você pode adicionar abas a posts e páginas ou usar um widget de abas para exibir conteúdo em abas nas áreas de barra lateral e widgets do seu WordPress.
Por que você precisa de Conteúdo em Abas no WordPress?
Além de organizar o conteúdo, as abas tornam muito mais fácil manter os visitantes do seu site ativos e engajados. Como as abas agrupam tópicos de conteúdo em uma única página, os usuários não precisarão clicar em outras páginas, o que é ideal para períodos de atenção mais curtos.
Por exemplo, o WordPress.org usa abas em sua página de plugins para exibir informações como detalhes, avaliações, suporte e desenvolvimento.
Maneiras Populares de Usar Abas no WordPress:
- Especificações e avaliações de produtos em páginas WooCommerce
- Detalhes de contato divididos por departamento ou local
- Filtros de blog (populares, recentes, categorias)
- Seções de FAQ com categorias separadas em abas
- Níveis de preço ou pacotes de serviços
Páginas de produtos WooCommerce são um dos lugares mais comuns para usar abas. Uma aba dedicada para especificações, uma para avaliações e uma para envio mantém as páginas de produtos limpas sem ocultar os detalhes que os compradores precisam. Plugins de aba WooCommerce dedicados podem dar a você ainda mais controle sobre como as abas das páginas de produtos se parecem e se comportam.
Dica Profissional: Abas não devem ser confundidas com acordeões. Os usuários clicam nas abas para alternar informações, enquanto os acordeões se expandem para revelar informações.
Como Criar Abas com o SeedProd?
Para este método, usaremos o SeedProd, o melhor construtor de sites WordPress, para adicionar conteúdo em abas ao seu site.
O SeedProd é um construtor de sites de arrastar e soltar que permite criar layouts flexíveis do WordPress sem escrever código. Com seus kits de sites profissionais, modelos de página de destino, e editor visual ao vivo, você pode personalizar todas as partes do seu site e ver as alterações em tempo real.
O SeedProd também inclui blocos altamente personalizáveis, incluindo o bloco de Abas que usaremos neste guia.
Siga os passos abaixo para criar abas no WordPress com SeedProd.
Etapa 1. Instale o SeedProd Website Builder
Primeiro, acesse a página de preços do SeedProd e escolha um plano que inclua o bloco de Abas. O bloco de Abas está disponível em planos pagos; visite a página de preços para comparar opções e encontrar a opção certa para o seu orçamento.
Depois de baixar o plugin, você precisará instalá-lo e ativá-lo em seu site WordPress. Você pode seguir estas instruções sobre como instalar um plugin do WordPress se nunca o fez antes.
Após ativar o plugin, navegue até SeedProd » Configurações e insira sua chave de licença do plugin.
Você pode encontrar sua chave de licença do SeedProd em seu painel de conta na seção Downloads.
Lembre-se de clicar no botão Verificar Chave antes de ir para a próxima etapa.
Passo 2. Abra Sua Página com o SeedProd
Após instalar o SeedProd, você pode abrir qualquer página existente do WordPress no editor visual. Vá para Páginas » Todas as Páginas no seu painel do WordPress e encontre a página que deseja adicionar abas.
Clique no link Editar com SeedProd para abrir a página no editor visual.
Neste exemplo, adicionaremos abas à página Sobre para mostrar mais detalhes, como vagas de emprego e diretrizes editoriais. Você pode escolher qualquer página que faça sentido para o seu site.
Passo 3. Adicionar Abas às Suas Páginas do WordPress
Assim que sua página estiver aberta no editor visual, você pode clicar em qualquer elemento para alterar seu conteúdo, cores, estilo e visibilidade.
Também é fácil adicionar mais elementos à sua página arrastando-os do painel de blocos e soltando-os no lugar.
Primeiro, adicione uma nova seção à página para abrigar seu conteúdo em abas. No nosso caso, vamos duplicar uma das seções existentes e arrastá-la para o final da página.
Depois disso, substitua a imagem por algo mais relevante e exclua qualquer conteúdo que você não precise mais clicando no ícone da lixeira.
Agora você pode procurar o bloco Abas no painel esquerdo e arrastá-lo para a nova seção em sua página.
Clicar no bloco exibe suas configurações de conteúdo onde você pode:
- Adicionar várias abas
- Mostrar ou ocultar o ícone da aba
- Alterar o tamanho da fonte
- Aumentar ou diminuir o espaço entre as abas
- Ajustar o alinhamento da aba
Expandir cada aba permite adicionar um título e escrever seu conteúdo usando um editor clássico com configurações de ‘o que você vê é o que você obtém’ (WYSIWYG).
Você também pode habilitar um ícone personalizado para adicionar mais interesse às suas abas e destacá-las. Mude o controle deslizante 'Ocultar ícone da aba' para a posição 'Desativado' e escolha um ícone personalizado da biblioteca Font Awesome.
Clicar na aba Avançado permite escolher mais opções de personalização, incluindo cores de fundo personalizadas, fontes, bordas, espaçamento e muito mais.
Você também pode exibir abas verticais ou um conjunto de abas horizontal clicando em qualquer uma das opções de layout.
Lembre-se de clicar no botão Salvar no canto superior direito da tela para salvar suas alterações.
Siga os mesmos passos para adicionar abas a qualquer outra página do seu site WordPress e, em seguida, passe para a próxima etapa para tornar suas alterações visíveis.
Etapa 4. Publique seu conteúdo em abas
Após adicionar abas às suas várias páginas do WordPress, você está pronto para publicá-las para que os visitantes do seu site as vejam.
Para fazer isso, vá para a página SeedProd » Theme Builder e mude o controle deslizante 'Habilitar tema SeedProd' para a posição 'Ativado'.
Agora você pode visualizar suas páginas e ver seu conteúdo em abas em ação.
Como Adicionar Abas no Editor de Blocos do WordPress?
Se você estiver usando um tema WordPress padrão e não precisar de um editor visual completo, pode adicionar um bloco de abas do WordPress diretamente no Editor de Blocos usando um plugin gratuito.
Eu testei vários plugins de abas para o Editor de Blocos, e Ultimate Blocks é uma opção gratuita confiável com um bloco de Abas dedicado que funciona com qualquer tema.
Veja como adicionar abas a uma página do WordPress usando o Editor de Blocos:
- Vá para Plugins » Adicionar Novo, pesquise por “Ultimate Blocks” e clique em Instalar agora, depois em Ativar.
- Abra qualquer post ou página no Editor de Blocos do WordPress.
- Clique no ícone + para abrir o inseridor de blocos e pesquise por “Abas”.
- Selecione o bloco Abas da seção Ultimate Blocks e adicione-o ao seu conteúdo.
- Clique em cada rótulo de aba para renomeá-lo, em seguida, adicione seu conteúdo no painel de aba abaixo.
- Use a barra lateral de configurações do bloco à direita para ajustar cores, estilo da aba e alinhamento.
- Clique em Atualizar ou Publicar quando estiver satisfeito com suas abas.
Este método funciona sem alterar seu tema WordPress existente ou instalar um construtor de páginas separado.
Posso Adicionar Abas no WordPress Gratuitamente?
Sim, vários plugins gratuitos de abas para WordPress podem adicionar conteúdo em abas sem um construtor de páginas.
Tabs Responsive funciona com qualquer tema via shortcode e é o que vamos detalhar abaixo. Ultimate Blocks (abordado no método do Editor de Blocos acima) é mais adequado se você já estiver usando o Gutenberg. WP Tabs é outra opção sólida com uma interface baseada em blocos e vários estilos de layout.
O método a seguir é uma boa alternativa se você não quiser alterar seu tema do WordPress ou criar uma página de destino. Usaremos o plugin gratuito Tabs Responsive WordPress para adicionar abas responsivas ao seu site WordPress.
Primeiro, você precisará instalar o plugin Tabs Responsive e ativá-lo em seu administrador do WordPress.
Em seguida, navegue até Tabs Responsive » Adicionar Novas Abas e dê um título ao seu conjunto de abas.
A partir daí, você pode selecionar o modelo padrão ou, se estiver usando a versão Pro, pode escolher entre mais de 18 estilos de modelo.
O próximo passo é adicionar suas abas. Você pode criar quantas abas desejar e incluir:
- Títulos das abas
- Descrições das abas
- Ícones das abas
Você também pode editar a aparência de cada aba na barra lateral direita, escolhendo estilos de aba personalizados, cores de fundo, cores de fonte e muito mais.
Quando estiver satisfeito com suas abas, copie o shortcode das abas e cole-o em qualquer lugar do seu tema WordPress.
Por exemplo, você pode colar o shortcode em uma postagem ou página do WordPress como esta:
É assim que ficará na parte frontal do seu site:
Você também pode adicionar o shortcode das abas a uma área pronta para widgets, como a barra lateral do seu WordPress ou os widgets de rodapé, colando o shortcode em um bloco de parágrafo.
Depois, você verá seu conteúdo em abas ativo em suas áreas de barra lateral:
Perguntas Frequentes sobre Como Criar Abas no WordPress
Como crio abas no WordPress sem um plugin?
Você pode criar abas sem um plugin usando código HTML, CSS e JavaScript personalizado, mas essa abordagem requer conhecimento de desenvolvedor. A maioria dos iniciantes se sai melhor usando um plugin gratuito de abas para WordPress como o Ultimate Blocks ou o Tabs Responsive, que cuidam de todo o código para você. Se você estiver usando o editor visual do SeedProd, o bloco de Abas de arrastar e soltar é a opção mais fácil sem código para adicionar conteúdo em abas a uma página do WordPress.
Como adiciono abas no Editor de Blocos do WordPress?
Para adicionar abas no Editor de Blocos, instale um plugin que adicione um bloco de Abas ao Gutenberg, como o Ultimate Blocks (gratuito). Após ativado, abra qualquer post ou página, clique no inseridor de blocos +, procure por “Abas” e adicione o bloco de abas do WordPress ao seu conteúdo. Você pode então renomear cada aba, adicionar conteúdo aos painéis das abas e personalizar cores e alinhamento na barra lateral de configurações do bloco.
Qual é a diferença entre abas e acordeões no WordPress?
As abas do WordPress exibem vários painéis de conteúdo lado a lado, e clicar em uma aba alterna o painel visível. Os acordeões se empilham verticalmente e se expandem para revelar o conteúdo quando clicados. As abas funcionam melhor quando você deseja que todas as opções fiquem visíveis ao mesmo tempo e o conteúdo tenha um comprimento semelhante; os acordeões são melhores para conteúdo mais longo, como FAQs, onde a maioria dos visitantes lê apenas uma seção.
Se você deseja controle total do design sobre seu conteúdo em abas, o SeedProd é a opção mais rápida com uma pré-visualização visual ao vivo. O método do Editor de Blocos é uma boa opção se você deseja manter seu tema atual e prefere uma abordagem nativa do Gutenberg. O plugin Tabs Responsive funciona com qualquer configuração do WordPress e não requer nada além de um plugin gratuito de shortcode.
Você pode adicionar conteúdo em abas ao seu site WordPress em apenas alguns cliques, sem necessidade de código. O SeedProd torna o processo rápido e amigável para iniciantes se você já estiver usando o SeedProd para construir seu site.
Pronto para adicionar abas ao seu site WordPress?
Você também pode gostar destes outros guias úteis do WordPress enquanto estiver aqui:
- Como Criar Animações de Texto no WordPress (Passos Fáceis)
- Como Criar Divisores de Seção Elegantes para Sites WordPress
- Como Adicionar uma Caixa de Autor no WordPress (Sem Plugin)
- Como Adicionar uma Barra Lateral Diferente para Páginas Diferentes no WordPress
Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.
