O editor em resumo
Um tour pelo editor da Payly: a barra superior, o painel Blocos, a tela e o painel de configurações, além de como funcionam o salvamento, o desfazer e os atalhos de teclado.
O editor é onde você monta as páginas da sua loja. Você vê cada página como um visitante a verá e a altera selecionando elementos, arrastando-os e preenchendo as configurações deles. Nada do que você faz aqui fica visível para os visitantes até você publicar.
Abrir o editor
- Abra o painel do seu site.
- Clique em Editar site no topo do menu à esquerda.
Um site novo abre no editor automaticamente logo depois que você escolhe um design. Veja Crie seu primeiro site.
As quatro áreas
O editor tem uma barra no topo e três colunas abaixo dela: o painel Blocos à esquerda, a sua página no meio (a tela) e o painel de configurações à direita.
A barra superior
Da esquerda para a direita, a barra superior reúne estes controles:
- Painel leva você de volta ao painel do seu site.
- O status de salvamento mostra em que pé está o seu trabalho. Salvo, não publicado significa que as suas alterações estão salvas no rascunho, mas a sua loja no ar ainda não as mostra. Salvo e publicado significa que a sua loja no ar corresponde ao que você vê. Você também vê Salvando… por um instante depois de cada alteração, e Não foi salvo se um salvamento falhar.
- A caixa com o nome do site mostra o nome da sua loja. Clique nela para renomear o seu site.
- O seletor de páginas (ele mostra o nome da página em que você está, como Início) lista as suas páginas. Escolha uma para editá-la. Gerenciar páginas, no fim da lista, abre o gerenciador de páginas. Veja Adicione e gerencie páginas.
- Computador, Tablet e Celular alternam o tamanho de tela para o qual você está criando. Veja Deixe seu site bonito em celulares e tablets.
- O ícone de relógio (Backups) abre os seus backups salvos. Veja Desfaça alterações e restaure uma versão anterior.
- As duas setas são Desfazer e Refazer.
- O ícone de seta saindo de uma caixa (Ver site no ar) abre a sua loja no ar em uma nova aba. Ele aparece depois que você publica.
- Visualizar mostra o seu site inteiro, com os links funcionando, em uma nova aba. Veja Visualize seu site antes de publicar.
- Publicar coloca as suas alterações na sua loja no ar. Veja Publique seu primeiro site.
- O menu da conta, no canto direito, guarda o tema e o idioma da própria Payly (eles não alteram a sua loja), além de Configurações, Página inicial da Payly e Sair.
O painel Blocos
A coluna da esquerda começa com Blocos, as peças de construção que você pode adicionar a uma página, organizadas em grupos: Básico, Mídia, Layout, Loja, Marketing e Menus e formulários. Arraste um bloco para a página, ou clique nele para adicioná-lo ao fim da seção atual. Veja Adicione, mova e redimensione blocos.
Role para baixo na mesma coluna para encontrar Estrutura, uma lista com o cabeçalho, as seções da página atual e o rodapé, com um botão Adicionar seção. Veja Trabalhe com seções.
A tela
O meio da tela é a sua página. Ela é desenhada pelo mesmo código que desenha a sua loja no ar, então o que você vê é o que os visitantes recebem. Clique em qualquer bloco ou seção para selecioná-lo. Um bloco selecionado ganha um contorno azul, alças de redimensionamento e uma pequena barra de ferramentas com os botões Duplicar, Rotação e Excluir. Os links na tela não abrem quando você clica neles.
O painel de configurações
A coluna da direita tem duas abas:
- Seleção mostra as configurações do que você selecionou. Sem nada selecionado, ela mostra as configurações da própria página: o Título no navegador, a Descrição para busca e a chave Esta é a página da loja. Selecione um bloco e ela mostra as configurações desse bloco, agrupadas sob títulos como Geral, Tipografia, Tamanho e posição e Gerenciar. Clique em um título para abri-lo. Para voltar às configurações da página, clique em Configurações da página no topo do painel, pressione Esc ou clique na área cinza ao lado da página.
- Design do site reúne as cores, as fontes e as configurações de layout que valem para todas as páginas. Veja Defina suas cores, fontes e layout.
Como funciona o salvamento
O editor salva para você. Um instante depois que você para de alterar algo, ele salva o seu rascunho e o status na barra superior volta a Salvo, não publicado. Não existe um botão Salvar.
Uma alteração salva não está no ar. Os seus visitantes continuam vendo a última versão publicada até você clicar em Publicar.
Desfazer e refazer
Clique em Desfazer para desfazer a sua última alteração e em Refazer para trazê-la de volta. Eles lembram das alterações que você fez desde que abriu o editor. Se você fechar ou recarregar o editor, esse histórico recomeça a partir da versão salva.
Atalhos de teclado
No Mac, use Cmd no lugar de Ctrl.
| Teclas | O que elas fazem |
|---|---|
| Ctrl + Z | Desfazer a última alteração |
| Ctrl + Shift + Z | Refazer |
| Ctrl + D | Duplicar o bloco selecionado |
| Delete ou Backspace | Excluir o bloco selecionado |
| Esc | Limpar a seleção |
| Teclas de seta | Deslocar o bloco selecionado em 1 pixel (segure Shift para 10) |
| Ctrl + teclas de seta | Mover o bloco selecionado em uma célula da grade |
| Ctrl + Shift + teclas de seta | Deixar o bloco selecionado uma célula mais largo, mais estreito, mais alto ou mais baixo |