Vous avez une page construite en HTML, CSS et JavaScript purs, et vous souhaitez continuer à la modifier dans Elementor — sans la reconstruire de zéro, ni la laisser enfermée dans un widget de code. C’est exactement à cela que sert un convertisseur, mais les trois parties (HTML, CSS, JS) se comportent chacune différemment : il est donc utile de les traiter une par une.
L’objectif : modifiable, pas intégré
Il existe deux façons d’importer du HTML existant dans Elementor qui ne comptent pas vraiment. Le coller dans un widget HTML l’intègre comme un seul bloc que vous ne pouvez pas modifier visuellement. Le reconstruire manuellement fonctionne, mais vous fait perdre le balisage que vous avez déjà. Ce que vous voulez réellement, c’est que vos titres deviennent des widgets Titre, vos textes des widgets Éditeur de texte, vos boutons des widgets Bouton et votre mise en page devienne de véritables conteneurs — afin de pouvoir modifier chaque élément ensuite dans le panneau Elementor.
Le HTML devient des widgets natifs
Collez votre HTML dans le convertisseur et choisissez le mode Composants natifs. Chaque élément est mis en correspondance avec le widget Elementor qui lui convient : les titres vers Titre, les paragraphes et les listes vers Éditeur de texte, les images vers Image, les liens stylés comme des boutons vers Bouton et les éléments englobants vers des conteneurs. Une fois le résultat collé dans Elementor, aucun widget de code ne s’interpose — c’est une page ordinaire.
Votre CSS est lu, pas jeté
C’est la partie qui inquiète, et c’est celle qui fonctionne le mieux. Le convertisseur ne jette pas votre style — il lit les styles que votre navigateur a réellement calculés et les reporte sur les réglages du widget correspondant. Padding, marges, couleurs, bordures, rayon de bordure, ombre, arrière-plan, famille de police, taille, graisse, interligne et espacement des lettres sont tous transférés vers les champs natifs d’Elementor, afin qu’ils restent modifiables au lieu de vivre dans une feuille de style.
Pour que cela fonctionne, le CSS doit être présent lorsque vous convertissez. Les styles en ligne ou un seul bloc <style> sont parfaitement lus. Une feuille de style externe qui n’est pas incluse dans le fichier que vous collez ne le sera pas — la page s’afficherait sans style, et c’est ce rendu sans style qui serait converti. Intégrez donc le CSS en ligne, ou collez d’abord la feuille de style dans un bloc <style>. Il existe aussi un sélecteur visuel qui, lorsque vous saisissez un seul bloc, emporte avec lui la feuille de style de la page, de sorte que les styles basés sur des classes sont quand même convertis correctement.
Le JavaScript est l’exception assumée
Le JavaScript n’est pas converti, et c’est volontaire. Les scripts sont supprimés pour des raisons de sécurité — importer du JS arbitraire via un collage serait dangereux, et il ne s’exécuterait de toute façon pas de manière fiable dans l’éditeur. Tout ce que votre JS produisait (un slider, des onglets, un accordéon, un compteur, une animation au défilement) arrive donc sous forme de balisage statique.
La bonne approche n’est pas de recoller le script, mais de reconstruire cette interaction avec le widget Elementor correspondant. Elementor dispose de widgets natifs Onglets, Accordéon, Carrousel, Compteur et Barre de progression, ainsi que de ses propres effets de mouvement pour l’animation. Ils sont plus faciles à maintenir qu’un script importé et font déjà partie du bundle chargé par votre site. En pratique, vous convertissez toute la page en quelques secondes, puis vous passez quelques minutes à recréer nativement les quelques éléments interactifs.
Un exemple pas à pas réaliste
- Combinez votre HTML et votre CSS dans un seul fichier — le balisage plus un seul bloc de style. Si les images sont référencées par un chemin local, importez-les dans la bibliothèque de médias et utilisez ces URL, ou acceptez des espaces réservés.
- Collez le tout dans le convertisseur, choisissez le mode Composants natifs, puis indiquez si les icônes correspondent à la bibliothèque Elementor et si les couleurs et les polices utilisent les valeurs du site ou celles d’origine.
- Vérifiez la carte de la structure : nombre de composants, profondeur d’imbrication et quelles lignes sont restées en HTML.
- Copiez les données Elementor et collez-les dans votre page, ou téléchargez un modèle JSON et importez-le.
- Reconstruisez toute interaction pilotée par JavaScript avec le widget natif correspondant, définissez les états de survol des boutons et parcourez les trois vues d’appareil.
Ce que vous obtenez au final
Une page Elementor normale. Votre structure HTML d’origine est intacte, sous forme de widgets et de conteneurs, votre CSS vit dans des réglages modifiables, et la seule chose que vous avez reconstruite à la main est le comportement interactif qui n’aurait de toute façon jamais dû se trouver dans le balisage. À partir de là, vous et votre client la modifiez comme n’importe quel autre élément dans Elementor — pas de widget de code, pas de feuille de style séparée, pas d’étape de build.