Reconhecendo elementos da página

O formulário de pedido é dividido em elementos de página na forma de seções, linhas e componentes que você pode reconhecer pelo quadro colorido:

• Seções são verde menta

• Linhas são azul royal e podem conter colunas

• Componentes são amarelo areia

• Seções

  As seções formam a estrutura básica do formulário de pedido. Você pode usá-las para dividir a página em áreas, por exemplo, cabeçalho, corpo e rodapé. Você pode definir a largura da página e uma imagem de fundo para cada seção.

• Linhas e colunas

  Ao inserir uma linha, você escolhe quantas colunas ela deve ter. Colunas não podem ser adicionadas individualmente ou complementadas depois.

  • Linhas dividem a página em áreas horizontais. Você pode inserir múltiplas linhas umas embaixo das outras e movê-las para cima ou para baixo com todo o conteúdo. Dessa forma, você pode projetar linhas tematicamente, por exemplo, uma linha para dados do produto, uma linha para campos de entrada, etc.

  • Colunas permitem que você exiba conteúdo lado a lado dentro das linhas. Por exemplo, você pode colocar dados de endereço ao lado de dados de pagamento.

• Componentes

  Componentes permitem que você adicione conteúdo específico. Cada componente tem suas próprias propriedades e opções de configuração.

Ao selecionar um quadro, elementos do quadro são exibidos, os quais incluem botões de ícone para várias ações:

Mostrar e esconder elementos da página

Para cada seção, linha ou componente, você pode definir a visibilidade nas respectivas configurações:

• Todos: O elemento da página é exibido em todas as telas.

• Apenas móvel ou Apenas desktop: O elemento da página é exibido somente nas telas respectivas e escondido nas outras. Por exemplo, você pode exibir uma imagem do produto de forma proeminente em telas fixas, mas escondê-la em smartphones para facilitar a navegação lá. Nesses casos, o conteúdo do elemento da página ficará destacado em vermelho e rotulado:

  

• Ocultar: O elemento da página não é exibido de forma alguma. Isso permite que você adicione conteúdo que ainda não será utilizado. Por exemplo, você pode adicionar um componente para uma imagem que ainda está aguardando aprovação.

Você pode esconder apenas elementos da página que não contêm componentes obrigatórios. Elementos da página ocultos podem ser tornados visíveis novamente da seguinte forma:

1. Pressione um dos botões de seções, linhas ou componentes na barra superior e então clique em gerenciar. Uma barra lateral para navegar pelos elementos da página respectivos será exibida.

2. Elementos da página com um ícone de olho riscado estão ocultos. Pressione-o para tornar o elemento da página imediatamente visível no formulário de pedido. (A mudança só será visível externamente após a publicação.)

   

Configurar seção

• Os elementos de quadro da seção aparecem nas bordas.

• Pressione o ícone salvar para salvar a seção como um modelo.

• Pressione o ícone mais para adicionar seções novas ou salvas de modelo.

• Pressione os ícones seta para mover seções.

• Pressione o ícone copiar para inserir imediatamente uma cópia da seção com todas as configurações e linhas contidas abaixo. Componentes não são copiados.

• Pressione o ícone engrenagem para fazer configurações. A barra lateral da seção aparecerá.

Configurações

• Margem superior

  Adiciona uma margem transparente à borda superior da página ou da seção acima. A margem é adicionada ao conteúdo da seção, mas não amplia o próprio conteúdo (diferente de preenchimento, veja abaixo).

• Imagem

  • Imagem de fundo: Defina uma imagem de fundo para a seção. Isso substitui a imagem de fundo da página.

  • Posição da imagem: Posicione a imagem de fundo dentro da seção.

  • Cores de sobreposição: Sobrepõe o fundo com uma cor. Use um deslizador na janela de seleção de cores para determinar a transparência da cor. Por exemplo, você pode sobrepor a imagem selecionada com um véu branco, de forma que ainda seja visível, mas não muito distrativa.

• Tamanho & posição

  • Largura da seção: Defina uma largura para tornar a borda da página mais larga ou estreita, por exemplo.

  • Grudado: Defina se a seção deve permanecer em uma posição fixa ao rolar para cima ou para baixo. Isso é útil se a seção tiver apenas conteúdo minimal, como o botão comprar. Você pode configurá-la para que o conteúdo da seção esteja sempre visivelmente destacado.

• Tamanho da linha & posição

  Aqui você pode fazer configurações centrais para todas as linhas contidas nesta seção. Essas têm precedência sobre as configurações nas linhas individuais.

• Cores/ cor de fundo

  Preenche o fundo com uma cor. Por exemplo, você pode inserir uma imagem de fundo que não cobre totalmente a seção em uma cor de fundo e sobrepô-la com uma cor de sobreposição (transparente).

• Preenchimento

  Preenchimento significa adicionar distâncias dentro do conteúdo da seção. Isso permite que você ajuste as bordas entre o conteúdo e o quadro da seção. Diferente de margem superior (veja acima), o preenchimento também afeta a imagem de fundo ou a cor de fundo à medida que a área de exibição em si cresce.

Configurações (avançado)

• Raio da borda

  Defina se a seção deve ter bordas arredondadas. Isso é particularmente eficaz ao usar uma imagem de fundo ou cor de fundo.

• Borda

  Defina se a seção deve ter uma borda. O padrão é sem borda. Ao selecionar outra opção, campos adicionais são exibidos. As mudanças serão notáveis assim que todos os campos forem preenchidos com valores.

• Sombra

  Adiciona uma sombra à seção, fazendo-a parecer mais tridimensional e proeminente.

Configurar linhas e colunas

• A linha está totalmente delineada.

• Colunas são separadas por um deslizante.

• Pressione o ícone salvar para salvar a linha como um modelo.

• Pressione o ícone mais para adicionar novas linhas ou linhas de modelo salvas. Uma barra lateral aparecerá.

  • Escolha o número de colunas que a linha deve ter em Disposição.

  • Alternativamente, selecione um modelo que você salvou em Minhas linhas.

• Pressione os ícones seta para mover linhas.

• Pressione o ícone copiar para imediatamente inserir uma cópia da linha com todas as configurações e colunas abaixo. Componentes não são copiados.

• Pressione o ícone engrenagem para fazer configurações.

Configurações

As configurações da linha são as mesmas que as da seção (veja acima).