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:

  1. Vá para o seu editor.
  2. Clique em Elementos  no lado esquerdo do editor.
  3. Clique em Interativo.
  4. Clique em Caixas interativas.
  5. Clique ou arraste a caixa escolhida para adicioná-la à página.

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:

  1. Clique na caixa interativa.
  2. 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.
Captura de tela da caixa ao passar o mouse no Editor Wix com as opções normal ou ao passar o mouse destacadas.
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:

  1. Clique no ícone Design .
  2. Clique em Personalizar design.
  3. (Opcional) Selecione um design predefinido diferente na parte superior.
  4. 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.

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.

Para adicionar e personalizar um efeito:

  1. Clique na caixa interativa.
  2. Clique na aba Ao passar o mouse.
  3. Clique em Escolher efeito.
  4. 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.