Personalize seu menu mobile para que ele combine com o design e o layout do seu site. Seu menu mobile consiste em três elementos: o ícone, o contêiner e os itens.
Você pode personalizar e ajustar cada um individualmente para criar um menu exclusivo e atraente para você e os visitantes do seu site mobile.
O ícone do menu tem dois estados: aberto e fechado. Você pode selecionar um ícone predefinido e personalizar os dois estados para que eles fiquem como você quiser.
Para personalizar o ícone do menu:
- Clique no ícone do menu no seu editor mobile.
- Clique no ícone Design
. - Selecione uma predefinição entre as opções disponíveis.
- Clique em Personalizar design.
- Selecione para qual estado você deseja personalizar o ícone clicando em uma aba (Fechado ou Aberto).
- Escolha como deseja criar o design do ícone:
Personalizar a cor de preenchimento e a opacidade
Você pode escolher uma cor atraente para o seu ícone e definir sua visibilidade.
Clique na aba
Cor e opacidade
e personalize com as opções:
- Background do botão: clique na caixa de cores para selecionar uma cor para o background do botão e arraste o slider para aumentar ou diminuir a opacidade.
- Ícone: clique na caixa de cores para selecionar uma cor para o ícone do botão e arraste o slider para aumentar ou diminuir a opacidade.
Adicionar e personalizar uma borda ao redor do ícone
Adicione uma borda ao seu ícone para destacá-lo no seu site mobile.
Clique na aba
Borda ![](https://lh3.googleusercontent.com/0tPtzdmVLnYYQoWfFuWoHpp7nNMjiOoM-dxKqRedJs9YOls_Z3y80hEODIvabp-McZCjg-ghySEVKRZezRb3cyogrFwWxXFa6WN3tA_JJ1BMbqw8Rb1-77-vMZvyw2YL1goXyNn_-bv0tqLy39diGn4)
para definir a cor, visibilidade e largura:
- Opacidade e cor: clique na caixa de cores para selecionar uma cor e arraste o slider para aumentar ou diminuir a opacidade.
- Largura: arraste o slider para aumentar ou diminuir a largura da borda.
Personalizar os cantos do ícone
Clique na aba
Cantos ![](https://lh3.googleusercontent.com/D4c_lBFlxV4Oh0cfIEiq8e50WiWdcogORNuRipv-Zpf3HSjmJ8mSsuPLIyP0iczw2rbDbHADYQqrWY6jeokiZkszKYylkYCrxvBsQdWuXsFG0pGJzqgwX75_rT8T2ZZQj2ILb1r_PJeSwakrXSReTRE)
para deixar os cantos do ícone mais redondos ou mais quadrados:
- Bloquear/Desbloquear: clique no ícone
para ativar ou desativar o mesmo raio para todos os cantos. - Raio: insira o raio dos cantos no campo.
Adicionar e ajustar uma sombra para o ícone
Adicione uma sombra para dar ao seu ícone um efeito 3D interessante.
Clique na aba
Sombra ![](https://lh6.googleusercontent.com/fEcEKoTFuyDWhZWD9jmOGewH_x91zQ-GjMvakTpJtU2RgQMpMv-SbqZ4yX53BLxjmKVZ6vI_EiX6bQawPdut8wcATYmgxeLJDp8IOV4jtMMC2RvssvG-bafOW4oVKZcOMOSsMZ3knEUFR7ZFBMF8LwQ)
para adicionar e ajustar uma sombra com as opções abaixo:
- Ativar sombra: clique na alavanca para ativar ou desativar a sombra:
- Ângulo: insira o ângulo na caixa de texto.
- Distância: arraste o slider para aumentar ou diminuir a distância entre o ícone e a sombra.
- Tamanho: use o slider para ajustar o tamanho da sombra.
- Borrado: arraste o slider para ajustar o desfoque da sombra.
- Opacidade e cor: clique na caixa de cores para selecionar uma cor para a caixa de sombra e arraste o slider para aumentar ou diminuir a opacidade.
A caixa do menu contém seus itens de menu. Usando os painéis de layout, design e background, você pode ajustar a posição e a aparência do contêiner do menu para que ele combine com o seu site.
Para personalizar a caixa do menu:
- Clique no ícone do menu no seu editor mobile.
- Clique em Editar menu.
- Clique no contêiner do menu.
- Escolha como você deseja ajustar o contêiner do menu com as opções abaixo:
Ajustar o layout do contêiner
Escolha o layout do contêiner para que combine com alinhamento do seu site e mantenha o menu compacto.
Clique no ícone
Layout ![](https://lh3.googleusercontent.com/_o63TCTCRJLLQGXjE3A037_Ewcw6NyoTwOCmtaYSCkiQ-u2XW00xPpyw3PUuq7gyYimF_Uw3SHZ5zdeCUAThh_PyIweKwILGTFEOkwv8aK-0mOQJNLRHa9B_LZJdEADO0BQvJb8y=s0)
e selecione um alinhamento para o seu menu:
- Tela cheia: o contêiner do menu é aberto em toda a tela.
- Esquerda: o contêiner do menu é aberto à esquerda da tela.
- Direita: o contêiner do menu é aberto à direita da tela.
Alterar o background do contêiner
Selecione uma cor ou gradiente para o background do seu contêiner. Você também pode selecionar uma imagem. Clique em Trocar background e escolha uma das seguintes opções:
- Cor ou gradiente: clique em Cor para selecionar uma cor que combine com o tema do seu site, ou se destaque com um gradiente sofisticado e bonito.
- Imagem: escolha uma imagem no Gerenciador de Mídia. Você pode usar imagens gratuitas disponíveis no Wix ou fazer upload das suas próprias imagens.
Personalizar o design do contêiner
Ajuste a sobreposição que aparece no resto do seu site quando o menu está aberto.
Clique no ícone
Design ![](https://lh3.googleusercontent.com/j-rXK3SQAEZoPrh7cdaR14ihsCQqEsLllKBidFTcrvvztKxDV-KXxP_BjTpNXNFmd-j-f7zbM_TsxRf3_6HB0Mfsxvow9tuHcYoCJbE5Bn5rvLLWaC4EFHvpkQw9kmMhLaUiL-V3=s0)
e use as configurações para personalizar a sobreposição:
- Cor: clique na caixa de cores para selecionar uma cor para a sobreposição.
- Opacidade: arraste o slider para aumentar ou diminuir a opacidade da sobreposição.
Observação: essa opção só estará disponível se você definir o alinhamento do contêiner à esquerda ou à direita da tela no painel Layout.
Ajuste a aparência e o design dos itens do menu (o texto do menu). Você pode personalizar configurações como a fonte, cor e espaçamento.
Para ajustar os itens do menu:
- Clique no ícone do menu no seu editor mobile.
- Clique em Editar menu.
- Clique no menu mobile.
- Escolha como deseja ajustar os itens do menu com as opções abaixo:
Ajuste o layout dos itens para personalizar ainda mais o menu e ajustá-lo ao alinhamento do site.
Clique no ícone
Layout ![](https://lh5.googleusercontent.com/HwMtpv6smqJW8yzu51JAUtJPMqpFheDAzOMPqdeeos3gcM51OC1B1M174-eJYKUvtKz0SUNyy1jZpZNAec3Zkv71w1xXdyQYUsoYR9u9IP33C7DGIAALw3IvAIjsp4-YR7507egzwapPnc-AH2ubxA)
e use as opções abaixo:
- Como o texto está alinhado?: selecione se o texto está alinhado à esquerda, à direita ou no centro do contêiner do menu.
- Como a seta do submenu está alinhada?: selecione se a seta do submenu deve estar alinhada à esquerda ou à direita do texto do item.
Há várias opções de design disponíveis para os itens do menu. Você pode personalizar a aparência dos itens em dois estados: Normal e Selecionado.
Clique no ícone
Design ![](https://lh3.googleusercontent.com/hR8BEz-f62R65peqFAO-cVKD20e2OIeG8geLYpHT4tPqWUGmDDPaQe6G7Babt9IpWBEIDWaaVA9Deaq3KXw4p0B45o1seQdi0kVpR2101gH2Rsetpfv_WBwrpq4JiX9ViS-HpZ_hKYc9y7iD05jSVg)
e selecione a aba
Normal ou
Selecionado para personalizar os estados:
- Normal:
- Cor e opacidade
: clique nas caixas de cores para selecionar uma cor e arraste os sliders para aumentar ou diminuir a opacidade do background do menu e do submenu e do background da seta do submenu. - Borda
:
- Opacidade e cor: clique na caixa de cores para selecionar uma cor para sua borda e arraste o slider para aumentar ou diminuir a opacidade.
- Estilo da borda: selecione se deseja que a borda seja exibida em todos os lados, apenas na parte inferior ou que não seja exibida.
- Sombra
:
- Ativar sombra: clique na alavanca para ativar ou desativar a sombra:
- Ângulo: insira o ângulo na caixa de texto.
- Distância: arraste o slider para aumentar ou diminuir a distância entre o menu e a sombra.
- Tamanho: use o slider para ajustar o tamanho da sombra.
- Borrado: arraste o slider para ajustar o desfoque da sombra.
- Opacidade e cor: clique na caixa de cores para selecionar uma cor para a caixa de sombra e arraste o slider para aumentar ou diminuir a opacidade.
- Texto
: use as opções abaixo para personalizar o menu e os itens do submenu:
- Tema: escolha um tema de texto no menu dropdown.
- Fonte: selecione uma fonte para seus itens de menu no menu dropdown.
- Tamanho da fonte: arraste o slider para aumentar ou diminuir o tamanho da fonte.
- Formatação: adicione um efeito de negrito ou itálico ao seu texto.
- Cor: clique na caixa de cores para selecionar uma cor para o seu texto.
- Espaçamento
: arraste os sliders para aumentar ou diminuir o deslocamento dos itens de menu e submenu.
- Selecionado:
- Cor e opacidade
: clique nas caixas de cores para selecionar uma cor e arraste o slider para aumentar ou diminuir a opacidade do menu e do background do submenu. - Texto
: clique na caixa de cores para selecionar uma cor para os itens de menu e submenu.