como criar guias WordPress Inteligentes E Bonitas

como criar guias WordPress Inteligentes E Bonitas

fato divertido: você notou que mesmo wordpress.org usa guias do WordPress para bloquear informações?

confira isso:

fonte: wordpress.org

as guias do WordPress são um tipo de navegação que pode melhorar a experiência do cliente. Como assim? Não bagunçando muitas informações em parágrafos, mas usando um método de organização melhor.

a navegação com guias é semelhante à organização de arquivos em um escritório ou no médico.

não deve ser confundido com menus. Na maioria das vezes, os itens de menu abrem uma página separada com seu próprio URL. Aqui nenhuma mudança de URL acontecerá.

também não deve ser confundido com acordeões. Um acordeão empilhará informações verticalmente. Os cabeçalhos podem ser clicados para revelar ou ocultar o conteúdo associado a eles.

agora, por que seu site WordPress precisa de guias? Melhorar a navegação, usabilidade e, portanto, a satisfação do cliente e as taxas de conversão.

muitas razões, certo?

a navegação com guias ainda é uma prática comum no comércio eletrônico para apresentar produtos. Muitos visitantes já reconhecem guias ou esperam guias em determinados lugares.

digamos que você venda eletrônicos. Você precisará apresentar muitas informações sobre o produto:

• descrição de Produto
• fotos do Produto
• especificações Técnicas
• Comentários
• Garantia info
• detalhes de Envio

Guias irá ajudá-lo a comprimir conteúdo em espaços limitados.

agora, neste artigo, começaremos fornecendo a você alguma inspiração de design de guias. Em seguida, vamos um pouco para algumas práticas de melhores casos. No final, vou guiá-lo pelos aspectos técnicos das guias do WordPress.

vamos começar!

guias: alguma inspiração

agora, vamos verificar alguns sites que usam guias. Estou definitivamente em provas. As imagens podem explicar coisas melhores do que palavras, você não acha?

vamos ver, eBay está usando guias para descrição do produto. Todas as especificações técnicas vão em “descrição”, e eles reuniram” envio e pagamento ” na mesma guia. Tenho certeza de que eles testaram o layout porque, para um site com esse tráfego, qualquer alteração pode afetar fortemente as taxas de conversão.

fonte: ebay.com

BobbyBrown cosmetics vai para uma abordagem minimalista, as guias não têm uma abordagem semelhante a um botão. Eles usam um sublinhado para informar ao usuário que ele selecionou uma guia.

fonte: bobbibrowncosmetics.com

estou sempre me sentindo perdido quando vou booking.com. eles têm muitas informações para as quais você precisa rolar para baixo. Recentemente, notei que eles fizeram algumas alterações para reduzir a rolagem, mas ainda assim, não é suficiente (para mim).

Trivago, por outro lado, parece organizar a informação um pouco melhor. Eu sei que é difícil fazer quando você precisa fornecer tantos detalhes.

eles usam guias para organizar informações do hotel, como visão geral, informações, fotos, comentários, ofertas. Como baixar e instalar Minecraft no minecraft 1.1.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.as guias com

são uma prática comum em sites que oferecem pacotes de viagens, como voos, acomodações, aluguel de carros.A Expedia faz isso muito bem quando apresenta sua oferta por 6 serviços. A experiência é limpa e pouco intrusiva.

fonte: expedia.com

Honda usa guias de uma forma mais criativa. Ele mistura imagens e vídeos ao lado de texto para vender uma ótima experiência Honda.

fonte: automobiles.honda.com

guias do WordPress: práticas de melhores casos

simplificando, as guias são um conjunto de botões geralmente definidos horizontalmente. É por isso que seu design deve estar muito próximo de um design de botão.

agora, vamos dar uma olhada nas melhores práticas de caso para usar guias em seu site WordPress:

• não vá para várias linhas, isso tornará difícil para o usuário lembrar qual guia ele visitou. Se você perceber que você precisa de mais linhas, isso significa que você precisa encontrar uma maneira melhor de organizar a informação
• Manter guia de títulos de curto e doce
• Usar guias somente quando os usuários não precisam ver o conteúdo de várias páginas, ao mesmo tempo
• indicar Claramente qual guia está ativa
• desmarcada guias devem permanecer visíveis, e não perdida no fundo
• certifique-se de que o seu guia aparecem como botões separados que você pode interagir com
• Adicionar efeitos em abas, como você faria em botões
• Usar guias quando você tem entre dois e nove diferentes categorias de conteúdo
• categorias são semelhantes em natureza, um usuário teria de esperar para vê-los lá (por exemplo: descrição do produto, comentários de produtos)
• não utilizar separadores de navegação quando você pretende inserir um link “mais”
• Você pode usar gradientes para adicionar profundidade e dimensão para os guias.

como criar guias do WordPress usando construtores de páginas

estou usando o construtor de páginas Colibri para fins deste exercício.As guias

podem ser encontradas como um componente.

você pode encontrar Componentes ao clicar em ” + ” no canto superior esquerdo.

vá para componentes e arraste o componente “guia” para a visualização do seu site à direita.

em seguida, você pode jogar com as opções de personalização à esquerda.

quando sua guia parece que você quer, basta clicar em “Publicar” e você está ao vivo.

Tabs: um plug-in para ajudá-lo a configurar guias do WordPress

se você executar uma loja online integrada ao WooCommerce, no WordPress existem dois plug-ins muito populares para guias do WordPress.

fonte: wordpress.org

mas, eu quero apresentá-lo a um favorito meu: Tabs.

fonte: wordpress.org

Tabs tem um monte de opções de personalização que você logo vai gostar. Por que eu sinto que você vai adorar também:

• Você vai design mobile-friendly WordPress separadores
• Você pode trabalhar com códigos de acesso
• Guias de obras, arraste e solte
• Ele tem mais de 20 modelos de design, de modo que você não precisa se preocupar com inspiração
• 500+ Google Fonts
• Guias trabalha com a maioria dos temas lá fora.

guias do WordPress: as guias conclusões

estão aqui para tornar as informações mais fáceis de digerir em um mundo de menor atenção. Em termos de ferramentas, há muitos deles por aí que podem ajudá-lo a configurar as guias do WordPress. Esta é a coisa mais fácil de fazer.

mais importante é descobrir que tipo de informação pode caber em suas guias. Se você não tem certeza de que uma guia irá ajudá-lo a organizar certas informações, você sempre pode fazer alguma pesquisa do usuário ou um teste A/B. Nossas próprias suposições não são suficientes. Dados comportamentais reais levarão você à resposta certa.

no final do dia, você precisa se preocupar com usabilidade, chunking e velocidade do site.

agora, se você gostou deste artigo, e você quer saber mais sobre como projetar um site WordPress, certifique-se de se inscrever para o nosso canal do Youtube e siga-nos no Twitter e Facebook!