{"id":7359,"date":"2025-02-06T08:04:31","date_gmt":"2025-02-06T08:04:31","guid":{"rendered":"https:\/\/tableberg.com\/?p=7359"},"modified":"2025-02-06T08:04:31","modified_gmt":"2025-02-06T08:04:31","slug":"como-adicionar-guias-aninhadas-no-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/pt\/how-to-add-nested-tabs-in-wordpress\/","title":{"rendered":"Como adicionar guias aninhadas no WordPress (etapas f\u00e1ceis)"},"content":{"rendered":"<p>Quando o seu conte\u00fado \u00e9 bem estruturado, os usu\u00e1rios tendem a permanecer no site por mais tempo. As guias aninhadas permitem que voc\u00ea mantenha as coisas organizadas, interativas e f\u00e1ceis de usar, o que \u00e9 perfeito para documenta\u00e7\u00e3o, tabelas de pre\u00e7os e perguntas frequentes.<\/p>\n\n\n\n<p>Eles funcionam permitindo que os usu\u00e1rios alternem entre diferentes se\u00e7\u00f5es sem sair da p\u00e1gina para manter tudo acess\u00edvel em um espa\u00e7o compacto. Em vez de uma p\u00e1gina desordenada, cheia de rolagem intermin\u00e1vel, o que se obt\u00e9m \u00e9 um layout bem estruturado, em que v\u00e1rias camadas de informa\u00e7\u00f5es permanecem ao alcance, f\u00e1ceis de navegar.<\/p>\n\n\n\n<p>Agora, voc\u00ea ficar\u00e1 feliz em saber que pode adicionar guias aninhadas no WordPress sem nenhuma complexidade. Tudo o que \u00e9 preciso \u00e9 a ferramenta certa e <a href=\"https:\/\/wordpress.org\/plugins\/ultimate-blocks\/\" target=\"_blank\" rel=\"noopener\">Blocos definitivos<\/a> \u00e9 exatamente isso. Nosso artigo ajuda voc\u00ea a encontrar a resposta sobre como adicionar guias aninhadas no WordPress da maneira mais simples poss\u00edvel. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Adicionar guias aninhadas no WordPress&nbsp;<\/strong><\/h2>\n\n\n\n<p>Para usu\u00e1rios do Gutenberg, <a href=\"https:\/\/tableberg.com\/pt\/revisao-dos-blocos-definitivos\/\">Blocos definitivos<\/a> \u00e9 a op\u00e7\u00e3o ideal para adicionar guias aninhadas com facilidade. No entanto, com 26 blocos diferentes criados para diferentes finalidades, o Ultimate Blocks n\u00e3o serve apenas para abas. \u00c9 uma solu\u00e7\u00e3o completa que lhe fornece as ferramentas certas para estruturar o conte\u00fado, melhorar a clareza e adicionar elementos interativos no Gutenberg.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Etapa 1: Prepare o plug-in<\/strong><\/h2>\n\n\n\n<p>Primeiro, voc\u00ea precisa acessar o painel do WordPress. A partir da\u00ed, clique em <strong>'Plugins'<\/strong> no menu \u00e0 esquerda e, em seguida, selecione <strong>\"Adicionar novo<\/strong>. Na barra de pesquisa, digite <strong>Ultimate Blocks, <\/strong>e o resultado dever\u00e1 aparecer em segundos. Quando o plug-in aparecer no resultado, clique em <strong>Instalar agora<\/strong>. Aguarde um segundo para que ele funcione e, quando terminar, ative o plug-in e tudo estar\u00e1 pronto.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"371\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/Ultimate-Blocks-installation-1024x371.png\" alt=\"Instale e ative o Ultimate Blocks\" class=\"has-border-color has-primary-accent-border-color wp-image-7361\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/Ultimate-Blocks-installation-1024x371.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/Ultimate-Blocks-installation-300x109.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/Ultimate-Blocks-installation-768x278.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/Ultimate-Blocks-installation-1536x556.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/Ultimate-Blocks-installation-18x7.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/Ultimate-Blocks-installation.png 1884w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Etapa 2: Inserir o bloco de conte\u00fado com guias<\/strong><\/h2>\n\n\n\n<p>Abra sua postagem ou p\u00e1gina no editor do Gutenberg onde voc\u00ea deseja adicionar suas guias aninhadas. No editor, clique no \u00edcone <strong>+<\/strong> procure o bot\u00e3o <strong>Conte\u00fado com guias<\/strong>e insira-o em seu conte\u00fado. Essa ser\u00e1 a base do seu layout com guias.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1692\" height=\"714\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2-1024x432.png\" alt=\"Adicionar o bloco Tabbed Content\" class=\"has-border-color has-primary-accent-border-color wp-image-7362\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2-1024x432.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2-300x127.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2-768x324.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2-1536x648.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.png 1692w\" sizes=\"auto, (max-width: 1692px) 100vw, 1692px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Etapa 3: Crie suas guias e guias aninhadas&nbsp;<\/strong><\/h2>\n\n\n\n<p>Uma vez que o <strong>Conte\u00fado com guias<\/strong> for adicionado, voc\u00ea ter\u00e1 uma \u00fanica guia por padr\u00e3o. Para criar v\u00e1rias guias na primeira camada, clique no \u00edcone <strong>\"+\"<\/strong> e adicione quantas forem necess\u00e1rias. Voc\u00ea pode renomear cada guia clicando diretamente no t\u00edtulo e digitando o novo nome. Cada guia funciona como um cont\u00eainer no qual voc\u00ea pode inserir texto, imagens ou qualquer outro bloco de conte\u00fado.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"423\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1-1024x423.png\" alt=\"Adicionar guias\" class=\"has-border-color has-primary-accent-border-color wp-image-7363\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1-1024x423.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1-300x124.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1-768x317.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1-1536x635.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1-18x7.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1.png 1621w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Para criar <strong>abas aninhadas<\/strong>selecione uma guia da primeira camada e insira outra <strong>Conte\u00fado com guias<\/strong> dentro dele usando o inseridor de blocos. Esse novo bloco funcionar\u00e1 como um sistema de guias de segundo n\u00edvel dentro da guia selecionada. Voc\u00ea pode repetir o mesmo processo para adicionar mais camadas aninhadas e estruturar seu conte\u00fado em v\u00e1rios n\u00edveis.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"475\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2-1024x475.png\" alt=\"Guias aninhadas\" class=\"has-border-color has-primary-accent-border-color wp-image-7364\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2-1024x475.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2-300x139.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2-768x356.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2-1536x713.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2.png 1884w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Etapa 4: Personalize at\u00e9 ficar perfeito<\/strong><\/h2>\n\n\n\n<p>Depois de colocar o conte\u00fado em cada guia, talvez voc\u00ea queira fazer algumas altera\u00e7\u00f5es na apar\u00eancia das guias. Na guia <strong>Configura\u00e7\u00f5es gerais<\/strong> voc\u00ea pode alterar a guia <strong>tipo de registro<\/strong>, adicionar<strong> \u00e2ncoras de registro<\/strong>e, na vers\u00e3o Pro, incluem<strong> \u00edcones<\/strong>, <strong>imagens<\/strong>e <strong>textos secund\u00e1rios<\/strong> com o t\u00edtulo.<\/p>\n\n\n\n<p>Em<strong> Configura\u00e7\u00f5es de estilos<\/strong>voc\u00ea pode ajustar o <strong>cores<\/strong> para guias, t\u00edtulos e conte\u00fado, altere o <strong>layout da guia<\/strong> para alternar entre <strong>horizontal e <\/strong><a href=\"https:\/\/tableberg.com\/pt\/como-adicionar-guias-verticais-no-wordpress\/\"><strong>vertical<\/strong><\/a><strong> guias<\/strong> e personalizar o <strong>borda e dimens\u00f5es<\/strong> para combinar com seu design.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"567\" height=\"992\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/4.png\" alt=\"Painel de configura\u00e7\u00f5es do bloco\" class=\"has-border-color has-primary-accent-border-color wp-image-7367\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/4.png 567w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/4-171x300.png 171w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/4-7x12.png 7w\" sizes=\"auto, (max-width: 567px) 100vw, 567px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<p><strong>Etapa 5: Visualizar e publicar suas guias aninhadas<\/strong><\/p>\n\n\n\n<p>Antes de ativar suas guias aninhadas, clique no bot\u00e3o <strong>Pr\u00e9via<\/strong> para verificar se tudo est\u00e1 funcionando conforme o esperado. Certifique-se de que todas as guias sejam alternadas sem problemas e que as guias aninhadas sejam exibidas corretamente. Se for necess\u00e1rio fazer algum ajuste, volte e ajuste as configura\u00e7\u00f5es. Quando tudo estiver funcionando bem, clique em <strong>Publicar<\/strong> ou <strong>Atualiza\u00e7\u00e3o<\/strong> para tornar suas altera\u00e7\u00f5es efetivas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"533\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/5.1-1024x533.png\" alt=\"Visualizar e publicar\" class=\"has-border-color has-primary-accent-border-color wp-image-7390\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/5.1-1024x533.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/5.1-300x156.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/5.1-768x400.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/5.1-1536x800.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/5.1-18x9.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/5.1.png 1606w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Aqui est\u00e1 uma r\u00e1pida demonstra\u00e7\u00e3o de guias aninhadas em a\u00e7\u00e3o.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"946\" height=\"728\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-06_13-55-10.gif\" alt=\"\" class=\"wp-image-7411\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Conclus\u00e3o<\/strong><\/h4>\n\n\n\n<p>As guias aninhadas tornam a navega\u00e7\u00e3o pelo conte\u00fado em camadas no WordPress mais intuitiva, e o Ultimate Blocks oferece uma maneira simples de implement\u00e1-las no editor Gutenberg. No entanto, como ele n\u00e3o \u00e9 compat\u00edvel com as verdadeiras guias aninhadas, voc\u00ea precisar\u00e1 inserir manualmente blocos de Tabbed Content uns dentro dos outros para obter o efeito. Se voc\u00ea estiver usando um editor diferente, <a href=\"https:\/\/tableberg.com\/pt\/melhores-plugins-de-guias-do-wordpress\/\">existem alternativas<\/a>Mas nem todos os plug-ins de guia oferecem suporte ao aninhamento em v\u00e1rios n\u00edveis por padr\u00e3o. Teste o m\u00e9todo que revelamos neste artigo, veja se ele atende \u00e0s suas necessidades e, caso contr\u00e1rio, explore outros plug-ins que possam funcionar melhor para voc\u00ea. N\u00e3o se atrase e comece a trabalhar agora. Comece a organizar seu conte\u00fado e veja a diferen\u00e7a que isso faz.<\/p>","protected":false},"excerpt":{"rendered":"<p>When your content is structured well, users tend to stick around longer. Nested tabs let you keep things tidy, interactive, and user-friendly, which is a perfect fit for documentation, pricing tables, and FAQs. They work by allowing users to switch between different sections without leaving the page to keep everything accessible in a compact space. [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":7360,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-7359","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/Nested-Tabs-850-x-335-px.png","author_info":{"display_name":"Moinul Islam","author_link":"https:\/\/tableberg.com\/pt\/author\/marufmoinul27\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/7359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/comments?post=7359"}],"version-history":[{"count":16,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/7359\/revisions"}],"predecessor-version":[{"id":7412,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/7359\/revisions\/7412"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media\/7360"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media?parent=7359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/categories?post=7359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/tags?post=7359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}