Construtor de páginas
O Construtor de páginas do Atomicat é o editor visual usado para criar e editar landing pages na plataforma.
Use o construtor para adicionar seções de página, organizar contêineres, inserir elementos, editar conteúdo e estilos, definir configurações de página, visualizar layouts responsivos, salvar alterações e publicar a página.
O que você pode fazer no construtor
O construtor reúne estrutura de página, design, configurações e controles de publicação em um único workspace.
| Área | Propósito |
|---|---|
| Tela | Mostra a página que está sendo editada e permite selecionar seções, contêineres e elementos. |
| Barra lateral | Abre grupos de elementos, controles de estilo global, configurações de página, resumo de página e ações de publicação. |
| Gaveta | Mostra componentes, navegador ou interface de edição do elemento selecionado. |
| Cabeçalho | Contém nome da página, visualização, controles responsivos, ações de desfazer e refazer, salvar, baixar e publicar. |
| Navegador | Mostra a estrutura da página para que você possa selecionar, expandir, recolher e reorganizar seções e contêineres aninhados. |
| Configurações | Controla metadados SEO, atraso, pixels, código personalizado, recursos da página, velocidade da página e revisões, quando disponíveis. |
Layout do construtor
A área de trabalho do construtor é organizada em torno da tela da página.
- Use a barra lateral esquerda para escolher o que deseja editar.
- Adicione elementos da gaveta de componentes.
- Selecione um item na tela ou no navegador.
- Edite conteúdo, estilo, opções avançadas ou templates da gaveta.
- Visualize a página em todos os dispositivos antes de salvá-la ou publicá-la.
Principais opções da barra lateral
A barra lateral do construtor inclui estas áreas principais:
| Opção de barra lateral | O que abre |
|---|---|
| Texto | Parágrafo, títulos, texto animado e elementos de texto avançados. |
| Mídia | Imagens, vídeo, áudio, ícones, controles deslizantes, guias, gráficos, alertas, depoimentos e elementos visuais relacionados. |
| Botão | Elementos de botão e botão de redirecionamento. |
| Blocos | Elementos estruturais e de conversão, como contêineres, formulários, contagens regressivas, divisórias, acordeões, menus, HTML, iframe, produto e outros blocos de páginas. |
| Singular | Itens flutuantes ou de nível de página, como Cookie, WhatsApp, Notificação e ScrollUp. |
| Estilo Global | Controles de estilo visual em nível de página. |
| Configurações | Configurações de página como SEO, rastreamento, código personalizado, velocidade da página e revisões. |
| Resumo da página | Uma visão resumida da configuração e do conteúdo da página. |
| Publicar | Abre o fluxo de publicação da página atual. |
Guias importantes do construtor
Comece por estes guias quando estiver revisando uma página para lançamento:
| Guia | Use quando |
|---|---|
| Elementos | Você precisa escolher o elemento certo de conteúdo, mídia, formulário, produto, quiz ou conversão. |
| Seções e contêineres | Você está estruturando o layout da página ou corrigindo conteúdo aninhado. |
| Estilo Global | Você quer consistência ampla de tipografia, cores e visual antes de editar elementos individuais. |
| Preview e visualizações responsivas | Você precisa testar layouts em desktop, tablet e mobile. |
| Resumo da página | Você quer revisar rapidamente estrutura, configurações, scripts, pixels e comportamento de modais. |
| Configurações | Você precisa configurar SEO, rastreamento, código personalizado, recursos da página, velocidade ou revisões. |
Editando um elemento
Ao selecionar um elemento, a gaveta de edição pode mostrar diferentes abas dependendo do item selecionado.
| Guia Editar | Use-o para |
|---|---|
| Conteúdo ou Layout | Texto, URLs, mídia, campos de formulário, layout de contêiner e conteúdo específico de elemento. |
| Estilo | Estilo visual, como espaçamento, cores, tipografia, bordas, planos de fundo e alinhamento, quando compatível. |
| Avançado | Comportamento de elemento adicional e opções de configuração. |
| Template | Opções de template de elemento quando o elemento selecionado suporta templates. |
| Página ou Lógica | Controles específicos do questionário ao editar páginas ou opções de questionário. |
Alguns elementos, como HTML personalizado, iframe, espaçador e elementos de comentário, têm controles de estilo limitados porque seu comportamento é controlado por seu conteúdo ou estrutura.
Salvar, visualizar e publicar
O cabeçalho do construtor inclui os controles usados com mais frequência durante a edição:
- Pré-visualização: alterne o modo de pré-visualização para ver a página sem as sobreposições habituais de edição.
- Controles responsivos: alterne larguras de dispositivo e confira como a página se adapta.
- Desfazer e refazer: volte ou avance entre estados recentes de edição.
- Salvar: salve manualmente a página atual.
- Baixar: baixe o HTML da página quando sua conta tiver acesso.
- Publicar: abra o fluxo de publicação da página.
Atomicat também salva automaticamente edições de páginas qualificadas quando o conteúdo é alterado, mas você ainda deve usar Salvar antes de sair do construtor ou publicar alterações importantes.
Fluxo de trabalho recomendado
Para um processo confi ável de construção de página:
- Comece com a estrutura da página: seções e contêineres.
- Adicione elementos de conteúdo como títulos, texto, imagens, vídeos, formulários e botões.
- Use o Estilo Global para obter ampla consistência visual.
- Edite estilos de elementos individuais somente onde a página precisar de ajustes específicos.
- Use o Navegador para revisar o aninhamento e a seleção.
- Verifique as visualizações em desktop, tablet e celular.
- Configure metadados SEO, rastreamento, código personalizado e recursos de página em Configurações.
- Salve a página.
- Publique ou baixe a página quando estiver pronto.
Melhores práticas
- Mantenha o aninhamento de seções e contêineres simples para que a página seja mais fácil de manter.
- Use títulos em uma ordem lógica para facilitar a leitura e SEO.
- Visualize layouts móveis antes de publicar.
- Salve antes de testar pixels, formulários ou scripts personalizados.
- Use o Navegador ao selecionar elementos profundamente aninhados.
- Evite adicionar código personalizado desnecessário, a menos que seja necessário para rastreamento, conformidade ou integrações.
Documentos relacionados
- Seções e contêineres
- Elementos
- Visualização e visualizações responsivas
- Navegador e camadas
- Salvar e salvar automaticamente
- Configurações
- SEO e metadados
- Formulários
- Elemento Product
- Quiz interativo
Perguntas frequentes
O que devo verificar antes de publicar uma página do construtor?
Revise estrutura da página, layout mobile, metadados SEO, formulários, botões, pixels, código personalizado, produtos, etapas de quiz e a URL final publicada. Use o Resumo da página para uma revisão rápida no nível da página.
Por que alguns elementos têm abas de edição diferentes?
O Atomicat mostra abas com base no elemento selecionado. Contêineres usam Layout, a maioria dos elementos usa Conteúdo e Estilo, e elementos ligados a quizzes podem mostrar controles de Página ou Lógica.
Onde configuro SEO e rastreamento?
Abra Configurações do Construtor de páginas. Metadados SEO, pixels, código personalizado, atraso, recursos da página, AtomicTracker e opções relacionadas ficam ali, não na maioria das gavetas de elementos.
Como devo solucionar problemas do construtor?
Comece por problemas de salvamento se as alterações não persistem, problemas de publicação se a página ao vivo está desatualizada, e solução de pixels ou formulários se o problema envolve rastreamento ou envios.