header-logo
Confira como usar o Wix para construir seu site e negócio.
Personalize e gerencie seu site com os recursos do Wix.
Gerencie assinaturas, planos e faturas.
Administre seu negócio e conecte-se com os membros.
Compre, conecte ou transfira um domínio para o seu site.
Expanda seu negócio e presença online.
Aumente sua visibilidade com recursos de SEO e marketing.
Acesse recursos avançados e otimize sua produtividade.
Encontre soluções, problemas conhecidos ou contate-nos.
placeholder-preview-image
Domine novas habilidades com nossos cursos e tutoriais.
Confira nossas dicas de web design, marketing e mais.
Aumente o tráfego orgânico vindo dos motores de busca.
Desenvolva um site único com a nossa plataforma full-stack.
Alcance seus objetivos com a ajuda de um especialista.
placeholder-preview-image
  1. Início
  2. Wix Studio, Parceiros e empresas
  3. Wix Studio
  4. Use o Editor do Wix Studio
  5. Design no Editor do Wix Studio
  6. Ajuste layouts e posicionamento
  7. Editor do Wix Studio: criar elementos e seções sticky

Editor do Wix Studio: criar elementos e seções sticky

3 min
Neste artigo
  • Aplicar a posição sticky a um elemento ou seção
  • Remover a posição sticky
  • Tutorial úteis
Faça com que uma seção ou elemento "grude" na página enquanto os visitantes rolam para cima e para baixo. Quando o elemento ou seção atinge a janela de visualização do visitante, ele gruda na parte superior, na parte inferior ou em ambos. Você pode definir o recuo, que é a distância da parte superior ou inferior.
Vá para a Wix Studio Academy (em inglês) para conferir webinars, tutoriais e cursos adicionais do Wix Studio.
Você sabia?
Você pode adicionar um efeito de rolagem no cabeçalho para alterar a aparência enquanto os visitantes percorrem pela página. Por exemplo, faça com que o cabeçalho mude de cor durante a rolagem ou mova-o para fora do caminho para ajudar os visitantes a se concentrar na página.

Aplicar a posição sticky a um elemento ou seção

  1. Selecione a seção ou elemento relevante.
  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. Role para baixo até Posição.
  2. Selecione Sticky no dropdown Tipo de posição.
  3. Escolha onde a seção/elemento adere: Parte superior, Parte inferior, ou Parte superior e inferior.
  4. (Opcional) Insira um valor de recuo para criar espaço acima ou abaixo.
Um elemento de texto definido para aderir à parte superior com um recuo de 5% da parte superior.
Observação sobre a ordem do DOM:
Por definição, a ordem do DOM da página, incluindo a ordem da seção, é organizada automaticamente. Se você quiser que uma seção "sticky" apareça acima de outras no DOM, clique com o botão direito do mouse na seção, selecione Organizar e Trazer para frente.

Remover a posição sticky

Você pode reverter elementos e seções para a posição padrão quando quiser. Isso significa que eles não "grudam" mais na tela ao chegar à janela de visualização. Eles permanecem em sua posição.

Para remover a posição sticky:

  1. Selecione a seção ou elemento relevante.
  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. Role para baixo até Posição.
  2. Selecione Padrão no dropdown Tipo de posição.
Captura de tela de um elemento de pilha na tela, ao lado do painel Inspetor. O tipo de posição na pilha é definido como padrão

Tutorial úteis

Existem muitos efeitos interessantes que você pode criar com elementos e seções sticky. Confira esses vídeos da Wix Studio Academy (em inglês) e explore suas opções:

Esse artigo foi útil?

|
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
Começar
Neste artigo
  • Aplicar a posição sticky a um elemento ou seção
  • Remover a posição sticky
  • Tutorial úteis

Esse artigo foi útil?

|
Uma captura de tela da abertura do painel Inspetor no Editor do Wix Studio.
Um elemento de texto definido para aderir à parte superior com um recuo de 5% da parte superior.
Uma captura de tela da abertura do painel Inspetor no Editor do Wix Studio.
Captura de tela de um elemento de pilha na tela, ao lado do painel Inspetor. O tipo de posição na pilha é definido como padrão