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. ATRIBUTOSEstes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
3. VISIBILIDADEEstes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
4. ANIMAÇÃOEstes 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 GERALVocê pode ler mais aqui
2. ESPAÇAMENTOVocê pode ler mais aqui
3. TIPOGRAFIAVocê pode ler mais aqui
4. FUNDO DE TELAVocê pode ler mais aqui.
5. BORDAVocê pode ler mais aqui
6. EXIBIÇÃOVocê pode ler mais aqui
7. CSS PERSONALIZADOVocê 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ÇÃOVocê pode ler mais sobre o parâmetro AÇÃO aqui
3. RASTREAMENTOEste é 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. ATRIBUTOSEstes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
5. VISIBILIDADEEstes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
6. ANIMAÇÃOEstes 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 GERALVocê pode ler mais aqui
2. ESPAÇAMENTOVocê pode ler mais aqui
3. TIPOGRAFIAVocê pode ler mais aqui
4. FUNDO DE TELAVocê pode ler mais aqui.
5. BORDAVocê pode ler mais aqui
6. EXIBIÇÃOVocê pode ler mais aqui
7. CSS PERSONALIZADOVocê 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ÇÃOVocê pode ler mais sobre o parâmetro AÇÃO aqui
2. ATRIBUTOSEstes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
3. VISIBILIDADEEstes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
4. ANIMAÇÃOEstes 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 GERALVocê pode ler mais aqui
2. ESPAÇAMENTOVocê pode ler mais aqui
3. TIPOGRAFIAVocê pode ler mais aqui
4. FUNDO DE TELAVocê pode ler mais aqui.
5. BORDAVocê pode ler mais aqui
6. EXIBIÇÃOVocê pode ler mais aqui
7. CSS PERSONALIZADOVocê 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

Navigate this category

PreviousPrevious article

Next articlePrevious

Do you want to get more sales from the same amount of traffic?

PageFly can help you. We are the best page builder app to give you the freedom to customize your page, build trust and gain more sales.

Explore PageFly
PageFly Languagues

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

I got it!