Menus hambúrguer são menus minimalistas que economizam espaço e são exibidos apenas quando os visitantes clicam no ícone do menu. Você pode personalizar cada parte do menu hambúrguer para combinar com a aparência que seu cliente está buscando.
Neste artigo, saiba como:
Adicione um menu hambúrguer a qualquer momento usando o painel Elementos. Dependendo das necessidades do seu cliente, você pode adicionar vários menus ao site e gerenciá-los/personalizá-los individualmente.
Para adicionar um menu hambúrguer:
- Clique em Elementos no lado esquerdo do Editor.
- Clique em Menu e busca.
- Clique em Menus hambúrguer.
- Arraste e solte o menu relevante para o local desejado da página.
Após adicionar um menu hambúrguer ao site, escolha o menu que ele exibe. Você pode exibir menus diferentes em cada menu hambúrguer individual, fornecendo um contexto específico da página/seção em que ele está.
Para gerenciar um menu hambúrguer:
- Selecione o ícone do menu hambúrguer.
- Clique em Editar menu.
- Selecione o elemento Menu vertical.
- Clique em Gerenciar menu.
- Clique no dropdown em Qual menu é exibido?.
- Menu existente: selecione o menu escolhido no dropdown.
- Novo menu:
- Clique em Gerenciar menus do site.
- Clique em + Adicionar menu e crie o menu personalizado.
Após adicionar um menu hambúrguer, personalize cada parte dele para combinar com a aparência do site.
Para personalizar um menu hambúrguer:
- Selecione o ícone do menu hambúrguer.
- Escolha o que você deseja personalizar:
Esse é o botão em que os visitantes clicam para acessar o menu.
- Fazer o design do botão: abra o painel Inspetor para ajustar o botão, assim como o ícone e/ou o texto que ele mostra.
- Configurar o botão: clique no ícone Configurações para decidir qual ícone e/ou texto mostrar.
- Ajustar o layout: clique no ícone Layout para ajustar o alinhamento do ícone/texto. Se você estiver mostrando um ícone e texto, você pode definir o espaço entre eles e a posição do ícone.
Contêiner e sobreposição do menu
Quando os visitantes clicam no ícone do menu hambúrguer, um contêiner é aberto. Clique em Editar menu para acessá-lo e personalizá-lo:
- Fazer o design do contêiner: abra o painel Inspetor para alterar o background, adicionar bordas, ajustar os cantos e muito mais.
- Redimensionar o contêiner: você pode clicar no ícone Esticar para que ele ocupe a tela inteira ou simplesmente ajuste o tamanho na tela.
- Adicione elementos ao contêiner: você pode adicionar os elementos necessários, como o logo do cliente, links de redes sociais ou uma barra de login para membros do site.
- Configurar o contêiner: clique no ícone Configurações para escolher se deseja ou não mostrar uma sobreposição de background, assim como a opção de clicar fora para fechar o contêiner.
Se o contêiner ocupar apenas uma parte da tela, uma sobreposição personalizável o envolve para ajudar os visitantes a voltar sua atenção para o menu.
Clique em qualquer lugar na sobreposição para personalizar seu design no painel Inspetor. Defina uma cor, um gradiente ou um preenchimento de imagem, adicione bordas, ajuste os cantos e muito mais.
Esse é o elemento de menu em si. Clique em Editar menu e selecione o menu vertical para personalizá-lo:
- Configurar o menu: clique em Gerenciar menu para escolher as páginas, links e submenus que ele exibe.
- Ajustar o layout: clique no ícone Layout para alterar o alinhamento dos itens de menu e a seta do submenu.
- Fazer o design do menu: abra o painel Inspetor para ajustar o design para 2 estados: Normal e Selecionado.
Esse é o botão "X" em que os visitantes clicam para fechar o menu. Clique em Editar menu e selecione "Botão Fechar" para personalizá-lo:
- Fazer o design do botão: abra o painel Inspetor para ajustar o botão, assim como o ícone e/ou o texto que ele mostra.
- Configurar o botão: clique em Configurações para decidir qual ícone e/ou texto mostrar.
- Ajustar o layout: clique no ícone Layout para ajustar o alinhamento do ícone/texto. Se você estiver mostrando um ícone e texto, você pode definir o espaço entre eles e a posição do ícone.