Du HTML au JSON Elementor : exporter et importer des modèles

Les modèles Elementor sont stockés au format JSON. Une page HTML peut donc être convertie en un fichier de modèle JSON que vous importez comme n’importe quel autre modèle Elementor — portable, réutilisable et indépendant du presse-papiers. Voici comment fonctionne la voie JSON et quand la choisir.

Deux formats d’export, les mêmes composants

Après avoir converti du HTML, vous pouvez exporter de deux façons. Copier les données Elementor place des données JSON dans votre presse-papiers pour un collage immédiat dans un éditeur ouvert. Télécharger le modèle JSON enregistre cette même structure dans un fichier .json. Les composants sont identiques ; la différence, c’est qu’un fichier est portable, alors que le contenu du presse-papiers ne l’est pas.

Quand le fichier JSON est le bon choix

• Réutilisation sur plusieurs sites. Importez le même fichier sur n’importe quelle installation WordPress équipée d’Elementor.
• Gestion de versions. Le fichier est du JSON brut ; vous pouvez donc le conserver dans un dépôt, comparer deux exports ou archiver un design tel qu’il existait à une date donnée.
• Partage. Vous pouvez envoyer un fichier à un collègue ou à un client ; vous ne pouvez pas lui envoyer votre presse-papiers.
• Constitution d’une bibliothèque. Un dossier de modèles JSON nommés devient une bibliothèque de composants à partir de laquelle vous assemblez vos futures pages.

Comment importer un modèle JSON dans Elementor

1. Convertissez votre HTML et cliquez sur Télécharger le modèle JSON.
2. Dans WordPress, ouvrez Modèles → Modèles enregistrés.
3. Cliquez sur Importer des modèles et choisissez le fichier .json.
4. Le modèle apparaît dans votre bibliothèque ; insérez-le sur n’importe quelle page à l’aide du bouton de bibliothèque d’Elementor.

Ce que contient le JSON

Le fichier décrit une arborescence d’éléments Elementor : des conteneurs avec leur mise en page, leur arrière-plan, leur bordure et leurs espacements, et des widgets avec leur contenu et leurs réglages de style. Comme il s’agit du format natif d’Elementor, tout est importé sous forme de widgets modifiables — et non sous forme de bloc HTML. Titres, textes, images, boutons, boîtes d’icône, boîtes d’image et grilles arrivent tous prêts à être modifiés.

Une remarque pratique : dans le JSON, les références aux images sont des URL, pas des fichiers intégrés. Si votre source utilisait de vraies URL de la médiathèque, elles sont résolues à l’import ; les chemins locaux et les images en Base64 deviennent des emplacements d’image vides que vous remplissez ensuite. Téléverser les images au préalable est la seule modification qui suffit à faire s’importer proprement un modèle JSON.

Rendez les modèles indépendants du site avant de les enregistrer

Un modèle dont les couleurs et les polices sont codées en dur aura un aspect incorrect sur le prochain site où vous l’importerez. Avant d’exporter un bloc que vous comptez réutiliser, convertissez-le avec les Hériter des couleurs du site cible et la Hériter des polices globales du site cible. Le modèle adopte alors la palette et les polices définies par le site de destination, de sorte que le même JSON paraît natif partout où vous l’importez.

Gardez une structure propre

Un bon modèle réutilisable se compose d’un seul conteneur de premier niveau avec une arborescence peu profonde à l’intérieur. Avant d’exporter, vérifiez la carte de structure : une faible profondeur d’imbrication et des rangées de cartes formées d’un conteneur Grille contenant directement les widgets — plutôt que de cartes enveloppées chacune dans son propre conteneur — rendent le modèle bien plus facile à restyler après l’import. Une entrée propre produit un JSON propre.

La forme réelle du fichier

Il n’y a là aucun mystère, et connaître les champs rend le format beaucoup moins intimidant. Un modèle téléchargé est un unique objet JSON comportant cinq clés :

• content — l’arborescence d’éléments : conteneurs et widgets, chacun avec ses réglages.
• page_settings — les réglages au niveau de la page, vides pour un bloc converti.
• version — "0.4", la version du schéma de modèle d’Elementor.
• title — ce que vous avez saisi dans le champ de titre du modèle, par défaut « HTML Converted Page ».
• type — "page".

C’est surtout cette valeur type qu’il faut comprendre. Déclarer le modèle comme une page plutôt que comme une section signifie qu’il arrive dans Modèles enregistrés en tant que modèle de page — que vous pouvez toujours insérer dans n’importe quelle page existante à l’aide du bouton de bibliothèque, donc rien n’est perdu, mais cela signifie aussi que vous pouvez créer directement une page vierge à partir de ce modèle.

Pourquoi le contenu du presse-papiers est différent

Si vous examinez ce que le bouton Copier place dans votre presse-papiers, ce n’est pas le même objet. Il contient type: "elementor", un siteurl et le tableau des éléments — ni version, ni titre.

Il s’agit du format de collage d’Elementor, et non de son format de modèle. Lorsque vous faites un clic droit et choisissez Coller depuis un autre site, l’éditeur recherche précisément ce marqueur pour reconnaître le contenu du presse-papiers comme des données Elementor et non comme du texte brut. C’est pourquoi le collage fonctionne sans aucune étape d’import, et aussi pourquoi vous ne pouvez pas enregistrer le contenu du presse-papiers dans un fichier pour l’importer — les deux formats ne sont pas interchangeables, même s’ils décrivent les mêmes composants.

Du JSON brut, c’est une vraie gestion de versions

Comme le fichier est du JSON lisible plutôt qu’un paquet binaire, il se comporte comme du code source, ce qui ouvre quelques possibilités réellement utiles et rarement exploitées avec des sections de page :

• Comparer deux exports. Convertissez un bloc, modifiez la source, convertissez à nouveau, puis comparez les fichiers pour voir précisément quels réglages ont changé. C’est de loin le moyen le plus rapide de comprendre ce qu’une option de conversion modifie réellement.
• Archiver un design à un instant donné. Un fichier JSON daté est un enregistrement exact de l’apparence d’une section, récupérable longtemps après que la page en ligne a été modifiée au point d’être méconnaissable.
• Vérifier avant l’import. Recherchez http dans le fichier et vous verrez toutes les URL d’images qu’il référence, ce qui vous indique immédiatement s’il s’importera proprement sur un autre site.

Cette dernière vérification prend dix secondes et détecte l’échec d’import le plus fréquent — un modèle rempli d’URL pointant vers un site que la destination ne peut pas atteindre.

Copier ou télécharger — une règle simple

Collez les données du presse-papiers pour une insertion ponctuelle dans une page que vous modifiez en ce moment même. Téléchargez le fichier JSON pour tout ce que vous importerez plus d’une fois, partagerez ou conserverez. Même conversion, deux destinations — choisissez selon que vous avez besoin ou non de portabilité.