Alinhar elementos em uma página

Neste artigo, você aprenderá como alinhar elementos na sua página PageFly.

Etapa 1: selecionar o contêiner do elemento

No nosso exemplo, há uma seção com 2 colunas. Na coluna da direita, temos os elementos Título, Parágrafo e Botão.

align elements

Primeiro de tudo, precisamos entender como os elementos estão contidos na página. Por exemplo, selecionamos o elemento Botão e a trilha de navegação mostra seus contêineres: Seção – Linha – Coluna – Botão.

Como queremos alinhar esse botão, precisamos selecionar seu contêiner, que é a coluna na trilha de navegação.

align elements pagefly

Etapa 2: Alinhar todos os elementos no contêiner selecionado

Antes de seguir as etapas específicas, você pode assistir ao vídeo abaixo

Agora, queremos alinhar ao centro o elemento Botão , selecione a coluna> guia Estilo> seção TIPOGRAFIA> clique no ícone Central em Alinhamento de texto, conforme a imagem abaixo

Etapa 3: Alinhar um elemento específico dentro de um contêiner

Nesse caso, ainda queremos que o cabeçalho e o parágrafo estejam alinhados à esquerda, assim como o seguinte:

  • Escolha o contêiner do texto do título, que é o elemento Título.
  • Vá até a aba Estilo no Inspetor de Elementos ao lado direito.
  • Clique no ícone Esquerda em Alinhamento de texto da seção TIPOGRAFIA.

Faça o mesmo com o parágrafo selecionando Elemento do parágrafo> guia Estilo> seção TIPOGRAFIA> Ícone esquerdo em Alinhamento de texto. Como resultado, você verá algo como a imagem abaixo.

A prioridade das configurações de estilo

Lembre-se de que as configurações de elementos aninhados têm prioridade mais alta que as de seus contêineres. Por exemplo, se você definir o alinhamento da coluna como “centro”, mas o elemento de parágrafo nessa coluna estiver definido como “esquerda”, esse parágrafo será alinhado à esquerda.

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

PageFly Help Center is now available in French, Portuguese and Chinese.Please check the flags on the page header.

I got it!
Languages