Como Alinhar Elementos em GemPages

Por que o alinhamento de elementos é importante no GemPages

O alinhamento adequado é a base de um design de página limpo e intuitivo. No GemPages, alinhar seus elementos, como botões, imagens, texto ou formulários, garante que seu layout tenha uma aparência elegante, legível e responsiva em todos os dispositivos.

Como alinhar elementos em GemPages (guia passo a passo)

Para elementos individuais

Passo 1: Clique no elemento no editor.

Passo 2: Na barra lateral esquerda, vá para Configurações aba.

Passo 3: Desloque-se até o Alinhar seção. Escolha Esquerda, Centro ou Direita.

Para linhas com vários elementos

Passo 1: Selecione os Linha.

Passo 2: Em Configurações, escolha Alinhar coluna. Defina como Centralizar ou Distribuir para espaçar os elementos filhos uniformemente.

Alinhamento avançado: configurações de espaçamento e posição

Para mais controle, use a aba Avançado na barra lateral.

Use margens para ajustar o espaçamento

• Acesse Avançado > Espaçamento.
• Aumentar ou diminuir as margens superior, inferior, esquerda ou direita.
• Use margens negativas para mover um elemento para fora de seu limite normal.

Use a posição para controle preciso

• Acesse Avançado > Posição.
  Escolha a partir de:
  • Estático (Padrão)
  • Parente (deslocamento da posição original)
  • absoluto (colocado exatamente dentro do seu pai)
  • Fixo (gruda na tela ao rolar)
  • Pegajoso (trava após rolar além de um certo ponto)

Como centralizar um elemento abaixo de outro?

Se você quiser que um botão, imagem ou qualquer elemento apareça diretamente abaixo de outro e permaneça centralizado, siga estas etapas:

Etapa 1: adicionar um elemento Row de 1 coluna

Na barra lateral esquerda, arraste e solte um elemento Row de 1 coluna na área de design. 

Etapa 2: coloque os dois elementos dentro da mesma coluna

Arraste o segundo elemento (por exemplo, um botão) logo abaixo do primeiro (por exemplo, um ícone) dentro da mesma coluna.

Etapa 3: Alinhe cada elemento aninhado na linha ao centro

Clique no Botão elemento para abrir suas configurações no painel esquerdo. Em seguida, role para baixo até o Alinhar seção e selecione centralizado.

Continue com o ícone elemento.

Agora, o elemento Ícone está centralizado sob o elemento Botão. 

Etapa 5: ajuste o espaçamento, se necessário

Clique no elemento pai da linha para localizar seu painel de configurações. Alterne para o Avançado guia e role para baixo até o Espaçamento seção.

Nesta seção, você pode definir uma margem superior ou inferior para criar a distância correta entre os elementos, conforme desejado.

Dessa forma, você pode criar facilmente layouts como um botão centralizado sob o texto ou uma imagem sob um título, garantindo que tudo pareça equilibrado em todos os dispositivos.

Perguntas Frequentes

1. Posso centralizar um elemento diretamente abaixo de outro no GemPages?

Sim. Coloque os dois elementos dentro da mesma coluna e defina o alinhamento de cada elemento para Centralização de. Se necessário, use margin-top ou margin-bottom no Avançado configurações para ajustar o espaçamento.

2. Como alinho vários elementos uniformemente em uma linha?

Selecione a linha que contém seus elementos. No Configurações guia, escolha Alinhar coluna e defina-o como Centralizar ou Distribuir. Dessa forma, todos os elementos filhos são espaçados uniformemente na linha.

3. Qual é a diferença entre alinhamento e posição no GemPages?

O alinhamento define como os elementos são posicionados em relação ao seu contêiner (esquerda, centro, direita), enquanto a posição oferece um controle mais preciso (estático, relativo, absoluto, fixo, fixo).