Adicionar margem negativa a um elemento ou seção

O que são margens negativas no GemPages?

Margens negativas são uma propriedade CSS que aplica um valor negativo ao espaço ao redor de um elemento, permitindo que ele se aproxime dos elementos vizinhos ou até mesmo os sobreponha.

Diferentemente das margens positivas, que adicionam espaço ao redor dos elementos, as margens negativas reduzem ou removem completamente esse espaço, geralmente criando um design mais dinâmico e em camadas.

Por que usar margens negativas?

1. Elementos de sobreposição: Margens negativas são perfeitas para criar um design em camadas, onde elementos como texto, imagens ou seções se sobrepõem. Esse efeito pode melhorar o apelo visual da sua página, adicionando profundidade e dinamismo.
2. Ajustar alinhamento: Se seus elementos estiverem ligeiramente desalinhados, margens negativas oferecem uma maneira rápida e eficiente de fazer ajustes finos. Em vez de redesenhar a seção inteira, você pode empurrar os elementos para o lugar usando valores de margem negativa.
3. Corrigir problemas de layout: Quando as margens padrão ou as configurações de espaçamento são muito largas, as margens negativas ajudam a reduzir a lacuna entre os elementos, estreitando o layout e melhorando o fluxo geral do design. Isso é especialmente útil ao trabalhar com layouts fixos ou modelos que deixam muito espaço entre as seções.

Como funcionam as margens negativas do GemPages?

Margens negativas afetam o espaço ao redor de um elemento em quatro direções: superior, inferior, esquerda e direita. 

Veja como funciona:

Margem superior: Remove espaço, puxando o elemento para cima.

Aplicar um valor negativo à margem superior puxa o elemento para cima, removendo efetivamente o espaço acima dele. Isso pode ajudar a trazer um elemento mais próximo do que está acima dele, criando a sobreposição ou ajuste desejado no alinhamento.

 É particularmente útil para ajustar o posicionamento vertical de elementos que precisam se conectar visualmente ou se alinhar mais de perto sem alterar a estrutura geral do layout.

Margem Inferior: Puxa o elemento para cima, aproximando-o do elemento acima.

Margem Esquerda: Puxa o elemento para a esquerda, sobrepondo o conteúdo próximo a ele.

Margem direita: Puxa o elemento para a direita, fechando a lacuna ou sobrepondo elementos adjacentes.

Como usar margem negativa no GemPages?

Usar margens negativas no GemPages permite ajustar o posicionamento dos elementos, criando designs exclusivos ou corrigindo problemas de layout. 

Aqui está um guia passo a passo para ajudar você a aplicar margens negativas a qualquer elemento ou seção no GemPages.

Passo 1: Abra a página que deseja editar.

Passo 2: No editor GemPages, clique no elemento ou seção que deseja ajustar. 

Pode ser uma imagem, um bloco de texto, um botão ou qualquer seção que você queira mover.

Passo 3: De acordo com o relatório Guia Avançado, role para baixo para localizar o Espaçamento seção.

Você verá opções para Acolchoamento e Margem. Estaremos trabalhando com o Margem configurações.

Passo 4: Ajuste os valores de margem para o Soutien, Tanga, Esquerdo, ou Certo conforme necessário, conforme orientado acima.

Insira um valor negativo (por exemplo, -20, -50) no campo de margem para o lado que você deseja ajustar. Exemplo: Digite -50 no Margem Superior puxar o elemento para cima

À medida que você insere os valores negativos, o elemento se deslocará de acordo, e você poderá ver as alterações em tempo real.

Passo 5: Use o botão Visualizar na parte superior do editor do GemPages para ver como as alterações afetam sua página em diferentes dispositivos (desktop, tablet, celular).

Passo 6: Quando estiver satisfeito com o posicionamento e o layout, clique em “Economize".

Se você estiver pronto para publicar as alterações em seu site ativo, clique em “Publicar" para aplicar os ajustes.