Elemento de Layout

Nesse artigo você aprenderá a usar o elemento de Layout no PageFly para ter uma linda página.

Sobre o elemento de Layout

O elemento de Layout foi desenhado para ajudar você a estruturar sua página de uma maneira melhor para aumentar sua taxa de conversão. Usando esse elemento você poderá ter um entendimento geral da página até quando se tornar mais complicado.

O elemento de Layout inclui Seção, Linha e Coluna, que são o núcleo da hierarquia de elementos PageFly. Você poderá usá-los para criar uma estrutura inicial com contêineres com seção/linha/coluna e preenchê-los com outros elementos.

layout element

Existem 10 layouts de colunas predefinidos para você começar, porém sinta-se livre para customizá-los da maneira que você quiser. Nós continuaremos a adicionar mais variações para te ajudar a economizar tempo.

A estrutura do layout é simples. Na escala deste artigo, veja a captura de tela abaixo, que seria um jeito fácil de entender como a página deve ser estruturada.

pagefly layout element

Configuração do elemento de Layout

Seção, Linha e Coluna possuem parâmetros diferentes, permitindo a você fazer o ajuste-fino da aparência, alcançando assim, a melhor taxa de conversão possível.

Configuração da Seção

Seções são os elementos primários de qualquer página. Uma seção inclui uma ou mais linhas. É possível controlar o número de linhas pela aba Geral.

Selecione uma Seção e veja seus parâmetros..

Os parâmetros nas aba Geral e Estilo são específicos para esse elemento.

Parâmetro da guia Geral
1. CONTEÚDO
  • Linhas: Mova, copie ou apague uma linha
  • Adicionar uma linha: Adicionar uma linha para essa seção, o número de linhas em uma seção é ilimitado. 
  • Definir Largura Fixa: Essa configuração é habilitada or padrão,ela ajusta o conteúdo na seção com uma largura fixa.Você pode configurar o tamanho na configuração de tamanho máximo. Quando desabilitado,o conteúdo desta seção irá se expandir para o tamanho máximo da seção.      
  • Largura máxima: Por padrão é 1170px, seu valor mínimo é 700px e o valor máximo é 2000px.
2. ATRIBUTOS Estes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
3. VISIBILIDADE Estes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
4. ANIMAÇÃO Estes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
Parâmetro da guia Estilo
1. NO GERAL Você pode ler mais aqui
2. ESPAÇAMENTO Você pode ler mais aqui
3. TIPOGRAFIA Você pode ler mais aqui
4. FUNDO DE TELA Você pode ler mais aqui.
5. BORDA Você pode ler mais aqui
6. EXIBIÇÃO Você pode ler mais aqui
7. CSS PERSONALIZADO Você pode ler mais aqui.

Configuração da linha

Uma linha possui uma ou mais colunas. É possível controlar o número de colunas pela aba Geral.

Selecione uma Linha para ver seus parâmetros.

Os parâmetros nas abas Geral e Estilo são específicos para esse elemento.

Parâmetro da guia Geral
1. CONTEÚDO
  • Colunas: Mover, copiar ou apagar uma coluna.
  • Adicionar Coluna: Adiciona uma coluna para essa linha, o coluna de colunas em uma linha é ilimitado.Add Column: 
  • Posição do Conteúdo: Especifica a posição do conteúdo dentro dessa linha
  • Habilitar Largura Igual: Faz todas as colunas dentro desta linha terem larguras iguais.
  • Habilitar Altura Igual: Faz todas as colunas dentro desta linha terem alturas iguais.
2. AÇÃO Você pode ler mais sobre o parâmetro AÇÃO aqui
3. RASTREAMENTO Este é o local para configurar:

  • Evento do Google Analytics na sua conta do GA. Você pode ler mais como configurá-lo aqui. 
  • Pixel do Facebook quando um cliente clica no elemento. Você pode ler mais sobre isso aqui.
4. ATRIBUTOS Estes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
5. VISIBILIDADE Estes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
6. ANIMAÇÃO Estes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
Parâmetro da guia Estilo
1. NO GERAL Você pode ler mais aqui
2. ESPAÇAMENTO Você pode ler mais aqui
3. TIPOGRAFIA Você pode ler mais aqui
4. FUNDO DE TELA Você pode ler mais aqui.
5. BORDA Você pode ler mais aqui
6. EXIBIÇÃO Você pode ler mais aqui
7. CSS PERSONALIZADO Você pode ler mais aqui.

Configuracao da coluna

Uma vez adicionada colunas ao seu layout, elas estarão automaticamente em uma linha. Todos os elementos (Além dos elementos de Layout) serão adicionados nesta coluna.

Selecione uma Coluna e veja seus parâmetros.

Os parâmetros nas abas Geral e Estilo são específicos para esse elemento.

Parâmetro da guia Geral
1. AÇÃO Você pode ler mais sobre o parâmetro AÇÃO aqui
2. ATRIBUTOS Estes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
3. VISIBILIDADE Estes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
4. ANIMAÇÃO Estes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
Parâmetro da guia Estilo
1. NO GERAL Você pode ler mais aqui
2. ESPAÇAMENTO Você pode ler mais aqui
3. TIPOGRAFIA Você pode ler mais aqui
4. FUNDO DE TELA Você pode ler mais aqui.
5. BORDA Você pode ler mais aqui
6. EXIBIÇÃO Você pode ler mais aqui
7. CSS PERSONALIZADO Você pode ler mais aqui.

Em relação ao layout da sua página, você pode ler mais aqui sobre como ajustar o Guia de layout. Pode ajudar muito no progresso da loja de construção.

Um caso comum: reestruturar o layout no dispositivo móvel

Na opção Todos os dispositivos, este é o layout que você edita:

E quando você liga o dispositivo móvel, o layout é exibido como na imagem abaixo:

O motivo da exibição é que, ao ligar o dispositivo móvel, o layout será exibido na ordem da esquerda para a direita

Em alguns casos, você deseja a imagem acima do título e do parágrafo, eis o seguinte:

Na guia Estilo, role para baixo até o parâmetro EXIBIÇÃO e escolha a opção Flex.

  • Direção: Reserva de Colunas
  • Quebra: Sem Quebra
  • Alinhar itens: Esticar

Então a imagem estará acima do cabeçalho e o parágrafo como na imagem abaixo

Clique no botão Publicar e vá para a exibição ao vivo para ver o resultado no dispositivo móvel

Este vídeo fornece maneiras detalhadas de como ajustar o layout do celular usando a direção Flex

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