La qualité d’une conversion dépend surtout du HTML que vous lui fournissez. Voici la liste de contrôle à parcourir avant de coller quoi que ce soit dans le convertisseur.
1. Utilisez des balises sémantiques
Les titres avec <h1>–<h6>, le corps du texte avec <p>, les appels à l’action avec <button> ou <a class="button">, les listes avec <ul>. Les balises natives correspondent à des widgets natifs. Un titre imité avec un <div> stylé peut encore être détecté, mais une vraie balise n’est jamais ambiguë.
2. Gardez un DOM peu profond
Un seul conteneur par section. Chaque niveau d’imbrication supplémentaire devient un Container de plus à travers lequel vous devez cliquer dans l’éditeur. Les conteneurs purement décoratifs sans style sont repliés automatiquement, mais ceux qui portent un padding ou un arrière-plan sont conservés, car les supprimer modifierait la mise en page.
3. Rendez votre CSS autonome
Les styles inline ou un seul bloc <style> se convertissent le mieux, car le convertisseur lit les styles réellement calculés par le navigateur. Une feuille de style de framework externe qui ne se charge jamais signifie que la page s’affiche sans style — et c’est exactement ce qui est converti.
4. Réglez d’abord les images
Dans le meilleur des cas, téléversez les images dans la bibliothèque de médias et utilisez les vraies URL https://. Sinon, réglez l’option Images sur Espaces réservés d’image vides et remplissez-les ensuite — chaque emplacement conserve son alt comme légende. Les images Base64 et les chemins de fichiers locaux sont volontairement remplacés par des espaces réservés, car ils ne peuvent pas être importés dans WordPress de manière fiable.
5. Préférez les classes Font Awesome aux SVG inline
Seules les icônes basées sur des classes peuvent arriver dans la bibliothèque d’icônes d’Elementor en tant qu’icônes modifiables. Les SVG inline ne peuvent pas entrer dans le contrôle d’icône, et ils perdent toute taille et couleur de trait définies dans le CSS de la page.
6. Utilisez gap plutôt que des marges sur chaque enfant
Les écarts (gap) sur un parent flex ou grid correspondent à un seul contrôle d’écartement Elementor. Les marges appliquées à chaque enfant sont reprises widget par widget et sont beaucoup plus fastidieuses à ajuster par la suite.
7. Centrez avec max-width et des marges auto
Le motif max-width + margin:0 auto est reconnu et devient un conteneur Boxed, qui se centre nativement à toutes les tailles d’écran.
8. Supprimez ce que vous ne voulez pas emporter
Les scripts, balises de suivi, bannières de cookies et intégrations tierces sont supprimés ou neutralisés par sécurité. Les formulaires perdent leur action d’envoi — un formulaire Elementor doit être reconnecté à une véritable destination sur votre site. Les menus de navigation doivent pointer vers un vrai menu WordPress.
9. Convertissez section par section
Pour une grande page, utilisez le sélecteur visuel ou définissez une racine de copie dans la carte Structure et importez une section à la fois. Les unités plus petites sont bien plus faciles à vérifier, et vous évitez d’importer accidentellement l’en-tête et le pied de page du site.
10. Examinez la carte Structure avant d’exporter
Vérifiez le nombre de composants, la profondeur d’imbrication maximale et la répartition de confiance. Les lignes vertes ont été converties directement ; les lignes rouges ont été conservées en HTML et méritent un second examen. Corriger la source et convertir à nouveau est généralement plus rapide que réparer le résultat dans Elementor.
11. Ouvrez d’abord la source à chaque point de rupture
C’est l’élément le plus utile de cette liste, et celui que l’on saute le plus souvent. La mise en page est re-mesurée à chaque largeur de point de rupture, et ce que le navigateur y calcule est ce qui est enregistré — il n’y a aucune couche d’interprétation pour arranger les choses.
Redimensionnez donc la source dans un navigateur à environ 1024px et 767px avant de convertir. Une mise en page déjà cassée à 767px devient une mise en page mobile fidèlement cassée, et il est très facile de passer une heure à blâmer la conversion pour un problème présent dans la source depuis le début. Deux minutes de redimensionnement vous indiquent si vous convertissez quelque chose qui fonctionne.
12. Vérifiez les détails qui ne se convertissent pas en silence
Quatre éléments paraissent corrects dans la source et sont tout simplement absents ensuite. Les rechercher au préalable transforme chacun d’eux d’un mystère en une tâche attendue :
- Décorations en pseudo-éléments. Tout ce qui est dessiné avec
::beforeou::after— guillemets, barres d’accent, superpositions en dégradé, fioritures de soulignement — n’est pas un nœud DOM et ne peut pas devenir un widget. Si un détail de conception disparaît, c’est la première chose à soupçonner. - Boutons à coins carrés qui ne sont pas des liens inline-block. Les vrais éléments
<button>, ainsi que les liens qui sont inline-block ou portent une classebtn/button, se convertissent toujours. Tout le reste — ancres stylées en flex, div cliquables — doit passer un test de géométrie incluant un rayon de coin d’au moins 3px, de sorte que les bords anguleux restent du texte stylé. Une classebtnsur le lien corrige tout d’un coup. - Les polices que vous ne possédez pas. Les noms de familles sont transférés ; les fichiers de polices ne le sont pas. Installez la police sur votre site WordPress avant de convertir, sinon vous évaluerez le résultat dans une police de substitution et vous courrez après des différences qui n’existent pas vraiment.
- États de survol et de focus. Seul l’état de repos peut être lu à partir d’un style calculé. Chaque couleur de survol est une tâche post-importation ; il est donc utile de noter combien d’éléments interactifs la page comporte avant de commencer.
À quoi ressemble une bonne source
Tout ce qui précède se résume en un paragraphe. Le HTML qui se convertit le mieux est sémantique, peu profond et autonome : de vraies balises de titre et de paragraphe, un seul conteneur par section, une mise en page réalisée avec flex ou grid et gap, des icônes sous forme de classes Font Awesome, des images sous forme de vraies URL hébergées, tout le CSS dans un seul bloc de style, et aucun script.
C’est aussi, et ce n’est pas un hasard, à quoi ressemble un HTML bien écrit de toute façon. Si vous générez la source plutôt que d’en hériter, demander ces propriétés coûte une phrase dans une requête et élimine l’essentiel de cette liste de contrôle.
Après l’importation
Reliez à nouveau les boutons, reconnectez les formulaires et les menus, parcourez les trois vues d’appareil, et retéléversez les éventuelles images d’espace réservé. C’est alors une page Elementor normale — entièrement modifiable, sans widget HTML entre vous et votre contenu.