Como combinar os menus da área de trabalho e do celular
Publicados: 2021-05-20Você quer ter um ótimo menu no desktop e no celular? Estamos protegendo você. Neste guia, mostraremos como combinar os menus desktop e mobile do seu site WordPress .
O uso de dispositivos móveis para navegar na internet vem aumentando nos últimos anos. No entanto, nem todos os sites são projetados para oferecer aos usuários uma boa experiência em dispositivos móveis. Para acompanhar os tempos e aproveitar ao máximo seus visitantes móveis, você deve garantir que seu site seja tão responsivo em dispositivos móveis quanto em telas de desktop.
Antes de mostrar como combinar os menus da área de trabalho e do celular, vamos primeiro ver por que ter o mesmo design é uma boa ideia.
Por que combinar os menus da área de trabalho e do celular?
Embora seja cada vez mais comum que os usuários naveguem na Internet a partir de seus telefones, nem todos os sites são projetados para fornecer uma boa experiência aos usuários de dispositivos móveis. Para garantir que seu site seja fácil de navegar em qualquer dispositivo, você deve combinar o menu do computador e do celular para que fique atraente em todas as telas.
Atualmente, a maioria dos sites tem menus de cabeçalho que ficam bem em telas de desktop. No entanto, o mesmo não acontece nas telas do celular. Muitos proprietários de sites usam as opções padrão para celular, então os menus geralmente não parecem tão bons.
Vamos dar uma olhada em um exemplo. Digamos que seu site tenha um menu padrão na área de trabalho com uma altura de 30px e uma altura máxima do logotipo de 100px.
Se você verificar o mesmo menu no celular sem nenhuma alteração, ficará assim.
Como você pode ver, é bem grande e ocuparia quase 20% da tela. A boa notícia é que você pode fazer alguns ajustes para combinar o menu do desktop e do celular, para que o último fique assim:
Combinar os menus da área de trabalho e do celular é essencial se você deseja fornecer aos usuários uma excelente experiência em telas de qualquer tamanho. Além disso, um site com boa aparência e totalmente responsivo também pode ajudá-los a navegar no seu site e aumentar o engajamento.
Agora que você entende melhor por que precisa combinar os menus da área de trabalho e do celular, vamos ver como fazer isso.
Como combinar seus menus de desktop e móveis no WordPress
Combinar os menus da área de trabalho e do celular não é um processo complicado. Tudo o que você precisa fazer é seguir as etapas que veremos abaixo. Lembre-se de que usaremos um pouco de código CSS para estilizar nossos menus, mas você poderá seguir o guia mesmo que não tenha habilidades de codificação.
Para este tutorial, usaremos o tema Divi, pois é um dos temas mais responsivos, fáceis de usar e ricos em recursos do WordPress. Algumas das interfaces podem variar dependendo do tema que você usa para o seu site, mas você deve conseguir aplicar a maioria das alterações em qualquer tema.
1. Configure o Menu
A primeira coisa que você deve fazer para combinar os menus da área de trabalho e do celular é configurar o menu. Isso será o mesmo para a maioria dos temas. Aqui, ajustaremos a altura do menu e do logotipo.
No painel do WordPress, vá para Aparência > Personalizar . Você será redirecionado para o Personalizador de Temas, onde precisará abrir Cabeçalho e Navegação > Barra de Menu Principal .
Em seguida, certifique-se de desabilitar e desmarcar a opção Ocultar imagem do logotipo e ajustar a altura do menu e a altura máxima do logotipo da seguinte maneira:
- Altura do Menu : 30
- Altura máxima do logotipo : 100
Isso diminuirá a altura do menu tanto para desktop quanto para celular, tornando-o mais elegante e criando mais espaço nas telas do celular.
Depois de definir os valores, publique-o.
2. Edite o Menu com CSS
Depois de configurar o logotipo e o menu, você pode começar a editar o menu com CSS . Existem diferentes maneiras pelas quais você pode adicionar CSS ao WordPress para corresponder aos menus da área de trabalho e do celular. Você pode adicioná-los em uma única página específica ou em todo o site.
Para manter o design consistente, recomendamos que você aplique as alterações de CSS no menu a todo o site. No entanto, você também pode incluir código CSS em páginas da Web específicas, se necessário. Mostraremos as duas opções abaixo.
Antes de começarmos, é uma boa ideia fazer backup do seu site WordPress. Adicionaremos algumas linhas de código ao site, por isso é sempre útil ter um backup recente caso você queira voltar para uma versão anterior do seu site.
2.1. Adicionar código CSS a uma única página
Para adicionar o código CSS para corresponder aos menus do desktop e do celular para uma página específica, abra a página no painel do WordPress.
Em seguida, abra a página com o Divi Builder e clique no botão Opções na parte inferior da página (os 3 pontos horizontais). Lá você verá as opções da página. Clique no ícone Configurações para abrir as Configurações da página, vá para a guia Avançado e pressione CSS personalizado.
Depois disso, adicione o seguinte código CSS e clique na marca de seleção para salvá-lo.
@media (largura máxima: 980px) {
# página-contêiner {
preenchimento superior: 43px! importante;
}
}
@media (largura máxima: 980px) {
#logo {
largura máxima: 100%! importante;
altura máxima: 90%! importante;
}
}
@media (largura máxima: 980px) {
#mainheader {
topo: 4%! importante;
}
}
@media (largura máxima: 980px) {
# et-top-navigation {
preenchimento superior: 5px! importante;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
fundo de preenchimento: 5px;
}Fonte do código
Você pode comparar os resultados entre desktop e celular usando os modos de visualização disponíveis no construtor. Você verá as opções no canto inferior esquerdo da tela.
2.2. Adicione o código CSS a todo o site
Alternativamente, você pode adicionar código CSS e aplicá-lo a todo o site. Essa é a técnica mais comum, pois ajudará você a manter a consistência em todo o site e a combinar os menus do desktop e do celular em cada página .
Para isso, você pode adicionar CSS personalizado de duas maneiras diferentes:
- Usando o personalizador de temas
- Nas opções de tema (se você usa Divi)
Vamos dar uma olhada nas duas opções.
eu. Personalizador de temas
No painel do WordPress, vá para Aparência > Personalizar e abra o Personalizador de temas . Em seguida, vá para a guia CSS adicional .
Cole o seguinte código CSS e publique-o.
@media (largura máxima: 980px) {
# página-contêiner {
preenchimento superior: 43px! importante;
}
}
@media (largura máxima: 980px) {
#logo {
largura máxima: 100%! importante;
altura máxima: 90%! importante;
}
}
@media (largura máxima: 980px) {
#mainheader {
topo: 4%! importante;
}
}
@media (largura máxima: 980px) {
# et-top-navigation {
preenchimento superior: 5px! importante;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
fundo de preenchimento: 5px;
}Fonte do código
Depois de colar o código CSS, você também pode ajustar os valores para atender aos requisitos do seu site. Certifique-se de que o preenchimento superior entre o menu móvel e o logotipo esteja alinhado corretamente. Se você não tiver certeza de quais devem ser os valores corretos, comece com valores altos e diminua-os até ficar satisfeito com o resultado.
O bom desse método é que você pode visualizar os resultados para desktop e dispositivos móveis no Theme Customizer. As opções do modo de visualização aparecerão no canto inferior esquerdo da tela.
ii. Opções de temas
Como alternativa, se você usar o Divi, poderá adicionar código CSS a todo o site usando as opções de tema. Essa pode ser uma abordagem mais fácil e rápida, pois você não precisará carregar o Personalizador de Temas para adicionar o código.
Primeiro, vá para Divi > Opções de Tema e abra a guia Geral . Em seguida, role até o final da página e você encontrará o CSS personalizado .
Mais uma vez, adicione o seguinte código à caixa de texto conforme mostrado na captura de tela e salve as alterações.
@media (largura máxima: 980px) {
# página-contêiner {
preenchimento superior: 43px! importante;
}
}
@media (largura máxima: 980px) {
#logo {
largura máxima: 100%! importante;
altura máxima: 90%! importante;
}
}
@media (largura máxima: 980px) {
#mainheader {
topo: 4%! importante;
}
}
@media (largura máxima: 980px) {
# et-top-navigation {
preenchimento superior: 5px! importante;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
fundo de preenchimento: 5px;
}Lembre-se de que este é apenas um código de amostra, portanto, talvez seja necessário ajustá-lo para corresponder ao design do seu site.
Algumas dicas adicionais para o menu móvel
Acabamos de ver como combinar facilmente os menus de desktop e mobile em seu site. Mas há mais coisas que você pode fazer para personalizar seu menu móvel. Nesta seção, mostraremos algumas das personalizações mais comuns que você pode realizar para aproveitar ao máximo seu menu.
Lembre-se de que usamos o tema Divi para este tutorial, portanto, algumas das opções podem ser ligeiramente diferentes dependendo do tema que você usa.
1. Como Fixar o Menu Móvel
Uma das melhores modificações que você pode fazer no seu menu para dispositivos móveis é corrigi-lo quando os usuários rolarem no seu site. Isso pode melhorar a navegação e melhorar a experiência do usuário em seu site.
Para tornar o menu móvel fixo, adicione o seguinte código CSS no Personalizador de Tema ou nas Opções de Tema .
@media (largura máxima: 980px) {
.et_non_fixed_nav.et_transparent_nav # main-header, .et_non_fixed_nav.et_transparent_nav # top-header, .et_fixed_nav # main-header, .et_fixed_nav # top-header {
posição: fixo! importante; }}Para obter mais informações sobre como tornar o menu fixo no Divi, consulte este guia.
2. Adicione um logotipo diferente para o modo móvel
Isso pode ser útil se você tiver dificuldade em obter os valores corretos para fazer o alinhamento perfeito para o menu do seu celular. Você pode simplesmente substituir o logotipo original e ter um logotipo diferente com um tamanho mais apropriado apenas em dispositivos móveis.
Para usar um logotipo diferente no celular, primeiro, carregue a imagem do logotipo em seu site. Vá para Mídia > Adicionar novo e carregue sua imagem.
Em seguida, vá para a guia Biblioteca e selecione a imagem. Se você já carregou a imagem, basta abrir Mídia > Biblioteca .
Agora selecione a imagem e copie a URL do arquivo .
Por fim, adicione o CSS personalizado a seguir no Personalizador de temas em CSS adicional e publique-o. Lembre-se de substituir o URL pelo que você acabou de copiar.
@media somente tela e (largura máxima: 981px) {
/ * Altera o logotipo do celular para a imagem especificada * /
#logo {
conteúdo: url ("http://site.com/logo.png");
}
}3. Ocultar o logotipo no cabeçalho do celular
Se você estiver tendo problemas para combinar os menus da área de trabalho e do celular, convém diferenciá-los e ocultar completamente o logotipo no celular. Essa pode ser uma boa opção para alguns sites, mas certifique-se de oferecer outras dicas para que os usuários possam identificar seu site mesmo sem o logotipo.
Para ocultar o logotipo do menu do celular, no painel do WordPress, vá para Aparência > Personalizar e abra o Personalizador de temas . Em seguida, navegue até Mobile Styles > Mobile Menu . Marque a opção Ocultar imagem do logotipo e publique-a.
É isso! O logotipo ficará oculto no celular.
Conclusão
Em suma, é essencial que seu site tenha uma boa aparência e seja funcional em qualquer tipo de dispositivo. A combinação de menus para computador e dispositivos móveis permitirá que você melhore a navegação do seu site e forneça aos visitantes uma experiência melhor.
Neste guia, mostramos as diferentes etapas para ter o mesmo menu no desktop e no celular. Vimos como configurá-lo e editá-lo com CSS para uma única página ou para todo o site.
Além disso, também fornecemos algumas dicas para personalizar o menu móvel. Considerando que quase metade do tráfego na Internet é móvel, isso pode ter um grande impacto no seu site.
Se você quiser mais informações sobre o tema ou construtor Divi, você pode dar uma olhada nestes guias:
- Como personalizar o menu Divi com CSS
- Faça um cabeçalho Divi (fixo/fixo)
- Como ocultar e remover o rodapé no Divi
Você combinou os menus de desktop e mobile em seu site? Você teve algum problema ao seguir o tutorial? Deixe-nos saber na seção de comentários abaixo!