HTML to Elementor
À propos

À propos

Cet outil est construit et maintenu par Leo, développeur full-stack qui a passé neuf ans à travailler avec WordPress et Elementor — et qui a migré 189 sites vers Elementor au passage.

Pourquoi cet outil existe

Chacune de ces migrations s’est heurtée au même mur. Une maquette, un export d’un autre constructeur ou un ancien site statique arrive sous forme de bloc HTML et CSS. L’intégrer dans Elementor laisse deux mauvaises options : coller le tout dans un seul widget HTML et renoncer à jamais à le modifier, ou le reconstruire composant par composant et perdre une journée par page. Après la première douzaine de sites, on cesse d’accepter ce compromis et on commence à automatiser. Cet outil est cette automatisation, nettoyée et rendue publique.

Ce que 189 migrations m’ont appris

Presque chaque règle du convertisseur est une réponse directe à un problème rencontré sur un projet réel :

  • La feuille de style ment ; le style calculé, non. L’ordre de la cascade, les media queries, les valeurs héritées et les classes utilitaires font que la règle que vous lisez dans un fichier CSS est rarement la valeur que le navigateur affiche réellement. Le convertisseur restitue d’abord votre HTML et lit les styles calculés, ce qui explique pourquoi il survit au balisage façon Tailwind et aux CSS de framework au lieu de s’étouffer avec — tant que le CSS compilé se trouve dans la page. Les feuilles de style chargées depuis des URL externes sont supprimées pour des raisons de sécurité, donc intégrez d’abord votre CSS.
  • L’imbrication explose si vous faites une correspondance un pour un. Une page normale est pleine de div d’enveloppe sans signification visuelle. Copiez-les à l’identique et vous obtenez une arborescence Elementor profonde de dix conteneurs que personne ne peut modifier. Les enveloppes sans effet de style sont supprimées ; celles qui portent réellement un padding, un fond ou une ombre sont conservées — les fusionner, c’est casser la mise en page.
  • Un SVG inline ne peut pas devenir une icône Elementor modifiable. C’est une limite d’Elementor, pas un bug de conversion : son contrôle d’icône accepte les entrées de bibliothèque d’icônes ou les fichiers de la médiathèque, rien d’autre. Les classes Font Awesome se transforment proprement en icônes modifiables ; un SVG écrit à la main doit rester en HTML brut. Le savoir avant de générer le HTML évite toute une reconstruction.
  • Les images Base64 semblent correctes jusqu’à leur importation. Une page avec une douzaine d’images intégrées dépasse le demi-mégaoctet et échoue ensuite à atterrir dans la médiathèque. Elles deviennent alors des emplacements vides étiquetés, afin que vous puissiez y déposer les vrais fichiers ensuite et savoir lequel est lequel.
  • Le responsive n’est pas un réglage unique. Les différences de mise en page sont mesurées à plusieurs largeurs et reportées dans les champs responsive d’Elementor, plutôt que d’espérer qu’une seule mise en page de bureau se dégrade correctement sur un téléphone.
  • Certaines choses ne se convertissent réellement pas. Les animations, les interactions pilotées par script, les pseudo-éléments et tout ce qui dépend des données propres à votre site — menus, boucles de produits, requêtes — ne peuvent pas être déduits d’un HTML statique. L’outil vous le signale lorsqu’il en rencontre un au lieu de le supprimer en silence.

Ce qu’il ne fera pas

Il ne promettra pas un rendu parfait au pixel près. HTML et Elementor ne restituent pas à l’identique, et tout convertisseur qui prétend le contraire n’a pas converti assez de pages. Il ne touchera pas à votre site WordPress : l’outil ne fait que générer des données, et l’importation se fait dans votre propre Elementor, par vous. Et il ne vous demandera pas de vous inscrire.

Il ne fera pas non plus passer de risques. Les scripts, liens dangereux, feuilles de style externes et soumissions de formulaires sont supprimés avant que quoi que ce soit n’atteigne votre éditeur, et les styles qui arrivent sont limités au contenu importé afin qu’ils ne puissent pas fuir dans le reste de votre thème.

Vos fichiers ne quittent jamais votre navigateur

L’analyse, la conversion et l’aperçu s’exécutent tous localement dans votre navigateur. Votre HTML, vos images et les données Elementor produites ne sont jamais envoyées à ce site ni ailleurs. C’est une décision de conception prise dès le départ, pas une fonctionnalité sacrifiée plus tard.

À qui il s’adresse

  • Les freelances et les petites équipes qui construisent des sites de clients avec Elementor.
  • Les personnes qui génèrent du HTML avec l’IA et qui veulent des pages modifiables plutôt qu’un bloc de code mort.
  • Toute personne qui migre un lot de pages statiques vers WordPress et Elementor.

Contact

Les questions, rapports de bugs et échantillons de conversion difficiles sont tous les bienvenus à [email protected]. Si quelque chose se convertit mal, envoyer l’extrait HTML est de loin le moyen le plus rapide d’obtenir une correction — plusieurs des règles ci-dessus existent parce que quelqu’un a fait exactement cela.