Depois de
adicionar e configurar seu menu hambúrguer, personalize sua aparência e layout para combinar com o seu site. Você pode ajustar os botões, o contêiner e os itens de menu para que fiquem exatamente como deseja.
Use as opções para personalizar a aparência de cada botão: o que os visitantes clicam para abrir o menu e o que eles clicam para fechá-lo.
Para personalizar os botões:
- Selecione o menu hambúrguer no seu editor.
- Escolha qual botão você deseja personalizar:
- Botão do menu: clique no botão.
- Botão "fechar":
- Clique em Editar menu.
- Clique no botão "fechar" no contêiner.
- Escolha como personalizar o botão:
Clique no ícone
Design 
para personalizar a aparência do botão:
- Substituir design: selecione um novo design do botão no painel.
- Ajustar design: clique em Personalizar design para personalizar ainda mais o botão:
- Estado: escolha o estado para o qual deseja personalizar o botão (Normal ou Interativo).
- Background: escolha uma cor para o botão e torne-o mais ou menos opaco.
- Texto: defina a fonte, o tamanho do texto, a cor e a formatação do texto do botão.
- Borda: adicione e personalize uma borda no botão.
- Cantos: defina o raio (em pixels) para deixar o botão mais arredondado ou mais quadrado.
- Sombras: adicione e ajuste uma sombra no botão para dar a ele um efeito 3D.
- Layout: aumente ou diminua o preenchimento ao redor do botão.
- Ícone: defina o tamanho, a cor e a rotação do ângulo do botão.
Observação: as opções disponíveis dependem do que você escolhe exibir no botão: texto, ícone ou ambos.
Ajustar o layout e a exibição
- Clique no ícone Layout
. - Selecione uma opção em Escolha o que exibir:
- Apenas ícone: apenas o ícone é exibido.
- Apenas texto: apenas o texto é exibido no botão.
- Texto e ícone: o texto e um ícone são exibidos.
- Posição do ícone: escolha a posição do ícone em relação ao texto: à esquerda, à direita, acima ou abaixo.
- Espaço entre texto e ícone: use o slider para aumentar ou diminuir o espaço entre o texto e o ícone.
- Escolha uma opção em Alinhamento: esquerda, direita ou centro.
Ajustar o contêiner e a sobreposição
Escolha o layout e defina o background para o contêiner que exibe os itens do menu. Se você
ativar uma sobreposição, você pode alterar e ajustar seu background para que funcione para o design que você precisa.
Para ajustar o contêiner e a sobreposição:
- Selecione o menu hambúrguer no seu editor.
- Clique em Editar menu.
- Personalize o contêiner/sobreposição como preferir:
Ajustar o tamanho e o layout do contêiner
- Clique no ícone Layout .
- Escolha o que ajustar:
- Largura: escolha como o contêiner é esticado:
- Tela cheia: o contêiner do menu ocupa a largura total da tela.
- Personalizado: use as alças de arrastar para aumentar ou diminuir o tamanho do contêiner.
- Alinhamento: defina o alinhamento do contêiner à esquerda, ao centro ou à direita.
Fazer o design do contêiner
Personalizar a sobreposição
- Clique em qualquer lugar na sobreposição para personalizar seu design.
- Clique em Alterar background da sobreposição.
- Escolha um tipo de sobreposição:
- Cor: selecione uma cor ou gradiente para a sobreposição e defina a opacidade.
- Imagem: defina uma imagem como background da sobreposição. Você pode usar imagens gratuitas disponíveis no Wix ou fazer upload/adicionar suas próprias imagens.
- Vídeo: defina um vídeo como background da sobreposição. Você pode escolher um vídeo do banco de imagens ou fazer upload do seu próprio.
- (Opcional) Configurações de clique
para ajustar a opacidade e as configurações adicionais da sobreposição.
Observação: as configurações disponíveis dependem do tipo de sobreposição. Por exemplo, você pode definir a velocidade de reprodução de vídeos, definir a escala e o posicionamento de imagens, etc.
Personalize a aparência do menu para combinar com o tema do seu site. Você pode alterar o alinhamento e a estrutura, assim como o design dos itens do menu.
Para personalizar o design do menu:
- Selecione o menu hambúrguer no seu editor.
- Clique em Editar menu.
- Clique nos itens do menu.
- Escolha como deseja ajustar o menu:
- Layout: clique no ícone Layout
e escolha entre as seguintes opções:
- Alinhamento do texto: selecione se o texto do menu é alinhado à esquerda, à direita ou ao centro.
- Posição da seta do dropdown: selecione se a seta do dropdown fica à esquerda ou à direita do texto do menu.
- Design: clique no ícone Design
e personalize o menu como desejar:
- Escolha o estado do menu que deseja personalizar (Normal ou Selecionado).
- Ajuste o design usando as opções:
- Cor e opacidade
: escolha a cor de preenchimento do menu e ajuste sua opacidade. - Borda
: ajuste a largura e a cor da borda do menu. - Sombra
: adicione uma sombra e ajuste seu ângulo, tamanho, desfoque, cor e distância. - Texto
: edite as configurações de texto do menu, como fonte, tamanho e formato. - Espaçamento
: ajuste o espaçamento e o recuo do menu usando os sliders.
: insira o raio (px) para deixar os cantos do contêiner mais arredondados ou mais quadrados.
