Editor Wix: adicionar e configurar uma caixa interativa
5 min de leitura
Neste artigo
- Etapa 1 | Adicione uma caixa interativa ao seu site
- Etapa 2 | Adicione elementos à sua caixa interativa
- Etapa 3 | Personalize o design da caixa
- Etapa 4 | Adicione um efeito à sua caixa interativa
Adicione uma caixa interativa ao seu site para criar um efeito interativo legal para os visitantes do seu site.
As caixas interativas mudam quando os visitantes passam o mouse sobre elas para revelar diferentes elementos e conteúdo. Você também pode adicionar uma animação aos elementos para impressionar ainda mais os visitantes e incentivá-los a continuar explorando seu site.
Etapa 1 | Adicione uma caixa interativa ao seu site
Adicione uma caixa interativa para começar a criar páginas atraentes. Existem muitos templates divertidos e coloridos disponíveis, para que você possa escolher um que combine com o visual e o tema do seu site.
Para adicionar uma caixa interativa:
- Vá para o seu editor.
- Clique em Elementos
no lado esquerdo do editor.
- Clique em Interativo.
- Clique em Caixas interativas.
- Clique ou arraste a caixa escolhida para adicioná-la à página.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2d3f30b2-74a7-4aec-8ef7-67de4fff5318/2023/05/11/c0384dcc-e365-4531-8e86-0138f1460fec/178e41ea-3202-485c-ace1-a09e89502e79.png)
Etapa 2 | Adicione elementos à sua caixa interativa
Adicione elementos à sua caixa para exibir informações e conteúdo relevantes para seus visitantes. Você pode adicionar elementos diferentes para o modo Normal e Ao passar o mouse, ou ambos.
Para adicionar um elemento a ambas as visualizações, basta adicioná-lo no modo Normal. Para exibir apenas um elemento no modo Normal, adicione-o e oculte-o no modo Ao passar o mouse.
Para exibir um elemento apenas ao passar o mouse, basta adicioná-lo no modo Ao passar o mouse.
Para adicionar elementos à sua caixa interativa:
- Clique na caixa interativa.
- Clique na aba Normal ou Ao passar o mouse, dependendo de qual modo você gostaria de adicionar o elemento:
- Normal:
- Clique em Elementos no lado esquerdo do editor.
- Clique ou arraste o elemento escolhido para adicioná-lo à sua caixa.
- Ao passar o mouse:
- Clique em Adicionar ao passar o mouse no lado esquerdo do editor.
- Clique ou arraste o elemento escolhido para adicioná-lo à caixa.
- Normal:
![Captura de tela da caixa ao passar o mouse no Editor Wix com as opções normal ou ao passar o mouse destacadas.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/10/16/899f0b95-0355-4b4a-bac4-6f5dd1e67274/04f81be8-2185-4c1d-bd5c-62fb98a07418.png)
Observação:
Se você adicionar um botão na visualização Normal, não poderá editar o design no modo Ao passar o mouse. Como alternativa, você pode ocultar o botão na visualização Ao passar o mouse e, em seguida, adicioná-lo novamente e adaptá-lo como desejar.
Etapa 3 | Personalize o design da caixa
Você pode personalizar a caixa interativa para que ela fique exatamente do jeito que você quer. Dependendo do design da caixa que você selecionar, você pode ajustar configurações como preenchimento, borda e cantos para que funcionem para o seu site.
Para personalizar o design da caixa:
- Clique no ícone Design
.
- Clique em Personalizar design.
- (Opcional) Selecione um design predefinido diferente na parte superior.
- Escolha entre as seguintes abas para ajustar cada configuração:
- Cor e opacidade: escolha uma cor de background e arraste o slider para ajustar sua opacidade.
- Borda: ajuste a cor, a opacidade e a largura da borda.
- Cantos: use as caixas para ajustar o tamanho do pixel dos cantos da caixa.
- Sombra: ative ou desative uma sombra e ajuste o ângulo, a distância, o tamanho do borrado, a cor e a opacidade.
![Captura de tela do painel de design da caixa dinâmica. O slider de cor e opacidade aparece.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/08/24/d5a6054f-ea76-4297-a5a4-ba4833e6056f/c4e594c1-fe69-4f18-b030-f62f97421277.png)
Etapa 4 | Adicione um efeito à sua caixa interativa
Os efeitos dão vida às suas caixas interativas. Com uma variedade de opções disponíveis, você pode criar um efeito atraente e divertido.
Você também pode personalizar o efeito para que ele combine perfeitamente com o seu site e caixa interativa.
![Painel de configuração de efeitos da caixa dinâmica no Editor Wix.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/08/24/33233dec-204f-4726-8a42-ef0649bbb624/f3e4e57a-e7ae-4b04-9c30-31f49ceccdb9.png)
Para adicionar e personalizar um efeito:
- Clique na caixa interativa.
- Clique na aba Ao passar o mouse.
- Clique em Escolher efeito.
- Clique em Personalizar para ajustar as configurações do efeito.
Clique em uma das opções abaixo para saber mais sobre como você pode personalizar cada efeito.
Aumentar
Diminuir
Inclinar
Girar
Combo