Quer saber como criar guias no WordPress?
A adição de guias ao seu site WordPress é uma excelente maneira de organizar diferentes tipos de conteúdo e economizar espaço em posts e páginas.
Neste artigo, mostraremos a você como adicionar guias no WordPress, passo a passo.
O que são guias no WordPress?
As guias são um tipo de sistema de navegação que organiza o conteúdo, facilitando a navegação dos visitantes em seu site. Você pode adicionar guias a posts e páginas ou usar um widget de guias para exibir conteúdo com guias na barra lateral e nas áreas de widgets do WordPress.
Por que você precisa de conteúdo com guias no WordPress?
Além de classificar o conteúdo, as guias facilitam muito a manutenção dos visitantes do seu site ativos e envolvidos. Como as guias agrupam os tópicos de conteúdo em uma única página, os usuários não precisarão clicar para acessar outras páginas, o que é ideal para períodos de atenção mais curtos.
Por exemplo, o WordPress.org usa guias em sua página de plug-ins para exibir informações como detalhes, análises, suporte e desenvolvimento.
Algumas outras maneiras de usar as guias incluem:
- Nas descrições de produtos para mostrar diferentes especificações de produtos
- Na barra lateral de seu blog para filtrar categorias
- Nas páginas de contato para classificar as informações de contato
Dica profissional: As guias não devem ser confundidas com acordeões. Os usuários clicam nas guias para alternar as informações, enquanto os acordeões se expandem para revelar as informações.
Agora que você sabe mais sobre como as guias funcionam e por que você precisa delas, vamos ver como adicionar guias ao seu site WordPress.
A seguir, compartilharemos duas maneiras de adicionar guias ao WordPress. Primeiro, usaremos um construtor de páginas e, em seguida, mostraremos como criar guias com um plug-in do WordPress.
Vamos começar.
Método 1: Como criar guias no WordPress com um construtor de páginas
Para o primeiro método, usaremos o SeedProd, o melhor construtor de sites do WordPress, para adicionar conteúdo com guias ao seu site.
O SeedProd é um poderoso construtor de páginas de arrastar e soltar que permite criar layouts flexíveis para o WordPress sem escrever código. Com seus kits de sites profissionais, modelos de páginas de destino e editor visual ao vivo, você pode personalizar cada parte do seu site e ver as alterações em tempo real.
Você também pode usar o SeedProd para:
- Criar temas personalizados do WordPress
- Criar sites WooCommerce
- Crie páginas de destino de alta conversão
- Coloque seu site em modo de manutenção
- E muito mais
Esse construtor de páginas também inclui blocos altamente personalizáveis para aprimorar seu design do WordPress. Por exemplo, com o bloco Tabs, que usaremos neste guia, você pode adicionar várias guias às páginas com apenas alguns cliques.
Siga as etapas abaixo para criar guias no WordPress com o SeedProd.
Tutorial em vídeo
Se preferir, você pode seguir as etapas escritas abaixo.
Etapa 1. Instalar o construtor de sites SeedProd
Primeiro, você precisará acessar o site do SeedProd e fazer o download do plug-in. O SeedProd tem uma versão gratuita; no entanto, você precisará de um plano premium para desbloquear guias e outros blocos.
Depois de fazer o download do plug-in, você precisará instalá-lo e ativá-lo em seu site do WordPress. Você pode seguir estas instruções sobre como instalar um plug-in do WordPress se nunca tiver feito isso antes.
Depois de ativar o plug-in, navegue até SeedProd " Settings e insira sua chave de licença do plug-in.
Você pode encontrar a chave de licença do SeedProd no painel da sua conta, na seção Downloads.
Lembre-se de clicar no botão Verify Key (Verificar chave ) antes de ir para a próxima etapa.
Etapa 2. Criar um tema WordPress ou uma página de destino
Há duas maneiras de usar o SeedProd para adicionar guias ao seu site:
- Use o Theme Builder para criar um tema WordPress personalizado e adicionar guias a qualquer página do WordPress.
- Crie uma página de destino autônoma com conteúdo em abas usando o construtor de páginas do tipo arrastar e soltar.
Para este guia, usaremos a primeira opção porque ela permite adicionar guias a qualquer página que você desejar, incluindo a página inicial, a barra lateral do WordPress, o cabeçalho, o rodapé e qualquer outro lugar do seu tema.
Você pode seguir este guia passo a passo para criar um tema do WordPress com o SeedProd e, em seguida, voltar aqui para obter instruções sobre como adicionar guias ao seu site.
Etapa 3. Adicionar guias às suas páginas do WordPress
Depois de criar seu tema do WordPress, você precisará decidir quais páginas devem ter conteúdo com abas. Por exemplo, você pode adicionar abas à sua página de contato para mostrar diferentes tipos de informações de contato ou em uma barra lateral personalizada para diferentes categorias de posts.
Neste exemplo, adicionaremos guias à página sobre para mostrar mais detalhes, como vagas de emprego, diretrizes editoriais e muito mais.
Para fazer isso, acesse Pages " All Pages (Páginas " Todas as páginas ) em seu administrador do WordPress e localize a página que deseja editar.
Como você está usando um kit de website do SeedProd, as páginas de conteúdo, como as páginas sobre, de contato e de serviços, são criadas automaticamente. Para abri-las no editor visual, clique no link Edit with SeedProd (Editar com SeedProd ).
Quando sua página estiver aberta no construtor de páginas, você poderá usar as opções de personalização do SeedProd para fazer alterações. Você pode clicar em qualquer elemento para alterar seu conteúdo, cores, estilo e visibilidade.
Também é fácil adicionar mais elementos à sua página arrastando-os do painel de blocos e soltando-os no lugar. Vamos fazer isso com o bloco de guias do SeedProd.
Primeiro, adicione uma nova seção à página para "abrigar" o conteúdo com guias. No nosso caso, duplicaremos uma das seções existentes e a arrastaremos para a parte inferior da página.
Depois disso, troque a imagem por algo mais relevante e exclua qualquer conteúdo que não seja mais necessário clicando no ícone da lixeira.
Agora você pode procurar o bloco Tabs no painel esquerdo e arrastá-lo para a nova seção da sua página.
Clicar no bloco mostra suas configurações de conteúdo, onde você pode:
- Adicionar várias guias
- Mostrar ou ocultar o ícone da guia
- Alterar o tamanho da fonte
- Aumentar ou diminuir o espaço entre as guias
- Ajustar o alinhamento da guia
A expansão de cada guia permite que você adicione um título à guia e escreva seu conteúdo usando um editor clássico com configurações "o que você vê é o que você obtém" (WYSIWYG).
Você também pode ativar um ícone personalizado para adicionar mais interesse às suas guias e fazer com que elas se destaquem. Basta colocar o botão "Hide tab icon" (Ocultar ícone da guia) na posição "Off" (Desativado) e escolher um ícone personalizado da biblioteca Font Awesome.
Clicar na guia Advanced permite escolher mais opções de personalização, incluindo cores de fundo personalizadas, fontes, bordas, espaçamento e muito mais.
Você também pode exibir guias verticais ou um conjunto de guias horizontais clicando em uma das opções de layout.
Lembre-se de clicar no botão Save (Salvar ) no canto superior direito da tela para salvar suas alterações.
Siga as mesmas etapas para adicionar guias a qualquer outra página do seu site WordPress e, em seguida, passe para a próxima etapa para ativar suas alterações.
Etapa 4. Publique seu conteúdo com guias
Depois de adicionar guias às suas várias páginas do WordPress, você está pronto para publicá-las para que os visitantes do seu site as vejam.
Para fazer isso, acesse a página SeedProd " Theme Builder e alterne a opção "Enable SeedProd theme" (Ativar tema SeedProd) para a posição "On" (Ativado).
Agora você pode visualizar suas páginas e ver o conteúdo com guias em ação.
Método 2: Como adicionar guias com um plug-in do WordPress
O método a seguir é uma boa alternativa se você não quiser alterar o tema do WordPress ou criar uma página de destino. Usaremos o plug-in gratuito Tabs Responsive WordPress para adicionar guias responsivas ao seu site WordPress.
Primeiro, você precisará instalar o plug-in Tabs Responsive e ativá-lo em seu administrador do WordPress.
Em seguida, navegue até Tabs Responsive " Add New Tabs e dê um título ao seu conjunto de guias.
A partir daí, você pode selecionar o modelo padrão ou, se estiver usando a versão Pro, pode escolher entre mais de 18 estilos de modelos.
A próxima etapa é adicionar suas guias. Você pode criar quantas guias quiser e incluir:
- Títulos das guias
- Descrições das guias
- Ícones de guias
Você também pode editar o estilo de cada guia na barra lateral direita, escolhendo estilos de guia personalizados, cores de fundo, cores de fonte e muito mais.
Quando estiver satisfeito com suas guias, copie o shortcode das guias e cole-o em qualquer lugar do seu tema do WordPress.
Por exemplo, você pode colar o shortcode em uma postagem ou página do WordPress como esta:
É assim que ele aparecerá no front-end de seu site:
Você também pode adicionar o shortcode das guias a uma área pronta para widget, como a barra lateral ou os widgets de rodapé do WordPress, colando o shortcode em um bloco de parágrafo.
Depois disso, você verá o conteúdo com guias nas áreas da barra lateral:
Como criar guias nas perguntas frequentes do WordPress
Sim, é possível criar conteúdo personalizado com guias sem usar um plug-in. No entanto, isso normalmente requer conhecimento de HTML, CSS e JavaScript. Você precisaria escrever o código necessário para implementar a funcionalidade de conteúdo com guias e estilizá-lo de acordo com suas preferências.
Sim, você pode exibir vários tipos de conteúdo em cada guia. Isso pode incluir texto, imagens, vídeos, tabelas, formulários ou qualquer outro conteúdo compatível com HTML. A maioria dos plug-ins de conteúdo com guias oferece opções para adicionar e formatar diferentes tipos de conteúdo em cada guia.
Sim, os plug-ins de conteúdo com guias geralmente são projetados para serem responsivos e compatíveis com dispositivos móveis. Eles ajustam automaticamente o layout e o comportamento das guias e do conteúdo com guias para garantir a visualização e a usabilidade ideais em diferentes dispositivos, inclusive smartphones e tablets.
Sim, o conteúdo com guias pode ser uma maneira eficaz de organizar e exibir informações sobre produtos ou planos de preços. É possível criar guias para diferentes recursos, especificações, níveis de preços ou quaisquer outros detalhes relevantes do produto, permitindo que os usuários alternem facilmente entre as informações de seu interesse.
Aí está!
Neste tutorial, você aprendeu a criar guias no WordPress sem escrever código. Pronto para criar guias personalizáveis em seu site?
Você também pode gostar destes outros guias úteis do WordPress enquanto estiver aqui:
- Como criar animações de texto no WordPress (etapas fáceis)
- Como criar divisores de seção sofisticados para sites WordPress
- Como adicionar uma caixa de autor no WordPress (sem um plug-in)
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
