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.
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.
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 |
|
| 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 |
|
| 2. AÇÃO | Você pode ler mais sobre o parâmetro AÇÃO aqui |
| 3. RASTREAMENTO | Este é o local para configurar:
|
| 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
