Os menus são uma ferramenta de navegação que ajuda os visitantes a encontrar o que procuram em tempo hábil. Embora a maioria dos sites sejam naturalmente responsivos hoje em dia, às vezes pode ser necessário ir um pouco mais longe para ajudar os usuários móveis. E o plugin SlickNav é perfeito para o trabalho.
Com ele, você pode criar menus altamente personalizáveis e compatíveis com dispositivos móveis em minutos. Isso não apenas ajuda a garantir que seu site seja fácil de navegar, mas também ajuda a ter uma boa aparência. Existem até opções para adicionar seu logotipo aos menus para melhorar a marca.
Hoje, vou demonstrar como criar um menu elegante do SlickNav no WordPress.
Por que um menu de navegação móvel é importante
Em maio de 2021, o tráfego móvel representava 55,31% de todo o tráfego da Internet e continua a crescer ano após ano. Assim, garantir que seu site esteja pronto para visitantes móveis é essencial.
Um dos maiores problemas que os usuários móveis enfrentam em um site é o menu. Sejamos realistas, às vezes eles simplesmente não têm o tamanho adequado para dispositivos móveis e isso dificulta a navegação no site. Personalizar seus menus para usuários móveis é uma ótima maneira de melhorar a experiência.
E como os menus interagem com quase todos os usuários, é uma ótima área de marketing.
Um dos maiores erros que os novos desenvolvedores de sites cometem é não promover a marca de seu conteúdo. O poder da marca é como as grandes empresas permanecem dominantes, e adicionar seu logotipo ao menu é uma maneira de fazer isso. Ajuda a construir o reconhecimento da marca e pode mostrar seu lado criativo de uma só vez.
Personalizar os menus é um dos primeiros passos para conseguir um site WordPress compatível com dispositivos móveis.
Como personalizar menus WordPress com SlickNav
Passo 1: Instale o SlickNav
O Menu móvel SlickNav plugin é uma ferramenta de personalização muito simples para menus do WordPress. Com ele, você pode personalizar totalmente a aparência do menu, criar submenus e até adicionar um campo de pesquisa. E o mais importante, é fácil de usar.
Em apenas alguns minutos, você terá um menu WordPress totalmente funcional e pronto para impressionar os visitantes.
Vamos começar clicando em Plugins e selecionando a opção Adicionar Novo no painel de administração esquerdo.
Pesquise SlickNav Mobile Menu na caixa de pesquisa disponível. Isso abrirá plug-ins adicionais que podem ser úteis.
Role para baixo até encontrar o plugin SlickNav Mobile Menu e clique no botão “Instalar agora” e ative o plugin para uso.
Etapa 2: Localize a classe CSS do menu ou ID do menu
Antes de iniciar o processo de personalização real, você precisará de informações específicas para informar ao SlickNav qual menu deseja editar. O plugin permite que você use a classe CSS do menu ou o ID do menu.
O mais fácil de obter é o ID do Menu, que irei descrever agora.
Clique em Aparência e selecione a opção Menus.
Na parte superior, use o menu suspenso para selecionar qual menu você deseja editar. Clique no botão “Selecionar”.
Observe o URL da página, o último número é o ID do menu. Copie-o para a próxima etapa.
Se desejar editar vários menus, repita este processo para obter os IDs de menu necessários.
Antes de prosseguir, é importante entender que a página de personalização do plugin altera apenas a aparência do menu. Para realmente adicionar novos itens a ele, você precisará usar a área Menus do WordPress.
Etapa 3: personalize o menu
Com o ID do menu pronto, agora você pode começar a personalizar. O processo é muito simples, mas infelizmente o plugin não possui uma opção de visualização. Assim, a única maneira de realmente ver isso é clicando no botão “Atualizar”.
O único problema é que ele estará no seu site ativo, por isso não é recomendável fazer uma alteração de cada vez. Em vez disso, recomendo passar pelas configurações e ver a aparência do produto final. Depois, você pode voltar e fazer edições.
Se o seu site estiver ocupado, recomendo fazer isso fora do horário comercial.
Para começar, clique em Configurações e selecione a opção Menu SlickNav.
Primeiro, cole o ID do menu na primeira caixa de texto. Se você tiver vários menus, poderá separá-los com vírgula, mas lembre-se de que todos terão a mesma aparência. Porém, esta é uma ótima maneira de manter tudo consistente em seu site.
A lista de configurações é bastante abrangente, então abordarei os principais recursos. Dito isto, recomendo fortemente que você edite cada configuração conforme necessário para obter os melhores resultados.
Use a opção Imagem do logotipo para fazer upload de uma imagem do logotipo do seu site. O plugin recomenda que a imagem tenha 45px de profundidade e até 200px de largura.
Abaixo disso, você encontrará opções para o texto alternativo do logotipo, portanto, certifique-se de preenchê-lo.
Você pode personalizar o que o campo de pesquisa dirá com a opção Pesquisar nome do rótulo.
Escolha qual biblioteca de animação usar. jquery ou velocidade. Se você não está familiarizado com eles, o jquery é muito comum e funciona perfeitamente em praticamente todos os sites. O Velocity usa a mesma API jquery, mas é significativamente mais rápido.
Depois de passar por todas as configurações e estar completamente satisfeito, clique no botão “Atualizar”.
As alterações agora serão aplicadas aos menus do seu site, que agora você pode visualizar. Se não estiver satisfeito com a aparência, você pode voltar para a página de configurações e fazer ajustes.
Parabéns por criar menus compatíveis com dispositivos móveis com o SlickNav.
Torne todo o seu site compatível com dispositivos móveis
Criar um menu de navegação móvel no WordPress é apenas um aspecto da administração de um site compatível com dispositivos móveis.
Por exemplo, você já pensou em quão próximos alguns botões estão? Provavelmente não, mas você deveria. Isso pode ser um pesadelo para usuários móveis com dedos maiores.
O resultado final é que eles clicam acidentalmente no botão errado e é uma maneira infalível de fazê-los sair.
Mesmo que seus botões respondam, colocá-los muito próximos anula o propósito.
Outra coisa a considerar é se sua barra lateral deve estar visível no celular. A tela é bem pequena, portanto, forçar os visitantes a terem uma barra lateral presente pode ocupar espaço na tela. Pode até levar a algumas páginas e postagens de aparência estranha.
O resultado final é que confiar apenas no design responsivo não é suficiente. Você deve considerar alguns dos pequenos detalhes e como eles se encaixam na experiência móvel geral.
Ajude os visitantes a encontrar seu conteúdo
Conseguir visitantes em suas postagens e páginas já é bastante difícil. E aproveitar ao máximo essas visitas separa os sites bem-sucedidos dos fracassados.
Os menus desempenham um papel fundamental nessa primeira impressão.
Os clientes desejam encontrar o que procuram em segundos, e é para isso que os menus de navegação foram projetados. Assim, eles precisam ser prioridade na criação de um site de fácil navegação. É um dos maiores problemas dos novos sites, e muitos desenvolvedores muitas vezes se esquecem dos usuários móveis.
Usar ferramentas responsivas é ótimo, mas às vezes não são suficientes. Em vez disso, você precisa editar e personalizar manualmente certos elementos para obter a melhor experiência.
Você acha que o menu de navegação padrão do WordPress fica bem em um dispositivo móvel? Você achou as opções de personalização fáceis de usar?
