Converter Designs HTML/CSS

O HTML/CSS está disponível como formato de origem em todos os planos, incluindo o Free. Este guia explica como funciona a conversão e como estruturar os seus ficheiros de origem para obter o melhor Fidelity Score.

Como funciona o analisador

O analisador HTML do Tapeto percorre o DOM e converte-o na IR (representação intermédia) partilhada por todos os geradores. Ao longo do processo:

• Mapeia atributos padrão (src, alt, href, level dos cabeçalhos, etc.) para nós da IR.
• Lê CSS ligado e inline, incluindo regras @media — os breakpoints são capturados em designTokens.breakpoints da IR, para que o comportamento responsivo sobreviva à conversão.
• Trata títulos, parágrafos e imagens como nós-folha — nunca se transformam em contentores, mesmo que a sua marcação aninhe outros elementos dentro deles.

Usar o URL Cloner

Em vez de carregar ficheiros, pode apontar o Tapeto para um URL público. O URL Cloner descarrega o HTML da página e as suas folhas de estilo externas, e alimenta-os no mesmo pipeline de um projeto HTML/CSS carregado. O CSS externo é obtido com verificações de tipo MIME, um limite máximo de tamanho e um tempo limite, para que um recurso lento ou inesperado não bloqueie a sua conversão.

Dicas para um Fidelity Score mais alto

• Mantenha os estilos em CSS, não em atributos style inline — o analisador lê folhas de estilo de forma mais fiável do que estilos inline dispersos.
• Use HTML semântico (<h1>–<h6>, <p>, <img>, <a>) — as tags semânticas mapeiam diretamente para tipos de nós da IR; uma “sopa” de <div> genéricos perde estrutura.
• Evite depender de conteúdo renderizado por JavaScript — o Tapeto analisa o HTML tal como é entregue, não após a renderização no lado do cliente.
• Verifique os caminhos das imagens — os caminhos relativos são resolvidos em relação à origem; caminhos inválidos aparecem como imagens em falta no resultado.

Escolher um construtor

Depois de a IR estar construída, escolhe o construtor de destino para a conversão (gutenberg, elementor, oxygen ou divi, dependendo do seu plano). A mesma IR pode ser convertida para vários construtores sem voltar a carregar a origem — veja a Referência da API se estiver a automatizar isto.

Próximo passo

Depois de ter uma conversão concluída, veja Exportar Resultados para a descarregar ou enviá-la para o WordPress.