Intégrer une page HTML existante dans Elementor implique généralement l’une de ces deux mauvaises options : la coller dans un widget HTML unique que vous ne pouvez pas vraiment éditer, ou reconstruire chaque section à la main. Ce guide vous présente la troisième voie : convertir votre HTML en composants Elementor natifs et modifiables.
1. Collez ou déposez votre code HTML
Ouvrez le convertisseur, puis faites glisser un fichier .html sur la zone de dépôt ou collez votre code source dans la boîte de code. Le CSS en ligne et les images en Base64 sont pris en charge. Tout est exécuté dans votre navigateur — rien n’est téléversé.
2. Choisissez le mode Composants natifs
Dans le panneau des options, sélectionnez le mode Composants natifs. Cela transforme les titres en widgets Titre, les paragraphes en Éditeur de texte, les liens stylisés comme des boutons en widgets Bouton, et les <div> englobantes en Conteneurs — avec les espacements, couleurs, polices et le comportement responsive calculés pour vous.
3. Examinez la carte de la structure
Avant l’exportation, ouvrez l’onglet Carte de la structure. Survolez n’importe quelle ligne pour la mettre en surbrillance dans l’aperçu, vérifiez les points de confiance (vert = conversion directe, rouge = conservé en HTML), et utilisez l’icône cible pour copier uniquement le bloc qui vous intéresse. C’est ici que vous repérez les éléments qui n’ont pas été parfaitement adaptés.
4. Copiez ou téléchargez
Utilisez l’option Copier les données Elementor, puis faites un clic droit → « Coller depuis un autre site » dans l’éditeur, ou bien téléchargez un modèle JSON et importez-le depuis la bibliothèque de modèles Elementor. Le HTML et Elementor n’étant jamais rendus de manière identique, effectuez une rapide vérification du résultat dans l’éditeur.
Conseils pour des résultats plus propres
- Utilisez des balises sémantiques (
<h2>,<p>,<button>) pour que le convertisseur puisse les transformer nativement. - Évitez les
<div>englobantes trop imbriquées sans style — elles ajoutent des conteneurs superflus. - Désactivez « Conserver les styles en ligne » si votre code HTML ne contient pas de blocs
<style>.