Editor do Wix Studio: adicionar efeitos de rolagem no cabeçalho

6 min de leitura

Melhore o comportamento do cabeçalho durante a rolagem ao implementar efeitos de transição suaves. Você pode fazer com que o cabeçalho desapareça ou deslize para fora da sua visualização enquanto os visitantes navegam pela página. Você também pode ajustar a cor e a opacidade de preenchimento para manter a visibilidade sem que isso tire a sua atenção. 

Essa abordagem não apenas melhora a experiência do visitante do site, como também mantém o foco no conteúdo, garantindo que os sites dos seus clientes tenham uma aparência refinada e profissional.
Exemplo de um site construído no Editor do Wix Studio, mostrando que o cabeçalho está bloqueado e muda para verde à medida que os visitantes rolam para baixo

Adicionar e configurar um efeito de rolagem no cabeçalho

Escolha como você deseja que o cabeçalho se comporte, dependendo do quanto ele deve ser visível. Você pode congelar o cabeçalho, por exemplo, para que fique sempre visível, ou fazer com que ele saia do caminho para que os visitantes possam se concentrar no conteúdo da página.
Dica:
O efeito de rolagem só se aplica à página em que você está trabalhando no momento.

Para aplicar um efeito de rolagem ao cabeçalho:

  1. Selecione o cabeçalho.
  2. Clique no ícone Abrir inspetor  no canto superior direito do editor.
Uma captura de tela da abertura do painel Inspetor no Editor do Wix Studio.
  1. Em Configurações do cabeçalho, escolha um Efeito de rolagem e configure-o: 
Um cabeçalho e o painel Inspetor no Editor do Wix Studio, adicionando o efeito de rolagem

Alterar a cor do background do cabeçalho durante a rolagem

Junto com o efeito de rolagem que você escolher para o cabeçalho, você pode fazer com que ele mude de cor quando os visitantes rolam para baixo. Isso chama ainda mais atenção para o cabeçalho, garantindo que os visitantes não o percam de vista.
Dica:
Essa configuração se aplica a todas as páginas onde o cabeçalho aparece.

Para alterar a cor do background do cabeçalho durante a rolagem:

  1. Selecione o cabeçalho.
  2. Clique no ícone Abrir inspetor  no canto superior direito do editor.
Uma captura de tela da abertura do painel Inspetor no Editor do Wix Studio.
  1. Em Design, ative a alavanca Cor ao rolar .
  2. Clique na caixa de cores para escolher uma cor diferente.
  3. (Opcional) Arraste o slider para alterar a opacidade. 
Um cabeçalho e o painel Inspetor no Editor do Wix Studio, ativando a alavanca

Remover um efeito de rolagem

Você pode remover um efeito de rolagem que adicionou anteriormente ao cabeçalho quando quiser.

Para remover o efeito de rolagem:

  1. Selecione o cabeçalho.
  2. Clique no ícone Abrir inspetor  no canto superior direito do editor.
Uma captura de tela da abertura do painel Inspetor no Editor do Wix Studio.
  1. Escolha o que você deseja desativar:
    • Efeito de rolagem: selecione a opção Rolar com site no dropdown.
    • Cor ao rolar: desative a alavanca para remover esse efeito.
Uma captura de tela destacando as configurações específicas necessárias para remover o efeito de rolagem do cabeçalho

Configurações avançadas do cabeçalho

Ao ativar configurações avançadas no Inspetor, você obtém um controle mais detalhado do efeito de rolagem do cabeçalho. Essa visualização permite que você ajuste o tipo de posição (por exemplo: fixo, sticky) e a transição (por exemplo: mover, desaparecer) separadamente, criando seu próprio efeito em vez de nossas predefinições.
Observação:
Por definição, os cabeçalhos fixados se sobrepõem com a próxima seção. Se você não quiser que o cabeçalho se sobreponha à próxima seção, mas ainda assim quiser que ele seja fixado na tela, você pode torná-lo "sticky".  

Para ativar as configurações avançadas:

  1. Selecione o cabeçalho.
  2. Clique no ícone Abrir inspetor  no canto superior direito do editor.
Uma captura de tela da abertura do painel Inspetor no Editor do Wix Studio.
  1. Clique no ícone Mais ações  ao lado de Tamanho.
  2. Ative a alavanca Configurações avançadas.
  3. Ajuste o efeito de rolagem do cabeçalho em Configurações do cabeçalho:
    • Selecione um Tipo de posição (por exemplo: fixo, sticky).
    • Adicione um Recuo para criar uma distância entre o cabeçalho e a parte superior da página.
    • Ative a alavanca Transição para adicionar o efeito Mover ou Desaparecer.
    • Adicione uma Cor ao rolar (em Design).
Um GIF mostrando a alavanca de configurações avançadas sendo ativada para um cabeçalho.