Como adicionar guias às postagens e páginas do WordPress

Como adicionar guias às postagens e páginas do WordPress

As guias são um recurso bastante comum em muitos sites, especialmente nas lojas de comércio eletrônico. Os proprietários das lojas de comércio eletrônico geralmente usam guias na área de descrição do produto, onde dividem revisões, descrição, especificações técnicas e assim por diante em várias guias.


exemplo de guias em ação em um site de comércio eletrônico

Ainda assim, as guias foram usadas em muitos outros tipos diferentes de sites, não apenas em sites de comércio eletrônico. Até o site oficial do WordPress.org usa guias nas páginas de descrição de plugins. Veja a imagem abaixo para ver as guias destacadas em WP.org.

guias na página de descrição do plugin wordpress.org

Muitos outros proprietários de sites usam guias em diferentes tipos de sites. No entanto, as guias não devem ser confundidas com acordeões, que se expandem para revelar informações. Abaixo, observe como usei acordeões no meu site.

acordeões em vistamedia.xyz

Mas acordeões à parte, estamos aqui para falar sobre separadores, então não vamos perder o foco; Eu só precisava deixar clara a distinção entre tabs e acordeões. Agora, espero que estejamos na mesma página ��

Em essência, os proprietários da Web usam guias para dividir informações que, de outra forma, teriam levado uma página inteira ou postagem. Isso significa que as guias tornam as informações muito mais fáceis de digerir, sem necessariamente forçar os usuários a tocar a roda de rolagem um milhão de vezes.

Em outras palavras, as guias melhoram a usabilidade do seu site, especialmente em um mundo de atenção mais curta. Portanto, se você deseja manter os usuários em seu site por mais tempo sem entediá-los com páginas longas, considere usar guias.

Na postagem de hoje, mostramos exatamente como adicionar guias às suas postagens e páginas do WordPress. Antes do final deste post, você terá todas as instruções necessárias para usar as guias em seu benefício. Esperamos que você goste até o fim e não saia sem compartilhar seus pensamentos na seção de comentários. Fora do caminho, vamos começar.

Use um construtor de páginas

Se você já possui um criador de páginas instalado, está com sorte – provavelmente já possui um módulo de guias na ponta dos dedos. A maioria dos principais construtores de páginas oferece guias como parte de seu conjunto principal de elementos do construtor de páginas. Aqui está uma rápida olhada em dois dos nossos favoritos.

Elementor Free Page Builder

Guias do Elementor Page Builder

Informações e DownloadVer a demonstração

O popular construtor de páginas Elementor inclui guias como parte da versão gratuita do plug-in. Tudo o que você precisa fazer é inserir um elemento de guia na sua página e editar o título, o conteúdo, o estilo etc. É isso aí!

WPBakery Premium Page Builder

Guias do WPBakery Page Builder

Você está usando um tema premium que inclui o WPBakery Page Builder (como nosso próprio tema Total)? Ótimo! As guias são integradas e fáceis de usar.

O módulo da guia WPBakery é um pouco diferente do exemplo anterior, pois as guias estão inicialmente vazias quando você as adiciona. Você precisará inserir elementos adicionais da página (área de texto, imagens, ícones etc.) nas guias para adicionar seu conteúdo. Mas isso lhe dá muita liberdade para criar guias da maneira que você desejar (além das opções de estilo internas). Já cobrimos este construtor de páginas no blog antes, portanto, se você quiser instruções mais detalhadas, consulte nosso guia do WPBakery (nota: este plug-in foi chamado anteriormente de Visual Composer, desculpe-me antecipadamente por qualquer confusão).

Instale o plugin WordPress de guias

Tabs Grátis WordPress Plugin

Se você não estiver usando um construtor de páginas, não será necessário usá-lo apenas para guias. Existem muitas ótimas alternativas, como o plugin WordPress grátis, conhecido simplesmente como Tabs pelo WP Shop Mart. O Tabs é um plugin bacana do WordPress que ajuda você a criar um número ilimitado de guias bonitas sem suar a camisa.

Vamos começar instalando o plug-in Tabs WordPress. Como ele está disponível no repositório oficial de plug-ins do WordPress, você pode instalar o plug-in diretamente de dentro do seu painel de administração do WordPress.

Estamos usando a versão gratuita, mas há uma versão premium disponível se você desejar atualizar para recursos extras mais tarde.

Instalando o Plugin do WordPress de Guias

Entre no seu painel de administração do WordPress e navegue até Plugins> Adicionar novo e digite “tabs wpshopmart” na caixa de pesquisa de palavras-chave. Depois de encontrar o plug-in certo, pressione o instale agora como mostrado abaixo.

instalando o plugin wordpress guias

Depois disso, clique no Ativar botão. E pronto, o plug-in do WordPress com guias está pronto para uso. Agora, vamos criar algumas guias para descobrir o que esse plug-in tem a oferecer.

Configurar o plug-in responsivo do WordPress em guias

A ativação do plug-in adicionará um novo item ao seu menu de administração do WordPress. Para criar novas guias, navegue até Guias responsivas> Adicionar novas guias conforme detalhamos na captura de tela abaixo.

adicionando novas guias usando o plug-in responsivo wordpress das guias

Isso o leva ao Construtor responsivo de guias, que contém todos os recursos necessários para criar guias bonitas como um chefe. Veja a imagem abaixo para ter uma idéia do que esperar.

guias responsivo wordpress plugin

Um pergaminho não é? Bem, você pode encontrar a maioria dos recursos na barra lateral direita. Observe também que guias individuais têm suas configurações. Você pode até usar editores WYSIWYG nas guias, o que significa que você tem bastante controle sobre suas guias.

Agora, vamos criar algumas guias de amostra e exibi-las em uma página ou postagem.

Adicionar título

adicionar título das guias

Comece atribuindo um título descritivo às suas guias (como nos menus de navegação), como mostra a imagem acima. Dessa forma, você pode identificar facilmente suas guias no painel de administração do WordPress posteriormente, caso precise editar alguma coisa. Para os fins deste tutorial, batizei minhas guias “Testar guias domésticas”.

Escolha o modelo de design das guias

escolha o modelo de design de guias

Como visto na captura de tela acima, sua próxima etapa envolve a escolha de um modelo de design que você deseja usar para suas guias. A versão gratuita do plug-in Tabs WordPress oferece apenas um modelo de design, mas você sempre pode atualizar para a versão premium para 19 mais. Conversa sobre liberdade de design.

Adicionar separadores

Em seguida, adicione quantas guias você desejar, como mostrado abaixo.

adicionando novas guias

Criamos uma lista numerada detalhando o que você pode fazer no Adicionar separadores seção mostrada acima. Os números correspondem a cada área.

  1. Título da guia – Adicione o título da guia neste campo, por exemplo. Descrição, especificações, detalhes, etc.
  2. Guia Descrição – Adicione sua descrição da guia aqui. Este campo permite adicionar o conteúdo da sua guia. A melhor parte é que você pode usar o editor WYSIWYG (mostrado no número 3 abaixo) para adicionar conteúdo rico às suas guias, incluindo imagens, músicas e vídeos
  3. Use WYSIWYG – Se você gostaria de usar o familiar Wchapéu-You-See-Eus-Wchapéu-You-GPara criar o conteúdo da guia, sinta-se à vontade para pressionar este botão para abrir a janela pop-up
  4. Ícone da guia – Este campo ajuda você a escolher um ícone para usar na sua guia. O plug-in Tabs WordPress oferece acesso a vários ícones do Font Awesome para aprimorar suas guias como um profissional
  5. Exibir acima do ícone – Se você deseja exibir o título da guia ao lado do ícone, adorará esse recurso. Além disso, permite desativar o ícone sem tocar no título da guia
  6. Excluir – Pressione este botão para excluir uma guia específica
  7. Adicionar novas guias – Clique neste botão para adicionar mais guias
  8. Excluir tudo – Cansado de todas as abas? Apenas aperte o Excluir tudo botão para redefinir tudo

Algumas dicas de bônus para ajudá-lo. Primeiro, você pode arrastar e soltar as guias para reordenar e organizá-las conforme desejar.

Segundo – não se esqueça de acertar o Salvar rascunho botão uma ou duas vezes ao criar suas guias para garantir que você não perca nenhuma alteração no caso de sair do criador de guias acidentalmente.

Por fim – se você precisar de suporte, há um grande azul Obter suporte botão logo abaixo do Adicionar separadores seção (e na maioria das páginas do plug-in) que leva ao fórum de suporte oficial das guias no WordPress.org. Não hesite em apertar o botão de suporte se precisar de ajuda a qualquer momento.

Código abreviado das guias

tabs shortcode

Em seguida, você encontra o código de acesso das guias que você usa para adicionar e exibir suas guias em qualquer página ou publicação desejada. Por exemplo, nosso código de acesso é [TABS_R id = 443]. Para exibir as guias em uma página, basta copiar e colar o código de acesso acima nessa página específica.

Widget de guias

suporte ao widget de guias

Você deseja adicionar suas guias a uma área de widget no seu site? Se for um retumbante sim, você vai adorar o suporte ao widget que acompanha o plug-in Tabs WordPress.

Atingir o Clique aqui o link na imagem acima leva você para a tela de widgets do WordPress, onde você pode adicionar suas guias em qualquer lugar que possua uma área de widgets no seu tema.

widget de guias

CSS customizado

Enquanto o plug-in Tabs WordPress vem com muitas opções de personalização de guias (basta olhar para a barra lateral direita; está cheia de opções de estilo!), Você pode adicionar seus próprios estilos CSS personalizados, como mostrado abaixo.

guias wordpress plugin css personalizado

Além disso, você pode definir suas configurações personalizadas como padrão para todas as novas guias simplesmente clicando no Atualizar configurações padrão como mostrado na imagem acima.

A barra lateral direita

guias opções de estilo do plugin wordpress

A barra lateral direita destacada na imagem acima carrega o dia para você verdadeiramente. Ele contém todas as opções necessárias para estilizar suas guias com o conteúdo do seu coração. Opções notáveis ​​incluem:

  • Cor do plano de fundo da guia
  • Cor da fonte da guia
  • Família e estilo da fonte
  • Opções de exibição para título e ícone da guia
  • Alinhamento da posição do ícone da guia, ou seja, antes ou depois do título da guia
  • Bordas da guia
  • Várias animações de descrição da guia
  • E muito mais

Adicione suas guias a uma página ou publicação do WordPress

Depois de adicionar o conteúdo da guia e as opções de estilo, role para cima e clique no botão Publicar como mostrado abaixo.

Neste ponto, suas guias estão prontas. Você só precisa adicionar as guias a uma página ou publicação do WordPress. Basta copiar o código abreviado das guias que vimos anteriormente. A nossa é [TABS_R id = 443].

Inicie seu editor de postagem (mesmo se você estiver usando Gutenberg) e cole o código curto em sua postagem / página. Depois disso, pressione o Publicar como mostrado abaixo.

Após cerca de 5 minutos de configuração das coisas; Estou usando o tema Twenty Seventeen e bastante Lorem Ipsum, criei o seguinte resultado.

Observe que eu não personalizei as cores nem nada. Me diga o que você acha; não foi tão fácil?


Adicionar guias às suas páginas e postagens do WordPress é coisa de alunos da quarta série. Não espero que você tenha problemas, principalmente se estiver usando um plug-in como o Tabs do WP Shop Mart.

Como você adiciona guias às suas páginas e postagens do WordPress? Qual é o seu plugin favorito do WordPress? Por favor, compartilhe seus pensamentos nos comentários. Criação feliz!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map