Um de nossos leitores nos perguntou recentemente como dividir posts em abas para economizar espaço e facilitar a localização do que procuram.
Na WPBeginner, ajudamos muitos proprietários de sites a aprimorar a organização de seu conteúdo com layouts em abas.
Adicionar conteúdo em abas permite que você inclua mais informações sobre seus produtos e serviços em uma única página, melhorando a experiência do usuário e mantendo todos os detalhes em um local conveniente. Como resultado, você reduzirá a desordem da página e facilitará a navegação para os visitantes.
Neste artigo, mostraremos como adicionar conteúdo em abas aos seus posts e páginas do WordPress, garantindo que seus visitantes encontrem facilmente o que precisam.
Quando usar conteúdo em abas no WordPress?
O uso de abas permite adicionar mais detalhes em um pequeno espaço ou dividir grandes blocos de conteúdo para melhor organização e experiência do usuário.
Digamos que você tenha uma loja online. Você pode adicionar abas para descrições de produtos, avaliações, especificações técnicas e muito mais. Essa separação ajuda a fornecer todos os detalhes para seus clientes em um só lugar e torna a página interativa.
Da mesma forma, você pode ver conteúdo em abas nas páginas de plugins do WordPress.org. A página é dividida em diferentes seções usando abas como detalhes, avaliações, instalação, suporte e informações de desenvolvimento.
Conteúdo em abas ajuda a manter as pessoas em seu site WordPress. Você não precisa enviar as pessoas para outra página para obter todos os detalhes de que precisam sobre seus produtos e serviços.
Dito isso, vamos ver como você pode adicionar conteúdo em abas a páginas e posts do WordPress.
Aqui estão os 2 métodos que usaremos para fazer isso:
- Adicionando Conteúdo em Abas Usando um Construtor de Landing Page
- Adicionando Conteúdo em Abas Usando um Plugin do WordPress
Método 1: Adicionando Conteúdo em Abas Usando um Construtor de Landing Page
A melhor maneira de adicionar conteúdo em abas no WordPress é usando o SeedProd. É o melhor construtor de landing pages e sites do WordPress. O SeedProd é fácil de usar para iniciantes e vem com um construtor de arrastar e soltar, modelos pré-fabricados e várias opções de personalização.
Para este tutorial, usaremos a licença SeedProd Pro porque ela inclui blocos avançados para adicionar conteúdo em abas. Há também uma versão SeedProd Lite que você pode usar gratuitamente.
Primeiro, você precisará instalar e ativar o plugin SeedProd. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.
Após a ativação, você será redirecionado para a tela de boas-vindas do SeedProd no seu painel do WordPress. Prossiga e insira sua chave de licença, que você pode encontrar na área da sua conta SeedProd.
Em seguida, você pode ir para SeedProd » Landing Pages no seu painel de administração do WordPress.
Depois disso, basta clicar no botão ‘Criar Nova Landing Page’.
A partir daqui, o SeedProd mostrará vários modelos de landing page para você escolher.
Prossiga e selecione um modelo que você gostaria de usar. Basta passar o mouse sobre o modelo e clicar no ícone de marca de seleção laranja.
Uma janela pop-up será aberta onde você precisará inserir um título para sua página no campo ‘Nome da Página’ e um slug de URL em ‘URL da Página’.
Depois disso, basta clicar no botão ‘Salvar e Começar a Editar a Página’.
Isso iniciará o construtor de arrastar e soltar do SeedProd. Agora você pode adicionar diferentes blocos ao seu modelo e editar elementos existentes.
Para adicionar conteúdo em abas, basta arrastar o bloco ‘Abas’ na seção Avançado e soltá-lo no modelo da página.
Em seguida, você pode personalizar o bloco de abas no SeedProd.
Por exemplo, você pode clicar no botão ‘Adicionar Novo Item’ para adicionar quantas abas desejar. Além disso, existem opções para editar o tamanho da fonte, o espaçamento entre o texto e o alinhamento do conteúdo em cada aba.
Em seguida, você pode clicar em qualquer aba para editá-la ainda mais e adicionar detalhes.
Por exemplo, você pode alterar o título de cada aba, adicionar conteúdo e alterar o ícone da aba.
Além disso, o SeedProd também oferece opções avançadas de personalização.
Simplesmente clique na aba ‘Avançado’ no menu à sua esquerda. Aqui, você pode alterar o layout da aba, tipografia, cor, cor de fundo, bordas e muito mais.
Quando você fizer alterações no bloco de abas e personalizar sua página de destino, não se esqueça de clicar no botão verde ‘Salvar’ no topo.
Depois disso, você pode ir para a aba ‘Configurações da Página’.
Em seguida, você pode clicar no alternador ‘Status da Página’ e alterar o status de Rascunho para Publicar.
Você pode clicar no botão ‘Salvar’ para armazenar suas alterações e fechar o construtor de páginas.
Agora, simplesmente visite seu site para ver o conteúdo em abas na página do WordPress em ação.
Método 2: Adicionando Conteúdo em Abas Usando um Plugin do WordPress
Se você não quiser usar um construtor de páginas de destino, poderá usar um plugin dedicado do WordPress para adicionar conteúdo em abas às suas postagens e páginas.
Primeiro, você precisará instalar e ativar o plugin Tabs Responsive. Para mais detalhes, consulte nosso guia sobre como instalar um plugin do WordPress.
Após a ativação, você pode ir para Tabs Responsive » Add New Tabs no seu painel do WordPress e começar inserindo um nome para suas abas.
Em seguida, você pode rolar para baixo para adicionar quantas abas desejar clicando no botão vermelho ‘Add New Tabs’.
Além disso, você pode editar cada aba individualmente alterando seu título, adicionando uma descrição, usando um ícone de aba diferente e editando a localização do ícone.
Além disso, o plugin também oferece diferentes ‘Tabs Settings’ no menu à sua direita.
Por exemplo, você pode escolher se deseja exibir o título das abas, selecionar diferentes opções para título e ícone, alterar a posição do ícone, mostrar a borda das abas, selecionar a cor do texto e muito mais.
Quando você fizer as alterações, poderá usar as abas em qualquer post ou página usando o shortcode gerado pelo plugin.
Simplesmente clique no botão ‘Publish’.
Em seguida, você pode adicionar as abas em qualquer página ou post usando o shortcode [TABS_R id=130]. Apenas certifique-se de substituir o número do ID no shortcode pelo seu número de ID da aba.
Você pode encontrar facilmente o ID da aba e o shortcode indo para Tabs Responsive » All tabs e copiando o código na coluna Tabs Shortcode.
Em seguida, você só precisa adicionar um novo post ou editar um existente.
Quando estiver no editor de blocos Gutenberg, prossiga e adicione um bloco de shortcode para inserir o shortcode.
Depois disso, você pode pré-visualizar seu post ou página. Se tudo estiver correto, você pode clicar no botão ‘Publish’ ou ‘Update’ para salvar as abas em seu post.
Agora, visite seu site para ver o conteúdo em abas em ação.
Esperamos que este artigo tenha ajudado você a aprender como adicionar conteúdo em abas a posts e páginas do WordPress. Você também pode conferir nosso guia sobre WooCommerce simplificado e nossa lista de especialistas dos melhores plugins do WordPress para sites de negócios.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Jiří Vaněk
Isso parece uma ótima opção para personalizar melhor os artigos de avaliação de produtos. Os usuários poderiam alternar facilmente entre a classificação do produto (avaliação), informações detalhadas do produto ou uma aba oferecendo locais para comprá-lo. Como um plugin de avaliação, esta solução parece verdadeiramente excelente, e obrigado pela ótima dica.
Ahmed Abo Rwash
É excelente, profissional e valioso. Obrigado
WPBeginner Support
De nada!
Admin
Alexander
Olá, preciso exibir posts como abas. Preciso que o título do post seja o rótulo da aba e o conteúdo do post seja o conteúdo da aba. Alguma recomendação de como fazer isso?
WPBeginner Support
Pelo que parece, você vai querer explorar algumas das opções do nosso guia abaixo:
https://www.wpbeginner.com/wp-tutorials/how-to-display-recent-posts-in-wordpress
Admin
msiddiqui
explique muito simplesmente que você é o número 1 em WordPress
WPBeginner Support
Glad you like our content
Admin
navya
Sou iniciante em wp. Alguém pode me ajudar a resolver meu problema?
No meu site há uma parte da nossa história como história, por exemplo. se clicar na aba 2018, quero obter a descrição correspondente sobre 2018. Como fazer isso em wp. Obrigado antecipadamente.
Dan Acton
Adorei isso. Não é o fim do mundo se esta opção não estiver disponível, apenas gostaria de poder editar um conjunto atual de abas usando a mesma interface em que as criei. Isso é possível em vez de ter que colar novo conteúdo entre os shortcodes?
Andi Sutrisnya
Como parar a reprodução de vídeo em uma aba ao mudar para outra aba se eu tiver vídeo em todas as abas? Por favor, ajude-me
dany
obrigado irmão, isso é útil
Lena
É possível ter apenas um botão no editor de usuários que crie automaticamente uma nova aba onde ele/ela possa escrever seu conteúdo?
Estou planejando uma plataforma de compartilhamento de conteúdo...
David
Olá,
Estou procurando abas verticais que tenham a opção de adicionar um link para cada aba, de forma que cada aba tenha um endereço.
Você pode sugerir um plugin de abas que tenha essa opção ou um tutorial que explique como adicionar essa funcionalidade.
Obrigado por qualquer ajuda.
David
Soni
Este é um artigo útil.
Gostaria de saber sobre o conteúdo em abas na página inicial do wpbeginner. Este plugin pode criar o mesmo conteúdo em abas?
Ou você usa outro plugin para criar esse conteúdo em abas?
Acho que essa aba é ótima.
Ssekito
Por favor, mostre-me como postar conteúdo nas diferentes abas que coloquei no meu blog.
Obrigado
WPBeginner Support
Seu blog é hospedado no WordPress.com. Por favor, consulte nosso guia sobre a diferença entre WordPress.org auto-hospedado vs blog gratuito WordPress.com.
Admin
Ssekito
Obrigado pela resposta!
Na verdade, sou iniciante em blogs WordPress e quero primeiro me familiarizar com ele para poder fazer o upgrade para o WordPress.org com a Bluehost como minha hospedagem.
Quero monetizar meu blog, pois trabalho com marketing de afiliados! Atualmente, quero adicionar conteúdo logo abaixo de cada página que criei na barra de menu e alguns botões de compartilhamento social, embora esteja achando desafiador!
Por favor, me guie nisso.
Obrigado.
Sase Antic
Informação útil sobre abas no WordPress!
No entanto, existe uma solução neste plugin ou em qualquer outro plugin do WP para adicionar abas em todo o site (em todo o site) e não apenas em posts e páginas?
Por exemplo: Preciso de um "grupo de abas" composto por 3 abas, e gostaria de adicioná-lo em todo o site (o mesmo conteúdo / abas em todas as páginas e posts; como menu / submenu, mas com funcionalidade de abas).
Isso é possível?
Caso contrário, é muito trabalho adicionar o mesmo "grupo de abas" a todas as páginas e posts um por um.
Agradeço antecipadamente pela resposta!
uvie
e se eu precisar que a aba exiba conteúdos na forma de widgets. Como posso conseguir isso?
Tony
Este parece ser um ótimo plugin de abas – mas seria ainda melhor se eu pudesse adicioná-lo também a Páginas, não apenas a posts. Procurei em todo lugar, mas não aparece no editor de Páginas – há alguma chance disso?
Sameer
Olá,
É possível criar tabelas dentro de abas em páginas de blog do WordPress. Por favor, veja esta página: , Por favor, me ajude a criar algo como isto no WP.
WPBeginner Support
Sim, é possível. Você precisará gerar o código HTML necessário para a tabela na área de conteúdo de cada aba.
Admin
Weiwei
se no conteúdo, houver mais páginas, o que devo fazer?
Equipe WPBeginner
Se você não consegue descobrir por que precisaria deles, então isso significa que você realmente não precisa deles em seu site. Escrevemos sobre muitas coisas legais que os usuários podem adicionar aos seus sites. Se os usuários acharem algo útil, eles podem adicioná-lo ao seu site.
Shah
Sou muito novo na construção de um site. Acho que, estando tão avançado, sua suposição de quão bem alguém como eu pode entender e seguir suas instruções é altamente exagerada. Eu ainda não entendo para que servem as abas. Sei que você explicou e até nos mostrou onde podemos vê-las em ação, mas ainda não entendo por que preciso ter abas. Seria ótimo se você fosse mais deliberado em nos dar, pessoas mais lentas, mais exemplos. Obrigado!
Heather Lewis
Este é um artigo útil. Usarei este plugin sempre que for necessário. Acho que é muito melhor em comparação com o que estou usando em termos de design. Obrigado por compartilhar.
vinayak
oi e obrigado por fornecer uma postagem onde eu poderia adicionar conteúdo com abas no meu blog.
eu estava procurando um plugin que pudesse fazer isso.
Amjaru
O conteúdo nas abas é pesquisável ou o shortcode impede que o conteúdo seja pesquisado?
Equipe WPBeginner
Ainda será pesquisável.
Knitwit23
você pode nos mostrar uma postagem onde isso está em uso?
KonaGirl
Este plugin criará uma hierarquia de menu em abas? Se sim, devo remover as abas do menu antes de adicionar este plugin?
Equipe WPBeginner
Ele é usado dentro de posts e páginas para exibir conteúdo em abas.
Sally Bennett
Seria muito útil se você explicasse o que são 'abas' para um completo novato
Equipe WPBeginner
Abas são como abas em uma pasta ou um índice telefônico. Permitindo que os usuários naveguem por diferentes seções clicando no título da aba. Você pode vê-las em ação aqui.