Como Adicionar um Menu Responsivo em Tela Cheia no WordPress

Menus são essenciais para ajudar os visitantes a navegar em seu site WordPress e encontrar mais de suas postagens e páginas. Menus responsivos em tela cheia podem ser particularmente úteis ao projetar seu site para usuários de dispositivos móveis.

Quando seus usuários clicam ou tocam em um ícone de hambúrguer, uma sobreposição em tela cheia do menu do seu site será exibida usando uma bela animação.

Experimentamos alguns tipos diferentes de menus em nossos próprios sites para ver o que obtém os melhores resultados. E neste artigo, mostraremos como adicionar um menu responsivo em tela cheia no WordPress sem escrever nenhum código.

Por que adicionar um menu responsivo em tela cheia no WordPress?

Menus bem projetados ajudam seus visitantes a se orientarem em seu site WordPress ou loja WooCommerce. Mas pode ser difícil tocar em um menu padrão no cabeçalho enquanto usa a tela pequena de um smartphone.

Já existem mais visitantes móveis do que de desktop para muitos sites. É por isso que recomendamos que você visualize a versão móvel do seu site WordPress para ver como seu site aparece em dispositivos móveis.

Um menu móvel responsivo em tela cheia se ajustará automaticamente a diferentes tamanhos de tela. Como todo o espaço disponível é usado para o menu, é mais fácil navegar em smartphones e tablets.

Vamos dar uma olhada em como adicionar um menu responsivo em tela cheia no WordPress.

Como Adicionar um Menu Responsivo em Tela Cheia no WordPress

A primeira coisa que você precisa fazer é instalar e ativar o plugin FullScreen Menu. Você pode conferir nosso guia passo a passo sobre como instalar um plugin do WordPress para iniciantes para mais detalhes.

Após a ativação, você deve ir para a página Opções do Menu de Tela Cheia no menu de administração do seu WordPress para configurar as opções do plugin. Ele o levará para a aba 'Configurações' automaticamente.

Comece marcando a caixa 'Ativar Menu Animado de Tela Cheia' para habilitar o menu.

É uma boa ideia também marcar a caixa 'Mostrar o menu apenas para usuários administradores' no início. Isso permitirá que você veja as alterações enquanto configura o menu, mas os visitantes do seu site não poderão vê-lo até que você termine.

Não se esqueça de voltar e desmarcar essa caixa quando terminar.

Outras configurações permitem que você mostre o menu apenas em dispositivos móveis, feche o menu ao clicar ou rolar, e oculte o menu em páginas específicas. Para o nosso exemplo, deixaremos essas configurações desmarcadas, mas sinta-se à vontade para personalizá-las como desejar para o seu próprio site.

Design e Aparência do Menu de Tela Cheia

Em seguida, personalizaremos o design do menu. Felizmente, o plugin de menu permite que você faça isso sem precisar de CSS personalizado.

Para personalizar o menu, você precisará clicar na aba ‘Design/Aparência’ na parte superior da página. Nesta página, você pode escolher as cores, a fonte e as configurações de animação para o seu menu.

Na parte superior da página, você notará duas configurações de cor. A primeira cor é para o ícone do menu hambúrguer. Ele será exibido no canto superior direito do seu site. Quando seus visitantes clicarem ou tocarem nele, o menu em tela cheia será exibido ou ocultado.

A segunda configuração de cor é para o fundo do menu.

Ao clicar em cada caixa, uma paleta de cores aparecerá. Você pode clicar na cor que deseja usar ou digitar seu código hexadecimal.

Após escolher as cores do menu, você deve rolar a página para baixo até a seção Fonte/Aparência. Aqui, você pode escolher a cor, a família e o tamanho da fonte que serão usados para o texto do menu.

Para este tutorial, manteremos as configurações padrão, que usam a fonte do nosso tema. Recomendamos essa configuração porque ela combinará com o design do seu site. Além disso, carregar fontes adicionais pode afetar o desempenho e a velocidade do seu site WordPress.

Existem também configurações para exibir um menu lateral em páginas específicas e rolar o menu principal se ele não for alto o suficiente. Para este tutorial, deixaremos essas configurações desmarcadas, mas sinta-se à vontade para experimentá-las em seu próprio blog WordPress ou site.

Depois disso, role para baixo até a seção 'Configurações de Animação'. Aqui, você pode ajustar duas configurações principais.

O primeiro deles é 'Tipo de Animação'. Isso permite que você selecione a direção da animação quando o menu é ativado. Você pode escolher de cima para baixo, da esquerda para a direita e da direita para a esquerda.

A segunda configuração é o efeito que você obtém ao passar o mouse sobre um item do menu. As opções são linha de preenchimento, cor de fundo e cor de fundo com uma borda arredondada.

Conteúdo do Menu em Tela Cheia

Finalmente, você precisará rolar de volta para o topo da página e clicar na aba 'Conteúdo do Menu'. Aqui, você pode selecionar o menu do WordPress que será exibido no seu menu em tela cheia.

Ao lado de ‘Selecionar Menu’ no topo, você precisará escolher um menu na lista suspensa. Se você ainda não criou um menu de navegação, confira nosso guia sobre como adicionar menus de navegação no WordPress.

Se você gostaria de conteúdo adicional exibido na tela do menu, você pode adicioná-lo na próxima seção, rotulada como ‘HTML Grátis / Shortcodes’. Simplesmente digite seu conteúdo na caixa do editor e adicione quaisquer arquivos de mídia que desejar. Este conteúdo será exibido abaixo do menu.

Há também uma caixa de seleção que incluirá um link para sua página de política de privacidade. Muitos proprietários de sites preferem adicionar isso no rodapé em vez do menu principal, no entanto.

Em seguida, você pode gostar de adicionar ícones sociais como itens de menu. Estes serão exibidos em uma linha na parte inferior do seu menu de tela cheia.

Para adicioná-los, simplesmente role para baixo até a seção ‘Ícones Sociais’ e insira um título para o ícone, como ‘Facebook’. Depois disso, escolha o ícone apropriado e digite o URL da sua página social.

Você pode adicionar mais ícones clicando no botão ‘Adicionar Outro Ícone’.

Finalmente, você pode adicionar uma barra de pesquisa nativa do WordPress no topo do seu menu responsivo. Você precisará rolar até o final da página ‘Conteúdo do Menu’ e marcar a caixa ‘Adicionar Barra de Pesquisa?’. Se desejar, você também pode digitar algum texto de espaço reservado.

Por fim, clique no botão ‘Salvar Alterações’ para armazenar suas configurações.

Agora você pode visitar seu site para ver o menu responsivo em tela cheia em ação. Recomendamos que você redimensione seu navegador para ver como o menu se comporta em diferentes tamanhos de tela.

Veja como fica em nosso site de demonstração.

Quando estiver satisfeito com seu menu em tela cheia, não se esqueça de voltar para Opções do Menu em Tela Cheia e desmarcar ‘Mostrar o menu apenas para usuários administradores’. Após clicar no botão ‘Salvar Alterações’, os visitantes do seu site poderão acessar o menu.

Esperamos que este artigo tenha ajudado você a aprender como adicionar um menu responsivo em tela cheia ao seu site WordPress. Você também pode querer aprender como adicionar um menu mega em seu site WordPress ou como adicionar um menu de painel deslizante em temas WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.