Começo
Editor visual do site
Monte as páginas da loja por blocos, edite o texto na própria página e publique quando estiver pronto.
O editor visual abre a sua loja de verdade no meio da tela, com os seus produtos. Você clica no que quer mudar, arrasta seções, escreve direto na página e ajusta computador, tablet e celular separado. Ele fica no estúdio visual: clique no modo Visual, no topo do painel, e abra a aba Site. O endereço direto é /dashboard/editor/site.
As partes da tela#
| Lugar | O que tem |
|---|---|
| Topo | Página em edição, Editar ou Visualizar, computador, tablet ou celular, desfazer e refazer, estado do rascunho, Assistente e Publicar. |
| Camadas | A árvore da página: avisos do topo, cabeçalho, as seções com o que tem dentro e o rodapé. Arraste para mudar a ordem, dois cliques para renomear e o olho para ocultar no aparelho escolhido. |
| Adicionar | Seções prontas (abertura, vitrine de produtos, planos, vantagens, perguntas e outras), as seções da vitrine da loja e blocos soltos. Clique para colocar depois do que está selecionado, ou arraste até o lugar. |
| Tema | Paletas prontas, cantos e botões, cores uma a uma, fontes, formas, fundo, animações, a estrutura da loja e o CSS e JavaScript. |
| Loja | Partes que valem em todas as páginas: cabeçalho, rodapé, avisos, cartões de produto, página de produto e neve. |
| Modelos | Lojas modelo inteiras: estrutura, cores e visual de uma vez, sem mexer nos seus textos e produtos. |
| Propriedades | À direita, as opções do que está selecionado, em Conteúdo e Estilo. |
Blocos#
| Bloco | Para quê |
|---|---|
| Seção | Faixa da página. Pode ter cor, degradê ou imagem de fundo, e uma âncora para links como #ofertas. |
| Grupo | Junta blocos um embaixo do outro ou lado a lado. Com link, vira um cartão clicável. |
| Grade | Colunas. No celular vira uma coluna sozinha, a não ser que você mude. |
| Título, Texto, Selo | Textos. Dois cliques na página editam ali mesmo. |
| Botão | Texto, link, ícone e estilo (principal, secundário, contorno, transparente ou só o texto). |
| Imagem, Vídeo, Ícone, Espaço, Linha | Imagem da galeria, vídeo do YouTube, um dos ícones da loja, espaço em branco e linha divisória. |
| Produtos | Todos, os em destaque, de uma categoria ou escolhidos um por um, em grade, carrossel ou lista. |
| Categorias, Avaliações, Perguntas | Atalhos das categorias, avaliações aprovadas e perguntas que abrem ao clicar. |
| Contagem, Cupom, Estoque | Contagem regressiva até o fim da oferta, cupom que copia com um clique e "restam X unidades" com o estoque de verdade. |
| Carrossel, Galeria | Imagens que passam sozinhas, e grade de fotos que amplia ao clicar (ou de logos em cinza). |
| Abas, Tabela, Depoimento | Conteúdo separado por aba, tabela comparando planos e o que um cliente disse de verdade. |
| Seções da vitrine | Banner, categorias, destaques, prateleiras e as outras seções da loja, com as mesmas opções do editor de abas. |
Computador, tablet e celular#
O estilo que você muda no computador vale também no tablet e no celular. Com o tablet ou o celular escolhido no topo, a mudança vale só naquele aparelho e o campo ganha um ponto azul. O ícone ao lado do nome volta ao valor de cima. Título grande e grade se ajustam sozinhos nas telas menores, até você definir outro valor.
Atalhos#
| Tecla | O que faz |
|---|---|
Ctrl + Z / Ctrl + Shift + Z |
Desfazer e refazer. |
Ctrl + S |
Gravar o rascunho na hora. |
Delete |
Apagar o bloco selecionado. |
Ctrl + D |
Duplicar. |
Ctrl + C / Ctrl + V |
Copiar e colar bloco, inclusive entre páginas. |
Alt + ↑ / Alt + ↓ |
Mover o bloco. |
Esc |
Selecionar o bloco de fora. |
Páginas#
A Página inicial começa com as seções que a sua vitrine já mostra. Ao publicar pela primeira vez, ela passa a ser a do editor visual. Se a página inicial era uma página em código, o editor avisa antes: o código fica guardado, mas deixa de aparecer.
Para criar outra página, abra o seletor de páginas no topo e escolha Nova página. Dê um nome, confira o endereço e comece em branco ou por um modelo. A página só aparece na loja depois de publicada. Nome, endereço, descrição para o Google e a chave Visível na loja mudam na hora, sem precisar publicar.
A Página de produto é um modelo que vale para todos os produtos: lá você ajusta o que aparece e o jeito de escolher a variação.
Animação e quando aparece#
No Estilo de qualquer bloco, Animação escolhe como ele entra na tela (surgir, subir, vir de lado, crescer, desfocado para nítido) e o efeito ao passar o mouse. No editor o bloco fica sempre à vista; para ver como ele entra, use Ver a animação. Quando aparece mostra o bloco só para quem não entrou na conta, só para clientes logados, ou só dentro de um período. No editor, bloco com condição fica com borda tracejada.
Assistente#
Abra pelo botão Assistente no topo ou por IA na barra de baixo. Ele monta com o visual, os produtos e as imagens da sua loja, e você vê a montagem ao vivo: os agentes passam pela página, cada seção monta a estrutura, os títulos e textos se escrevem e as imagens e botões surgem, um bloco por vez. A barra de baixo mostra o andamento e tem Pausar e Pular (mostra o resto de uma vez). No fim dá para Ver de novo ou Desfazer.
A IA desenha cada seção do zero: estrutura, cores, tamanhos e espaços. Antes de pedir, escolha o Estilo que ela segue: Automático, Moderno, Minimalista, Escuro, Neon, Elegante, Divertido, Corporativo ou Gamer.
Com uma seção selecionada, Outra versão com IA, no painel da direita, refaz o desenho e mantém o conteúdo e as fotos. Custa 1 cota, e Ctrl + Z volta.
Em fundo de destaque, o texto sai branco ou preto conforme a cor da sua loja, para continuar legível.
| Modo | O que faz | Cotas |
|---|---|---|
| Página inteira | Planeja e monta a página toda: troca a atual ou entra no fim. | 3 |
| Uma seção | Uma seção nova logo depois da que está selecionada. | 1 |
| Melhorar textos | Reescreve os textos da seção escolhida ou da página, sem mudar o desenho. | 1 |
Na Nova página também dá para escolher A IA monta a página. Se algo der errado ou você parar no meio, nada é cobrado. Veja as cotas de IA.
Parecido com um site#
Em Página inteira e Uma seção (e na Nova página com IA) dá para mandar o print de um site que você gostou: arraste a imagem, cole com Ctrl+V ou escolha o arquivo. Print da página inteira também vale: ele é cortado em partes que a IA lê bem, até 8 partes e 3 imagens por pedido. Com imagem, não precisa escrever nada, mas dá para dizer o que a página precisa ter.
| Quanto seguir | O que a IA faz |
|---|---|
| Inspirar | Pega o estilo e o clima; pode reorganizar a página. |
| Parecido | Mesma ordem e estrutura; troca o que não existe na sua loja. |
| Bem fiel | Segue de perto: colunas, quantidade de itens, alinhamento, fundos e espaços. |
Usar as cores da imagem troca as cores do tema no rascunho, já corrigidas para o texto continuar legível. Durante a montagem, um painel mostra a imagem com a parte que está sendo feita. Desfazer volta a página e as cores juntas.
Textos, fotos, marcas, logos e preços da imagem não são copiados: a página sai com os textos, produtos e fotos da sua loja. O print não fica guardado; a IA usa e descarta. Custa o mesmo que sem imagem.
Seções salvas e teste A/B#
Numa seção, abra Reaproveitar e testar:
- Salvar como seção guarda a seção em Adicionar, Salvas. Colocada ligada, ela muda em todas as páginas quando você edita a seção salva; como cópia, fica independente.
- Testar duas versões cria a versão B. Depois de publicar, metade dos visitantes vê cada uma (dá para mudar a divisão), e o painel do teste mostra a porcentagem de cliques de cada versão. Ficar com A ou Ficar com B encerra o teste.
Números por seção#
O botão Números no topo mostra, em cima de cada seção, quantas pessoas viram e clicaram nos últimos 30 dias. É só contagem: o editor não sabe quem viu.
Revisar, agendar e mostrar antes#
- Publicar confere o site antes: link quebrado ou para âncora que não existe, imagem sem descrição, texto com pouco contraste, página sem título principal, contagem que já terminou e bloco que passa da tela do celular. Erro impede a publicação; aviso você pode publicar mesmo assim.
- A seta ao lado de Publicar tem Agendar publicação: escolha o dia e a hora e, se quiser, quando a loja volta sozinha ao que estava no ar (bom para promoções).
- Link de prévia gera um endereço que mostra o rascunho sem entrar no painel, por 7 dias, para alguém aprovar antes.
Páginas em código#
Uma página feita no editor de código abre aqui por Editar aqui (no seletor de páginas) ou Abrir no editor visual (no editor de código). O conteúdo vira blocos, e a loja continua mostrando a versão em código até você publicar.
Versões#
Cada publicação guarda uma foto do site. Em Versões publicadas, no menu de três pontos, dá para voltar a qualquer uma das 20 últimas. A versão volta como rascunho: confira e publique se estiver certo.