Editor Wix: criar um menu de janela pop-up de tela cheia
4 min de leitura
Neste artigo
- Etapa 1 | Adicione uma janela ao seu site
- Etapa 2 | Configure o menu da janela
- Etapa 3 | Adicione um botão para abrir o menu
- Etapa 4 | Oculte o botão do seu site mobile
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.
![Um GIF de um usuário clicando no botão Menu que abre um menu pop-up de tela cheia em um site.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/09/19/76693f1a-456f-4460-845b-ac1d2dd49ffe.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:
- Vá para o seu editor.
- Clique em Elementos
no lado esquerdo do editor.
- Clique em Interativo.
- Selecione uma janela para adicioná-la ao seu site.
![Uma captura de tela da seleção de uma janela no Editor Wix](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9dcc39dd-da6f-4c38-b1c3-ee79d33f39d5/2023/03/31/baaf168e-fa42-41ae-aeef-ddf254727cae/ca2496c9-aa08-4729-bf4c-451a60681452.jpg)
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.
![Uma captura de tela das configurações da janela no editor.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/07/29/6b33e7d7-2eeb-47dc-8d6f-6197b033e065/d6fdfa10-481b-49a1-bc3d-4cd299f3fc64.png)
- Exclua todos os elementos dentro da janela. Não exclua o ícone "X".
- Adicione um menu vertical à janela.
- Personalize 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.
![Uma captura de tela de um menu em cima de uma janela no editor.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/07/29/631e69fa-88d0-4d4c-89a3-1fd7d9541ee5/66702671-59c7-48cd-b953-0a6825b4c4ec.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.
![Uma captura de tela da seleção de Formas básicas no Editor Wix](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9dcc39dd-da6f-4c38-b1c3-ee79d33f39d5/2023/03/31/d6bd0720-edca-4214-8923-48d07ace90de/67e43b81-931f-412a-a1dd-2fe524e1620a.jpg)
- Digite "menu" na barra de busca e pressione Enter.
- Selecione um design do botão do menu e clique em Adicionar à página.
- Clique no botão do 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 de menu em um local de destaque no seu site. Pode ser no cabeçalho ou, se preferir, use a Posição fixa para fixá-lo na parte superior do seu site. Se o botão do menu não estiver no cabeçalho, certifique-se de configurá-lo para mostrar 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, a escolha é sua. Confira 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
.
![Uma captura de tela da opção de ocultar elemento para uma janela no editor mobile.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/07/29/3110820f-a0ac-4cb3-a43a-17e08abb7c0b/ce4933b7-a2cd-43ff-b586-8777535011cd.png)