Guia de Utilizador do HtmlDrag

Bem-vindo ao HtmlDrag. Este guia irá ajudá-lo a começar do zero, cobrindo a gestão de conta, importação de conteúdo, edição visual e exportação de trabalhos.

1. Conta e Início de Sessão

Antes de usar o HtmlDrag, precisa de criar uma conta. Oferecemos vários métodos de registo e início de sessão para ajudá-lo a começar rapidamente.

1.1 Criar Conta

O HtmlDrag utiliza o registo por e-mail. Basta preencher alguns detalhes básicos para criar a sua conta. Após o registo bem-sucedido, a sua sessão será iniciada automaticamente e será redirecionado para a página inicial.

Registo por e-mail

Na página de registo, complete os seguintes passos para criar a sua conta:

1. Introduzir e-mail: Forneça o seu endereço de e-mail utilizado frequentemente. Este servirá como a sua credencial de início de sessão e canal de notificação. Certifique-se de que o formato está correto, ex., [email protected].
2. Definir palavra-passe: A palavra-passe deve conter letras e números, com um comprimento de 8-32 caracteres. Recomendamos usar uma palavra-passe forte para proteger a sua conta.
3. Confirmar palavra-passe: Introduza novamente a palavra-passe para garantir que ambas correspondem.
4. Definir nome de utilizador (opcional): Pode personalizar o seu nome de utilizador. Se deixar em branco, o sistema gerará automaticamente um nome de utilizador predefinido para si.
5. Aceitar os Termos: Marque "Li e concordo com os Termos de Serviço e a Política de Privacidade", depois clique no botão "Criar Conta" para completar o registo.

Página de registo: Introduzir e-mail e informações básicas para criar conta

Verificação de E-mail e Recompensa de Créditos

Após o registo bem-sucedido, o sistema enviará um e-mail de verificação para a sua caixa de entrada. Ao completar a verificação de e-mail, receberá créditos de bónus que podem ser usados para as funcionalidades Gerador IA e Importar URL. Se não receber o e-mail, verifique a sua pasta de spam; pode clicar em "Reenviar" para solicitar outro e-mail de verificação após 3 minutos.

Dica: Completar a verificação de e-mail não só lhe dá créditos de bónus, mas também desbloqueia a experiência completa e melhora a segurança da sua conta.

1.2 Iniciar Sessão

O HtmlDrag suporta vários métodos de início de sessão. Escolha a opção mais conveniente com base na sua preferência.

Início de Sessão com E-mail e Palavra-passe

Inicie sessão usando o e-mail e a palavra-passe com que se registou:

1. Introduza o seu endereço de e-mail na página de início de sessão
2. Introduza a sua palavra-passe (clique no ícone do olho para alternar a visibilidade da palavra-passe)
3. Clique no botão "Continuar" para completar o início de sessão

Após o início de sessão bem-sucedido, será redirecionado automaticamente para a página inicial onde pode começar a criar.

Início de Sessão com Terceiros (Google / GitHub)

Para um acesso mais rápido, pode iniciar sessão usando a sua conta Google ou GitHub:

1. Iniciar sessão com o Google: Clique no botão "Iniciar sessão com o Google". No popup de autorização da Google, selecione a sua conta e confirme a autorização.
2. Iniciar sessão com o GitHub: Clique no botão "Iniciar sessão com o GitHub". Será redirecionado para a página de autorização do GitHub. Após confirmar, voltará automaticamente ao HtmlDrag.

Página de início de sessão: Suporta e-mail/palavra-passe e contas de terceiros

Dica: Usar o início de sessão Google ou GitHub cria automaticamente uma conta—não é necessário registo separado. No seu primeiro início de sessão com terceiros, o sistema criará automaticamente uma conta vinculada para si.

Link de Palavra-passe Esquecida

Se se esqueceu da sua palavra-passe, clique no link "Esqueceu-se da palavra-passe?" no canto inferior direito da página de início de sessão para entrar no processo de redefinição de palavra-passe (ver Secção 1.3).

1.3 Esqueceu-se da palavra-passe

Se se esqueceu da sua palavra-passe, pode redefini-la usando um código de verificação por e-mail. Todo o processo é concluído numa única página sem redirecionamentos.

Processo de Redefinição de Palavra-passe

Siga estes passos para redefinir a sua palavra-passe:

1. Introduzir e-mail: Forneça o endereço de e-mail que usou durante o registo
2. Obter código de verificação: Clique no botão "Enviar código". O sistema enviará um e-mail contendo um código de verificação de 6 dígitos
3. Introduzir código de verificação: Introduza o código de 6 dígitos que recebeu no campo de código de verificação
4. Definir nova palavra-passe: Introduza a sua nova palavra-passe (deve conter letras e números, 8-32 caracteres de comprimento)
5. Confirmar nova palavra-passe: Introduza novamente a nova palavra-passe para garantir que coincidem
6. Clicar em "Redefinir palavra-passe": Complete a redefinição de palavra-passe. Após ver a mensagem de sucesso, será redirecionado automaticamente para a página de início de sessão

Esqueceu-se da palavra-passe: Redefinir através de código de verificação por e-mail

Validade do Código de Verificação

O código de verificação tem um período de validade limitado—por favor, use-o prontamente após receber o e-mail. Se o código tiver expirado, pode clicar no botão "Reenviar" para solicitar um novo código (terá de aguardar que a contagem decrescente termine antes de reenviar).

Nota: Se o seu e-mail não estiver registado no sistema, o código de verificação não pode ser enviado. Certifique-se de introduzir o endereço de e-mail usado durante o registo.

2. Perfil

O Perfil é o centro para gerir as informações da sua conta, trabalhos e encomendas. Clique no avatar no canto superior direito para aceder.

Perfil: Gerir conta, trabalhos e encomendas num só lugar

2.1 Definições de Perfil

O módulo Definições de Perfil permite-lhe gerir as informações básicas da sua conta, incluindo avatar, nome de utilizador, e-mail, biografia e definições de palavra-passe.

Alterar Avatar

Clique no botão "Alterar avatar" na área do avatar e selecione um ficheiro de imagem local para carregar. O sistema cortará e guardará automaticamente o seu novo avatar.

Alterar Nome de Utilizador

Clique no botão de edição junto ao seu nome de utilizador, introduza um novo nome e clique em "Guardar". O seu nome de utilizador será exibido em todos os seus trabalhos e comentários.

Gestão de E-mail

A secção de e-mail mostra o seu endereço de e-mail atual e o estado de verificação:

1. Verificado: O seu e-mail foi verificado e todas as funcionalidades estão disponíveis
2. Não verificado: Clique em "Enviar e-mail de verificação" para completar a verificação e ganhar créditos de bónus
3. Alterar e-mail: Precisa de verificar o seu e-mail atual primeiro, depois introduzir um novo endereço de e-mail para completar a alteração

Biografia

Introduza a sua autoapresentação na área de biografia (recomendado: não mais de 200 caracteres), depois clique em "Guardar" para atualizar.

Alterar Palavra-passe / Definir Palavra-passe

Clique no botão "Alterar palavra-passe" para abrir o diálogo de definições de palavra-passe:

1. Utilizadores com palavra-passe existente: Introduza a sua palavra-passe atual, depois defina uma nova palavra-passe (8-32 caracteres, incluindo letras e números)
2. Utilizadores sem palavra-passe: Defina uma nova palavra-passe diretamente. Após definir, pode iniciar sessão com e-mail e palavra-passe

Eliminar Conta

Para eliminar a sua conta, clique no botão "Eliminar conta" na parte inferior da página. Por segurança, terá de verificar a sua identidade através de código de verificação por e-mail.

Nota: Após submeter o pedido de eliminação, a sua conta entrará num período de retenção (tipicamente 30 dias) durante o qual não poderá iniciar sessão. Após este período, o sistema eliminará permanentemente os seus trabalhos, créditos e histórico.

Perfil: Gerir avatar, nome de utilizador, e-mail e palavra-passe

2.2 Utilização de Armazenamento

O módulo Utilização de Armazenamento mostra o consumo de espaço da sua conta, ajudando-o a compreender o espaço restante e planear as suas criações em conformidade.

Resumo de Armazenamento

A secção superior mostra a sua utilização geral, incluindo:

1. Usado: O espaço de armazenamento atualmente em uso
2. Total: O limite de armazenamento da sua conta (os utilizadores do Pro desfrutam de maior capacidade)
3. Restante: Espaço disponível para criar novos trabalhos
4. Trabalhos armazenados: Número atual de trabalhos guardados e o limite

Distribuição de Armazenamento

O sistema categoriza o armazenamento em três tipos:

1. Conteúdo HTML: Espaço usado pelo código da página web dos seus trabalhos
2. Recursos de Imagem: Espaço usado por ficheiros de imagem carregados
3. Outros Recursos: Espaço usado por outros anexos

Limite de Contagem de Trabalhos

Utilizadores do Free e Pro têm limites diferentes de contagem de trabalhos. Quando atingir o limite, terá de eliminar alguns trabalhos ou fazer upgrade ao seu plano antes de criar novos.

Atualizar e Melhorar Armazenamento

Clique no botão atualizar para atualizar as informações de armazenamento. Para mais espaço, clique em "Melhorar armazenamento" para visitar a página de Preços e escolher um plano adequado.

Dica: Se o armazenamento da sua conta estiver cheio ou a contagem de trabalhos atingir o limite, o sistema congelará a criação de novos trabalhos. Por favor, elimine alguns trabalhos ou faça upgrade ao seu plano para restaurar as permissões de upload.

2.3 Ficheiros

O módulo de Gestão de Ficheiros mostra todos os trabalhos que criou, suportando operações de visualização, edição, partilha e eliminação.

Lista de Trabalhos e Filtros

Os trabalhos são exibidos como cartões ou numa lista. Pode filtrá-los usando:

1. Pesquisa: Introduza o código ou título do trabalho para pesquisar
2. Filtro de tipo: Filtrar por Gerador IA, Carregamento de Ficheiro, Importar URL, Colar Código, etc.
3. Intervalo de datas: Selecione datas de início e fim para filtrar trabalhos de um período específico
4. Ordenar por: Ordenar por mais recente, mais antigo, contagem de gostos ou contagem de visualizações

Gestão de Ficheiros: Ver, filtrar e gerir todos os trabalhos

Ver e Editar Trabalhos

Clique no botão "Ver" num cartão de trabalho para pré-visualizá-lo. Na interface de pré-visualização, pode:

1. Editar o título do trabalho (duplo clique no título para editar)
2. Clicar em "Editar" para entrar no editor visual e continuar a editar
3. Ver o histórico de gravação do trabalho e restaurar para uma versão específica

Gestão do Estado de Partilha

Utilizadores do Pro podem partilhar trabalhos, permitindo que outros visualizem através de link:

1. Ativar partilha: Clique no botão "Partilhar" para gerar um link de partilha válido por 7 dias
2. Atualizar partilha: Trabalhos já partilhados podem ter os seus links atualizados, redefinindo o período de validade
3. Parar partilha: Clique em "Parar partilha" para invalidar imediatamente o link

Eliminar Trabalhos

Clique no botão "Eliminar" num cartão de trabalho para eliminá-lo. O sistema mostrará dois diálogos de confirmação para evitar a eliminação acidental:

1. Primeira confirmação: Pergunta se deseja eliminar este trabalho
2. Segunda confirmação: Lembra que a eliminação é irreversível

Dica: Pode eliminar até 3 registos de cada vez. Após eliminar um trabalho, o seu espaço de armazenamento será libertado.

2.4 Créditos

O módulo Histórico de Créditos mostra o histórico de transações de créditos da sua conta, incluindo registos de consumo e obtenção.

Histórico de Transações de Créditos

Os registos de créditos são exibidos numa tabela contendo as seguintes informações:

1. Data: Quando a alteração de créditos ocorreu
2. Tipo: O tipo de operação da alteração de créditos
3. Alteração de pontos: Créditos adicionados (positivo) ou deduzidos (negativo)
4. Descrição: Explicação detalhada da alteração

Pode usar filtros de intervalo de datas para ver registos de um período de tempo específico.

Tipos de Créditos

1. Gerador IA: Créditos consumidos ao usar a funcionalidade Gerador IA
2. Importar URL: Créditos consumidos ao usar a funcionalidade Importar URL
3. Recompensa de Registo: Créditos atribuídos a novos utilizadores após registo e verificação de e-mail
4. Bónus de Plataforma: Créditos oferecidos pela plataforma
5. Presente Mensal: Alocação mensal de créditos para utilizadores do Pro
6. Carregamento de Créditos: Créditos obtidos através de compras de créditos
7. Ajuste de Admin: Créditos ajustados manualmente por administradores

Histórico de Créditos: Ver detalhes de transações de créditos

Dica: Utilizadores do Pro recebem créditos extra todos os meses. Os créditos podem ser usados para funcionalidades pagas como Gerador IA e Importar URL.

2.5 Encomendas

O módulo Histórico de Encomendas mostra o seu histórico de compras e registos de pagamento, facilitando a consulta e gestão de encomendas.

Gestão de Encomendas

A lista de encomendas mostra os seus registos de compra. Pode:

1. Ver estado e detalhes da encomenda
2. Usar filtros para encontrar rapidamente encomendas específicas
3. Continuar o pagamento de encomendas pendentes
4. Fechar ou eliminar encomendas de que já não precisa

Dica: Se encontrar problemas de pagamento, pode fechar a encomenda atual e fazer uma nova.

2.6 Os meus trabalhos

A página Os meus trabalhos é o seu espaço dedicado para ver e gerir todas as suas criações. Aceda rapidamente a partir da barra lateral ou do menu de utilizador.

Visualização de Trabalhos

A página exibe todos os seus trabalhos como cartões, cada um contendo:

1. Miniatura de pré-visualização: Vista visual do trabalho para identificação rápida
2. Título do trabalho: Mostra o nome do trabalho, clique para editar
3. Hora de criação: Regista quando o trabalho foi criado
4. Estado de partilha: Mostra se o trabalho está atualmente partilhado

Os meus trabalhos: Ver e gerir todas as suas criações num só lugar

Ações Rápidas

Cada cartão de trabalho fornece botões de ação convenientes:

1. Editar: Entrar no editor visual para continuar a criar
2. Partilhar: Gerar ou gerir links de partilha (apenas Pro)

3. Navegação da barra lateral

O HtmlDrag oferece várias formas de importar conteúdo para o editor, cobrindo todos os cenários desde a criação do zero até ao processamento secundário. Use a barra lateral esquerda para alternar rapidamente entre pontos de entrada.

Navegação da barra lateral: Acesso rápido a diferentes pontos de entrada de criação

3.1 Início

Início é o ponto de entrada padrão do HtmlDrag, apresentando o Gerador IA. Introduza o seu conteúdo aqui para gerar rapidamente designs web profissionais.

3.2 Importar URL

Importar URL permite-lhe introduzir qualquer link de página web pública, e o sistema capturará automaticamente o conteúdo da página e gerará um trabalho editável. Esta é a forma ideal de obter rapidamente designs web existentes para edição posterior.

Introduzir URL

Cole o endereço da página web que deseja capturar no campo de entrada. Apenas são suportados links http/https públicos; endereços privados ou locais não são permitidos.

Importar URL: Introduzir URL, capturar página web instantaneamente

Confirmação de Dedução de Créditos

Após clicar em "Iniciar captura", aparecerá um diálogo de confirmação de dedução de créditos, mostrando os créditos necessários para esta operação, o seu saldo de créditos atual e os créditos de bónus mensais. Os créditos de bónus mensais são deduzidos primeiro, com qualquer custo restante deduzido dos seus créditos atuais.

Progresso e Estado de Captura

Uma vez confirmado, o sistema começa a capturar o conteúdo da página. Por favor, não saia da página durante a captura para evitar interrupções. Após captura bem-sucedida, será automaticamente redirecionado para o editor.

Dicas:

Alguns sites não podem ser capturados: Sites que requerem verificação de início de sessão ou usam frameworks frontend complexos (como algumas aplicações SPA) podem não ser capturados ou podem ficar incompletos.

Sites de áudio/vídeo: Conteúdo dinâmico de sites de áudio e vídeo pode não ser capturado corretamente.

Página demasiado grande: Se o conteúdo da página exceder o tamanho permitido pelo servidor, a captura pode falhar. Tente uma página mais simples.

3.3 Carregar HTML

A funcionalidade Carregar HTML permite-lhe importar ficheiros HTML locais para o HtmlDrag. O sistema realizará uma verificação de segurança e gerará um trabalho editável. Isto é ideal para modelos HTML existentes ou designs de e-mail que precisam de edição posterior.

Formato de Ficheiro e Limites de Tamanho

Suporta formatos de ficheiro .html e .htm. O tamanho de um único ficheiro não deve exceder o limite do sistema (ver interface de carregamento para limites específicos). Ficheiros carregados passam por processamento avançado, o que pode aumentar significativamente o tamanho real de armazenamento comparado com o ficheiro original. Certifique-se de ter capacidade restante suficiente.

Carregar HTML: Arrastar e largar ou clicar para carregar ficheiros HTML

Verificação de Segurança

O sistema verifica ficheiros carregados quanto à segurança, detetando e removendo potenciais scripts maliciosos, tags perigosas e recursos externos suspeitos. Com base no nível de risco (baixo, médio, alto, crítico), o sistema fornecerá avisos apropriados ou bloqueará a gravação.

Nota: Não carregue ficheiros contendo código malicioso. Carregamentos maliciosos podem resultar na suspensão da conta.

Pré-visualizar e Guardar

Após o ficheiro ser analisado, pode ver o resultado na área de pré-visualização. Uma vez confirmado, clique em "Guardar trabalho" para guardar o trabalho na sua conta, e pode entrar no editor visual para editar a qualquer momento.

3.4 Colar Código

A funcionalidade Colar Código permite-lhe colar diretamente código HTML, e o sistema realizará uma verificação de segurança e convertê-lo-á num design visual. Este é o método de importação mais flexível, adequado para programadores ou utilizadores que precisam de controlo preciso sobre o código.

Colar Código HTML

Cole o seu código HTML na área de entrada de código. Pode opcionalmente preencher um título de trabalho (se deixar em branco, o sistema usará o nome predefinido "Trabalho sem título").

Colar Código: Colar código HTML diretamente para começar a editar

Verificação de Segurança

Semelhante ao carregamento de ficheiros, o sistema executa uma deteção de segurança no código colado. Se o nível de risco do código for demasiado alto, a política de segurança do sistema recusará processar este conteúdo. Por favor, reveja o código e tente novamente.

Nota: Não cole código ou scripts maliciosos. O uso malicioso pode resultar na suspensão da conta.

Gerar Pré-visualização e Guardar

Após introduzir o código, clique no botão "Gerar pré-visualização". Assim que o código passar a verificação de segurança, a pré-visualização será gerada automaticamente. Após confirmar o resultado, clique em "Guardar trabalho" para guardar o trabalho na sua conta.

3.5 Gerador IA

Gerador IA funciona melhor com material real: PDF, PPT/PPTX, Excel/XLSX, CSV, Word, Markdown, TXT, JPG/PNG ou texto livre. Descreva o objetivo: resumo, produto, evento, curso, nota interna, dados, follow-up, portefólio ou teste.

1. Carregue o material ou escreva o pedido com público, finalidade e estilo.
2. Deixe a IA organizar títulos, parágrafos, listas, cartões e secções.
3. Reveja conteúdo, hierarquia, imagens, tabelas e ordem do texto.
4. Afine no HtmlDrag textos, imagens, blocos, cores e layout.
5. Guarde, partilhe ou descarregue o HTML.

Textos longos, folhas de cálculo, PPT, imagens e PDF pedem tratamentos diferentes.

3.6 Preços

A página de Preços é onde gere a sua subscrição e carregamentos de créditos. Escolha o plano que melhor se adapta a si e desbloqueie mais possibilidades criativas.

Planos de Subscrição

O HtmlDrag oferece planos de subscrição Pro e Pro Max. Após subscrever, pode utilizar os benefícios incluídos durante o período ativo da subscrição:

Pro: Para criadores regulares que precisam do fluxo completo de edição HTML, geração com IA, partilha e exportação.

Pro Max: Para criação com IA mais intensiva, projetos maiores e limites de utilização mais elevados.

As subscrições renovam de acordo com o ciclo de faturação apresentado no checkout. Pode gerir ou cancelar a renovação a partir da sua conta ou do fornecedor de pagamento.

Preços: Escolha o plano que melhor se adapta a si

Carregar Créditos

Se precisar apenas de uso temporário das funcionalidades de geração IA ou Importar URL, pode optar por carregar créditos. Os créditos comprados nunca expiram, e pode carregar a qualquer momento quando estiverem a acabar—sem necessidade de esperar.

Comparação de Funcionalidades

As principais diferenças entre Free e Pro são as seguintes:

Guia de Utilização de Créditos

Cada geração por IA consome uma quantidade fixa de créditos. Utilizadores do Free recebem créditos de bónus mensais básicos, enquanto utilizadores do Pro recebem mais. Os créditos comprados nunca expiram, e pode carregar a qualquer momento quando estiverem a acabar—sem esperar pela recuperação da quota.

3.7 Histórico

Na barra lateral esquerda, "Os meus trabalhos" (Histórico) fornece acesso rápido às suas criações passadas. Lista todos os seus registos de edição por ordem cronológica.

Seleção Rápida e Edição

Clique em qualquer registo na lista para carregá-lo rapidamente no editor e continuar de onde parou, sem reimportar.

Detalhes da Janela de Pré-visualização

Passe o rato sobre um registo de histórico para ver a sua janela de pré-visualização. Na janela de pré-visualização, pode:

1. Editar Título Diretamente: Clique no texto do título para modificar o nome do trabalho instantaneamente.
2. Ver Estado de Partilha: Ícones indicam se o trabalho está atualmente partilhado.
3. Ações Rápidas: Aceder a editar, eliminar e outros atalhos.

Histórico: Pré-visualização rápida e gestão de trabalhos passados

4. Editor Visual

O coração do HtmlDrag é um poderoso editor WYSIWYG que lhe permite trabalhar diretamente num ambiente HTML real, eliminando a necessidade de editar código.

4.1 Visão Geral da Interface do Editor

O editor utiliza um layout clássico de três colunas: navegação à esquerda com histórico de trabalhos, área central de pré-visualização da tela e painel funcional à direita. As barras superior e inferior fornecem ações de trabalho e controlos de edição.

Interface do Editor: Navegação esquerda, tela central, painel direito

Navegação Esquerda e Histórico

A navegação esquerda fornece pontos de acesso rápido. Clique em "Os meus trabalhos" para expandir a sua lista de histórico de trabalhos para navegação e troca rápidas. Trabalhos partilhados exibem um emblema "Partilhado" para o ajudar a gerir o estado de partilha.

Área Central da Tela

A tela é a janela de pré-visualização em tempo real onde pode selecionar, arrastar e editar diretamente os elementos da página. Suporta operações de zoom e deslocamento através do controlador de zoom na parte inferior. Todas as edições são refletidas em tempo real.

Painel Direito (Editar / Componentes / Camadas / Biblioteca)

O painel direito contém quatro separadores: Editar (ajustes de estilo e alternância de modos), Componentes (inserir novos elementos), Camadas (lista de camadas e operações em lote) e Biblioteca (biblioteca pessoal de componentes). Clique em qualquer separador para alternar entre funcionalidades.

Barra de Título Superior e Ações

A barra superior exibe o título do trabalho (duplo clique para editar), com botões de ação à direita para partilhar, transferir como imagem e transferir como HTML. Algumas funcionalidades requerem privilégios do Pro.

Barra de Ferramentas Inferior

A barra de ferramentas inferior fornece botões de Pré-visualização (abre em nova janela), Anular, Refazer, Atualizar pré-visualização, Restaurar último estado guardado, Restaurar HTML inicial e Guardar para controlos principais de edição.

4.2 Operações Básicas

O HtmlDrag fornece operações visuais intuitivas: passar o rato, clique simples, duplo clique e clique direito cobrem a maioria das tarefas de edição.

Reconhecimento de Elementos

Passe o rato sobre qualquer elemento na tela, e o sistema detetá-lo-á automaticamente e exibirá uma borda tracejada para o ajudar a identificar rapidamente elementos acionáveis. O reconhecimento abrange texto, imagens, botões, contentores e outros elementos HTML.

Reconhecimento de elementos: Borda tracejada aparece ao passar o rato

Modo de Arrastar

Clique simples em qualquer elemento para entrar no modo de arrastar, que exibe uma borda de seleção com oito alças de redimensionamento. Pode: arrastar o elemento para reposicioná-lo; arrastar as alças de canto para escalar proporcionalmente; arrastar as alças laterais para redimensionar numa direção. Enquanto selecionado, o painel direito "Editar" mostra as propriedades de estilo do elemento para ajuste.

Modo de arrastar: Clique para selecionar, mover livremente e redimensionar

Modo de Edição

Duplo clique num elemento de texto para entrar no modo de edição—o cursor posicionar-se-á dentro do texto para edição direta. No modo de edição, o painel direito mostra ferramentas de estilo de texto para tipo de letra, tamanho, cor, negrito, itálico e mais. Clique fora do elemento ou prima Esc para sair do modo de edição.

Modo de edição: Duplo clique para entrar, editar texto diretamente

Menu de Contexto

Clique direito num elemento selecionado para abrir o menu de contexto, fornecendo acesso rápido a Copiar, Colar, Adicionar à Biblioteca, edição de ligações, operações de camadas, Bloquear, Ocultar, Eliminar e mais. Ver 4.9 Menu de Contexto para detalhes.

Seleção Múltipla

Segure Shift e clique em múltiplos elementos para selecioná-los juntos para operações em lote. No modo de seleção múltipla, o painel direito exibe ferramentas de alinhamento (alinhar bordas esquerda/direita/topo/fundo, centrar horizontalmente/verticalmente, distribuir horizontalmente/verticalmente) para organização rápida do layout.

Seleção múltipla: Segure Shift e clique para selecionar múltiplos elementos

4.3 Barra de atalhos Os meus trabalhos

A barra de atalhos "Os meus trabalhos" à esquerda permite-lhe expandir/colapsar a lista de trabalhos e alternar entre trabalhos rapidamente, facilitando transições suaves entre múltiplas criações.

Expandir e Colapsar

Clique no botão "Os meus trabalhos" no topo esquerdo para expandir a lista de trabalhos da barra lateral. Clique novamente ou clique fora da barra lateral para colapsá-la. Quando expandida, pode navegar visualmente pelas miniaturas e títulos dos seus trabalhos históricos.

Alternar Trabalhos

Clique em qualquer cartão de trabalho na lista para carregar imediatamente o seu conteúdo no editor. Isto permite-lhe comparar e modificar rapidamente diferentes rascunhos de design sem voltar à página inicial ou perfil.

4.4 Atalhos de Teclado da Tela

Dominar os atalhos de teclado pode aumentar significativamente a sua eficiência de edição. Aqui estão os principais atalhos suportados na área da tela:

4.5 Painel Direito - Separador Editar

O separador "Editar" é a área mais utilizada, fornecendo alternância de modos e ricas ferramentas de ajuste de estilo. Após selecionar um elemento, o painel exibe inteligentemente opções de edição com base no tipo de elemento.

Separador Editar: Alternância de modos e ferramentas de estilo

Alternância de Modos

O topo do painel fornece quatro interruptores de modo para controlar o comportamento de interação do editor. Cada interruptor pode ser ligado ou desligado independentemente, com uma notificação de mensagem indicando o estado atual.

Dica: A navegação por ligações está desativada por defeito durante a edição para permitir a edição de componentes. Para seguir ligações, ative o interruptor "Navegação por ligações" no painel Editar. O envio de formulários também está bloqueado no modo de edição para proteger o seu conteúdo.

Estilo de Texto

Após selecionar um elemento de texto ou entrar no modo de edição, o painel exibe ferramentas completas de estilo de texto com as seguintes opções de formatação:

Estilo de texto: Tipo de letra, tamanho, definições de cor

Estilo de Elemento

Após selecionar qualquer elemento, use as ferramentas de estilo de elemento para ajustar a sua aparência:

Estilo de Imagem

Após selecionar um elemento de imagem, ajuste as opções de visualização e substitua a imagem:

Estilo de Tabela

Quando uma tabela ou célula de tabela está selecionada, ferramentas dedicadas de edição de tabela ficam disponíveis. Para instruções detalhadas, ver 4.10 Edição de Tabela.

Estilo de tabela: Operações de linha/coluna, bordas e definições de célula

Edição de Ligações

Adicione ligações de clique para navegar a qualquer elemento, ou edite ligações existentes:

Ferramentas de Alinhamento (Seleção Múltipla)

Quando múltiplos elementos estão selecionados, o painel exibe ferramentas de alinhamento e distribuição para ajudá-lo a organizar rapidamente os layouts dos elementos:

4.6 Painel Direito - Separador Componentes

O separador "Componentes" fornece opções de inserção rápida para vários tipos de elementos, ajudando-o a adicionar rapidamente novo conteúdo à tela. Clique num botão para inserir o componente correspondente.

Separador Componentes: Inserir vários elementos com um clique

4.7 Painel Direito - Separador Camadas

O separador "Camadas" fornece uma vista de lista de todos os elementos editáveis na tela, suportando filtragem, operações em lote e posicionamento preciso—uma ferramenta poderosa para gerir elementos de página complexos.

Separador Camadas: Gestão de camadas e operações em lote

Lista de Cartões de Elementos

O painel exibe todos os elementos geríveis como cartões. Cada cartão mostra o tipo de etiqueta do elemento (ex., DIV, IMG, SPAN) e o nível da camada, com elementos de texto a mostrar uma pré-visualização do conteúdo. Elementos de camada decorativa são marcados com um emblema "Decorativo". Ícones de bloqueio/desbloqueio rápido e ocultar/mostrar aparecem no lado direito de cada cartão.

Opções de Filtro

Clique no botão de filtro para filtrar a lista por estado do elemento, com as seguintes opções:

Operações em Lote

Após selecionar múltiplos elementos na lista de cartões, use os botões de operação em lote para processamento unificado:

Alternância de Precisão

O separador Camadas fornece um interruptor de precisão para controlar a precisão do reconhecimento de elementos:

Clique no Cartão para Localizar

Clique em qualquer cartão de elemento para rolar automaticamente a tela e destacar o elemento correspondente, facilitando a localização rápida de componentes específicos na página. Isto é especialmente útil ao trabalhar com layouts de página complexos ou em camadas.

4.8 Painel Direito - Separador Biblioteca

O separador "Biblioteca" é a sua biblioteca pessoal de componentes onde pode guardar elementos ou componentes usados frequentemente para reutilização em diferentes trabalhos, aumentando a sua eficiência criativa.

Separador Biblioteca: Biblioteca pessoal de componentes

Lista de Componentes Favoritos

O painel mostra todos os seus componentes guardados como cartões, cada um mostrando uma miniatura e um nome. As miniaturas são geradas automaticamente ao guardar; componentes sem nome são exibidos como "Sem título".

Procurar Favoritos

Use a caixa de pesquisa para encontrar rapidamente componentes guardados por nome. A lista filtra em tempo real enquanto escreve.

Inserir Componente Favorito

Clique no botão "Inserir" num cartão de biblioteca para adicionar esse componente à tela atual. Os componentes inseridos podem ser editados e ajustados normalmente.

Renomear / Eliminar Favoritos

Cada cartão de biblioteca oferece opções "Renomear" e "Eliminar". Renomear torna os componentes mais fáceis de encontrar mais tarde; eliminar remove permanentemente o componente guardado—use com cuidado.

Como Adicionar à Biblioteca

Selecione qualquer elemento na tela, depois escolha "Adicionar à Biblioteca" no menu de contexto para guardar esse elemento e os seus filhos como um componente. Uma confirmação "Adicionado à Biblioteca" aparece em caso de sucesso.

4.9 Menu de Contexto

Clicar com o botão direito num elemento selecionado abre o menu de contexto, fornecendo acesso rápido a ações comuns. O conteúdo do menu ajusta-se dinamicamente com base no tipo de elemento selecionado.

Menu de contexto: Acesso rápido a ações comuns

Menu Específico de Tabela

Ao clicar com o botão direito numa célula de tabela, o menu mostra operações adicionais específicas de tabela:

4.10 Edição de Tabela

Quando uma tabela ou célula de tabela está selecionada, o painel direito mostra ferramentas dedicadas de edição de tabela com funcionalidades abrangentes de estilo de tabela e ajuste de estrutura.

Edição de tabela: Operações de linha/coluna e definições de estilo

Operações de Linha e Coluna

A secção "Linhas e Colunas" do painel do editor de tabela fornece:

Unir / Dividir Células

Após selecionar múltiplas células adjacentes, use "Unir Células" para combiná-las numa só. Para células unidas, use "Dividir Célula" para restaurá-las para as múltiplas células originais.

Alinhamento da Célula

Defina o alinhamento do conteúdo da célula em duas dimensões:

Estilo da Borda

Personalize a aparência da borda da tabela incluindo:

Clique em "Aplicar" para guardar alterações.

Fundo da Célula

Defina a cor de fundo da célula usando o seletor de cores—ideal para destacar cabeçalhos ou linhas de dados importantes.

4.11 Controlo de Zoom e Viewport

O controlador de zoom na parte inferior da tela fornece zoom e ajuste de tamanho de viewport, ajudando-o a pré-visualizar o seu trabalho em diferentes tamanhos de dispositivo.

Controlo de zoom: Ajustar zoom da tela e tamanho de viewport

Aumentar Zoom / Reduzir Zoom / Repor

Use os botões "+" e "−" para aumentar ou diminuir a vista da tela, ou segure Ctrl/Cmd + roda do rato para fazer zoom rapidamente. Clique no número da percentagem para repor para o zoom padrão. Segure Espaço + arrastar para deslocar a tela.

Predefinições de Tamanho de Viewport

Clique no seletor de viewport para alternar entre tamanhos de pré-visualização, simulando a exibição em diferentes dispositivos:

Correções de Pré-visualização

Para páginas HTML com estruturas especiais, estão disponíveis três correções de pré-visualização para otimizar a exibição. Ativar ou desativar correções guardará automaticamente e atualizará a pré-visualização:

Dica: Se as correções não mostrarem efeito notável, tente "Restaurar HTML inicial" primeiro, depois reative a correção.

4.12 Editor de HTML

O Editor de HTML permite-lhe visualizar e editar diretamente o código-fonte HTML completo do seu trabalho—ideal para utilizadores avançados que necessitam de ajustes finos ou adições de código personalizadas. Esta funcionalidade é apenas para o Pro.

Editor de HTML: Editar código-fonte diretamente (Pro)

Ver / Editar HTML Completo

Quando abre o Editor de HTML, o código-fonte HTML completo (incluindo <!DOCTYPE html>) é exibido. Pode editar o código diretamente; guardar aplica as suas alterações.

Procurar e Substituir

Use Ctrl+F para abrir a pesquisa, introduzindo palavras-chave para localizar código rapidamente. Use Ctrl+H para abrir substituir para substituição de texto em lote. A barra de ferramentas mostra a contagem de correspondências (ex., "3 / 15"), com opções para individual ou substituir tudo.

Ir para Linha

Use Ctrl+G ou a funcionalidade de salto da barra de ferramentas para introduzir um número de linha e navegar rapidamente para essa linha—útil para ficheiros HTML grandes.

Distinguir Maiúsculas/Minúsculas

Ative a opção "Distinguir maiúsculas/minúsculas" durante a pesquisa para corresponder precisamente conteúdo sensível a maiúsculas/minúsculas.

Quebra de Linha Automática

Quando a quebra de linha automática está ativada, linhas de código longas quebram automaticamente para visualização sem deslocamento horizontal.

Copiar / Guardar

Clique em "Copiar HTML" para copiar o código-fonte completo para a área de transferência. Após editar, clique em Guardar para aplicar alterações. Se o conteúdo estiver vazio ou contiver erros de sintaxe, aparecerão mensagens apropriadas.

Nota: Se o conteúdo HTML exceder os limites de armazenamento, ao guardar será exibido "Armazenamento insuficiente, não é possível guardar esta edição". Elimine conteúdo desnecessário ou faça upgrade ao seu plano para aumentar a capacidade.

4.13 Barra de Ferramentas Inferior

A barra de ferramentas inferior fornece os botões de ação principais do editor, incluindo funcionalidades de pré-visualização, anular/refazer, restaurar e guardar.

Barra de ferramentas inferior: Pré-visualizar, guardar e restaurar

Pré-visualizar (Abre em Nova Janela)

Clique no botão de pré-visualização para abrir uma pré-visualização completa do seu trabalho numa nova janela, mostrando o resultado de exibição real. A página de pré-visualização mostra um aviso temporário lembrando aos utilizadores que esta é uma pré-visualização em fase de edição com um link não reutilizável.

Anular / Refazer

Anular reverte a última operação; Refazer restaura uma operação anulada. Suporta múltiplos passos de anular/refazer. Também disponível via Ctrl+Z (anular) e Ctrl+Y (refazer).

Atualizar Pré-visualização

Clicar em atualizar recarrega a área de pré-visualização. O sistema guarda primeiro o conteúdo atual, depois atualiza a tela para mostrar o estado mais recente. Útil após edição extensa para sincronizar a exibição.

Restaurar último estado guardado

Restaura o trabalho para o último estado guardado manualmente. Todas as edições não guardadas serão perdidas—use com cuidado. O sistema solicita confirmação antes de executar.

Restaurar HTML inicial

Restaura o HTML do trabalho para o seu estado original quando foi criado pela primeira vez. Todo o histórico de edição será limpo. Esta ação é irreversível—certifique-se de ter feito backup de conteúdo importante.

Guardar

Guarda manualmente todas as alterações atuais. O sistema também suporta gravação automática, mas a gravação manual após edições importantes é recomendada para garantir a segurança dos dados. "Guardado com sucesso" aparece após a conclusão.

4.14 Barra de Ferramentas Superior

A barra de ferramentas superior exibe informações do trabalho e botões de ação rápida, fornecendo acesso rápido às funcionalidades de partilha e transferência.

Barra de ferramentas superior: Título, partilhar e transferir

Título do Trabalho (Duplo Clique para Editar)

O topo exibe o título atual do trabalho; duplo clique na área do título para entrar no modo de edição e alterar o nome. O título não pode estar vazio; "Título atualizado" aparece em caso de sucesso. Trabalhos sem nome são exibidos como "Trabalho sem título".

Botão Partilhar

Clique no botão partilhar para ativar a partilha do trabalho e gerar um link acessível. Ver 4.16 Funcionalidade de Partilha para detalhes. Esta funcionalidade é apenas para o Pro.

Botões de Transferência

O lado direito fornece botões "Transferir como imagem" e "Transferir como HTML". Ver 4.15 Descarregar Trabalho para detalhes.

4.15 Descarregar Trabalho

O HtmlDrag oferece opções de exportação flexíveis, permitindo-lhe descarregar o seu trabalho como imagem ou ficheiro HTML padrão para partilha, arquivo ou desenvolvimento posterior.

Clique no botão "Transferir como imagem" na barra superior para gerar e descarregar uma imagem PNG de alta qualidade de todo o conteúdo da tela. Isto é perfeito para apresentações de design, partilha em redes sociais ou pré-visualizações.

Transferir como HTML

Utilizadores do Pro podem exportar trabalhos como ficheiros de código-fonte HTML padrão. Clicar no botão "Transferir como HTML" oferece duas opções:

1. Transferir HTML Atual: Inclui todas as modificações e ajustes que fez no editor—o que vê é o que obtém.
2. Transferir HTML Original: Exporta o código original de quando o trabalho foi criado pela primeira vez, sem edições subsequentes.

Opções de transferência: Escolha entre a versão editada atual ou a versão original

4.16 Funcionalidade de Partilha

A funcionalidade de Partilha permite-lhe gerar um link acessível publicamente para o seu trabalho, facilitando a partilha de criações. A página de partilha também fornece estatísticas de acesso. Esta funcionalidade é apenas para o Pro.

Definições de partilha: Gerir link e estado

Definições e Gestão

1. Ativar Partilha: Clique no botão partilhar para gerar um link de partilha único. Ao ativar pela primeira vez, aparece "Partilha ativada, ligação copiada para a área de transferência".
2. Validade: Os links de partilha são válidos por 7 dias por defeito. Pode ver a hora de expiração específica no diálogo de partilha.
3. Atualizar Tempo: Se o link estiver prestes a expirar ou quiser estendê-lo, clique em "Atualizar ligação" para redefinir o período de validade.
4. Parar Partilha: Clique em "Parar partilha" para invalidar imediatamente o link atual, impedindo acesso futuro.
5. Copiar Link: Clique no botão copiar para copiar o link de partilha para a sua área de transferência.

Página de Partilha e Estatísticas

Os visitantes que abrem o link de partilha verão uma página de apresentação independente. A barra lateral direita exibe informações do trabalho, incluindo:

1. Título e Autor: Mostra o seu nome de utilizador e o título do trabalho.
2. Estatísticas: Veja as Visualizações e Gostos para acompanhar a popularidade.
3. Expiração: Exibe quando o link de partilha expira.

Página de partilha: Vista do visitante e estatísticas

Nota: Se um trabalho for denunciado e verificado por violações de política, o sistema pode desativar a partilha para esse trabalho com a mensagem "Este trabalho foi denunciado e verificado, a partilha foi desativada pelo sistema."

5. Outras Funcionalidades

Além das funcionalidades principais de edição, o HtmlDrag também fornece funcionalidades de mensagens e feedback para ajudá-lo a manter-se atualizado e comunicar connosco.

5.1 Mensagens

O módulo Mensagens recebe notificações importantes do sistema, incluindo estado da conta, lembretes de pagamento, alertas de expiração de subscrição e atualizações de funcionalidades.

Mensagens: Receba notificações e alertas do sistema

Lista de Mensagens do Sistema

A lista de mensagens é ordenada cronologicamente, mostrando o título, resumo, hora de criação e hora de expiração. Clique numa mensagem para ver detalhes ou realizar ações (ex., "Continuar Pagamento", "Renovar Agora").

Filtro de Não Lidas

Marque a caixa "Apenas não lidas" no canto superior direito para filtrar rapidamente mensagens não lidas, ajudando-o a concentrar-se em notificações importantes.

Marcar Todas como Lidas

Clique no botão "Marcar todas como lidas" para marcar instantaneamente todas as mensagens na lista atual como lidas, limpando indicadores de ponto vermelho.

Detalhes da Mensagem

Clique num cartão de mensagem para ver o conteúdo completo da notificação. Para mensagens de encomenda ou subscrição, os detalhes incluem frequentemente botões de ação rápida para sua conveniência.

5.2 Feedback

Se encontrar problemas ou tiver sugestões, envie-os através do módulo Feedback. Pode carregar imagens para descrever melhor o seu problema.

Feedback: Enviar problemas ou sugestões

Lista de Feedback e Estado

A lista mostra o seu histórico de envios e o estado atual:

1. Em processamento: Feedback enviado, a aguardar revisão do administrador.
2. Respondido: O administrador respondeu; clique para ver.
3. Encerrado: Feedback arquivado ou resolvido; não são permitidas mais respostas.

Enviar Novo Feedback

Clique em "Novo Feedback", introduza o seu conteúdo (obrigatório, min 10 caracteres). Pode "Carregar Imagens" (max 2MB cada) para fornecer capturas de ecrã. Clique em "Enviar Feedback" quando terminar.

Detalhes do Feedback e Conversa

Clique num item da lista para ver o histórico completo da conversa, incluindo as suas mensagens e respostas do administrador. O topo mostra o ID do Feedback e anexos.

Continuar Resposta

Para feedback "Em processamento" ou "Respondido", use a caixa de entrada na parte inferior para fornecer mais informações ou responder ao administrador até ser resolvido.

6. Dicas do Sistema

Durante o uso, pode encontrar alertas ou limites do sistema. Aqui estão explicações e sugestões para dicas comuns do sistema.

6.1 Alertas de Deteção de HTML

Para garantir a qualidade da importação e a estabilidade do editor, o sistema verifica automaticamente URLs e ficheiros, alertando-o para potenciais problemas.

Deteção de Recursos Locais

Se uma página contiver caminhos locais (ex., file:// ou C:/), os recursos não carregarão. Sugestão: Certifique-se de que todos os recursos usam links públicos HTTP/HTTPS.

Proteção de Hotlink de Imagem

Alguns sites bloqueiam o acesso externo a imagens. Sugestão: Use "Substituir imagem" para carregar ficheiros locais ou hospedá-los num serviço público.

Páginas de Renderização Dinâmica (SPA)

Páginas que dependem inteiramente de JavaScript (SPA) podem ser importadas vazias ou incompletas porque o DOM dinâmico não é capturado diretamente. Sugestão: Use "Colar Código" copiando o HTML renderizado do seu navegador.

Tipos de Letra Externos / Bibliotecas de Ícones

Tipos de letra ou ícones com cabeçalhos CORS em falta podem ser exibidos incorretamente. Sugestão: Substitua-os por tipos de letra do sistema ou ícones da biblioteca no editor.

Conteúdo Incorporado (iframe)

Por segurança, algum conteúdo iframe pode ser bloqueado ou não interativo. O sistema preserva marcadores de posição onde possível.

6.2 Armazenamento e Limites

O HtmlDrag aplica quotas de recursos com base no seu plano. Pode ver alertas como "Limite de armazenamento atingido" ou "Limite de trabalhos atingido".

Limite de Armazenamento Atingido

Não pode guardar edições ou carregar ficheiros quando ficar sem espaço. Solução:

1. Elimine itens antigos em "Os meus trabalhos" para libertar espaço.
2. Clique em "Fazer upgrade agora" no diálogo para obter mais capacidade com um Pro.

Limite de Contagem de Trabalhos

Utilizadores do Free têm um limite no número de trabalhos guardados. Elimine trabalhos antigos ou faça upgrade para aumentar este limite.

Limites de Carregamento de Imagem

O sistema verifica o tamanho de ficheiro único e limites de lote. Se vir "Tamanho do ficheiro excede o limite" ou "Tamanho do lote excedido", comprima as imagens ou carregue em lotes menores. Utilizadores do Pro desfrutam de limites mais altos.

6.3 Verificação de Segurança

A Verificação de Segurança integrada avalia automaticamente o risco do conteúdo ao importar URLs, carregar ficheiros ou colar código para proteger a sua conta.

Nível de Risco

Com base em ameaças como XSS, scripts maliciosos ou tags perigosas, os riscos são classificados como:

1. Risco Baixo: Avisos menores; geralmente seguro para prosseguir.
2. Risco Médio: Problemas potenciais; prossiga com cautela.
3. Risco Elevado: Riscos graves; prossiga apenas se a fonte for confiável.
4. Risco Crítico: Contém malware ou conteúdo de phishing; bloqueado imediatamente.

Modo Seguro

Para ficheiros com algum risco, o sistema oferece "Medidas de segurança" como Limpeza Automática. Pode escolher "Continuar em modo seguro", onde o sistema remove o código perigoso preservando o layout e a editabilidade.

Comece com o HtmlDrag

O HtmlDrag oferece um generoso Free. Novos utilizadores recebem créditos de bónus ao registarem-se

para experimentar o Gerador IA e a Importação de URL. A edição visual é completamente gratuita e ilimitada.

Começar a Criar Agora

O guia de utilizador do HtmlDrag cobre o registo de conta e início de sessão, gestão de perfil, Gerador IA, Importação de URL, Carregamento de HTML, Colar Código, Subscrição e operações completas do editor visual, incluindo reconhecimento de elementos, arrastar e redimensionar, edição de texto, substituição de imagem, ajustes de estilo, gestão de camadas, edição de tabelas, edição de código-fonte HTML e partilha/exportação. Perfeito para programadores independentes, marketers e designers começarem rapidamente.