Editor Wix: criar um menu de janela pop-up de tela cheia
5 min de leitura
Use o elemento janela para criar um incrível menu pop-up de tela cheia. Quando os visitantes clicam no botão "Menu", ele abre sobre o conteúdo do seu site, como no exemplo abaixo:
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2d3f30b2-74a7-4aec-8ef7-67de4fff5318/2022/03/09/bff7b990-c473-4842-b067-8fabd0a960a4/c23e459a-5f76-4e99-bc45-d57f54365c0e.gif)
Etapa 1 | Adicione uma janela ao seu site
Comece adicionando qualquer janela do painel Elementos ao seu site. Você irá refazer o design mais tarde.
Para adicionar uma janela:
- Clique em Elementos
no lado esquerdo do Editor.
- Selecione Interativo.
- Selecione uma janela para adicioná-la ao seu site.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2d3f30b2-74a7-4aec-8ef7-67de4fff5318/2023/04/02/bbf3fc2e-fb1f-48b8-98cd-51e222b1ba00/f0f6db6f-6cae-4db2-b80f-a88673c8bb44.png)
Etapa 2 | Configure o menu da janela
Após adicionar uma janela, configure-a para que ela não seja exibida automaticamente toda vez que os visitantes acessarem seu site. Depois, faça o design da sua janela para que fique como você quiser e adicione um menu vertical.
Para configurar a janela:
- Clique na janela no seu Editor.
- Clique no ícone Configurações
.
- Renomeie sua janela para algo reconhecível, como "Menu".
- Selecione Não em Mostrar janela automaticamente.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2d3f30b2-74a7-4aec-8ef7-67de4fff5318/2022/03/09/0bb4ead3-d0df-47cb-a311-072351e3b8d9/527fc2ee-0285-4e09-b14a-9c8f086057d5.png)
- Exclua todos os elementos dentro da janela. Não exclua o ícone "X".
- Adicione um menu vertical à janela.
- Faça o design do seu menu. Recomendamos que suas fontes do menu sejam grandes e centralizadas.
- Quando estiver tudo pronto, clique em Sair do modo na parte superior.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2d3f30b2-74a7-4aec-8ef7-67de4fff5318/2022/03/09/59d193d1-c83f-4756-ba57-d51a5ba67ea2/3773801e-f1bb-4c58-81e1-edfb7ba5daae.png)
Dica:
Você também pode personalizar o background da janela e a sobreposição do background para combinar com o seu site. Deixe o background um pouco transparente para um efeito legal!
Etapa 3 | Adicione um botão para abrir o menu
Agora que sua janela e menu estão prontos, adicione o botão que os visitantes clicam para acessar o menu. Em seguida, vincule o botão à janela.
Para adicionar um botão:
- Clique em Elementos
no lado esquerdo do Editor.
- Selecione Decorativo.
- Selecione Formas básicas.
- Clique em Mais formas básicas.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2d3f30b2-74a7-4aec-8ef7-67de4fff5318/2023/04/02/d776301a-fb98-4e4e-a465-b1810715ea38/155f58e9-021f-4d99-b296-8f067baa2fff.png)
- Digite "menu" na barra de busca e pressione Enter.
- Selecione um design de botão de menu e clique em Adicionar à página.
Dica: coloque o botão de menu em um local de destaque no seu site, como o cabeçalho. - Selecione o botão de menu no seu Editor.
- (Opcional) Clique no ícone Design
para fazer o design do seu botão do menu.
- Clique no ícone Link
.
- Selecione Janela à esquerda.
- Escolha sua janela no menu dropdown.
- Clique em OK.
Dicas:
- Coloque o botão do menu em um local de destaque em seu site. Esse local pode ser o cabeçalho ou você pode preferir usar o recurso Posição fixa recurso para fixá-la na parte superior do seu site. Se o botão do menu não for colocado no cabeçalho, então certifique-se de configurá-lo para que seja exibido em todas as páginas.
- Você também pode criar seu próprio botão do menu. Pode ser um botão de texto, botão de ícone ou uma forma diferente; você escolhe! Veja alguns exemplos abaixo:
Etapa 4 | Oculte o botão do seu site mobile
Oculte o botão que você acabou de criar no seu site mobile, uma vez que o menu de tela cheia já é predefinido.
Para ocultar o botão:
- Acesse seu Editor mobile.
- Clique no botão de menu que está vinculado à sua janela.
- Clique no ícone Ocultar
.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2d3f30b2-74a7-4aec-8ef7-67de4fff5318/2022/03/09/c49840fb-db0a-4241-9359-f661b96afb2e/e4052c7a-d524-4784-912e-235ff57aa0d6.png)
Esse artigo foi útil?
|