# Personalizar o site com o editor visual

Monta a página inicial com secções, escolhe cores, fontes e logótipo, vê o resultado em computador, tablet e telemóvel e publica quando estiver pronto.

O **editor visual** é onde dás a cara à tua loja, sem uma linha de código. Vês o site real ao vivo, clicas na secção que queres mudar e ajustas textos, imagens, cores e tipos de letra. É o equivalente ao "Personalizar tema" do Shopify.

## Abrir o editor

No menu lateral, abre **Conteúdo → Editor visual ✦**. O editor ocupa o ecrã inteiro e tem três zonas:

- à esquerda, a lista de **Secções** e o separador **Tema**;
- ao centro, a pré-visualização da loja;
- à direita, as definições da secção que escolheste.

No topo escolhes a **Página a editar** (a página inicial ou outra página) e a vista **Computador**, **Tablet** ou **Telemóvel**.

*(Captura do painel: Editor visual: secções à esquerda, loja ao vivo ao centro e o botão Publicar)*

## Editar as secções

1. Clica numa secção na lista à esquerda, ou diretamente na pré-visualização.
2. Altera os textos, imagens e botões no painel da direita. A pré-visualização atualiza enquanto escreves.
3. Para mudar a ordem, arrasta a secção na lista. O ícone do olho mostra ou esconde a secção sem a apagar.
4. Para acrescentar conteúdo, carrega em **Adicionar secção** e escolhe o tipo:
   **Hero (capa)**, **Texto**, **Imagem + texto**, **Grelha de coleções**, **Coleção em destaque**, **Vantagens (ícones)**, **Galeria**, **Perguntas frequentes**, **Newsletter**, **Últimos artigos do blog**, **Contactos + formulário** e **Metaobjetos (dados personalizados)**.
5. A **Barra de anúncio**, o **Cabeçalho** e o **Rodapé** estão no topo e no fim da lista e são comuns a todas as páginas.

## Cores, fontes e logótipo (separador Tema)

No separador **Tema** defines o aspeto geral:

- **Logótipo no cabeçalho**;
- uma paleta pronta (**DTEC**, **Floresta**, **Oceano**, **Terracota**, **Preto**) ou as tuas cores: **Cor principal**, **Cor de destaque**, **Fundo** e **Texto**;
- **Fonte dos títulos** e **Fonte do texto**;
- forma dos botões e dos cantos, espaçamento e formato das imagens dos produtos.

## Publicar ou descartar

As alterações não aparecem aos clientes enquanto não publicares. No topo do editor vês "Alterações por publicar".

- **Publicar** grava tudo e põe as mudanças no site.
- **Descartar** desfaz o que ainda não publicaste.
- Ctrl S também publica.

Se tentares sair com alterações por guardar, o editor pergunta antes.

> **Dica — Vê sempre no telemóvel**
> A maior parte das visitas chega pelo telemóvel. Antes de publicar, muda para a vista **Telemóvel** e confirma que os textos da capa não ficam demasiado longos.

## Conteúdo → Aparência

Em **Conteúdo → Aparência** tens as mesmas definições do tema num formulário simples, com pré-visualização: **Logótipo** e **Favicon**, **Cores** com paletas, **Tipografia e forma**, **Barra de anúncio**, **Cabeçalho e rodapé** (pesquisa, ícone do carrinho, cabeçalho fixo, texto do rodapé, newsletter) e **Redes sociais** (Instagram, Facebook, TikTok, YouTube). Carrega em **Guardar** no fim.

*(Captura do painel: Conteúdo → Aparência: logótipo, cores e o botão Guardar)*

## Temas: preparar um visual novo sem mexer no site

Em **Conteúdo → Temas** está a biblioteca de temas. O tema publicado (**Tema atual**) é o que os clientes veem; os da **Biblioteca de temas** são rascunhos que só tu vês.

*(Captura do painel: Conteúdo → Temas: o tema atual com os botões Personalizar e Ver, e a biblioteca de temas)*

1. Carrega em **Adicionar à biblioteca** e escolhe um modelo (por exemplo **Boutique**, **Mercado** ou **Minimal**). O logótipo, os menus, as redes sociais e as páginas passam para o tema novo.
2. Carrega em **Personalizar** para o abrir no editor visual. Aqui o botão chama-se **Guardar**, porque o tema ainda não está publicado.
3. Usa **Pré-visualizar** para ver o tema completo num separador novo.
4. Quando estiveres satisfeito, carrega em **Publicar**. O tema anterior fica guardado na biblioteca e podes voltar a ele quando quiseres.

No menu de cada tema há ainda **Duplicar**, **Renomear**, **Editar CSS** (para quem sabe CSS) e **Apagar**.

## Problemas frequentes

| Problema | O que fazer |
|---|---|
| Publiquei e não vejo as mudanças no site | Atualiza a página do site (às vezes o browser guarda a versão antiga durante alguns segundos). |
| A pré-visualização não carrega | Confirma que o site da loja abre com o botão **Ver site** no topo do painel e recarrega o editor. |
| Quero editar outra página | Escolhe-a em **Página a editar**, no topo do editor. Para criar páginas novas, vê [Páginas, blog e menus](https://feitora.pt/ajuda/conteudo/paginas-blog-menus). |