O Page Builder é o editor visual do Trackup para criação de Landing Pages, páginas de vendas, páginas de captura, advertoriais. Ele foi desenvolvido para permitir a criação de páginas sem necessidade de programação, utilizando um sistema de componentes, blocos prontos e edição visual em tempo real.

---

[VÍDEO RECOMENDADO NO TOPO] (Vídeo principal de 4 a 6 minutos. Mostrar alguém criando uma página de três formas diferentes: gerando com IA, escolhendo template e criando manualmente com blocos. O objetivo do vídeo é passar sensação de velocidade. Algo estilo “landing page em menos de 2 minutos”.)

---

​

Três formas de criar páginas

O Builder foi projetado para se adaptar a diferentes tipos de usuários. Seja você iniciante ou avançado, existem diferentes caminhos para criar sua página. Você pode começar de três maneiras. Cada método atende diferentes cenários operacionais.

---

​

Total liberdade de personalização

O Builder foi criado para oferecer controle completo sobre o design da sua página. Você pode alterar praticamente qualquer aspecto visual.

Espaçamento Tipografia Layout Responsividade Cores Botões Imagens Estrutura das seções Organização dos elementos

---

​

Tudo conectado ao restante da operação

Uma das maiores vantagens do Builder é estar completamente integrado ao restante do Trackup. Sua página nascem com o tracking pronto, pixel instalado e alta velocidade de carregamento Toda infraestrutura funcionando dentro do mesmo ambiente.

---

​

Como criar uma página através do Page Builder do Trackup

---

​

Por dentro do Builder

O Page Builder do Trackup foi desenvolvido para oferecer uma experiência simples, rápida e flexível na criação de páginas. Com uma interface totalmente visual, você pode construir páginas sem precisar escrever código. Além da edição visual, o Builder conta com componentes reutilizáveis, blocos prontos, configurações globais de estilo, recursos de SEO, inteligência artificial e ferramentas avançadas para personalização, permitindo criar páginas profissionais com muito mais agilidade.

---

​

Barra superior

A Barra Superior reúne os principais controles da página e acompanha você durante toda a edição, permitindo gerenciar o projeto sem precisar sair do Builder. Nome da página Status Preview Visualização Responsiva Voltar e Avançar Salvar Publicar

Dica: utilize a visualização em diferentes dispositivos e o Preview antes de publicar. Isso ajuda a identificar possíveis ajustes de responsividade, espaçamento ou conteúdo, garantindo uma melhor experiência para seus visitantes.

---

​

Canvas (Área de edição)

O Canvas é a área principal do Page Builder e representa exatamente o espaço onde sua página é construída. É nele que todos os componentes e blocos adicionados são exibidos, organizados e editados em tempo real. No Canvas você pode:

• Adicionar componentes e blocos à página
• Selecionar qualquer elemento para editá-lo
• Reorganizar a estrutura da página conforme necessário
• Visualizar as alterações em tempo real

O Canvas funciona como uma representação fiel da versão final da página, facilitando ajustes de conteúdo, posicionamento e design antes da publicação.

Dica: utilize os modos responsivos durante toda a construção da página, e não apenas ao final. Dessa forma, você garante que o layout permaneça consistente e ofereça uma boa experiência em qualquer dispositivo.

---

​

Barra lateral

A Barra Lateral concentra todas as ferramentas necessárias para criar, organizar, personalizar e configurar sua página. É por meio dela que você adiciona novos elementos, gerencia a estrutura do projeto e acessa as configurações globais do Builder. Cada seção da barra lateral foi desenvolvida para uma etapa específica da criação da página, tornando o fluxo de trabalho mais organizado e produtivo. Componentes Blocos Camadas Estilo Configuração Inspector IA

Dica: uma boa prática é seguir a sequência natural de criação: escolha um Bloco ou adicione Componentes, organize a estrutura em Camadas, personalize o visual em Estilo, configure a página em Configuração e utilize o Inspector para realizar ajustes detalhados em cada elemento.

---

​

Componentes

Os Componentes são os elementos fundamentais utilizados para construir uma página no Page Builder. Cada componente possui uma função específica e pode ser combinado com outros para criar layouts totalmente personalizados. Ao contrário dos Blocos, que adicionam seções completas, os Componentes permitem criar cada parte da página individualmente, oferecendo total liberdade para desenvolver layouts do zero. Para adicionar um componente, basta selecioná-lo na barra lateral e arrastá-lo para o Canvas. Depois de inserido, ele pode ser reposicionado, personalizado.

Dica: organize sua página utilizando Containers como base da estrutura. Em seguida, adicione títulos, textos, imagens, botões e demais componentes dentro deles. Essa abordagem torna o layout mais organizado, facilita a manutenção e melhora a responsividade da página.

---

​

Blocos

Os Blocos são seções prontas e totalmente personalizáveis que permitem criar páginas de forma muito mais rápida. Cada bloco já possui uma estrutura completa, composta por diversos componentes organizados e configurados para atender aos principais padrões de Landing Pages. Em vez de construir uma seção do zero, basta escolher um bloco, adicioná-lo ao Canvas e personalizar seu conteúdo, cores, imagens e demais elementos conforme a necessidade do seu projeto. Todos os blocos podem ser editados livremente após serem inseridos, permitindo alterar sua estrutura, adicionar ou remover componentes e adaptá-los à identidade visual da sua página.

​

Como adicionar um bloco

Para inserir um bloco na página: Após a inserção, basta selecionar qualquer elemento para começar a personalização através do Inspector.

​

Categorias de blocos

Os blocos são organizados por categorias para facilitar a criação de diferentes tipos de páginas.

​

Personalizando um bloco

Após adicionar um bloco, todos os seus elementos podem ser modificados individualmente. Você pode:

• Alterar textos e imagens;
• Modificar cores e tipografia;
• Adicionar ou remover componentes;
• Reorganizar a estrutura da seção;
• Ajustar espaçamentos e alinhamentos;
• Inserir novos componentes dentro do bloco.

Na prática, um bloco funciona como um ponto de partida. Depois de inserido, ele pode ser personalizado livremente para atender às necessidades do seu projeto.

---

​

Camadas

A aba Camadas oferece uma visão completa da estrutura da sua página, exibindo todos os elementos organizados em uma árvore hierárquica. Ela facilita a navegação entre componentes, especialmente em páginas mais complexas, permitindo localizar e selecionar qualquer elemento com rapidez. Sempre que um componente é adicionado ao Canvas, ele também passa a fazer parte da árvore de camadas. Assim, é possível entender exatamente como a página está organizada e como cada elemento se relaciona com os demais.

​

Como funciona a hierarquia

Cada item exibido na lista representa um componente da página. Os elementos são organizados de acordo com sua estrutura, onde componentes podem estar contidos dentro de outros componentes. Essa hierarquia representa exatamente como a página foi construída no Canvas. Quanto mais recuado um elemento estiver na árvore, significa que ele pertence ao componente imediatamente acima.

​

Expandir e recolher grupos

Containers e outros componentes que possuem elementos internos podem ser expandidos ou recolhidos. Isso facilita a navegação em páginas maiores, permitindo visualizar apenas a parte da estrutura que está sendo editada no momento.

​

Selecionando elementos

Ao clicar em qualquer item da árvore, o componente correspondente será automaticamente selecionado no Canvas. E você será direcionado para o Inspector desse componente, podendo realizar as edições necessárias

Dica: sempre que tiver dificuldade para selecionar um elemento diretamente no Canvas, utilize a aba Camadas. Em páginas com muitos componentes ou elementos sobrepostos, ela é a forma mais rápida e precisa de localizar exatamente o item que deseja editar.

---

​

Estilo

A aba Estilo reúne todas as configurações visuais globais da página. Nela você define a identidade visual do projeto, como tipografia, paleta de cores, tema e outros padrões que serão utilizados pelos componentes. As alterações realizadas nessa seção são aplicadas automaticamente em toda a página, mantendo uma aparência consistente e facilitando futuras mudanças de identidade visual. Mesmo utilizando configurações globais, cada componente continua podendo receber personalizações individuais através do Inspector, permitindo exceções quando necessário.

Importante: as configurações da aba Estilo funcionam como o padrão da página. Sempre que um componente não possuir um estilo personalizado, ele utilizará automaticamente os valores definidos aqui.

Dica: configure primeiro a identidade visual da página na aba Estilo e deixe as personalizações individuais apenas para casos específicos. Essa abordagem facilita futuras alterações e mantém todo o projeto visualmente consistente.

---

​

Config

A aba Configuração reúne todas as definições gerais da página. É nela que você configura informações de SEO, compartilhamento em redes sociais, scripts personalizados, recursos de performance e outras opções que afetam o comportamento da página.

---

​

Inspector

O Inspector é o painel onde você personaliza cada componente da sua página. Sempre que um elemento é selecionado no Canvas ou na aba Camadas, o Inspector exibe todas as opções de edição disponíveis para aquele componente. Enquanto a aba Conteúdo varia de acordo com o componente selecionado, as abas Design, Ação e HTML possuem a mesma estrutura para todos os componentes. Essas configurações são úteis para organização da página, estilizações específicas com CSS, scripts personalizados e integrações com bibliotecas externas.

Dica: na maioria dos casos, você utilizará principalmente as abas Conteúdo e Design. As abas Ação e HTML são recursos mais avançados, indicados para adicionar interatividade e realizar personalizações técnicas quando necessário.

---

​

IA

O Assistente IA foi desenvolvido para acelerar a criação e edição de páginas utilizando linguagem natural. Em vez de realizar alterações manualmente, basta descrever o que deseja fazer e a inteligência artificial executará as modificações automaticamente. A IA pode atuar tanto em componentes específicos quanto na página inteira, auxiliando desde pequenos ajustes até a criação de novas seções.

​

Como utilizar

Para utilizar o Assistente IA, basta selecionar um componente ou deixar nenhum elemento selecionado e descrever a alteração desejada no campo de texto. Após enviar a solicitação, a IA analisará o contexto da página e realizará as modificações automaticamente. Você também pode utilizar os exemplos sugeridos pelo próprio assistente para iniciar rapidamente uma edição.

​

Editando um componente

Ao selecionar um componente antes de utilizar a IA, as alterações serão aplicadas apenas ao elemento escolhido. Isso permite realizar ajustes específicos sem afetar o restante da página. Exemplos de comandos:

• Altere este título para um tom mais persuasivo.
• Deixe este botão mais chamativo.
• Altere a cor deste botão para a cor primária.

​

O que a IA pode fazer

O Assistente IA pode auxiliar em diversas tarefas, como:

• Criar novas seções da página.
• Reescrever títulos e textos.
• Ajustar o tom da comunicação.
• Alterar cores e estilos.
• Organizar layouts.
• Melhorar chamadas para ação (CTAs).
• Criar descrições e conteúdos.
• Realizar pequenas alterações estruturais.

Quanto mais clara for a solicitação, melhores tendem a ser os resultados.

​

Boas práticas

Para obter respostas mais precisas, descreva exatamente o que deseja alterar e, sempre que possível, informe o objetivo da mudança. Em vez de utilizar comandos genéricos como:

“Melhore isso.”

Prefira instruções mais específicas, como:

“Reescreva este título para aumentar a taxa de conversão.”

ou

“Crie uma seção de benefícios utilizando quatro cards com ícones.”

Essas informações ajudam a IA a compreender melhor sua intenção e produzir resultados mais próximos do esperado.

Dica: selecione um componente antes de utilizar o Assistente IA quando desejar editar apenas um elemento específico. Caso queira modificar toda a página, basta deixar nenhum componente selecionado e descrever a alteração desejada.

---

​

Sua página está pronta!

Com a página finalizada, basta Salvar todas as alterações realizadas e, quando estiver tudo pronto, clicar em Publicar para disponibilizá-la. Após a publicação, o próximo passo é criar um Link para essa página. É através deles que você poderá definir a URL de acesso, configurar domínios, utilizar parâmetros de rastreamento, realizar testes A/B e integrar a página com o restante da infraestrutura do Trackup.