Crawl-Walk-Run-Fly Assessment

Coloque um elemento "Container" em sua página como uma seção inteira. Dentro desse contêiner, coloque um elemento "Responsive Grid" e remova as duas colunas padrão adicionais. Faça com que a coluna ocupe toda a largura da row. Em seguida, coloque um elemento "Flow" dentro da coluna com cinco etapas de fluxo adicionais.

No painel de controle de Variables do Flow, marque as opções "Fixed Height" e "Scroll to Top on Step Change".

Coloque um elemento "Form" no Flow Step. Ao este elemento, no painel "Layout", adicione uma margem inferior de 1em.

Coloque um elemento "Choice Group" no formulário. No container do label, defina a margem inferior como 2em.

Ao Choice Group, navegue até o painel Variáveis e marque a opção "Required". Não se esqueça de definir o Data Field aqui. Em "Micro-Themes", defina o alinhamento como "Center Align" e, na categoria de Choice Group, defina o estilo como "Style: Selected Box Border".

Coloque um elemento "Responsive Grid" no Choice Group. Em "Micro-Themes", na categoria "Grid Layout", selecione "Nested Responsive Grid".

Adicione uma coluna adicional ao Grid Responsivo dentro do Choice Group. Altere as configurações da row para que todas as colunas tenham a mesma largura. Aqui você também pode alterar a configuração de row para diferentes viewports, para tornar responsivo o assessment em vários tamanhos de tela.

Coloque um elemento "Choice" em cada coluna. No painel Variables, atribua à opção um "Data Value" e defina a Default Selection como "Unselected". No painel Behaviors, defina os "Behaviors in Flow" para mover para o próximo e os "Behaviors in Form" para validar e enviar. No painel Layout, adicione 15px de margem inferior e 25px de padding à esquerda e à direita.

Coloque um container dentro da Choice. Em "Micro-Themes", selecione a categoria "Pods" e defina-a como Transparent.

Coloque dois elementos de texto no container dentro da Choice.

Coloque uma seção de container na página. Coloque um Grid Responsivo dentro do container. Defina a primeira e a última coluna como uma coluna de largura, e a coluna do meio como dez colunas de largura.

Coloque um elemento "Form" na coluna do meio. Em seguida, coloque um Grid Responsivo dentro do elemento de formulário. Em "Micro-Themes", defina o Grid Responsivo como "Nested Responsive Grid" na categoria Grid Layout. Adicione uma row adicional ao Grid Responsivo e remova a terceira coluna. Faça com que as duas colunas tenham a mesma largura.

Coloque um elemento "Textbox" em cada uma das colunas. Remova o texto padrão do label.

Com o elemento de "Textbox" selecionado, navegue até o painel Variables. Defina o tipo de input para mostrar o tipo de informação que o campo coletará do usuário, por exemplo, número de telefone. Defina um Data Field e um texto de marcação.

Com o botão Enviar selecionado, defina os "Behaviors in form" para validar e enviar, e defina a ação para a próxima página que o usuário deve ver depois de preencher o formulário. *Você também pode definir o botão enviar para ser "Mark as Converted". Muitas experiências usam um formulário com a finalidade de coletar informações e monitorar.

Coloque uma seção de container na página. Coloque um Grid Responsivo dentro do container. No painel "Layout" da coluna, adicione 1em de margem inferior.

Adicione um elemento "Container" dentro da coluna. Em "Micro-Themes", adicione um Pod Transparente e, na viewport XS, remova a altura fixa. Adicione uma imagem de background e marque a opção "Responsive Background Image". Dê ao container um padding de 2em e uma altura de 18em.

Coloque outro elemento "Container" dentro do container. Dê a esse container uma altura de 10em no painel "Layout". Isso é para a viewport XS.

Coloque outro elemento "Container" dentro do primeiro container da coluna. *Isso parecerá dois containers empilhados e envolvidos em um container maior.

No container do Flow Step 4, aplique um microtema de Pod a ele. Dê a esse container um padding de 3px no painel "Layout", defina Display como "Inline-Block" e Position como "Layered" top= 1em e left =1em.

Coloque um elemento "Text" dentro do container do Passo 4. Em "Micro-Themes", adicione o estilo de texto "Fine Print".

Coloque um elemento "Container" abaixo do container na coluna. Adicione um "Micro-Theme" de Pod Transparente e defina a margem superior como -8em. *A estrutura deve ser: coluna com dois contêineres. O primeiro contêiner tem dois contêineres dentro dele.

Coloque os elementos "Text" e "Link" no container do Passo 7. Você pode estilizar o texto e os links usando os "Micro-temas" de cores, de botões, de links, etc.

Selecione o elemento na página para o qual você gostaria que o usuário fosse rolado. Navegue até o canto superior direito do painel de elementos e selecione a âncora. Dê à âncora um nome único.