Deseja adicionar uma barra de navegação vertical ao seu site WordPress?
Esse é um recurso simples de web design sobre o qual um de nossos leitores nos perguntou recentemente e que facilita a navegação dos visitantes em seu site. Felizmente, é muito fácil de implementar, resultando em uma navegação mais organizada e em uma melhor experiência do usuário.
Por isso, neste guia, ensinaremos a você como criar uma barra de navegação vertical no WordPress, passo a passo.
Índice
Por que usar uma barra de navegação vertical no WordPress?
As barras de navegação verticais facilitam a navegação dos usuários no seu site em comparação com os menus horizontais. Elas usam o espaço vertical do site, permitindo que você adicione uma lista ordenada ou não ordenada de links às barras laterais e aos rodapés sem parecer apertado.
Um bom exemplo disso são as lojas on-line.
Muitos sites de comércio eletrônico usam a navegação vertical para adicionar muitos produtos sem ocupar muito espaço. Esse tipo de lista de links de navegação também é fácil de ler, o que é útil para compradores com pressa.
Em resumo, barras de navegação verticais bem projetadas podem melhorar a aparência, a usabilidade e a experiência do usuário do seu site.
Com isso em mente, vamos aprender como adicionar um ao seu site WordPress.
Como criar navegação vertical com o SeedProd
Criar uma barra de navegação vertical no WordPress é muito fácil com o SeedProd, o melhor construtor de sites e plug-in de página de destino do WordPress.
Com o construtor de arrastar e soltar do SeedProd, você pode criar temas personalizados do WordPress e páginas da Web flexíveis sem escrever códigos PHP, Jquery, Javascript, HTML e CSS. Além disso, seu bloco Nav Menu inclui navegação vertical integrada.
Primeiro, você precisará instalar e ativar o plug-in SeedProd. Se precisar de ajuda, consulte nossa documentação sobre a instalação do SeedProd Pro.
Observação: Com a versão gratuita do SeedProd, você pode adicionar uma barra de navegação vertical a páginas individuais. No entanto, usaremos o SeedProd Pro neste guia para adicionar uma barra de menu aos nossos modelos de tema do WordPress.
Depois de ativar o plug-in e inserir sua chave de licença, você estará pronto para criar um tema personalizado do WordPress.
Criação de um tema WordPress personalizado
Para criar seu tema, navegue até a página SeedProd " Theme Builder em seu painel do WordPress. Nessa página, você pode escolher um tema predefinido como ponto de partida. Ele substituirá seu tema existente por um design de site responsivo personalizado de sua escolha.
Para fazer isso, clique no botão Theme Template Kits (Kits de modelo de tema ).
Em seguida, você verá a biblioteca de temas com designs para diferentes nichos de sites. Ao clicar no menu suspenso, você poderá filtrá-los por popularidade e tipo. Navegue por eles e, em seguida, clique no ícone de marca de seleção em qualquer design para importá-lo.
Quando você importar um design, o SeedProd gerará os modelos que compõem o tema. A partir daí, você pode editar cada modelo e personalizar o design de acordo com suas necessidades.
Para conhecer todas as etapas, consulte nosso guia sobre como criar um tema personalizado do WordPress.
Adicionar uma barra de navegação vertical a seus modelos
Você pode usar o SeedProd para adicionar uma barra de navegação vertical a qualquer um de seus modelos de tema. Para este guia, adicionaremos um menu ao modelo "Blog Page".
Para fazer isso, passe o cursor do mouse sobre o modelo e clique no link "Edit Design".
Isso abre o construtor de páginas de arrastar e soltar, com uma visualização ao vivo à direita e uma barra lateral de blocos à esquerda.
Agora, role a barra lateral de blocos para baixo e procure o bloco Nav Menu. Depois de encontrá-lo, arraste-o para o local onde deseja exibir o menu de navegação, como a barra lateral.
Por padrão, o Nav Menu mostrará apenas um item de menu "About" (Sobre). Você pode alterar isso nas configurações do menu clicando no bloco. Em seguida, ele mostrará as configurações na barra lateral esquerda.
Inicialmente, o tipo de menu "Simples" está ativado, o que permite que você crie seu próprio menu de navegação.
Para este guia, selecionaremos o tipo "WordPress Menu", que permite que você use o menu de navegação existente do WordPress.
A próxima etapa é tornar a barra vertical em vez de uma barra de navegação horizontal. Você pode fazer isso clicando na guia Advanced (Avançado) nas configurações do bloco e selecionando o layout de lista "Vertical".
No mesmo painel, você pode personalizar as cores do menu, a tipografia, a cor do plano de fundo, a configuração de alinhamento do texto, a decoração do texto e muito mais.
Quando estiver satisfeito com seu menu, clique no botão Save (Salvar ) para armazenar suas alterações. Você pode repetir essas etapas para todos os modelos que exigem navegação vertical.
Mais 4 maneiras de criar navegação vertical no WordPress
Criar uma barra de navegação vertical com o SeedProd é uma ótima opção se você estiver usando um plug-in de construtor de temas. Mas e se você quiser usar as ferramentas já existentes em seu site?
Abaixo, você encontrará mais quatro métodos para adicionar navegação vertical ao WordPress.
Escolha um tema com suporte para barra de navegação vertical
Outra maneira de adicionar a navegação vertical ao seu site é escolher um tema do WordPress que a suporte. Muitos temas do WordPress têm suporte integrado para barras de navegação vertical, o que economiza muito tempo.
A principal vantagem aqui é a simplicidade: basta escolher um tema que se adapte à sua estética e deixar que ele faça o trabalho pesado para você. Essa pode ser a solução perfeita se você não tiver experiência em tecnologia ou não tiver muito tempo.
No entanto, esteja ciente de que nem todos os temas oferecem esse recurso. Ao escolher o tema, acesse as configurações ou a documentação para ver se ele inclui uma barra de navegação vertical.
Por exemplo, o tema padrão do Twenty-Twenty-One não inclui navegação vertical. Enquanto isso, o tema Astra oferece suporte a um menu de hambúrguer fora da tela e a um menu de rodapé que pode ser exibido empilhado ou em linha.
Para obter ajuda na edição do menu, consulte nosso guia sobre como editar a barra de navegação no WordPress.
Adicionar uma barra de navegação vertical com o Full Site Editor
Muitos temas do WordPress são compatíveis com o FSE (Full Site Editor) do WordPress. Eles são conhecidos como temas baseados em blocos e permitem que você personalize seu tema visualmente.
Para fazer isso, acesse Appearance " Editor no administrador do WordPress. A partir daí, clique no menu de navegação na parte superior do cabeçalho do site.
Depois de clicar no menu, você verá várias opções no painel de navegação lateral. Por exemplo, se você clicar na guia Settings (Configurações), haverá uma opção para alterar a orientação dos itens da lista de menus.
Clique na seta para baixo para mudar o menu para navegação vertical.
Agora, clique no botão Save (Salvar ) para salvar suas alterações.
Adicionar um menu de navegação vertical à barra lateral do WordPress
Você pode adicionar facilmente uma barra de navegação vertical à sua barra lateral usando widgets se não quiser alterar o tema do WordPress. Esse método é ideal se você não tiver um tema baseado em blocos instalado.
Primeiro, verifique se você configurou um menu de navegação. Em seguida, vá para Appearance " Widgets no painel do WordPress.
A partir daí, clique no botão de adição (+) e procure o widget Navigation Menu (Menu de navegação).
Depois de clicar para adicioná-lo à barra lateral, você pode dar um título ao menu e escolher qual menu será exibido.
Agora, salve as alterações e visualize seu site para ver a barra de navegação lateral vertical em ação.
Criar uma barra de navegação vertical para posts e páginas
Você pode adotar uma abordagem semelhante para adicionar barras de navegação verticais aos seus posts e páginas do WordPress.
Primeiro, edite ou crie um novo post ou página. Em seguida, adicione o bloco Navigation Menu.
Na barra lateral direita, clique na seta para baixo para tornar o menu vertical e, em seguida, salve as alterações.
Ao visualizar o post ou a página, você verá uma nova barra de navegação vertical.
Crie seu próximo menu de navegação vertical
Isso conclui nosso guia sobre como criar uma barra de navegação vertical no WordPress. Agora é a sua vez de criar um sistema de navegação mais fácil de usar para o seu site.
Lembre-se de que, independentemente de você optar pelo SeedProd ou por uma das outras soluções que abordamos, o objetivo continua o mesmo. Aprimorar a experiência do leitor, manter o site organizado e facilitar a navegação para os visitantes.
Boas criações!
Para obter mais dicas de navegação, consulte o tutorial a seguir:
- Como personalizar os estilos de menu do WordPress
- Como editar menus móveis no WordPress
- A navegação na página de destino está morta: eis o motivo
- Como criar uma página de destino sem navegação
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.
