Editor do Wix Studio: criar elementos e seções sticky
3 min de leitura
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.
Neste artigo, saiba mais sobre como:
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
- Selecione a seção ou elemento relevante.
- Clique no ícone Abrir inspetor
no canto superior direito do editor.
- Role para baixo até Posição.
- Selecione Sticky no dropdown Tipo de posição.
- Escolha onde a seção/elemento adere: Parte superior, Parte inferior, ou Parte superior e inferior.
- (Opcional) Insira um valor de recuo para criar espaço acima ou abaixo.
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:
- Selecione a seção ou elemento relevante.
- Clique no ícone Abrir inspetor no canto superior direito do editor.
- Role para baixo até Posição.
- Selecione Padrão no dropdown Tipo de posiçã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?
|