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.

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.

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.

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.

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