Divi Sticky Options: Fixe qualquer elemento na tela – Atualização Divi 4.6

Divi Sticky Options é o novo recurso presente na atualização do tema Divi 4.6, que permite fixar qualquer elemento na janela de visualização do navegador enquanto você rola a página para cima ou para baixo.
Com isso você poderá fixar formulários de captura flutuantes, botões fixos de CTA e muitas outras opções criativas.

Com ele você também pode controlar as transições de design de cada elemento conforme seu visitante role para cima ou para baixo em sua página, assim poderá alterar os estilos de forma fácil e rápida!

Como Funciona o Divi Sticky Options

Temos diversas opções que podemos criar com as opções desse novo recurso. Dê uma olhada em alguns exemplos criativos enquanto rolamos a página para cima e para baixo:

Deixar na base, no topo ou em ambos

Essa funcionalidade é muito simples. Basta ir em Advanced > Scroll Effects > Sticky Position e escolher uma das posições disponíveis:

Para ficar em baixo (Stick To Bottom)

Conforme você rola pra cima, essa opção deixará seu elemento fixo na parte inferior.
Assim que a parte inferior do elemento atingir a parte inferior da janela de visualização do navegador, ele se fixará na parte inferior e permanecerá lá enquanto você rola. Podemos usar formulários ou frases de CTA.

Para ficar no topo (Stick To Top)

Conforme você rola pra baixo, essa opção deixará seu elemento fixo na parte superior.
Uma vez que o topo do elemento atinge o topo da janela de visualização do navegador, ele irá aderir ao topo e permanecer lá enquanto você rola. Isso funciona muito bem para menus de cabeçalho fixos.

Deixar na parte superior e inferior (Stick To Top And Bottom)

Isso colará o elemento na parte superior da janela de visualização do navegador conforme você rola para baixo, passando pelo elemento, e fará com que o elemento fixe na parte inferior da janela de visualização do navegador conforme você rola para cima, passando pelo elemento.

Ajuste e transição de estilo

Você também pode dar um estilo exclusivo aos elementos no momento do “sticky“. Depois que ativar uma das opções do Divi Sticky Options para um elemento, aparecerá novas opções de estado como acontece com o estado “hover”. Os elementos podem ter dois estilos diferentes: Um estilo fixo e um estilo padrão.

Assim que o elemento se torna aderente, seu design realizará a transição de seu estilo padrão para seu estilo aderente.

Por exemplo, no vídeo abaixo, habilitei a edição do estilo stick para a opção de cor de fundo do menu. Em seguida, atribuí uma cor de fundo laranja para o estilo aderente e uma cor de fundo transparente para o estilo padrão. Quando eu rolo para baixo e o menu fica fixo, a cor de fundo muda para laranja. Essa cor de fundo laranja garante que os links do menu permaneçam legíveis enquanto eu rolar por uma variedade de elementos diferentes.

Para ativar o ajuste de estilo aderente, clique no novo ícone aderente acima de qualquer configuração de design. Você pode então ajustar o estilo padrão e o estilo fixo independentemente. Assim que o elemento se tornar fixo na tela, ele assumirá seu estilo escolhido.

Por exemplo, você pode fazer a transição da cor de fundo de um cabeçalho fixo de transparente para sólido. Você pode reduzir a altura do estado fixo do menu para que ele encolha e ocupe menos espaço à medida que você rola. Não há limite para o que você pode fazer porque cada configuração de design pode ser ajustada para dar aos elementos aderentes estilos completamente únicos.

Como aplicar um limite fixo.

Você também pode atribuir aos elementos fixo um limite para eles. Fora do limite escolhido, os elementos não permanecerão mais fixo. Por exemplo, no vídeo abaixo, atribuí a seção como limite para este menu da barra lateral flutuante. Isso significa que ele ficará fixo quando o menu chegar ao topo da janela de visualização do navegador, mas deixará de ser fixo quando eu sair da seção. Este menu fixo é relevante apenas para os itens desta seção, portanto, atribuir um limite fixo faz sentido.

Divi Sticky Options já está disponível

As novas opções do Divi Sticky Options abrem muitas novas possibilidades para os sites. Ele não apenas permite que você crie facilmente uma ampla variedade de cabeçalhos e menus fixos, mas os elementos fixos também podem ser combinados de maneiras criativas para fazer alguns designs novos realmente interessantes. O Divi Sticky Options já está disponível, então baixe o Divi e dê uma olhada.