Como criar abas no WordPress para conteúdo com abas impressionante

Quer aprender a criar abas no WordPress?

Adicionar abas ao seu site WordPress é uma excelente maneira de organizar diferentes tipos de conteúdo e economizar espaço em posts e páginas.

Neste artigo, mostraremos como adicionar guias no WordPress passo a passo.

Por que você precisa de conteúdo WordPress com guias?

Além de classificar o conteúdo, as guias tornam muito mais fácil manter os visitantes do seu site ativos e engajados. Como as guias agrupam tópicos de conteúdo em uma 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, revisões, suporte e desenvolvimento.

Algumas outras maneiras de usar guias incluem:

• Nas descrições dos produtos para mostrar diferentes especificações do produto
• Na barra lateral do seu blog para filtrar categorias
• Nas páginas de contato para classificar as informações de contato

Dica profissional: Tabs não devem ser confundidos com acordeões. Os usuários clicam nas guias para alternar as informações, enquanto os acordeões se expandem para revelar as informações.

Agora que você sabe mais sobre como as guias funcionam e por que você precisa delas, vamos ver como adicionar guias ao seu site WordPress.

Abaixo, compartilharemos 2 maneiras de adicionar guias ao WordPress. Primeiro, usaremos um construtor de páginas e, em seguida, mostraremos como criar guias com um plug-in do WordPress.

Vamos começar.

Método 1: Como criar guias no WordPress com um construtor de páginas

Para o primeiro método, usaremos o SeedProd, o melhor construtor de sites WordPress, para adicionar conteúdo com guias ao seu site.

O 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
• Crie sites WooCommerce
• Crie landing pages de alta conversão
• Coloque seu site em modo de manutenção
• E muito mais

Este construtor de páginas também inclui blocos altamente personalizáveis ​​para aprimorar seu design do WordPress. Por exemplo, com o bloco Tabs, que usaremos neste guia, você pode adicionar várias guias às páginas com apenas alguns cliques.

Siga os passos abaixo para criar abas no WordPress com SeedProd.

Etapa 1. Instale o Criador de sites SeedProd

Primeiro, você precisará acessar o site do SeedProd e baixar o plug-in. SeedProd tem uma versão gratuita; no entanto, você precisará de um plano premium para desbloquear guias e outros blocos.

Depois de baixar o plug-in, 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.

Depois de ativar o plug-in, navegue até SeedProd » Configurações e insira sua chave de licença do plug-in.

Você pode encontrar sua chave de licença do SeedProd no painel da sua conta na seção Downloads .

Lembre-se de clicar no botão Verificar chave antes de ir para a próxima etapa.

Etapa 2. Crie um tema ou página de destino do WordPress

Existem 2 maneiras de usar o SeedProd para adicionar guias ao seu site:

1. Use o Theme Builder para criar um tema WordPress personalizado e adicione guias a qualquer página do WordPress.
2. Crie uma página de destino independente com conteúdo com guias usando o construtor de páginas de arrastar e soltar.

Para este guia, usaremos a primeira opção porque ela permite adicionar guias a qualquer página que desejar, incluindo sua página inicial, barra lateral do WordPress, cabeçalho, rodapé e qualquer outro lugar do seu tema.

Você pode seguir este guia passo a passo para criar um tema WordPress com o SeedProd e depois voltar aqui para obter instruções sobre como adicionar guias ao seu site.

Etapa 3. Adicione abas às suas páginas do WordPress

Depois de construir seu tema WordPress, você precisará decidir quais páginas devem ter conteúdo com guias. Por exemplo, você pode adicionar guias à sua página de contato para mostrar diferentes tipos de informações de contato ou em uma barra lateral personalizada para diferentes categorias de postagem.

Neste exemplo, adicionaremos guias à 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 do seu administrador do WordPress e encontre a página que você gostaria de editar.

Como você está usando um kit de site SeedProd, as páginas de conteúdo, como as páginas sobre, contato e serviços, são criadas automaticamente. Para abri-los no editor visual, clique no link Editar com SeedProd .

Depois 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 guias do SeedProd.

Primeiro, adicione uma nova seção à página para “hospedar” seu conteúdo com guias. No nosso caso, vamos duplicar uma das seções existentes e arrastá-la para o final da página.

Depois disso, troque 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 Tabs no painel esquerdo e arrastá-lo para a nova seção da sua página.

Clicar no bloco mostra suas configurações de conteúdo onde você pode:

• Adicionar várias guias
• Mostrar ou ocultar o ícone da guia
• Alterar o tamanho da fonte
• Aumente ou diminua o espaço entre as guias
• Ajustar o alinhamento da guia

A expansão de cada guia permite adicionar um título de guia e escrever seu conteúdo usando um editor clássico com configurações 'o que você vê é o que você obtém' (WYSIWYG).

Você também pode ativar um ícone personalizado para adicionar mais interesse às suas guias e destacá-las. Basta girar o botão 'Ocultar ícone da guia' para a posição 'Desativado' e escolher um ícone personalizado da biblioteca Font Awesome.

Clicar na guia 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 guias verticais ou um conjunto de guias horizontais clicando em qualquer opção de layout.

Lembre-se de clicar no botão Salvar no canto superior direito da tela para salvar suas alterações.

Siga as mesmas etapas para adicionar guias a qualquer outra página do seu site WordPress e, em seguida, passe para a próxima etapa para ativar suas alterações.

Etapa 4. Publique seu conteúdo com guias

Depois de adicionar guias às suas várias páginas do WordPress, você está pronto para publicá-las para que os visitantes do seu site vejam.

Para fazer isso, vá para a página SeedProd » Theme Builder e alterne o botão 'Ativar tema SeedProd' para a posição 'Ligado'.

Agora você pode visualizar suas páginas e ver seu conteúdo com guias em ação.

Método 2: Como adicionar guias com um plug-in do WordPress

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 plug-in gratuito Tabs Responsive WordPress para adicionar guias responsivas ao seu site WordPress.

Primeiro, você precisará instalar o plug-in Tabs Responsive e ativá-lo no seu administrador do WordPress.

Em seguida, navegue até Guias responsivas » Adicionar novas guias e dê um título ao conjunto de guias.

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 guias. Você pode criar quantas guias quiser e incluir:

• Títulos das guias
• Descrições de guias
• Ícones de guia

Você também pode editar o estilo de cada guia na barra lateral direita escolhendo estilos de guia personalizados, cores de fundo, cores de fonte e muito mais.

Quando estiver satisfeito com suas guias, copie o código de acesso das guias 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 ele ficará no front-end do seu site:

Você também pode adicionar o shortcode das guias a uma área pronta para widget, como sua barra lateral do WordPress ou widgets de rodapé, colando o shortcode em um bloco de parágrafo.

Depois, você verá seu conteúdo com guias ao vivo nas áreas da barra lateral:

Aí está!

Neste tutorial, você aprendeu como criar abas no WordPress sem escrever código. 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 (etapas fáceis)
• Como criar divisores de seção extravagantes para sites WordPress
• Como adicionar uma caixa de autor no WordPress (sem um plug-in)

Obrigado por ler. Siga-nos no YouTube, Twitter e Facebook para obter mais conteúdo útil para expandir seus negócios.