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?

Um menu responsivo de tela cheia facilita muito a navegação dos visitantes em seu site WordPress ou loja WooCommerce em smartphones e tablets.

Ao usar a tela inteira para o menu, é simples tocar nos links sem selecionar acidentalmente o item errado.

Com mais pessoas navegando em dispositivos móveis do que em desktops atualmente, verificar como seu site aparece em telas pequenas é essencial.

Um menu responsivo se ajusta automaticamente a diferentes tamanhos de tela, garantindo uma experiência fluida para todos os visitantes.

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

Etapa 1: Instalar e Ativar o Plugin FullScreen Menu

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.

Passo 2: Configurar Configurações Gerais do Menu

Após a ativação, você deve ir para a página Opções de Menu em 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 em Tela Cheia’ para habilitar o menu.

É uma boa ideia também marcar a caixa ‘Mostrar 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.

Abaixo dessas opções, você encontrará outras configurações que permitem mostrar o menu apenas em dispositivos móveis, fechar o menu ao clicar ou rolar, e ocultar 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.

Passo 3: Personalizar o Design e a Aparência do Menu

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 cores. A primeira cor é para o ícone do menu hambúrguer. Isso geralmente aparece na área do cabeçalho do seu site. Quando seus visitantes clicarem ou tocarem nele, o menu de 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, recomendamos manter as configurações de fonte padrão, que geralmente usam a fonte do seu tema.

Esta é uma boa escolha porque combinará com o design geral do seu site, e o carregamento de fontes adicionais às vezes pode diminuir 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 escolhas são uma linha sutil que aparece (como uma linha de preenchimento), uma mudança na cor de fundo ou uma mudança na cor de fundo com uma borda arredondada.

Passo 4: Definir 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’ na parte superior, 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 na parte superior 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 um texto de espaço reservado.

Passo 5: Salvar Alterações e Testar seu Menu

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.

Assim que estiver satisfeito com seu menu em tela cheia, não se esqueça de voltar para Opções de Menu em Tela Cheia no menu de administração do seu WordPress e desmarcar ‘Mostrar apenas para usuários administradores’.

Após clicar no botão ‘Salvar Alterações’, os visitantes do seu site poderão acessar o menu.

Perguntas Frequentes Sobre Como Adicionar um Menu Responsivo em Tela Cheia no WordPress

Aqui estão algumas perguntas que nossos leitores frequentemente fizeram sobre como adicionar um menu responsivo em tela cheia no WordPress:

Como criar um menu responsivo no WordPress?

Para criar um menu responsivo no WordPress, use um plugin de menu amigável para dispositivos móveis como o FullScreen Menu. Isso garante que seu menu se adapte a diferentes tamanhos de tela para uma navegação suave.

Como tornar um cabeçalho responsivo no WordPress?

Tornar um cabeçalho responsivo no WordPress significa que ele se ajusta automaticamente em qualquer dispositivo. Você pode fazer isso usando um tema responsivo ou personalizando o layout do cabeçalho com CSS e o editor de blocos.

Para instruções detalhadas, consulte nosso tutorial sobre como personalizar o cabeçalho do seu WordPress.

Como fazer uma página em tela cheia no WordPress?

Você pode criar uma página em tela cheia no WordPress usando um page builder como o SeedProd ou configurações de tema que permitem modelos "largura total". Isso remove as barras laterais e estica seu conteúdo por toda a tela.

Como criar uma tabela responsiva no WordPress?

Para criar uma tabela responsiva no WordPress, use o bloco de tabela do editor de blocos ou um plugin com suporte a tabelas responsivas. Isso garante que sua tabela role ou se empilhe de forma organizada em dispositivos móveis.

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 mega menu no seu site WordPress ou como adicionar um menu de painel deslizante em temas do 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.