Elementos

Elementos são os blocos que compõem cada página do funil. Ao abrir uma página no fluxo, o painel de edição abre na aba Elementos: a paleta fica na coluna esquerda e o preview da página, à direita — tudo o que você monta ali aparece no preview na hora.

As categorias da paleta

A paleta agrupa os elementos em nove categorias: Cabeçalho, Conteúdo, Mídia, Ação, Quiz, Input, Relatórios, Vendas e Integração. Alguns nomes se repetem entre categorias — existe um elemento Texto em Conteúdo, em Quiz e em Input, por exemplo —, então vale sempre olhar a categoria do card. Elementos recém-lançados exibem um ponto pulsante no card, que some sozinho depois de um tempo.

Adicionando um elemento

Arraste o card da paleta e solte sobre o preview da página. Durante o arraste, uma barra de inserção marca o ponto exato onde o elemento vai entrar. Cada página tem três seções — Cabeçalho, Principal e Rodapé (header, main e footer, no inglês do código) — com regras próprias: o Cabeçalho aceita só Cabeçalho, Progresso e Cronômetro (um de cada); o Rodapé aceita só Botão (até dois); o Principal é livre. Seção que não aceita o tipo nem acende como alvo do arraste.

Buscando elementos

A lupa no topo do painel abre o campo Buscar elemento.... O filtro considera o nome do elemento e o da categoria — buscar "venda" traz a categoria Vendas inteira. Com a busca aberta, Enter insere o primeiro resultado na página; Esc limpa o texto e, com o campo vazio, fecha a busca.

Editando um elemento

Clique no elemento dentro do preview: o editor dele abre na coluna esquerda, organizado nas abas Conteúdo, Tema e Configurações — a aba Tema só aparece nos elementos que têm opções de estilo. Cada mudança reflete no preview instantaneamente. Clicar de novo no mesmo elemento volta para a paleta.

Elementos lado a lado

A Largura da aba Tema é uma porcentagem da coluna da página, com paradas fixas: 33%, 50%, 67% e 100% — alguns elementos começam em 50%. Elementos seguidos cujas larguras somam até 100% ficam na mesma linha: dois de 50%, três de 33%, ou um de 33% com um de 67%. Passou de 100%, o próximo desce para a linha de baixo — um de 67% com um de 50%, por exemplo, ficam um sob o outro.

O lado a lado vale só na área Principal: no Cabeçalho e no Rodapé os elementos ficam sempre empilhados, e a largura só estreita o bloco. A divisão é a mesma no celular e no computador — dois elementos de 50% continuam lado a lado na tela pequena. Qualquer bloco com menos de 100% fica centralizado na linha; o Alinhamento move o texto dentro do bloco, não o bloco.

Organizando a página

Para reordenar, arraste o elemento dentro do preview — a mesma barra de inserção indica o destino, inclusive ao mover entre seções, que seguem as mesmas regras de aceitação. Ao passar o mouse sobre um elemento, aparecem as ferramentas de editar, duplicar (disponível só no Principal) e excluir.