Convertir des designs HTML/CSS

Le HTML/CSS est disponible comme format source sur tous les plans, y compris Gratuit. Ce guide explique comment fonctionne la conversion et comment structurer vos fichiers source pour obtenir le meilleur Fidelity Score.

Comment fonctionne l’analyseur

L’analyseur HTML de Tapeto parcourt le DOM et le convertit en IR (représentation intermédiaire) partagée par tous les générateurs. Au passage, il :

• Mappe les attributs standards (src, alt, href, le level des titres, etc.) sur les nœuds de l’IR.
• Lit le CSS lié et intégré, y compris les règles @media — les points de rupture sont capturés dans designTokens.breakpoints de l’IR, afin que le comportement responsive survive à la conversion.
• Traite les titres, paragraphes et images comme des nœuds terminaux — ils ne sont jamais transformés en conteneurs, même si votre balisage imbrique d’autres éléments à l’intérieur.

Utiliser le Cloneur d’URL

Plutôt que de charger des fichiers, vous pouvez pointer Tapeto vers une URL publique. Le Cloneur d’URL télécharge le HTML de la page ainsi que ses feuilles de style externes, et les fait entrer dans le même pipeline qu’un projet HTML/CSS chargé manuellement. Le CSS externe est récupéré avec vérification du type MIME, une limite de taille maximale et un délai d’expiration, afin qu’une ressource lente ou inattendue ne bloque pas votre conversion.

Conseils pour un Fidelity Score plus élevé

• Gardez les styles dans le CSS, pas dans des attributs style en ligne — l’analyseur lit les feuilles de style de façon plus fiable que des styles en ligne dispersés.
• Utilisez du HTML sémantique (<h1>–<h6>, <p>, <img>, <a>) — les balises sémantiques se mappent directement sur les types de nœuds de l’IR ; une « soupe » de <div> génériques fait perdre la structure.
• Évitez de dépendre d’un contenu rendu par JavaScript — Tapeto analyse le HTML tel qu’il est livré, pas après le rendu côté client.
• Vérifiez les chemins des images — les chemins relatifs sont résolus par rapport à la source ; les chemins rompus apparaissent comme des images manquantes dans le résultat.

Choisir un constructeur

Une fois l’IR construite, vous choisissez le constructeur cible pour la conversion (gutenberg, elementor, oxygen ou divi, selon votre plan). La même IR peut être convertie vers plusieurs constructeurs sans recharger la source — voir la Référence API si vous scriptez cela.

Étape suivante

Une fois que vous avez une conversion terminée, consultez Exporter les résultats pour la télécharger ou l’envoyer vers WordPress.