Visão geral da área de trabalho

A área de trabalho do editor é dividida em três áreas principais: os painéis de arquivos e blocos à esquerda, a área central de prévia e os painéis de edição à direita.

Espaço reservado para captura da área de trabalho

Barra superior

A barra superior contém ações do projeto, ferramentas de IA, ferramentas de idioma, controles de prévia, controles responsivos, ajudas de visibilidade, desfazer e refazer, controles da conta e status de salvamento.

Ações comuns incluem:

Abrir o menu do projeto.
Recarregar a prévia.
Alternar entre modo de edição e modo de prévia.
Trocar entre tamanhos desktop, tablet, mobile e tela cheia.
Forçar elementos ocultos a ficarem visíveis durante a edição.
Ocultar ou restaurar barras de ferramentas de seção.
Desfazer e refazer alterações.

Espaço reservado para captura dos controles da área

O menu principal abre pelo logo do Teluyo na barra superior. Primeiro passe o mouse sobre o logo e depois clique nele para mostrar o menu do projeto.

Pelo menu principal você pode iniciar o tour guiado, acessar ações do projeto, gerenciar opções de importação e exportação e abrir as ferramentas de importação/exportação de bibliotecas quando estiverem disponíveis para a conta. Ele é o ponto central para ações que afetam o projeto inteiro, não apenas o elemento ou a página selecionada.

Barra lateral esquerda

A barra lateral esquerda contém:

Páginas: páginas HTML do projeto.
Recursos: imagens, vídeo, áudio e outros arquivos enviados.
Estilos e scripts: arquivos CSS e JS do projeto, além de um modo de biblioteca de scripts.
Blocos: categorias de blocos prontos e biblioteca pessoal de blocos.
Blocos globais: seções reutilizáveis sincronizadas entre páginas.

Cada painel pode ser recolhido, redimensionado e restaurado.

Espaço reservado para captura da barra lateral esquerda

Área central

A área central mostra a página ativa. No modo de edição, os usuários podem selecionar elementos, editar texto inline, arrastar blocos e elementos para a página e usar controles de seção. No modo de prévia, a página se comporta de forma mais parecida com o site exportado.

Barra lateral direita

A barra lateral direita contém:

Barra de elementos rápidos para inserir elementos HTML comuns.
Árvore Elementos para selecionar nós da página.
Estilos e scripts da página para vincular arquivos CSS e JS à página atual.
Configurações da página e SEO para metadados e campos de compartilhamento social.
Seções de dados para filtros por categoria e seções orientadas por dados.
Propriedades do elemento para estilos, atributos, classes, eventos, links, imagens e traduções.

Espaço reservado para captura da barra lateral direita

Modo de prévia

O modo de prévia bloqueia os painéis de edição e permite que scripts e interações funcionem de forma mais próxima da experiência exportada. Ative-o com o botão de prévia na barra superior quando quiser testar a página como um visitante a veria.

Você também pode entrar temporariamente no modo de prévia mantendo a tecla Alt pressionada. Enquanto a tecla estiver pressionada, a área central se comporta como em prévia; ao soltá-la, Teluyo volta para a edição normal. Algumas alterações geradas por scripts podem ser mantidas depois da prévia se uma seção estiver configurada para mantê-las.