Au-delà de la conversion de base, trois réglages déterminent à quel point votre page Elementor sera nette et facile à modifier : le traitement des icônes, des images et de la structure. Bien les régler avant d’exporter fait toute la différence entre une page que vous livrez sans hésiter et une page qui vous demande une heure de nettoyage.
Ces trois réglages ont un point commun : le convertisseur ne peut travailler qu’avec ce qui se trouve réellement dans la source. Chacun d’eux consiste en fait à lui fournir quelque chose qu’il peut faire correspondre proprement — et à savoir quoi faire quand ce n’est pas possible.
1. Des icônes qui rejoignent la bibliothèque d’icônes d’Elementor
Si votre HTML utilise des classes Font Awesome (par exemple <i class="fas fa-check"></i>), réglez l’option Icônes sur Faire correspondre à la bibliothèque d’icônes Elementor ; chaque icône devient une véritable icône modifiable, que vous pouvez remplacer depuis le sélecteur d’icônes d’Elementor — et non un SVG verrouillé.
Mieux encore : une carte composée d’une icône + un titre + un texte court est convertie en un seul widget Boîte d’icône. Le convertisseur fait correspondre l’icône par son nom (à partir de la classe de l’icône et du titre de la carte, par exemple « Reusable » → recycle) et reprend la taille de l’icône, l’espacement et la typographie. S’il ne trouve aucune correspondance, il laisse l’icône vide pour que vous la choisissiez.
Astuce : les SVG personnalisés dessinés à la main ne peuvent pas entrer dans le contrôle d’icône d’Elementor ; privilégiez donc les classes Font Awesome dans la source si vous voulez des icônes de la bibliothèque.
2. Images : complétez-les dans Elementor
L’IA ne peut pas incorporer de vrais fichiers image dans du texte HTML, les images sont 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 savez 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
https://dans le HTML — elles s’importent sans aucune étape manuelle. - À éviter : les images intégrées en Base64 et les chemins de fichiers locaux — par défaut, le convertisseur les remplace par des emplacements vides.
3. La carte de structure : vérifiez avant d’exporter
Ouvrez l’onglet Carte de structure pour voir l’arborescence Elementor exacte à côté d’un aperçu en direct. Survolez n’importe quelle ligne et la partie correspondante se met en évidence des deux côtés.
- L’icône cible d’une ligne définit une racine de copie — vous n’exportez que ce bloc, sans les éléments englobants extérieurs.
- L’icône ✕ exclut une partie de la copie (pratique pour un élément parasite dont vous ne voulez pas).
- La vue d’ensemble indique le nombre de composants, la profondeur d’imbrication et une répartition par niveau de confiance (directe / partielle / conservée en HTML).
Un rapide passage ici permet de repérer tout ce qui ne s’est pas converti proprement, avant que cela n’atteigne votre site en production.
Combiner les trois
Ces réglages se cumulent. Une rangée de cartes construite avec des icônes Font Awesome, de vraies URL d’images et un balisage peu profond se convertit en une Grille contenant des widgets Boîte d’icône ou Boîte d’image bien propres — un résultat que vous auriez été content de construire à la main. La même rangée construite avec du SVG en ligne, des images en Base64 et cinq niveaux d’éléments englobants se convertit en une arborescence profonde de conteneurs aux visuels verrouillés. Même outil, même page, mais un tout autre après-midi.
Un petit guide de décision
- Vous intégrez une section dans un site existant à votre image de marque ? Icônes mises en correspondance avec la bibliothèque, couleurs du site, typographie du site. Le bloc adopte automatiquement votre charte graphique.
- Vous reproduisez fidèlement un design ? Icônes mises en correspondance avec la bibliothèque, couleurs d’origine, typographie d’origine. Enregistrez ensuite vos polices personnalisées dans Elementor avant de juger le résultat.
- Les images ne sont pas encore téléversées ? Emplacements vides — et vérifiez d’abord que chaque image de la source possède un texte alternatif pertinent.
- Page longue ? Définissez une racine de copie et transférez la page une section à la fois.
L’habitude à prendre
Ouvrez la Carte de structure à chaque fois, avant d’exporter — pas seulement quand quelque chose semble anormal. Il faut quinze secondes pour lire le nombre de composants, la profondeur d’imbrication et la répartition par niveau de confiance, et ces trois chiffres vous disent s’il faut exporter tout de suite ou revenir corriger la source. Corriger l’entrée puis reconvertir est systématiquement plus rapide que de réparer le résultat dans Elementor, et c’est cette habitude qui distingue un flux de travail fluide d’un flux de travail frustrant.