Quer tornar suas páginas do WordPress mais fáceis de navegar? Uma das minhas maneiras favoritas é criar abas no WordPress. Isso mantém as coisas organizadas, economiza espaço e fica ótimo em qualquer dispositivo.
As abas funcionam como pequenas pastas na própria página. Os visitantes podem clicar para revelar apenas as informações de que precisam, sem rolar ou poluir.
Neste guia, mostrarei passo a passo como criar conteúdo em abas no WordPress sem escrever uma única linha de código. Vou guiá-lo pelo meu método preferido usando o SeedProd, além de um plugin gratuito se você estiver procurando uma alternativa rápida.
Passos Rápidos para Criar Conteúdo em Abas:
O que são Abas no WordPress?
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
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 no WordPress Usando SeedProd (Sem Código)
Para o primeiro método, usaremos o SeedProd, o melhor construtor de sites WordPress, para adicionar conteúdo em abas ao seu site.
SeedProd é um poderoso construtor de páginas 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.
Você também pode usar o SeedProd para:
- Crie temas personalizados do WordPress
- Construa sites WooCommerce
- Crie páginas de destino de alta conversão
- Colocar seu site em modo de manutenção
- E muito mais
Este construtor de páginas também inclui blocos altamente personalizáveis para aprimorar o design do seu WordPress. Por exemplo, com o bloco de Abas, que usaremos neste guia, você pode adicionar várias abas às páginas com alguns cliques.
Siga os passos abaixo para criar abas no WordPress com SeedProd.
Tutorial em Vídeo
Se preferir, você pode seguir os passos escritos abaixo.
Etapa 1. Instale o SeedProd Website Builder
Primeiro, você precisará acessar o site do SeedProd e baixar o plugin. O SeedProd tem uma versão gratuita; no entanto, você precisará de um plano premium para desbloquear abas e outros blocos.
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. Crie um Tema WordPress ou Página de Destino
Existem 2 maneiras de usar o SeedProd para adicionar abas ao seu site:
- Use o Theme Builder para criar um tema personalizado do WordPress e adicionar abas a qualquer página do WordPress.
- Crie uma página de destino independente com conteúdo em abas usando o construtor de páginas de arrastar e soltar.
Para este guia, usaremos a primeira opção porque ela permite adicionar abas a qualquer página que você desejar, incluindo sua página inicial, barra lateral do WordPress, cabeçalho, rodapé e qualquer outro lugar em seu tema.
Você pode seguir este guia passo a passo para criar um tema do WordPress com o SeedProd e, em seguida, voltar aqui para obter instruções sobre como adicionar abas ao seu site.
Passo 3. Adicionar Abas às Suas Páginas do WordPress
Após construir seu tema do WordPress, você precisará decidir quais páginas terão conteúdo em abas. Por exemplo, você pode adicionar abas à sua página de contato para mostrar diferentes tipos de informações de contato ou em uma barra lateral personalizada para diferentes categorias de posts.
Neste exemplo, adicionaremos abas à página sobre para mostrar mais detalhes, como vagas de emprego, diretrizes editoriais e muito mais.
Para fazer isso, vá para Páginas » Todas as Páginas no seu painel do WordPress e encontre a página que deseja editar.
Como você está usando um kit de site do SeedProd, páginas de conteúdo como sobre, contato e serviços são criadas automaticamente. Para abri-las no editor visual, clique no link Editar com SeedProd.
Assim que sua página estiver aberta no construtor de páginas, você poderá usar as opções de personalização do SeedProd para fazer alterações. 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. Então, vamos fazer isso com o bloco de abas do SeedProd.
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 ativar um ícone personalizado para adicionar mais interesse às suas abas e destacá-las. Simplesmente mude a opção ‘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 a opção ‘Ativar 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 WordPress com um Plugin Gratuito
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:
Qual Método é Melhor para Criar Abas?
Se você deseja controle total do design e já usa o SeedProd, o método de arrastar e soltar é o melhor. É rápido, visual e funciona com seu tema ou páginas de destino existentes. Se você está usando um tema clássico e deseja uma maneira rápida de inserir abas, o plugin Tabs Responsive é uma opção gratuita sólida.
Perguntas Frequentes sobre Como Criar Abas no WordPress
Sim, é possível criar conteúdo personalizado com abas sem usar um plugin. No entanto, isso geralmente requer conhecimento de HTML, CSS e JavaScript. Você precisaria escrever o código necessário para implementar a funcionalidade de conteúdo com abas e estilizar de acordo com suas preferências.
Sim, você pode exibir vários tipos de conteúdo dentro de cada aba. Isso pode incluir texto, imagens, vídeos, tabelas, formulários ou qualquer outro conteúdo suportado por HTML. A maioria dos plugins de conteúdo com abas oferece opções para adicionar e formatar diferentes tipos de conteúdo dentro de cada aba.
Sim, os plugins de conteúdo com abas são geralmente projetados para serem responsivos e amigáveis para dispositivos móveis. Eles ajustam automaticamente o layout e o comportamento das abas e do conteúdo para garantir uma visualização e usabilidade ideais em diferentes dispositivos, incluindo smartphones e tablets.
Sim, o conteúdo com abas pode ser uma maneira eficaz de organizar e exibir informações de produtos ou planos de preços. Você pode criar abas para diferentes recursos do produto, especificações, níveis de preço ou quaisquer outros detalhes relevantes, permitindo que os usuários alternem facilmente entre as informações de que precisam.
Você pode adicionar abas elegantes e personalizáveis 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, especialmente se você já estiver usando seu construtor de páginas.
Pronto para criar abas personalizáveis em seu site?
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.
