As guias são um recurso bastante comum em muitos sites, especialmente em lojas de comércio eletrônico. Os proprietários de lojas de comércio eletrônico geralmente usam guias na área de descrição do produto, onde dividem resenhas, descrição, especificações técnicas e assim por diante em várias guias.
Ainda assim, as guias encontraram uso em muitos outros tipos diferentes de sites, não apenas em sites de comércio eletrônico. Até mesmo o site oficial do WordPress.org usa abas nas páginas de descrição do plugin. Veja a imagem abaixo para ver as guias destacadas em WP.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 tenho usado acordeões em meu site.
Mas sanfonas à parte, estamos aqui para falar sobre tablaturas , então não vamos perder o foco; Eu só precisava fazer a distinção entre tablaturas 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, ocupariam uma página ou postagem inteira. Isso significa que as guias tornam as informações muito mais fáceis de digerir, sem necessariamente forçar os usuários a pressionar 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 períodos de atenção mais curtos . Portanto, se você deseja manter os usuários em seu site por mais tempo sem entediá-los até a morte com páginas longas, considere usar abas.
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 abas a seu favor. Esperamos que você goste até o final e, por favor, não saia sem compartilhar seus pensamentos na seção de comentários. Isso fora do caminho, vamos começar.
Use um construtor de páginas
Se você já tem um construtor de páginas instalado, está com sorte – provavelmente já tem 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.
Construtor de páginas gratuito Elementor
INFORMAÇÕES E DOWNLOADVEJA 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 tabulação em sua página e editar o título, conteúdo, estilo, etc. Pronto!
Construtor de Páginas Premium WPBakery
INFORMAÇÕES E DOWNLOADVEJA A DEMONSTRAÇÃO
Usando um tema premium que inclui o WPBakery Page Builder (como nosso próprio tema Total )? Excelente! As guias são integradas e fáceis de usar.
O módulo de guias WPBakery é um pouco diferente do exemplo anterior, pois as guias estão inicialmente vazias quando você as adiciona. Você precisará inserir elementos de página adicionais (área de texto, imagens, ícones etc.) nas guias para adicionar seu conteúdo. Mas isso lhe dá muita liberdade para criar guias como você quiser (além das opções de estilo internas). Nós cobrimos este construtor de páginas no blog antes, então se você quiser instruções mais detalhadas, confira nosso guia WPBakery (observação – este plugin era anteriormente chamado de Visual Composer, então desculpe antecipadamente por qualquer confusão).
Instale o plug-in do WordPress de guias
INFORMAÇÕES E DOWNLOADVEJA A DEMONSTRAÇÃO
Se você não estiver usando um construtor de páginas, não há necessidade de usar um apenas para guias. Existem muitas alternativas excelentes, como o plugin WordPress gratuito conhecido simplesmente como Tabs by WP Shop Mart. Tabs é um plugin WordPress bacana que ajuda você a criar um número ilimitado de abas bonitas sem suar a camisa.
Vamos começar instalando o plugin Tabs WordPress. Como está disponível no repositório oficial de plugins do WordPress, você pode instalar o plugin diretamente de dentro do painel de administração do WordPress.
Estamos usando a versão gratuita, mas há uma versão premium disponível se você quiser atualizar para recursos extras posteriormente.
Instalando o Plugin WordPress de Abas
Faça login no 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, clique no botão Instalar agora , conforme mostrado abaixo.
Depois disso, clique no botão Ativar . E é isso, seu plugin WordPress responsivo a guias está pronto para uso. Agora, vamos criar algumas abas para descobrir o que este plugin tem a oferecer.
Configurar o plug-in WordPress responsivo a guias
Ativar o plugin adicionará um novo item ao seu menu de administração do WordPress. Para criar novas abas, navegue até Abas Responsivas > Adicionar Novas Abas conforme detalhamos na captura de tela abaixo.
Fazer isso leva você ao Construtor responsivo de guias, repleto de todos os recursos necessários para criar guias bonitas como um chefe. Veja a imagem abaixo para um vislumbre do que esperar.
Muito pergaminho não é? Bem, você pode encontrar a maioria dos recursos na barra lateral direita. Observe também que as 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
Comece dando às suas guias um título descritivo (assim como faz com seus menus de navegação ), conforme mostrado na imagem acima. Dessa forma, você pode identificar facilmente suas guias no painel de administração do WordPress mais tarde, caso precise editar alguma coisa. Para os propósitos deste tutorial, batizei minhas guias de “Test Home Tabs”.
Escolher modelo de design de guias
Conforme visto na captura de tela acima, sua próxima etapa envolve a escolha de um modelo de design que você gostaria de usar para suas guias. A versão gratuita do plugin Tabs WordPress oferece apenas um modelo de design, mas você sempre pode atualizar para a versão premium por mais 19 . Falar de liberdade de design.
Adicionar guias
Em seguida, adicione quantas guias desejar, conforme mostrado abaixo.
Criamos uma lista numerada detalhando o que você pode fazer na seção Adicionar guias mostrada acima. Os números correspondem a cada área.
- Título da guia – Adicione o título da guia neste campo, por exemplo , Descrição, Especificações, Detalhes, etc.
- Descrição da guia – 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
- Use WYSIWYG – Se você quiser usar o conhecido editor W hat- You- S ee- I s- W hat- Y o- G et para criar seu conteúdo de guia, sinta-se à vontade para clicar neste botão para iniciar o pop- janela para cima
- Ícone da guia – Este campo ajuda você a escolher um ícone para usar na sua guia. O plugin Tabs WordPress oferece acesso a vários ícones Font Awesome para aprimorar suas abas como um profissional
- Exibir acima do ícone – Se você quiser exibir o título da guia ao lado do ícone, você vai adorar esse recurso. Além disso, permite desativar o ícone sem tocar no título da guia
- Excluir – Pressione este botão para excluir uma guia específica
- Adicionar novas guias – Clique neste botão para adicionar mais guias
- Excluir tudo – Cansado de todas as guias? Basta clicar no botão Excluir tudo para redefinir tudo
Algumas dicas de bônus para ajudá-lo. Primeiro, você pode arrastar e soltar as guias para reordenar e organizá-las como desejar.
Segundo – não se esqueça de clicar no botão Salvar Rascunho uma ou duas vezes ao criar suas guias para garantir que você não perca nenhuma alteração caso saia do construtor de guias por acidente.
Por fim – se você precisar de suporte, há um grande botão azul Obter suporte logo abaixo da seção Adicionar guias (e na maioria das páginas do plug-in) que leva você ao fórum oficial de suporte de guias no WordPress.org. Não hesite em clicar no botão de suporte se precisar de ajuda a qualquer momento.
Código de acesso de guias
Em seguida, você encontra o código de acesso Tabs que você usa para adicionar e exibir suas guias em qualquer página ou postagem que desejar. 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
Você deseja adicionar suas guias em uma área de widget em seu site? Se for um retumbante sim, você vai adorar o suporte ao widget que vem com o plugin Tabs WordPress.
Clicar no link Clique aqui na imagem acima leva você à tela de widgets do WordPress, onde você pode adicionar suas guias em qualquer lugar que tenha uma área de widget em seu tema.
CSS customizado
Enquanto o plugin 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, conforme mostrado abaixo.
Além disso, você pode definir suas configurações personalizadas como as configurações padrão para todas as novas guias simplesmente clicando no botão Atualizar configurações padrão , conforme mostrado na imagem acima.
A barra lateral direita
A barra lateral direita que destacamos na imagem acima carrega o dia para você. Ele é embalado com todas as opções que você precisa para estilizar suas guias para o conteúdo do seu coração. As opções notáveis
- Cor 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
- Animações de descrição de várias guias
- E muito mais
Adicione suas guias a uma página ou postagem 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 , conforme mostrado abaixo.
Neste ponto, suas guias estão prontas. Você simplesmente precisa adicionar as guias a uma página ou postagem do WordPress. Basta copiar o shortcode das guias que vimos anteriormente. O nosso é [TABS_R id=443].
Inicie seu editor de postagem (mesmo se estiver usando Gutenberg ) e cole o código de acesso em sua postagem/página. Depois disso, clique no botã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, cheguei ao seguinte resultado.
Note 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, especialmente se estiver usando um plugin como o Tabs do WP Shop Mart.
Como você adiciona guias às suas páginas e postagens do WordPress? Qual é o seu plugin WordPress de guias favorito? Por favor, compartilhe seus pensamentos nos comentários. Feliz criação!
