Um de nossos leitores nos perguntou recentemente como dividir as postagens em guias para economizar espaço e facilitar a localização do que os usuários estão procurando.
Na WPBeginner, ajudamos muitos proprietários de sites a aprimorar a organização do conteúdo com layouts com guias.
A adição de conteúdo com guias permite reunir 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 dos visitantes.
Neste artigo, mostraremos como adicionar conteúdo com guias às suas postagens e páginas do WordPress, garantindo que os visitantes encontrem facilmente o que precisam.
Quando você deve usar conteúdo com guias no WordPress?
O uso de guias permite adicionar mais detalhes em um pequeno espaço ou dividir grandes partes do conteúdo para melhorar a organização e a experiência do usuário.
Digamos que você tenha uma loja on-line. Você pode adicionar guias 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 o conteúdo com guias nas páginas de plug-ins do WordPress.org. A página é dividida em diferentes seções usando guias como detalhes, análises, instalação, suporte e informações de desenvolvimento.
O conteúdo com 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 elas precisam sobre seus produtos e serviços.
Dito isso, vamos ver como você pode adicionar conteúdo com guias a páginas e posts do WordPress.
Aqui estão os dois métodos que usaremos para fazer isso:
- Adição de conteúdo com guias usando um construtor de Landing Page
- Adição de conteúdo com guias usando um plug-in do WordPress
Método 1: Adicionar conteúdo com guias usando um construtor de landing page
A melhor maneira de adicionar conteúdo com guias no WordPress é usar um SeedProd. Ele é o melhor construtor de páginas de destino e sites do WordPress. O SeedProd é fácil de usar para iniciantes e vem com um construtor do tipo arrastar e soltar, modelos predefinidos e várias opções de personalização.
Para este tutorial, usaremos a licença do SeedProd Pro porque ela inclui blocos avançados para adicionar conteúdo com guias. Há também uma versão SeedProd Lite que pode ser usada gratuitamente.
Primeiro, você precisará instalar e ativar o plug-in SeedProd. Se precisar de ajuda, consulte nosso guia sobre como instalar um plug-in do WordPress.
Após a ativação, você será redirecionado para a tela de boas-vindas do SeedProd no painel do WordPress. Vá em frente e insira sua chave de licença, que pode ser encontrada na área de sua conta do SeedProd.
Em seguida, você pode acessar SeedProd ” Landing Pages no painel de administração do WordPress.
Depois disso, basta clicar no botão “Create New Landing Page” (Criar nova página de destino).
A partir daí, o SeedProd mostrará vários modelos de página de destino para você escolher.
Vá em frente 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.
Será aberta uma janela pop-up na qual você precisará inserir um título para a página no campo “Page Name” (Nome da página) e um slug de permalink em “Page URL” (URL da página).
Depois disso, basta clicar no botão “Save and Start Editing the Page” (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 os elementos existentes.
Para adicionar conteúdo com guias, basta arrastar o bloco “Tabs” (Guias) na seção Advanced (Avançado) e soltá-lo no modelo de página.
Em seguida, você pode personalizar o bloco de guias no SeedProd.
Por exemplo, você pode clicar no botão “Add New Item” para adicionar quantas guias quiser. Além disso, há opções para editar o tamanho da fonte, o espaço entre o texto e o alinhamento do conteúdo de cada guia.
Em seguida, você pode clicar em qualquer guia para editá-la ainda mais e adicionar detalhes.
Por exemplo, você pode alterar o título de cada guia, adicionar conteúdo e alterar o ícone da guia.
Além disso, o SeedProd também oferece opções avançadas de personalização.
Basta clicar na guia “Advanced” (Avançado) no menu à sua esquerda. Aqui, você pode alterar o layout da guia, a tipografia, a cor, a cor de fundo, as bordas e muito mais.
Depois de fazer alterações no bloco de guias e personalizar sua página de destino, não se esqueça de clicar no botão verde “Salvar” na parte superior.
Depois disso, você pode ir para a guia “Configurações da página”.
Em seguida, você pode clicar no botão de alternância “Status da página” e alterar o status de Rascunho para Publicação.
Você pode clicar no botão “Salvar” para armazenar suas alterações e fechar o construtor de páginas.
Agora, basta acessar seu site para ver o conteúdo com guias na página do WordPress em ação.
Método 2: Adicionar conteúdo com guias usando um plug-in do WordPress
Se você não quiser usar um construtor de landing page, poderá usar um plug-in dedicado do WordPress para adicionar conteúdo com guias aos seus posts e páginas.
Primeiro, você precisará instalar e ativar o plug-in Tabs Responsive. Para obter mais detalhes, consulte nosso guia sobre como instalar um plug-in do WordPress.
Após a ativação, você pode acessar Tabs Responsive ” Add New Tabs no painel do WordPress e começar a digitar um nome para as guias.
Em seguida, você pode rolar para baixo e adicionar quantas guias quiser, clicando no botão vermelho “Add New Tabs” (Adicionar novas guias).
Além disso, você pode editar cada guia individualmente, alterando seu título, adicionando uma descrição, usando um ícone de guia diferente e editando o local do ícone.
Além disso, o plug-in também oferece diferentes “Tabs Settings” (Configurações de guias) no menu à sua direita.
Por exemplo, você pode escolher se deseja exibir o título das guias, selecionar diferentes opções para o título e o ícone, alterar a posição do ícone, mostrar a borda das guias, selecionar a cor do texto e muito mais.
Depois de fazer as alterações, agora você pode usar as guias em qualquer post ou página do blog usando o shortcode gerado pelo plug-in.
Basta clicar no botão “Publicar”.
Em seguida, você pode adicionar as guias em qualquer página ou publicação usando o shortcode [TABS_R id=130]. Apenas certifique-se de substituir o número de ID no shortcode pelo número de ID da guia.
Você pode encontrar facilmente o ID da guia e o shortcode acessando Tabs Responsive ” All tabs e copiando o código na coluna Tabs Shortcode.
Em seguida, você só precisa adicionar uma nova postagem ou editar uma já existente.
Quando você estiver no editor de blocos do Gutenberg, vá em frente e adicione um bloco de shortcode para inserir o shortcode.
Depois disso, você pode visualizar o post ou a página do blog. Se tudo estiver certo, você poderá clicar no botão “Publish” (Publicar) ou “Update” (Atualizar) para salvar as guias em sua postagem.
Agora, visite seu site para ver o conteúdo com guias em ação.
Esperamos que este artigo tenha ajudado você a aprender como adicionar conteúdo com guias a posts e páginas do WordPress. Você também pode ver nosso guia sobre WooCommerce simplificado e nossa lista de especialistas dos melhores plug-ins do WordPress para sites de negócios.
Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Ahmed Abo Rwash
It’s excellent, professional, and valuable. Thank you
WPBeginner Support
You’re welcome!
Administrador
Alexander
Hi, I need to display posts as tabs, I need the post title to be the tab label and the post content to be the tab content, any recommendations on how to do it?
WPBeginner Support
For what it sounds like you’re wanting, you would want to go through some of the options from our guide below:
https://www.wpbeginner.com/wp-tutorials/how-to-display-recent-posts-in-wordpress
Administrador
msiddiqui
very simply explain u r no 1 in WordPress
WPBeginner Support
Glad you like our content
Administrador
navya
I am beginner in wp.Can anyone help me to solve my problem?
in my site there is part of ou story as like history,fo eg. if click on 2018 tab i wanto get the corresponding description about 2018.How to do this in wp.Thank you in advance
Dan Acton
I love this, Not the end of the world if this option is not available, just would like to be able to edit a current set of tabs using the same interface in which I created them. Is this possible instead of having to paste new content in between the shortcodes?
Andi Sutrisnya
How to stop playing video in tab when switching to another tab if i have video in every tab? Please help me
dany
thanks bro this helpful
Lena
Is it possible to have just a button on the users editor which automatically creates a new tab where he/she can write her content in?
I’m planning a Content sharing platform …
David
Hi,
I’m looking for vertical tabs that have the option of adding a link for each tab so that each tab has an address.
Can you suggest a tab plugin that has this option or a tutorial that explains how to add this functionality.
Thanks for any help
David
Soni
This is a helpful article.
I would like to know about the tabbed content in wpbeginner homepage. Could this plugin create the same tabbed content?
Or you use another plugin to create that tabbed content?
I think that tab is great.
Ssekito
Kindly show me how to post content under the different tabs i have put on my blog.
Thanks
WPBeginner Support
Your blog is hosted on WordPress.com. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Administrador
Ssekito
Thanks for the reply!
I am actually a beginner of wordpress blog and i want to first get familiar with it so that i upgrade to wordpress.org with bluehost as my host.
I want to monetize my blog as i am into affiliate marketing! I currently want to add content just below each pages i created on the menu bar and some social share buttons though am finding it challenging!
Please guide me this.
Thanks.
Sase Antic
Helpful info on tabs in WordPress!
However, is there a solution in this plugin or any other WP plugin to add tabs at the whole site (site-wide) and not just in posts and pages?
For example: I need one “tabs group” consisted of 3 tabs, and I like to add it sitewide (the same content / tabs at all pages and posts; like menu / submenu but with tabs functionality).
Is this possible?
Otherwise, it’s a lot of work to add the same “tabs group” to all pages and posts one by one.
Thanks in advance for the reply!
uvie
what if i need the tab to display contents in the form of widgets.how can i achieve that
Tony
This looks like a great tabs plugin – but, it would be even greater if I can added also to Pages not just posts. I looked all over, but does not appear in editor of Pages – any chance of that?
Sameer
Hello,
Is it possible to create tables inside tabs in wordpress blog pages. Please see this page: , Please help me to create something like this one in wp.
WPBeginner Support
Yes, it is possible. You will need to generate the HTML code required for the table in the content area of each tab.
Administrador
Weiwei
if in the content , there are more pages, what should I do?
WPBeginner Staff
If you cannot figure out why you would need them, then this means that you don’t really need them on your website. We write about a lot of cool things that users can add to their websites. If users find something useful, then they can add it to their site.
Shah
I’m very new to building a website. I think being so far advanced, your assumption of how well someone like me can understand and follow your instructions, is highly exaggerated. I still don’t understand what tabs are for. I know you explained it, and even showed us where we can see them in action, but I still don’t understand why I need to have tabs. It would be great if you were more deliberate in giving us, slower people, more examples. Thanks!
Heather Lewis
This is a helpful article. I will use this plugin whenever it’s necessary. I think this is much better compared with the one I am using in terms of design. Thank you for sharing.
vinayak
hi and thanks for providing a post where i could add tabbed content in my blog.
i was looking for a plugin that could do this.
Amjaru
Is the content in the tabs searchable or does the short code prevent the content from being searched?
WPBeginner Staff
It will still be searchable.
Knitwit23
can you show us a post where this is in use?
KonaGirl
Will this plugin make a tabbed menu hierarchy? If it does, then do I remove the menu tabs prior to adding this plugin?
WPBeginner Staff
It is used inside posts and pages to display content in tabs.
Sally Bennett
It would be very useful if you explained what ‘tabs’ are to a complete novice
WPBeginner Staff
Tabs are like tabs in a folder or a telephone index book. Allowing users to browse different sections by clicking on the tab title. You can see them in action here.