Se você tiver que publicar muitas informações de vários tipos em posts de blog ou páginas de forma concisa, as guias podem ser um elemento útil da Web para fazer isso. Elas permitem organizar o conteúdo em seções separadas para que os usuários possam explorar e encontrar seletivamente as informações de que precisam.
Com o editor de blocos Gutenberg, você pode adicionar facilmente guias às postagens do seu blog. Neste artigo, mostraremos a você como criar guias no WordPress para organizar o conteúdo. Antes disso, responderemos a algumas perguntas básicas.
As guias funcionam como uma ferramenta de navegação, permitindo a exibição de muitas informações em várias seções. Como resultado, os usuários não precisam depender de rolagem excessiva para explorar as vastas informações do seu post ou página.
Elas fornecem um formato estruturado para que os usuários possam encontrar as informações específicas que procuram clicando nelas. Normalmente, as pessoas usam o elemento de guia para exibir suas páginas da Web nas seções de herói e cabeçalho.
Mas hoje, com a ajuda de alguns plug-ins do Gutenberg, você pode criar conteúdo com guias em qualquer lugar de qualquer post ou página.
O conteúdo com guias funciona excepcionalmente quando você tem uma grande quantidade de informações que precisam ser exibidas em um formato tabular. Esse elemento é particularmente eficaz na organização dos seguintes tipos de informações.
Descrições do produto: Você pode usar esse bloco para cobrir as especificações do produto, os recursos e as avaliações dos clientes em guias separadas.
Ofertas de serviços: Se você tiver vários planos ou pacotes de serviços, é melhor apresentá-los em seções separadas.
Planos de preços: Já é uma prática comum exibir vários planos de preços em diferentes guias nos sites.
Perguntas frequentes: Embora a maioria das pessoas goste de usar os blocos de FAQ e de alternância de conteúdo para a seção FAQ, você também pode usar o bloco de guias para cobrir essa seção.
Informações comparativas: Se houver alguma informação que seria melhor apresentada em uma seção lado a lado, o bloco de guias é útil nesse caso.
Criar guias para qualquer conteúdo no WordPress
A biblioteca de blocos padrão do Gutenberg não tem o bloco de guias. Você deve usar um plug-in como o Blocos definitivos para tê-lo na biblioteca de blocos. O plug-in tem mais de 25 plug-ins adicionais com os quais você pode levar seu web design e marketing de conteúdo para o próximo nível.
O "TConteúdo abarcado' da Ultimate Blocks permite que você adicione qualquer conteúdo em guias. Vamos ver como fazer isso.
Etapa 01: Instale e ative o plug-in Ultimate Blocks
Ir para Plug-ins > Adicionar novo plug-in. Tipo Blocos definitivos na barra de pesquisa no canto superior direito. Instalar e ativar o plug-in depois que ele aparecer abaixo.
Etapa 02: Inserir o bloco de conteúdo com guias
Abra um post ou uma página. Encontre a seção Conteúdo com guias pressionando botão de adição (+). Quando você encontrar o bloco, adicione-o ao editor do Gutenberg.
Etapa 03: Adicionar novas guias e renomeá-las
Ao clicar no botão ícone de mais (+)Se você quiser, poderá adicionar quantas guias quiser ao bloco.
Pegue o cursor e clique na guia, uma a uma. Você terá permissão para renomeá-las. Portanto, renomeie as guias com base no conteúdo que você exibirá.
Etapa 04: Adicionar conteúdo às guias
Selecione uma guia na qual deseja adicionar conteúdo. Em seguida, posicione o cursor em seu editor. Você verá o ícone botão de adição (+) do editor do Gutenberg. Clique e escolha o bloco de conteúdo de que você precisa.
Para o tutorial, adicionamos os blocos de texto e imagem à guia. Da mesma forma, você também pode adicionar outros blocos à guia. Faça o mesmo em outras guias.
Etapa 05: Personalizar as guias
Vá até a barra lateral direita e mantenha o bloco Tabbed Content selecionado. Você encontrará várias opções para configurar, como Tab Types, Tab Anchor e Responsiveness.
Depois de atualizar para a versão premium, você poderá adicionar ícones aos títulos das guias, textos secundários e botões de chamada para ação às guias.
Em seguida, vá até o Guia Estilos. Você terá opções para colorir o conteúdo da guia, alterar o layout da guia e definir uma nova dimensão. Espero que você possa explorar e fazer isso por conta própria.
Tutorial em vídeo
Criação de guias para tabelas no WordPress
As guias não são apenas para textos ou imagens - elas também são uma excelente maneira de organizar várias tabelas lado a lado em seu site. Se você quiser permitir que os usuários alternem entre preços mensais e anuais, Comparar os recursos do produtoou apresentar dados em vários idiomas, Tableberg torna isso mais fácil com o recurso Toggle Tabs.
Com o "Alternância para Tableberg", você pode:
-
Adicionar várias tabelas em guias separadas
-
Permita que os visitantes comparem planos de preços, recursos ou conjuntos de dados com um único clique
-
Mantenha suas tabelas organizadas, limpas e super fáceis de navegar
Veja como criar guias para tabelas usando o Tableberg:
Etapa 1: Insira o bloco "Toggle for Tableberg
- Abra sua postagem ou página no editor do WordPress.
- Clique no ícone (+) e procure por Alternância para Tableberge adicione o bloco.
Etapa 2: Configure e personalize suas guias
- Por padrão, você verá as guias rotuladas como "Guia 1", "Guia 2" e "Guia 3".
- Clique nos ícones + ou - para adicionar ou remover guias, conforme necessário.
- Renomeie cada guia (por exemplo, "Monthly" (Mensal), "Yearly" (Anual), "Standard" (Padrão), "Premium" (Premium)).
- Use o painel de configurações à direita para ajustar títulos, alinhamento, cores e bordas para seu estilo preferido.
Etapa 3: Adicionar uma tabela a cada guia
- Selecione uma guia e clique dentro dela para adicionar uma tabela Tableberg.
- Você pode criar uma nova tabela do zero ou inserir um dos padrões de tabela pré-projetados do Tableberg.
- Cada guia pode conter uma tabela exclusiva - ideal para comparações ou opções de exibição.
Etapa 4: Visualizar e publicar
- Use a visualização para garantir que suas tabelas com guias tenham a aparência e o funcionamento corretos.
- Quando estiver satisfeito, publique ou atualize seu post/página.
Veja um exemplo da aparência de uma tabela de preços com abas com o Tableberg:
Conclusão
O bloco Tabbed Content que vem com o plug-in Ultimate Blocks é automaticamente responsivo em todos os dispositivos. Como resultado, você não precisa gastar muito tempo para torná-lo responsivo ao dispositivo.
Mas o que você precisa fazer é colocar o bloco em um local adequado que torne toda a sua postagem/página perfeita. Explore nossa outra postagem - como criar um botão de chamada para ação no WordPress.
