Transférer une page HTML existante dans Elementor revient généralement à choisir entre deux mauvaises options : la coller dans un unique widget HTML que vous ne pouvez pas vraiment modifier, ou reconstruire chaque section à la main. Ce guide présente la troisième voie : convertir le HTML en composants Elementor natifs et modifiables.
Ce que « modifiable » veut vraiment dire ici
Il vaut la peine d’être précis, car tout l’intérêt est là. Lorsqu’une page est déposée dans un widget HTML, Elementor la traite comme un seul bloc opaque. Vous la voyez sur le canevas, mais vous ne pouvez pas cliquer sur un titre pour en changer la taille, ni remplacer une icône depuis le sélecteur d’icônes, et votre client ne peut certainement pas mettre à jour le texte sans toucher au code. La page est dans Elementor sans être faite avec Elementor.
Une conversion native, c’est autre chose. Chaque titre devient un widget Titre avec ses propres réglages de typographie. Chaque paragraphe devient un Éditeur de texte. Un lien stylé devient un Bouton avec ses réglages de lien, de couleur et de marge interne. Les éléments englobants deviennent des Conteneurs dotés de vrais réglages flex ou grid. Une fois la conversion faite, aucun widget HTML ne s’interpose entre vous et votre contenu — c’est une page Elementor ordinaire qui se trouve simplement avoir commencé sa vie en HTML.
Pourquoi ne pas tout reconstruire à la main ?
Parfois, c’est ce qu’il faut faire. Si la source se résume à une simple section hero, la reconstruire prend dix minutes et vous donne un résultat parfaitement conforme aux usages d’Elementor. La conversion devient rentable quand la page est longue, quand l’espacement et la typographie sont minutieux et méritent d’être conservés à l’identique, ou quand vous répétez l’opération — pour migrer une série de pages d’atterrissage, ou pour transformer régulièrement du HTML généré par une IA ou un outil de design en vraies pages dans votre flux de travail.
1. Collez ou déposez votre HTML
Ouvrez le convertisseur, puis faites glisser un fichier .html sur la zone de dépôt ou collez votre code source dans la zone de code. Le CSS en ligne et les images en Base64 sont pris en charge. Tout s’exécute dans votre navigateur — le fichier n’est jamais téléversé sur un serveur, ce qui signifie aussi que vous pouvez convertir des travaux clients sans avoir à aborder la question de la confidentialité.
Si vos styles se trouvent dans une feuille de style séparée qui n’est pas incluse dans le fichier, la page s’affichera sans style dans l’aperçu — et c’est précisément cette version sans style qui sera convertie. Assurez-vous que le CSS est en ligne ou dans un bloc <style> avant de lancer la conversion.
2. Choisissez le Mode composants natifs
Dans le panneau des options, sélectionnez Mode composants natifs. C’est ce réglage qui produit de vrais widgets au lieu d’un unique bloc HTML. Tant que vous y êtes, trois autres options méritent un instant d’attention :
- Icônes — choisissez la correspondance avec la bibliothèque d’icônes Elementor pour que les icônes deviennent de vraies icônes remplaçables plutôt que des SVG verrouillés.
- Images — si votre HTML ne contient pas déjà des URL de la Médiathèque, choisissez les emplacements d’image vides ; chaque emplacement conserve son texte alternatif comme légende, pour que vous sachiez quelle image va où.
- Couleurs et polices — utilisez les valeurs du site si le contenu est destiné à un site existant avec sa propre charte graphique, ou les valeurs d’origine si vous reproduisez fidèlement un design.
3. Examinez la carte de structure
Avant d’exporter, ouvrez l’onglet Carte de structure. Il affiche l’arborescence Elementor exacte à côté d’un aperçu en direct, et le survol d’une ligne met en évidence la partie correspondante des deux côtés.
Trois points sont à vérifier ici. Les pastilles de confiance : le vert signifie que l’élément a été converti directement en widget natif, le rouge qu’il a été conservé en HTML et mérite un coup d’œil. La profondeur d’imbrication max. : au-delà de six environ, la source contient sans doute plus d’éléments englobants que nécessaire. Et le nombre de composants, qui vous indique à peu près la quantité de contenu que vous vous apprêtez à coller.
C’est aussi dans cet onglet que vous contrôlez la portée. L’icône cible d’une ligne la définit comme racine de copie : seule cette sous-arborescence est exportée, sans les éléments englobants extérieurs de la page. L’icône en forme de croix exclut entièrement une ligne. Pour une page longue, convertir ainsi une section à la fois est bien plus facile à vérifier que de tout importer d’un coup.
4. Copiez ou téléchargez
Utilisez Copier les données Elementor, puis faites un clic droit sur une zone vide de l’éditeur Elementor et choisissez « Coller depuis un autre site ». C’est la méthode la plus rapide quand vous ajoutez une section à une page déjà ouverte.
Vous pouvez aussi télécharger un modèle JSON et l’importer depuis la bibliothèque de modèles Elementor. Cette voie est préférable quand vous voulez obtenir le résultat sous forme de fichier réutilisable et portable — pour une page entière, pour le partager avec votre équipe ou pour constituer peu à peu une bibliothèque de composants.
Prévoyez une courte passe de finition
Le HTML et Elementor ne s’affichent jamais de façon identique, et certaines choses ne peuvent tout simplement pas passer de l’un à l’autre. Comptez dix à quinze minutes pour : définir les états de survol des boutons (les règles CSS de survol ne peuvent pas être lues sur une page statique), compléter les éventuels emplacements d’image, relier les menus et les formulaires à de vraies sources WordPress, et passer en revue les trois vues d’appareil. Rien de tout cela n’est difficile, mais le faire en suivant délibérément une liste de contrôle vaut mieux que de le découvrir plus tard.
Conseils pour des résultats plus propres
- Utilisez des balises sémantiques (
<h2>,<p>,<button>) pour que le convertisseur puisse les faire correspondre nativement au lieu de deviner à partir du CSS. - Évitez les
<div>englobantes profondément imbriquées et sans style — chacune de celles qui portent un arrière-plan ou une marge interne devient un Conteneur de plus. - Préférez
gapsur un parent flex ou grid plutôt que des marges sur chaque enfant ; un gap correspond à un seul réglage. - Utilisez des classes d’icônes Font Awesome plutôt que du SVG en ligne si vous voulez des icônes remplaçables dans Elementor.
- Corrigez les problèmes dans la source et reconvertissez — c’est presque toujours plus rapide que de réparer le résultat dans l’éditeur.