Au-delà de la conversion de base, trois fonctionnalités déterminent la netteté et la facilité d’édition de votre page Elementor : la gestion des icônes, des images et de la structure.
1. Des icônes qui intègrent la bibliothèque d’icônes d’Elementor
Si votre code HTML utilise des classes Font Awesome (par exemple <code><i class=”fas fa-check”></i></code>), réglez l’option Icônes sur Correspondre à la bibliothèque d’icônes d’Elementor : chaque icône devient une véritable icône modifiable que vous pouvez changer depuis le sélecteur d’icônes d’Elementor — et non un SVG verrouillé.
Mieux encore : une carte composée d’une icône + titre + texte court est convertie en un seul widget Boîte d’icône. Le convertisseur fait correspondre l’icône par son nom (en utilisant la classe de l’icône et le titre de la carte, par exemple « Réutilisable » → recycle) et reporte la taille de l’icône, l’espacement et la typographie. S’il ne trouve pas de correspondance, il laisse l’icône vide, à vous de la choisir.
Astuce : les SVG personnalisés dessinés à la main ne peuvent pas entrer dans le contrôle d’icône d’Elementor ; préférez donc les classes Font Awesome dans la source si vous voulez des icônes de bibliothèque.
2. Images : à remplir dans Elementor
L’IA ne peut pas incorporer de vrais fichiers image dans le texte HTML, c’est donc la partie la plus délicate. La voie la plus simple : réglez Images sur Emplacements d’image vides. Chaque image devient un emplacement vide, et chaque emplacement conserve son texte alt comme légende — vous saurez ainsi quelle image va où au moment de les téléverser dans Elementor.
- Idéal : téléversez d’abord les images dans la Médiathèque, puis utilisez ces URL <code>https://</code> dans le HTML — elles s’importent sans étape manuelle.
- À éviter : les images intégrées en Base64 et les chemins de fichiers locaux — le convertisseur les remplace par défaut par des emplacements vides.
3. La carte de la structure : à vérifier avant d’exporter
Ouvrez l’onglet Carte de la structure pour voir l’arborescence Elementor exacte en regard d’un aperçu en direct. Survolez une ligne et la partie correspondante se surligne des deux côtés.
- L’icône cible sur une ligne définit une racine de copie — exportez uniquement ce bloc et supprimez les conteneurs extérieurs.
- L’icône ✕ exclut une partie de la copie (pratique pour un élément isolé dont vous ne voulez pas).
- L’aperçu montre le nombre de composants, la profondeur d’imbrication et une répartition de la confiance (directe / partielle / conservée en HTML).
Un rapide passage ici permet de repérer tout ce qui n’a pas été correctement mappé avant que cela n’atteigne votre site en production.