Liste de contrôle avant de convertir votre HTML

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 en <h1>–<h6>, le corps du texte en <p>, les appels à l’action en <button> ou <a class="button">, les listes en <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 élément englobant par section. Chaque niveau d’imbrication supplémentaire devient un conteneur de plus à traverser à coups de clics dans l’éditeur. Les éléments englobants purement décoratifs, sans style, sont fusionné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 en ligne 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 cette page sans style qui sera convertie.

4. Gérez d’abord les images

Cas idéal : téléversez-les dans la médiathèque et utilisez les vraies URL https://. Sinon, passez l’option Images sur Emplacements d’image vides et remplissez-les ensuite — chaque emplacement conserve son alt comme légende. Les images en base64 et les chemins de fichiers locaux sont volontairement remplacés par des emplacements d’image, car ils ne peuvent pas être importés de manière fiable dans WordPress.

5. Préférez les classes Font Awesome aux SVG en ligne

Seules les icônes basées sur des classes peuvent entrer dans la bibliothèque d’icônes d’Elementor comme icônes modifiables. Les SVG en ligne ne peuvent pas être intégrés au contrôle d’icône, et ils perdent tout dimensionnement et toute couleur de trait définis dans le CSS de la page.

6. Utilisez gap, pas des marges sur chaque enfant

Les espacements gap sur un parent flex ou grid correspondent à un seul contrôle d’espacement Elementor. Les marges appliquées à chaque enfant sont reportées widget par widget et sont beaucoup plus fastidieuses à ajuster par la suite.

7. Centrez avec max-width et marges automatiques

Le motif max-width + margin:0 auto est reconnu et devient un conteneur Encadré, qui se centre nativement à toutes les tailles d’écran.

8. Supprimez ce que vous ne voulez pas transporter

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 vraie 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 de structure et importez une section à la fois. Les unités plus petites sont beaucoup plus faciles à vérifier, et vous évitez d’importer accidentellement l’en-tête et le pied de page du site.

10. Passez en revue la Carte de structure avant d’exporter

Vérifiez le nombre de composants, la profondeur d’imbrication maximale et la répartition des niveaux de confiance. Les lignes vertes ont été converties directement ; les lignes rouges ont été conservées en HTML et méritent un second regard. Corriger la source et reconvertir 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 important de cette liste, et celui qui est le plus souvent ignoré. La mise en page est re-mesurée à chaque largeur de point de rupture et c’est ce que le navigateur calcule à cette largeur qui est stocké — aucune couche d’interprétation ne vient arranger les choses.

Redimensionnez donc la source dans un navigateur à environ 820 px et 390 px avant de convertir. Une mise en page déjà cassée à 390 px se convertit en une mise en page mobile fidèlement cassée, et il est très facile de passer une heure à accuser la conversion pour un problème qui était 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 disparaissent sans bruit à la conversion

Quatre choses semblent correctes dans la source et sont tout simplement absentes ensuite. Les repérer à l’avance transforme chacune d’elles en tâche attendue plutôt qu’en mystère :

• Décorations par pseudo-éléments. Tout ce qui est dessiné avec ::before ou ::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 design 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>, et les liens qui sont en inline-block ou portent une classe btn/button, se convertissent toujours. Tout le reste — ancres stylées en flex, div cliquables — doit passer un test de géométrie incluant un arrondi d’angle d’au moins 3 px, de sorte que les éléments à bords nets restent sous forme de texte stylé. Une classe btn sur le lien corrige tout d’un coup.
• Polices que vous n’avez 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, ou vous évaluerez le résultat dans une police de substitution et 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 à faire après l’importation, il vaut donc la peine de noter combien d’éléments interactifs la page comporte avant de commencer.

Ce à 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 élément englobant 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 une coïncidence, à quoi ressemble de toute façon un HTML bien écrit. Si vous générez la source plutôt que d’en hériter, demander ces propriétés coûte une phrase dans un prompt et élimine la majeure partie de cette liste de contrôle.

Après l’importation

Reliez à nouveau les boutons, reconnectez les formulaires et les menus, parcourez les trois vues par appareil, et remplacez les éventuels emplacements d’image en téléversant de nouveau les images. C’est ensuite une page Elementor normale — entièrement modifiable, sans widget HTML entre vous et votre contenu.