{"id":907,"date":"2025-07-14T18:22:29","date_gmt":"2025-07-14T18:22:29","guid":{"rendered":"https:\/\/tableberg.com\/?p=907"},"modified":"2025-07-14T18:22:31","modified_gmt":"2025-07-14T18:22:31","slug":"como-criar-guias-no-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/pt\/how-to-create-tabs-in-wordpress\/","title":{"rendered":"Como criar guias no WordPress para organizar o conte\u00fado"},"content":{"rendered":"

Se voc\u00ea tiver que publicar muitas informa\u00e7\u00f5es de v\u00e1rios tipos em posts de blog ou p\u00e1ginas de forma concisa, as guias podem ser um elemento \u00fatil da Web para fazer isso. Elas permitem organizar o conte\u00fado em se\u00e7\u00f5es separadas para que os usu\u00e1rios possam explorar e encontrar seletivamente as informa\u00e7\u00f5es de que precisam.<\/p>\n\n\n\n

Com o editor de blocos Gutenberg, voc\u00ea pode adicionar facilmente guias \u00e0s postagens do seu blog. Neste artigo, mostraremos a voc\u00ea como criar guias no WordPress para organizar o conte\u00fado. Antes disso, responderemos a algumas perguntas b\u00e1sicas.<\/p>\n\n\n\n

\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t
O que s\u00e3o guias?<\/strong><\/div>\n\t\t\t<\/div>
\n\t\t\t\t
Quando voc\u00ea deve usar guias? <\/strong><\/div>\n\t\t\t<\/div><\/div>\n\t\t\t<\/div>\n\t\t\t
\n\n

As guias funcionam como uma ferramenta de navega\u00e7\u00e3o, permitindo a exibi\u00e7\u00e3o de muitas informa\u00e7\u00f5es em v\u00e1rias se\u00e7\u00f5es. Como resultado, os usu\u00e1rios n\u00e3o precisam depender de rolagem excessiva para explorar as vastas informa\u00e7\u00f5es do seu post ou p\u00e1gina.<\/p>\n\n\n\n

Elas fornecem um formato estruturado para que os usu\u00e1rios possam encontrar as informa\u00e7\u00f5es espec\u00edficas que procuram clicando nelas. Normalmente, as pessoas usam o elemento de guia para exibir suas p\u00e1ginas da Web nas se\u00e7\u00f5es de her\u00f3i e cabe\u00e7alho.<\/p>\n\n\n\n

Mas hoje, com a ajuda de alguns plug-ins do Gutenberg, voc\u00ea pode criar conte\u00fado com guias em qualquer lugar de qualquer post ou p\u00e1gina.<\/p>\n\n<\/div>

\n\n

O conte\u00fado com guias funciona excepcionalmente quando voc\u00ea tem uma grande quantidade de informa\u00e7\u00f5es que precisam ser exibidas em um formato tabular. Esse elemento \u00e9 particularmente eficaz na organiza\u00e7\u00e3o dos seguintes tipos de informa\u00e7\u00f5es.<\/p>\n\n\n\n

Descri\u00e7\u00f5es do produto:<\/strong> Voc\u00ea pode usar esse bloco para cobrir as especifica\u00e7\u00f5es do produto, os recursos e as avalia\u00e7\u00f5es dos clientes em guias separadas.<\/p>\n\n\n\n

Ofertas de servi\u00e7os:<\/strong> Se voc\u00ea tiver v\u00e1rios planos ou pacotes de servi\u00e7os, \u00e9 melhor apresent\u00e1-los em se\u00e7\u00f5es separadas.<\/p>\n\n\n\n

Planos de pre\u00e7os:<\/strong> J\u00e1 \u00e9 uma pr\u00e1tica comum exibir v\u00e1rios planos de pre\u00e7os em diferentes guias nos sites.<\/p>\n\n\n\n

Perguntas frequentes<\/strong>: Embora a maioria das pessoas goste de usar os blocos de FAQ e de altern\u00e2ncia de conte\u00fado para a se\u00e7\u00e3o FAQ, voc\u00ea tamb\u00e9m pode usar o bloco de guias para cobrir essa se\u00e7\u00e3o.<\/p>\n\n\n\n

Informa\u00e7\u00f5es comparativas:<\/strong> Se houver alguma informa\u00e7\u00e3o que seria melhor apresentada em uma se\u00e7\u00e3o lado a lado, o bloco de guias \u00e9 \u00fatil nesse caso.<\/p>\n\n<\/div><\/div>\n\t\t<\/div>\n\n\n\n

Criar guias para qualquer conte\u00fado no WordPress<\/h2>\n\n\n\n

A biblioteca de blocos padr\u00e3o do Gutenberg n\u00e3o tem o bloco de guias. Voc\u00ea deve usar um plug-in como o Blocos definitivos<\/a> para t\u00ea-lo na biblioteca de blocos. O plug-in tem mais de 25 plug-ins adicionais com os quais voc\u00ea pode levar seu web design e marketing de conte\u00fado para o pr\u00f3ximo n\u00edvel.<\/p>\n\n\n\n

O \"TConte\u00fado abarcado<\/a>' da Ultimate Blocks permite que voc\u00ea adicione qualquer conte\u00fado em guias. Vamos ver como fazer isso. <\/p>\n\n\n\n

Etapa 01: Instale e ative o plug-in Ultimate Blocks<\/h3>\n\n\n\n

Ir para Plug-ins > Adicionar novo plug-in<\/strong>. Tipo Blocos definitivos<\/strong> na barra de pesquisa no canto superior direito. Instalar<\/strong> e ativar<\/strong> o plug-in depois que ele aparecer abaixo.<\/p>\n\n\n\n

\"Instale<\/figure>\n\n\n\n

Etapa 02: Inserir o bloco de conte\u00fado com guias<\/h3>\n\n\n\n

Abra um post ou uma p\u00e1gina. Encontre a se\u00e7\u00e3o Conte\u00fado com guias<\/strong> pressionando bot\u00e3o de adi\u00e7\u00e3o (+)<\/strong>. Quando voc\u00ea encontrar o bloco, adicione-o ao editor do Gutenberg.<\/p>\n\n\n\n

\"Adicionar<\/figure>\n\n\n\n

Etapa 03: Adicionar novas guias e renome\u00e1-las<\/h3>\n\n\n\n

Ao clicar no bot\u00e3o \u00edcone de mais (+)<\/strong>Se voc\u00ea quiser, poder\u00e1 adicionar quantas guias quiser ao bloco.<\/p>\n\n\n\n

\"Adicionar<\/figure>\n\n\n\n

Pegue o cursor e clique na guia, uma a uma. Voc\u00ea ter\u00e1 permiss\u00e3o para renome\u00e1-las. Portanto, renomeie as guias com base no conte\u00fado que voc\u00ea exibir\u00e1.<\/p>\n\n\n\n

\"Renomear<\/figure>\n\n\n\n

Etapa 04: Adicionar conte\u00fado \u00e0s guias<\/h3>\n\n\n\n

Selecione uma guia na qual deseja adicionar conte\u00fado. Em seguida, posicione o cursor em seu editor. Voc\u00ea ver\u00e1 o \u00edcone bot\u00e3o de adi\u00e7\u00e3o (+)<\/strong> do editor do Gutenberg. Clique e escolha o bloco de conte\u00fado de que voc\u00ea precisa.<\/p>\n\n\n\n

\"Adicionar<\/figure>\n\n\n\n

Para o tutorial, adicionamos os blocos de texto e imagem \u00e0 guia. Da mesma forma, voc\u00ea tamb\u00e9m pode adicionar outros blocos \u00e0 guia. Fa\u00e7a o mesmo em outras guias.<\/p>\n\n\n\n

\"Textos<\/figure>\n\n\n\n

Etapa 05: Personalizar as guias<\/h3>\n\n\n\n

V\u00e1 at\u00e9 a barra lateral direita e mantenha o bloco Tabbed Content selecionado. Voc\u00ea encontrar\u00e1 v\u00e1rias op\u00e7\u00f5es para configurar, como Tab Types, Tab Anchor e Responsiveness.<\/p>\n\n\n\n

Depois de atualizar para a vers\u00e3o premium, voc\u00ea poder\u00e1 adicionar \u00edcones aos t\u00edtulos das guias, textos secund\u00e1rios e bot\u00f5es de chamada para a\u00e7\u00e3o \u00e0s guias.<\/p>\n\n\n\n

\"Configurar<\/figure>\n\n\n\n

Em seguida, v\u00e1 at\u00e9 o Guia Estilos<\/strong>. Voc\u00ea ter\u00e1 op\u00e7\u00f5es para colorir o conte\u00fado da guia, alterar o layout da guia e definir uma nova dimens\u00e3o. Espero que voc\u00ea possa explorar e fazer isso por conta pr\u00f3pria.<\/p>\n\n\n\n

\"Estilizar<\/figure>\n\n\n\n
\n\n\n\n

Tutorial em v\u00eddeo<\/h3>\n\n\n\n
\n