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

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

Maicon Ramos

Por Maicon Ramos

31/08/2020
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.

Coment√°rios

0 coment√°rios
Enviar um coment√°rio

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *