O Seox Builder é o construtor visual de páginas com Inteligência Artificial do Seox Publisher. Ele permite criar landing pages completas dentro do seu portal WordPress conversando com a IA em português — você descreve o que quer, ela monta a página, você ajusta o resultado e publica. Não precisa programar, não precisa instalar nada na sua máquina, e a página final fica armazenada como uma Página normal do WordPress, com URL no próprio domínio do portal.
Este guia percorre o builder em ordem, do primeiro acesso até a publicação. Você pode lê-lo de ponta a ponta na primeira vez ou usar a navegação por seções como referência depois. Cada parte foi pensada para responder a uma pergunta prática do dia a dia: como acessar, como conversar com a IA, como editar elemento por elemento, como personalizar o visual da página inteira, como publicar e como voltar para uma versão anterior se algo der errado.
Os pontos principais para ter em mente antes de começar: as páginas geradas ficam armazenadas como Páginas normais do WordPress, com URL no seu próprio domínio (ex.: seusite.com.br/promocao-natal/); a conversa com a IA é livre e em pt-BR — não há palavras-chave a decorar nem comandos especiais; cada salvamento e cada aceite de sugestão geram uma revisão no histórico — você sempre pode voltar.
Como acessar o builder
Existem três caminhos para abrir o Seox Builder, conforme o ponto de partida da sua tarefa: você pode entrar em uma página já existente, em uma página que estava sendo editada pelo Gutenberg, ou em uma página criada do zero. Da primeira vez que abrir o builder em uma página, ainda passa por uma tela rápida de configuração inicial.
1 Pelo link na lista de Páginas
No menu lateral do WordPress, vá em Páginas → Todas as páginas. Passe o mouse sobre o título da página e clique no link Editar com Seox Builder que aparece junto dos links de Editar, Lixeira, etc. O builder abre direto.
2 Pelo painel do Gutenberg
Se você já estava editando a página no editor normal do WordPress, clique em Editar com Seox Builder no painel lateral direito (procure o card Seox Builder).
3 Criando uma página nova
Vá em Páginas → Adicionar nova, dê um título provisório, salve como rascunho e clique em Editar com Seox Builder. A página entra no builder vazia, pronta para a primeira instrução.
4 Respondendo à tela “Antes de começar”
Da primeira vez que você abre o builder em uma página, aparece um diálogo perguntando se a página final deve mostrar o cabeçalho e o rodapé do seu portal. Você decide na hora ou clica em Decidir depois e ajusta isso quando quiser no painel Configurações.
Dica: páginas que já foram abertas no builder ganham um pequeno selo IA ao lado do título na listagem. É um lembrete visual de que aquela página é gerenciada pelo Seox Builder.
Conhecendo a interface
Ao abrir o builder você vê uma única tela com três áreas principais: a barra superior no topo (todas as ações), o preview no centro (a página renderizada em tempo real) e o chat com a IA à direita (onde você conversa com o construtor). A barra superior é o controle remoto do builder e concentra todos os controles essenciais.
Da esquerda para a direita, a barra superior tem:
- Fechar — Volta para a tela anterior (geralmente a listagem de Páginas). Suas alterações continuam salvas como rascunho.
- Logo do Seox — Marca da ferramenta. Sem função clicável.
- Mostrar/recolher conversa — Esconde ou abre o chat da IA, útil quando você quer ver só o preview.
- Abas Preview / Design / Código — Modos de trabalho da página, cada um detalhado mais adiante.
- Ferramentas (cinco ícones coloridos) — Painéis flutuantes de Cores, Fontes, Textos, Assets e Configurações.
- Viewport (desktop / tablet / celular) — Três ícones para ver como a página fica em cada tamanho de tela. Disponível em Preview e Design.
- Status — Etiqueta colorida no canto direito mostrando o estado atual: Salvando…, Não salvo, Não publicado ou nada (tudo em dia).
- Modo claro/escuro — Alterna o tema da interface do builder. Não afeta a página construída — é só preferência sua.
- Histórico — Abre o painel com todas as versões anteriores da página.
- Importar — Abre o painel para colar HTML ou subir um arquivo
.htmlou.zip.
- Abrir página — Abre a URL pública da página em uma nova aba. Aparece só depois que a página já foi publicada uma vez.
- Salvar — Grava o rascunho. Não muda nada no que está no ar e fica desabilitado quando não há alterações novas.
- Publicar / Atualizar — Abre o painel de publicação. O texto muda para Atualizar quando a página já está publicada.
Lembre: Salvar e Publicar são coisas diferentes. Salvar guarda o rascunho — ninguém de fora vê. Publicar promove o rascunho para o ar, atualizando a página pública que seu portal mostra ao visitante.
Criando sua primeira página com a IA
Para criar uma página do zero, você manda uma instrução inicial, a IA pode fazer perguntas de briefing antes de começar, e depois constrói a proposta enquanto você acompanha. Ao final, você decide se aceita ou descarta a versão sugerida. Esse fluxo costuma levar entre 30 segundos e 2 minutos no total, dependendo do tamanho da página.
1 Escrever a primeira instrução
Com a página recém-aberta, o chat à direita mostra chips de sugestão (Criar uma landing page completa sobre…, Hero com título grande e CTA destacado etc.). Clique em um chip para começar com ele preenchido ou digite livremente. O ideal é descrever o que você quer, para quem e qual é o objetivo da página. Aperte Enter ou o botão de enviar.
2 Responder ao briefing guiado
Na maior parte das vezes a IA faz algumas perguntas antes de construir. Aparece um painel sobre o composer com perguntas numeradas, cada uma com três a cinco opções clicáveis (cada clique já avança para a próxima pergunta) e um campo Outra opção… para escrever uma resposta sua quando nenhuma servir. Use as setas para avançar e voltar, ou o × para pular tudo. A IA pode fazer até três rodadas de perguntas — quando estiver na rodada 2 ou 3, aparece um indicador Round 2 de 3 · Refinando… no topo.
3 Decidir na tela de confirmação
Quando a IA acha que tem o suficiente, ela escreve no chat algo como Anotei tudo. Posso construir agora?. Logo abaixo aparecem três botões: Sim, construir parte para a página; Adicionar mais info abre um campo livre para você complementar o briefing (com a opção extra Enviar pra IA reavaliar para um round novo de análise); e Ajustar briefing volta para as perguntas. Se a IA tiver lacunas que vai preencher com suposições, ela mostra um bloco Vou assumir: para você decidir se quer detalhar.
4 Acompanhar a geração
Enquanto a IA constrói, você vê um indicador animado, além do conceito que ela definiu para a página e um contador de segundos. Não feche a aba — se a conexão cair, basta reenviar a mesma instrução.
5 Aceitar ou descartar a sugestão
Quando termina, o preview já mostra a página nova e aparece um banner no chat com Aceitar (a versão da IA vira seu rascunho oficial; a versão anterior fica no histórico) ou Descartar (volta ao estado anterior; a conversa continua e a IA aprende com o feedback).
Lembre: aceitar uma sugestão não publica a página. Só faz a versão da IA virar seu novo rascunho. Para publicar de verdade, ainda é preciso clicar em Publicar na barra superior.
Dica: quanto mais detalhada for a instrução inicial, menos perguntas a IA precisa fazer e mais alinhado fica o resultado. Mas você pode pular o briefing sempre — a IA gera com suposições razoáveis e te mostra o que assumiu.
Editando a página com a IA
Depois que a página existe, o chat continua disponível para qualquer ajuste — desde mudanças amplas (deixa as cores mais sóbrias, adiciona uma seção de depoimentos) até refinamentos pontuais (aumenta esse botão, muda essa foto). Você pode complementar suas instruções com imagens de referência, apontar para um elemento específico do preview, fazer perguntas sem disparar geração e gerenciar o histórico das mensagens.
1 Mandar uma nova instrução
Escreva no campo de texto e aperte Enter. Não precisa de comando especial. Fale como se estivesse pedindo para um designer.
2 Anexar imagens de referência
Clique no ícone de clipe à esquerda do campo de texto ou cole imagens direto no campo com Ctrl+V ou Cmd+V (funciona com Print Screen, Snipping Tool, Cmd+Shift+4 no Mac e imagens copiadas de outros apps). Você pode anexar até 4 imagens por mensagem, máximo 8MB cada, em PNG, JPG, WebP, GIF ou SVG.
3 Apontar para um elemento específico (Citar na IA)
Clique no ícone de mira no composer e em seguida no elemento do preview que quer modificar. Aparece um chip no chat dizendo Editando: …elemento e sua próxima instrução fica escopada apenas àquele elemento. Útil para deixa esse título maior, muda a cor desse botão, reescreve este parágrafo.
4 Conversar sem disparar geração
Frases como espera aí, não constrói agora, só uma pergunta são reconhecidas pela IA como pausa: ela responde em modo conversa, sem refazer a página. Útil para tirar dúvidas ou parar para pensar no meio do fluxo.
5 Reaproveitar ou apagar mensagens
Passe o mouse sobre qualquer mensagem do chat para ver três ícones: Copiar, Reenviar (só nas suas, reexecuta a mesma instrução) e Excluir. A hora aparece em cinza claro — passe o mouse para ver a data completa e, nas mensagens da IA, quanto tempo levou para gerar.
Dica: quando a IA não acertou de primeira, prefira reenviar com mais contexto (do que ela fez de errado) ou citar o elemento específico. Reenviar a mesma instrução sem mudança costuma dar o mesmo resultado.
Trabalhando nos três modos: Preview, Design e Código
No centro da barra superior ficam três abas que representam modos de trabalho diferentes com a mesma página: Preview (só vendo, sem mexer), Design (editando direto no preview clicando nos elementos) e Código (editando o HTML cru). Você pode alternar à vontade — não há perda de trabalho ao trocar de modo. O Viewport (desktop / tablet / celular) na barra superior funciona em Preview e Design.
1 Preview
Visualização como o visitante vai ver. Nenhuma ferramenta de edição aparece. Bom para conferir o visual final sem distração, testar a responsividade no Viewport e validar antes de publicar. Cliques em botões e links são desativados de propósito.
2 Design
Modo de trabalho principal. Os elementos viram interativos ao passar o mouse: títulos e parágrafos mostram uma etiqueta com o nome do elemento (clique para abrir o painel de edição), imagens mostram um botão Substituir / Remover e seções inteiras mostram uma toolbar lateral. Duplo-clique em um texto entra em modo de edição inline (digite e aperte Enter para confirmar ou Esc para cancelar).
3 Código
Mostra o HTML completo da página em um editor com numeração de linhas e cores. Mudanças refletem no preview em tempo real. Use só se conhecer HTML — alterações erradas podem quebrar o visual da página.
Atenção: o modo Código existe para quem entende HTML e CSS. Se você nunca mexeu, fique com Preview e Design — eles cobrem 95% das situações. Caso experimente e quebre algo, restaure uma versão pelo Histórico.
Editando elementos clicando neles
No modo Design, clicar em qualquer elemento (ou na etiqueta de hover dele) abre o painel do elemento — um pequeno painel flutuante com várias opções de edição local. É o caminho mais rápido para mudanças pontuais, sem precisar dar instruções para a IA. Tudo que você faz no painel é reversível pelo botão Reverter enquanto o painel estiver aberto.
1 Tag
Troca o tipo do elemento. Por exemplo, transformar um subtítulo em título principal, ou um parágrafo em uma citação. As opções aparecem em um menu suspenso e variam conforme o tipo do elemento.
2 Classes
Adiciona ou remove classes CSS. Útil para quem sabe o que está fazendo; ignore se não conhece.
3 Texto
Edita o conteúdo direto. Se o elemento tiver outros elementos dentro (uma lista, por exemplo), a edição fica indisponível para preservar a estrutura.
4 Transformar em link
Caixa de seleção. Se marcada, aparecem campos para URL (endereço de destino) e Abrir em nova aba (só visível quando a URL começa com http:// ou https://).
5 Reverter alterações
Desfaz tudo que você fez naquele elemento desde que o painel foi aberto. Volta ao estado anterior à seleção.
6 Citar na IA
Manda o elemento para o chat (mesmo efeito do crosshair do composer). Sua próxima instrução fica escopada a este elemento.
Dica: para mudanças visuais pequenas e específicas (muda só esse título), o painel do elemento costuma ser mais rápido que pedir para a IA. Para mudanças amplas (muda o tom da página inteira), o chat é melhor.
Mexendo em seções inteiras
No modo Design, ao passar o mouse sobre uma seção da página (qualquer bloco grande criado pela IA — hero, lista de benefícios, depoimentos etc.), aparece uma toolbar fixa no canto da seção. Essa toolbar permite reorganizar, remover ou ampliar seções inteiras sem precisar abrir o chat. Todas as operações alteram apenas o rascunho — você sempre pode reverter pelo Histórico ou simplesmente não publicar.
1 Mover acima
Sobe a seção uma posição na página.
2 Mover abaixo
Desce a seção uma posição na página.
3 Excluir
Remove a seção. A operação não pede confirmação — use o Histórico para voltar se errou.
4 Botão + no fim da seção
Expande para mostrar duas escolhas: Pedir à IA (abre o chat com a instrução já posicionada para criar uma seção nova naquele lugar) e Inserir bloco dinâmico (abre o catálogo de blocos prontos, descrito na próxima seção).
Lembre: todas essas operações alteram o rascunho, não o que está no ar. Você sempre pode reverter pelo Histórico ou simplesmente não publicar.
Inserindo blocos dinâmicos
Além do conteúdo gerado pela IA (que fica fixo até você pedir para mudar), o builder permite inserir blocos dinâmicos — pedaços de página que se atualizam automaticamente conforme o portal recebe conteúdo novo. Exemplos típicos são listas de posts relacionados ou de uma categoria específica, que mudam sozinhas a cada nova publicação. Use blocos dinâmicos quando o conteúdo precisa estar sempre atualizado sem você precisar editar a página.
1 Abrir o catálogo
Em modo Design, clique no botão + no fim de uma seção e escolha Inserir bloco dinâmico. Uma gaveta lateral abre à direita com os blocos disponíveis.
2 Preencher os argumentos
Cada bloco tem campos próprios: texto (ex.: um título personalizado), número (ex.: quantos itens mostrar), categoria, tipo de post ou termo em cascata. Clique em Opções avançadas se quiser ajustar estilo do card, número de colunas etc.
3 Escolher como inserir
Você tem dois caminhos: Inserir direto coloca o bloco no fim da seção com estilo padrão (mais rápido); Pedir pra IA estilizar leva o bloco para o chat com uma instrução pronta, para a IA aplicar um estilo casado com o resto da página.
4 Salvar
Após inserir ou atualizar um bloco, o builder mostra um aviso Bloco inserido. Não esqueça de salvar. A alteração só fica guardada quando você clica em Salvar na barra superior.
5 Editar um bloco existente
Em modo Design, clicar em um bloco dinâmico já inserido abre o mesmo painel em modo de edição: você muda os argumentos e clica em Atualizar bloco.
Atenção: o painel de Textos não toca em conteúdo de blocos dinâmicos, porque esse texto vem direto do banco de dados do portal. Para alterar conteúdo de bloco dinâmico, edite o post ou categoria de origem no WordPress.
Personalizando o visual da página
Os cinco painéis flutuantes na barra superior (Cores, Fontes, Textos, Assets e Configurações) servem para mudar coisas que afetam a página inteira, não elemento por elemento. Cada painel flutua sobre o preview, pode ser arrastado pelo título para uma posição confortável e fecha ao clicar de novo no mesmo ícone da barra. Toda mudança reflete imediatamente no preview — salve depois para gravar.
1 Cores
Mostra a paleta da página em forma de tokens (Fundo, Superfície, Texto, Primária, Acento, etc.). Cada token vem com um seletor de cor (clique no quadrado) e o código hexadecimal ao lado (você pode digitar direto).
2 Fontes
Mostra os pares tipográficos da página: Títulos (a fonte dos cabeçalhos) e Corpo (a fonte dos parágrafos). Páginas mais complexas podem ter mais entradas. Clique em qualquer card para escolher outra família — o builder oferece cerca de 20 famílias selecionadas do Google Fonts com prévia visual.
3 Textos
Reúne em um único painel todos os textos editáveis da página: títulos, parágrafos, e os textos e URLs de todos os links. Útil para revisar a copy inteira sem precisar caçar elemento por elemento no preview.
4 Assets
Lista todas as imagens da página com miniatura. Para cada uma você tem Trocar imagem (abre a Biblioteca de Mídia do WordPress) e Texto alternativo (alt) — importante para acessibilidade e SEO, pois descreve a imagem para quem não consegue vê-la.
5 Configurações
Os dois toggles principais da página: Exibir cabeçalho do portal (se a página vai mostrar o cabeçalho do tema acima do conteúdo) e Exibir rodapé do portal (mesma ideia para o rodapé). Desligue os dois para uma landing page com foco total, sem distração de menu.
Dica: para landing pages que precisam de foco total (uma página de venda de um único produto, por exemplo), desligue cabeçalho e rodapé do portal. Para conteúdo institucional, mantenha os dois ligados.
Importando conteúdo de fora
Se você tem um HTML pronto vindo de outra ferramenta (export de Webflow, template baixado, e-mail marketing antigo, página exportada do Figma), o builder consegue importar esse conteúdo direto como ponto de partida. O painel Importar fica na barra superior, no lado direito. Importar substitui o conteúdo atual do rascunho — o Histórico mantém a versão anterior.
1 Colar HTML
Abra a aba Colar HTML e cole o HTML completo (com <!DOCTYPE>, <html>, <head> e <body>) na caixa de texto. Bom para snippets exportados de outras ferramentas, templates baixados ou e-mails marketing.
2 Enviar arquivo
Selecione um arquivo .html ou .zip. Se for ZIP, o index.html precisa estar na raiz (não dentro de uma subpasta).
3 Clicar em Importar
O builder processa o conteúdo e atualiza o preview. Aceitar uma importação conta como uma revisão no Histórico, então você pode voltar à versão anterior depois.
4 Revisar os avisos
Após a importação o builder pode mostrar uma lista de Avisos da importação — coisas que ele ajustou ou detectou (ex.: imagem 404 encontrada, script externo removido). Leia antes de publicar.
Atenção: importar substitui o conteúdo atual do rascunho. É uma operação grande — só faça se for o que você quer. O Histórico continua tendo a versão anterior, então dá para reverter, mas o processo de revisar e ajustar o HTML importado pode ser trabalhoso.
Consultando o histórico e restaurando versões
Toda vez que você salva o rascunho, aceita uma sugestão da IA ou importa conteúdo, o builder grava uma revisão. Isso significa que você nunca perde trabalho — pode voltar a qualquer versão anterior quando quiser. O painel de Histórico fica na barra superior e mostra as revisões em ordem cronológica inversa (mais recentes no topo).
1 Data e hora
Em formato relativo (há 2min, há 5h) quando recente, ou data absoluta (21/05/2026) em revisões mais antigas.
2 Origem da revisão
Uma de três etiquetas: IA (você aceitou uma sugestão), Importação (você importou um HTML) ou Manual (você editou e salvou).
3 Autor
Seu nome de usuário do WordPress.
4 Descrição curta
Um resumo do que mudou naquela versão.
5 Botão Restaurar
Clique para voltar o rascunho atual para aquela versão. A operação não apaga o rascunho atual: ele vira uma nova revisão no histórico, e você pode voltar para ele depois.
Lembre: restaurar uma versão não apaga o rascunho atual — ele vira uma revisão a mais no Histórico. Você sempre pode voltar para ele depois.
Publicando a página
Quando você está satisfeito com o rascunho, é hora de mandar para o ar. Clique em Publicar (ou Atualizar, se a página já estava publicada antes) na barra superior. Abre uma gaveta de publicação à direita com os campos de metadados (que controlam como a página aparece no Google e em redes sociais) e os botões de ação. Título e URL pública são obrigatórios — o botão de publicar fica desabilitado se algum deles estiver vazio.
1 Título (obrigatório)
Aparece na aba do navegador, em links compartilhados no WhatsApp ou Facebook e nos resultados do Google. O ideal é 50 a 60 caracteres.
2 URL pública (obrigatório)
Também chamada de slug. É o final do endereço da página — se o portal é seusite.com.br e a URL pública é promocao-natal, a página vive em seusite.com.br/promocao-natal/. O builder sugere uma automaticamente baseada no título; você pode editar.
3 Descrição (opcional, mas muito recomendado)
Duas a três frases que descrevem a página. Aparece nos resultados do Google e na prévia em redes sociais. Ideal: 150 a 160 caracteres.
4 Imagem de preview (og:image)
A imagem que aparece quando alguém compartilha o link no WhatsApp, Facebook, LinkedIn ou Twitter. Clique em Selecionar da biblioteca de mídia para escolher. Tamanho recomendado: 1200 × 630 pixels.
5 Status da página
Selo informativo: Rascunho (cinza, não está no ar), Pública (verde com olho, acessível na URL pública) ou Privada (cinza com cadeado, só usuários logados com permissão acessam).
6 Botão principal de publicação
Muda conforme o status: Publicar agora em rascunho, Tornar pública em página privada, Publicar alterações em página pública com mudanças pendentes, ou Sem alterações pendentes (desabilitado) em página pública sem rascunho.
7 Ações secundárias
Em páginas já publicadas, Tornar privada esconde a página do público mantendo o conteúdo, e Despublicar volta a página para Rascunho (a URL retorna erro 404). Ambas reversíveis.
Dica de SEO: o título e a descrição são a sua chance de aparecer bem no Google. Pense neles como manchete e chamada de jornal. O builder não força os limites de caracteres, mas a recomendação consagrada é 50 a 60 para o título e 150 a 160 para a descrição.
Escolhendo o modo de exibição da página publicada
A página final pode aparecer no portal de duas formas, controladas pelos toggles do painel Configurações. Essa escolha define se a página é uma extensão do seu portal (com menu, logo e rodapé) ou se ocupa a tela inteira do navegador, sem distrações. A decisão é por página — você pode ter umas com cabeçalho e outras sem, no mesmo portal.
1 Embedded (com cabeçalho e rodapé do portal)
Os dois toggles ligados. A página aparece dentro da estrutura normal do seu portal, com o seu menu, sua logo e o rodapé com links e contato. Bom para páginas institucionais, artigos especiais, hubs de conteúdo e qualquer página que se beneficia do visitante navegar para outros lugares do portal.
2 Full takeover (página independente)
Os dois toggles desligados. A página ocupa a tela inteira do navegador, só com o conteúdo criado no builder, sem cabeçalho, sem rodapé, sem menu. Bom para landing pages de campanha, páginas de venda de produto único, páginas de captura de e-mail e qualquer caso em que distrações atrapalhem a conversão.
3 Onde a URL pública aparece
Depois de publicar pela primeira vez, três caminhos levam à URL final: o botão Abrir página na barra superior do builder, o campo URL pública no diálogo de Publicação, e a listagem normal de Páginas do WordPress.
Dica: você pode misturar os dois toggles — só cabeçalho ou só rodapé. Não existe certo nem errado, é uma decisão de estratégia para cada página.
Salvando, alternando tema
Algumas operações ficam de fora do fluxo principal de criar e editar, mas resolvem dúvidas práticas comuns: a diferença entre Salvar e Publicar, como alternar o tema da interface do builder (claro/escuro) e como voltar a editar uma página pelo editor normal do WordPress. Essas opções estão todas na barra superior ou no painel lateral do Gutenberg.
1 Salvar vs. Publicar
Salvar grava o rascunho — ninguém de fora vê. Publicar manda o rascunho para o ar e atualiza a página pública que o visitante acessa. Você pode salvar 100 vezes sem afetar o que está publicado; cada salvamento e cada publicação criam uma revisão no Histórico.
2 Salvamento automático
O builder também salva sozinho em alguns momentos (ao mudar toggles em Configurações, por exemplo). Quando algo está sendo salvo, aparece o status Salvando… no canto direito da barra superior.
3 Modo claro/escuro
O ícone de sol/lua na barra superior alterna o tema da interface do builder. Não afeta a página construída — é só preferência sua, útil em monitores de baixo contraste ou horários noturnos. A escolha fica gravada no seu usuário do WordPress e o builder lembra na próxima abertura.
4 Voltar ao Gutenberg
Se você decidir que prefere editar uma página específica pelo editor normal do WordPress, abra a página no Gutenberg e clique em Voltar ao Gutenberg no painel lateral Seox Builder. O HTML que estava no builder continua salvo — você pode reativar o builder a qualquer momento clicando em Editar com Seox Builder novamente.
Lembre: o histórico de revisões também é mantido quando você volta ao Gutenberg. A operação é 100% reversível.
