Como definir a posição do elemento em GemPages

O que significa “posição do elemento” em web design?

No web design, posição do elemento refere-se a onde um objeto (como um botão, imagem ou bloco de texto) aparece em relação ao seu container pai ou de layout geral. Entender como diferentes tipos de posicionamento funcionam permite que você crie designs flexíveis e perfeitos em pixels.

Por exemplo:
Um botão colocado dentro de um coluna num linha pode ser deslocado dentro dessa coluna, mas somente dentro de seu contêiner, a menos que o posicionamento avançado seja aplicado..

Como definir a posição do elemento em GemPages

• Margem: Move o elemento e também desloca elementos próximos para manter o espaçamento.
• Posição: Move o elemento sem afetar as posições de outros elementos.

Exemplos para cada caso serão fornecidos abaixo.

Método 1: Ajustando a posição do elemento usando margens

As margens são a maneira mais direta de reposicionar elementos no GemPages. Elas criam espaço ao redor de um elemento e afetam o fluxo do conteúdo próximo.

Passo 1:  Clique no elemento cuja posição você deseja alterar.

Passo 2: Na barra lateral de configurações, navegue até Avançado aba.

Etapa 3: ajuste as margens in Espaçamento: 

• Uso margens positivas para adicionar espaço ao redor do elemento.
• Uso margens negativas para posicionar elementos fora dos limites de seu contêiner para designs exclusivos.

Se você definir um margem superior negativa, o elemento se moverá para cima, e os elementos abaixo dele também se moverão para cima para preencher a lacuna.

Para um guia detalhado sobre margens, consulte nosso Configurações de margem Artigo.

Método 2: Definindo a posição do elemento usando a propriedade Position

Para um controle de layout mais avançado, use o Configuração de posição. Este método permite que você posicione elementos sem afetar os outros e oferece controle preciso sobre o comportamento do layout na rolagem e no redimensionamento.

Veja como editar as configurações de posição de um elemento:

Passo 1: Clique no elemento que você deseja reposicionar.

Passo 2: Acesse o avançado guia e encontre o Posição Seção: 

Escolha uma das seguintes opções:

• Estático:
  • Configuração padrão; o elemento segue o fluxo normal da página.
  • Não são permitidos ajustes de posição personalizados.
• Parente:
  • Move o elemento em relação à sua posição original.
  • Ajuste os valores personalizados para Soutien, Certo, Tanga, ou Esquerdo para mudar sua colocação.
• absoluto:
  • Posiciona o elemento em relação ao seu ancestral posicionado mais próximo (por exemplo, uma linha ou seção).
  • Uso Soutien, Certo, Tanga e Esquerdo para colocar o elemento exatamente onde você quer dentro do elemento que o contém.
• Fixo:
  • Mantém o elemento em uma posição fixa em relação à janela de visualização.
  • Ótimo para cabeçalhos fixos ou botões flutuantes que permanecem visíveis durante a rolagem.
• Pegajoso:
  • Atua como um híbrido de posicionamento relativo e fixo.
  • O elemento se comporta como relativo até atingir uma posição de rolagem específica, então ele se torna fixado.