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 de faire entrer 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 de véritables conteneurs — afin de pouvoir ensuite modifier chaque élément 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 associé au widget Elementor qui lui convient : les titres à Titre, les paragraphes et les listes à Éditeur de texte, les images à Image, les liens stylés comme des boutons à Bouton et les éléments englobants à 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 mise en forme — 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 ; ils restent ainsi 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 sélectionnez 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 des ressources que charge 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
- Réunissez 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, téléversez-les dans la médiathèque et utilisez ces URL, ou acceptez des emplacements d’image.
- Collez le tout dans le convertisseur, choisissez le mode composants natifs, puis indiquez si les icônes doivent correspondre à la bibliothèque Elementor et si les couleurs et les polices reprennent les valeurs du site ou celles d’origine.
- Vérifiez la carte de structure : nombre de composants, profondeur d’imbrication et lignes 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 compilation.