Um guia para entender e usar a posição fixa em Divi

A propriedade de posição fixa é um tipo de posição crucial para aprender a usar corretamente. Elementos fixos são importantes para melhorar a experiência do usuário em seu site. Cabeçalhos fixos permanecem visíveis ao rolar por uma página da web, tornando mais fácil para os usuários navegar no site. As barras laterais corrigidas mantêm importantes CTAs e opções de email visíveis, aumentando as conversões. E o mesmo vale para barras de notificação fixas, pop-ups e muitos outros. Assim que entendermos como funciona a posição fixa e como usá-la adequadamente no Divi, teremos uma ferramenta de design poderosa para levar nossos sites Divi a um novo patamar.

Nesta postagem, vamos cobrir:

• Uma Visão Geral dos Quatro Tipos de Posicionamento da Divi
• Como a posição fixa "posiciona" um elemento em Divi
• Usando as opções de posição fixa em Divi
• Dicas para manter em mente ao usar a posição fixa
• 6 maneiras úteis de usar a posição fixa em Divi

Confira!

Visão geral dos quatro tipos de posicionamento da Divi

A posição fixa é um dos quatro tipos de posição disponíveis nas Opções de posição do Divi. Aqui está uma visão geral rápida de cada um abaixo.

Estático (padrão)

Os elementos estáticos não são tecnicamente "posicionados", pois permanecem com o fluxo normal ou a ordem dos elementos na página e não respondem às propriedades superior, direita, inferior e esquerda como outros elementos posicionados (é por isso que não offsets estão disponíveis em Divi para elementos na posição estática / padrão). No Divi, quando escolhemos a posição padrão para um módulo, estamos escolhendo a posição estática. Também vale a pena mencionar que alguns elementos em Divi (como linhas e seções) terão uma posição relativa por padrão (não a posição estática).

Relativo

Os elementos posicionados relativamente são como elementos estáticos, pois seguem o fluxo normal da página. A principal diferença é que os elementos relativamente posicionados podem ser posicionados usando as propriedades superior, inferior, esquerda e direita. Além disso, ao contrário dos elementos estáticos, eles também podem ser posicionados usando a propriedade Z Index.

Para mais informações, consulte nosso guia para compreender e usar a posição relativa em Divi.

Absoluto

Um elemento posicionado absolutamente sai do fluxo normal do documento e, portanto, nenhum espaço real é criado na página para o elemento. Podemos pensar nisso como um elemento que flutua sobre os outros elementos da página que ocupam espaço real. Ele será posicionado em relação ao contêiner pai posicionado mais próximo.

Para mais informações, consulte nosso guia para compreender e usar a posição absoluta em Divi.

Fixo

Como a posição absoluta, os elementos com a posição fixa sairão do fluxo normal da página e não terão nenhum espaço real criado dentro da página. A principal diferença entre absoluto e fixo é que a posição fixa é relativa à janela do navegador ou viewport. Em outras palavras, não importa onde o elemento esteja dentro do fluxo normal da página, uma vez que recebe uma posição fixa, sua posição agora estará diretamente relacionada à janela do navegador. Podemos usar as propriedades superior, inferior, esquerda e direita para posicionar o elemento na janela de visualização. Como os elementos fixos costumam pairar atrás ou na frente de outros elementos na página, o Z Index ajudará a ordenar os elementos fixos acima dos outros.

NOTA: Existe outro tipo de posicionamento em CSS chamado pegajoso. Um elemento aderente se comporta como um elemento relativamente posicionado até que rolarmos para seu contêiner (em algum ponto determinado pelo valor superior). Em seguida, o elemento se torna fixo (ou preso) até que o usuário role até o final do contêiner. No entanto, a posição pegajosa pode ser um pouco imprevisível, pois outros fatores podem inibir a funcionalidade. O posicionamento fixo será incorporado ao Divi em um futuro próximo.

Como a posição fixa “posiciona” um elemento em Divi

Conforme mencionado na visão geral, o tipo de posição fixa é semelhante à posição absoluta porque o elemento sai do fluxo normal do documento (o HTML na página). Sair do fluxo do documento significa que o elemento não deixará para trás o espaço real onde estava originalmente localizado na página. Aqui está uma ilustração de um módulo com uma posição relativa sendo alterada para uma posição fixa. Observe como a área originalmente criada / ocupada na coluna desapareceu e o módulo agora está fixo no canto superior esquerdo da janela do navegador.

A grande diferença entre fixo e absoluto é que, ao contrário da posição absoluta que é relativa ao seu contêiner pai, a posição fixa é relativa à janela do navegador ou janela de visualização. É por isso que os elementos fixos dizem "visível" quando o usuário rola a página para baixo e os elementos posicionados de forma absoluta não.

Aqui está uma ilustração de como as três posições (relativa, absoluta e fixa) funcionam ao rolar a página para baixo. Observe que o módulo fixo permanece no lugar (posicionado em relação ao navegador) enquanto o usuário rola.

Usando as opções de posição fixa em Divi

No Divi, você pode dar a qualquer elemento uma posição fixa selecionando a opção de posição fixa no grupo de opções Posição de alternância na guia Avançado. Você também encontrará as opções de posição fixa adicionais (localização, deslocamentos, índice z) uma vez que a posição relativa tenha sido selecionada.

Ajustando a localização da base da posição fixa

Depois de selecionar a posição fixa, você pode escolher um local de base usando a interface de localização visual. Dependendo da localização da base selecionada, novos controles de deslocamento X e Y ficarão disponíveis.

Usando Offsets com a Posição Fixa

Os controles de deslocamento vertical e horizontal permitem que você ajuste ainda mais a localização de base do seu elemento fixo em seu eixo de localização.

Os valores Offset Origin e Offset funcionarão juntos para posicionar nosso elemento em qualquer lugar que quisermos na janela de visualização do navegador. Neste exemplo, temos um módulo que possui uma posição fixa, uma origem de deslocamento superior esquerdo, um deslocamento vertical de 50px e um deslocamento horizontal de 50px. Observe como os valores de deslocamento irão mover o elemento para longe da origem do deslocamento horizontalmente e / ou verticalmente (para longe do canto superior esquerdo do navegador).

Ao usar valores de deslocamento horizontal e vertical em Divi (como propriedades superior, inferior, esquerda e direita em CSS) para um elemento fixo, é importante lembrar que esses valores posicionarão o elemento em relação à janela de visualização do navegador. A propriedade Z Index também é útil com um elemento fixo. Como na maioria das vezes você deseja que esses elementos fixos fiquem na frente dos outros elementos na página, você precisará atribuir a eles um valor de Índice Z alto (como 9999).

Use âncoras arrastáveis ​​para reposicionar elementos fixos na página

Quando você altera a posição de um elemento para Fixo, uma âncora arrastável aparecerá quando você passar o mouse sobre o elemento. Isso permite que você arraste o elemento para alterar sua posição. Conforme você reposiciona o elemento, seu deslocamento X e Y é ajustado nas configurações do módulo.

Algumas dicas para usar o posicionamento fixo

Ajustar elementos fixos para celular

Não se esqueça, você pode definir diferentes posições e deslocamentos em diferentes monitores de dispositivos para designs responsivos. Por exemplo, você pode querer um cabeçalho fixo no desktop, mas não no celular. E as barras laterais fixas fazem sentido para desktops, mas não são realmente possíveis em uma tela de telefone móvel. Para fazer a troca, você pode ajustar a opção de posição em Divi para Relativa no tablet e telefone. Isso o colocará de volta em sua posição original no fluxo do documento.

Criar espaço para elementos fixos

Como a posição fixa coloca os elementos fora do fluxo do documento, eles ficam acima do conteúdo da página. Portanto, se você não deseja que o elemento fixo oculte o conteúdo, será necessário criar espaço para o elemento fixo. Isso pode ser feito de várias maneiras, mas geralmente é feito adicionando preenchimento ou margem ao layout da página.

Um bom exemplo é uma barra lateral fixa. Se você quiser adicionar uma barra lateral fixa ao seu modelo de página no Divi, primeiro precisa se certificar de que a largura da área de conteúdo principal seja reduzida para criar o espaço necessário para a barra lateral fixa. Portanto, se você estiver usando uma seção para criar a barra lateral, poderá dar à seção uma posição fixa, uma altura de 100% e uma largura de 300 px.

Em seguida, você precisaria dar à outra seção que contém o módulo de conteúdo da postagem (a área de conteúdo principal da página) uma margem esquerda de 300 px para acomodar a largura da barra lateral no lado esquerdo da página.

Use um índice Z mais alto para elementos fixos

A menos que o elemento fixo tenha espaço adequado para ele em sua página, ele se sobreporá ao outro conteúdo da página. Na maioria dos casos, você desejará que o elemento fixo permaneça visível (no topo) enquanto colide com outros elementos na página durante a rolagem. Para fazer isso, você pode adicionar um índice Z superior ao seu elemento fixo para garantir que ele permaneça acima de todos os outros conteúdos no espaço Z. Se você não souber qual valor fornecer, você pode adicionar um grande número como 9999.

6 maneiras de usar a posição fixa

# 1 Cabeçalhos fixos

Um dos melhores usos das novas opções de posição fixa é a criação de cabeçalhos fixos. Usando o Divi Theme Builder, você pode construir um cabeçalho inteiramente personalizado e consertar toda a seção.

Postagem como fazer

Aqui está uma postagem sobre como construir um cabeçalho fixo no Divi:

• Como criar um cabeçalho fixo com as opções de posição da Divi

# 2 Barras de rodapé fixas

Assim como os cabeçalhos fixos, alguns sites também se beneficiam de rodapés ou barras de rodapé fixos. Isso permite que os usuários mantenham informações proeminentes em primeiro plano em um local mais sutil. Barras de rodapé fixas são ótimas para telefones celulares porque elas são muito parecidas com aqueles polegares ansiosos para clicar em um botão.

Postagens de instruções

Aqui estão algumas postagens sobre como construir uma barra de rodapé fixa no Divi:

• Como criar uma barra de rodapé fixa para o seu tema Divi
• Como criar barras de rodapé fixas móveis com Divi
• Como criar uma barra de contato móvel (fixa) na Divi

# 3 Barras laterais fixas / menus verticais

Barras laterais fixas mantêm itens como menus, opções de e-mail e CTAs prontamente disponíveis para os visitantes enquanto navegam em seu site. E se quiser, você pode adicionar overflow scroll à barra lateral fixa para ter uma boa barra lateral fixa rolável com muito conteúdo.

Postagens de instruções

Aqui está uma postagem sobre como construir uma barra lateral fixa no Divi:

• Como construir uma barra lateral fixa responsiva com links âncora de rolagem suave com Divi
• Como criar um menu de navegação vertical (fixo) para o seu site Divi

# 4 Botões Voltar ao Topo Fixos

Os botões Voltar ao Topo geralmente são fixados na parte inferior direita de um site, sempre disponíveis para os usuários clicarem para enviá-los de volta ao topo da página.

Aqui está uma postagem sobre como criar botões "voltar ao topo" fixos no Divi:

• Como criar adesivos personalizados (corrigidos) Voltar ao início Desenhos com Divi

# 5 Menus Fixos

A maioria dos menus que deslizam ou aparecem têm uma posição fixa. Eles também são ótimos para dispositivos móveis.

Aqui está uma postagem sobre como construir um menu fixo no Divi:

• Como criar um menu deslizante responsivo com o Divi's Theme Builder

# 6 Caixas de notificação fixas, frases de chamariz, opt-ins de e-mail, etc ...

Aqui está uma postagem sobre como construir uma caixa de notificação fixa no Divi:

• Como adicionar uma frase de chamariz deslizante que pode ser fechada a qualquer canto de seu modelo de página na Divi

Pensamentos finais

Você não irá muito longe no desenvolvimento da web antes de encontrar a necessidade de usar a posição fixa. Ele é usado em muitos elementos-chave que compõem um site. No Divi, a posição fixa está a apenas um clique de distância, mas é importante entender como funciona para usá-la bem. Esperançosamente, este artigo o ajudou a entender como usar melhor a posição fixa no Divi para que você possa levar seu próximo projeto a novas alturas.

Qual tem sido sua experiência com o tipo de posição fixa?

Estou ansioso para ouvir de você nos comentários.

Saúde!