How to import an existing HTML website into Elementor

Migrer un site HTML statique vers WordPress avec Elementor semble être un gros travail, et mal mené, c’en est un. Réalisée page par page avec un convertisseur, l’opération est surtout mécanique. Voici l’approche qui la rend gérable et qui 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 actif, vos polices enregistrées (Réglages 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. Le faire en premier vous permet d’évaluer chaque page convertie par rapport au vrai site, et non par rapport à des polices de secours et des couleurs de remplacement.

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 en une seule fois ne l’est pas. Convertir par tranches signifie aussi que vous n’entraînez pas l’ancien en-tête, le pied de page et la bannière de cookies du site dans chaque page.

Pour chaque page : ouvrez son HTML, assurez-vous que la CSS est en ligne ou dans un bloc de 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 de vrais widgets et conteneurs Elementor natifs, avec l’espacement, les couleurs et la typographie reportés sur de véritables réglages.

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 comme en-tête et pied de page du thème (ou comme 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 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 bibliothèque de médias et référencez les vraies URL : elles s’importent alors sans étape manuelle. Les chemins de fichiers locaux et les images Base64 ne peuvent pas devenir des fichiers joints ; ils arrivent donc sous forme d’espaces réservés 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-les pour qu’ils pointent vers vos nouvelles URL WordPress. C’est la partie fastidieuse de toute migration et il n’y a pas moyen de l’éviter, mais c’est rapide page par page.
• Formulaires et menus : l’action d’envoi d’un formulaire n’est pas conservée — connectez-le à un formulaire Elementor de 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 transforme la migration en une liste de contrôle prévisible plutôt qu’en 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 classement 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 ni un amas de blocs de code non modifiables.