Comment importer un site HTML existant dans Elementor

Migrer un site HTML statique vers WordPress avec Elementor a tout d’un gros chantier, et mal mené, c’en est un. Mené page par page avec un convertisseur, c’est surtout du travail mécanique. Voici l’approche qui rend l’opération gérable et vous donne à la fin de vraies pages Elementor modifiables.

Préparez d’abord le côté WordPress

Avant de convertir quoi que ce soit, préparez la destination : une installation WordPress avec Elementor activé, vos polices enregistrées (Paramètres du site → Polices personnalisées) si l’original utilisait des polices web, et vos couleurs de marque définies comme Couleurs globales si vous voulez que les pages importées les adoptent. En commençant par là, vous jugez chaque page convertie par rapport au vrai site, et non par rapport à des polices de secours et des couleurs provisoires.

Convertissez une page à la fois

N’essayez pas d’importer tout le site en une seule opération. Procédez page par page et, au sein d’une longue page, section par section. Chaque unité convertie est facile à vérifier ; un site entier d’un coup ne l’est pas. Convertir par tranches vous évite aussi d’entraîner l’en-tête, le pied de page et la bannière de cookies de l’ancien site dans chaque page.

Pour chaque page : ouvrez son HTML, assurez-vous que le CSS est en ligne ou dans un bloc style, puis collez-le dans le convertisseur en Mode composants natifs. Les titres, le texte, les images, les boutons et la mise en page deviennent des widgets et des conteneurs Elementor natifs, avec l’espacement, les couleurs et la typographie reportés sur de vrais réglages.

Le plus rapide pour de nombreuses pages : la conversion par lot

Quand le site compte plus d’une poignée de pages, inutile de les soumettre une par une. Déposez tous les fichiers HTML en une fois sur le convertisseur — à partir de deux fichiers, il passe en mode lot. Ils sont convertis l’un après l’autre avec les mêmes réglages, et vous téléchargez un seul ZIP contenant un modèle JSON Elementor par page.

Côté WordPress, il s’agit alors d’une séance d’import plutôt que de conversion : Modèles → Modèles enregistrés → Importer, importez les modèles, puis créez chaque page à partir de son modèle. Tout se passe toujours dans votre navigateur — un site de trente pages ne téléverse jamais le moindre fichier nulle part.

Deux limites, en toute franchise. Le mode lot utilise le mappage automatique — le panneau de mappage par élément et la racine de copie sont réservés à la conversion d’un seul fichier —, si bien qu’une page dont vous voulez régler à la main ce que devient chaque élément mérite d’être reconvertie individuellement ensuite. Et comme le mode lot convertit chaque fichier tel quel, l’en-tête et le pied de page partagés se retrouvent dans chaque modèle : soit vous les retirez des fichiers HTML avant de les déposer, soit vous supprimez ces conteneurs de chaque modèle importé. Pour un site très chargé en éléments communs, nettoyer d’abord les fichiers est réellement plus rapide.

Traitez une seule fois l’en-tête et le pied de page partagés

Un site statique répète son en-tête et son pied de page dans chaque fichier HTML. Dans WordPress, vous ne les voulez pas dans le contenu de la page : vous les voulez sous forme d’en-tête et de pied de page du thème (ou de modèles du Theme Builder d’Elementor), créés une seule fois et appliqués partout. Ainsi, lorsque vous convertissez une page, utilisez la racine de copie dans la Carte de structure pour ne récupérer que le contenu principal de cette page et laisser de côté l’en-tête et le pied de page. Construisez-les séparément, une seule fois.

Images et liens demandent de l’attention

• Images : téléversez-les dans la Médiathèque et référencez les vraies URL ; elles s’importent alors sans aucune étape manuelle. Les chemins de fichiers locaux et les images Base64 ne peuvent pas devenir des fichiers joints ; ils arrivent donc sous forme d’emplacements vides, chacun conservant son texte alternatif en légende afin que vous sachiez quoi téléverser.
• Liens internes : un site statique relie des fichiers .html entre eux. Après l’import, modifiez ces liens pour qu’ils pointent vers vos nouvelles URL WordPress. C’est la seule partie fastidieuse de toute migration et il n’y a pas moyen d’y échapper, mais cela va vite page par page.
• Formulaires et menus : l’action d’envoi d’un formulaire n’est pas reprise — reliez-le à un widget Formulaire d’Elementor sur votre site. La navigation devient un vrai menu WordPress.

Ce qui se convertit bien, et ce que vous refaites

La mise en page, l’espacement, les couleurs, la typographie, les images, les icônes et la structure se convertissent fidèlement. Les scripts sont supprimés ; tout comportement piloté par JavaScript est donc reconstruit avec des widgets natifs. Les états de survol et les animations sont réappliqués dans Elementor. Connaître cette répartition dès le départ fait de la migration une liste de contrôle prévisible plutôt qu’une suite de surprises.

Un ordre de migration qui fonctionne

1. Créez une seule fois l’en-tête et le pied de page partagés.
2. Convertissez la page d’accueil, puis les principales pages d’atterrissage, puis les pages internes.
3. Pour chaque page, définissez une racine de copie pour récupérer le contenu, collez-le, puis corrigez les liens internes et les images.
4. Reconstruisez nativement les éléments interactifs (diaporamas, onglets).
5. Enregistrez au fur et à mesure les sections réutilisables — une grille de fonctionnalités, une bande d’appel à l’action — dans la bibliothèque de modèles, afin que les pages suivantes relèvent de l’assemblage plutôt que de la construction.
6. Mettez en place des redirections depuis les anciennes URL .html vers les nouvelles afin de conserver votre positionnement dans les moteurs de recherche.

En procédant ainsi, importer un site HTML dans Elementor devient un processus régulier, page par page, qui aboutit à un site WordPress modifiable — ni une reconstruction complète, ni un amas de blocs de code impossibles à modifier.