HTML to Elementor
Retour aux tutoriels

HTML to Elementor JSON: export and import templates

Les modèles Elementor sont stockés au format JSON. Cela signifie qu’une page HTML peut être convertie en 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’exportation, mêmes composants

Après avoir converti le HTML, vous pouvez exporter de deux façons. Copier les données Elementor place une charge utile JSON dans votre presse-papiers pour un collage immédiat dans un éditeur ouvert. Télécharger un modèle JSON enregistre cette même structure sous forme de fichier .json. Les composants sont identiques ; la différence est qu’un fichier est portable et qu’une charge utile 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 toute installation WordPress avec Elementor.
  • Contrôle de version. Le fichier est du JSON brut, vous pouvez donc le conserver dans un dépôt, comparer deux exports ou archiver une conception telle qu’elle existait à une date donnée.
  • Partage. Vous pouvez envoyer un fichier à un collègue ou à un client ; vous ne pouvez pas leur envoyer votre presse-papiers.
  • Création d’une bibliothèque. Un dossier de modèles JSON nommés devient une bibliothèque de composants à partir de laquelle assembler 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 à partir du bouton de la bibliothèque Elementor.

Ce que contient le JSON

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

Une remarque pratique : les références d’image dans le JSON sont des URL, pas des fichiers intégrés. Si votre source a utilisé de vraies URL de la bibliothèque de médias, elles se résolvent à l’importation ; les chemins locaux et les images Base64 deviennent des espaces réservés vides que vous remplissez ensuite. Charger d’abord les images est le seul changement qui permet à un modèle JSON de s’importer proprement.

Rendre les modèles indépendants du site avant d’enregistrer

Un modèle qui code en dur les couleurs et les polices aura un mauvais rendu sur le prochain site où vous l’importez. Avant d’exporter un bloc que vous comptez réutiliser, convertissez-le avec les couleurs du site et la typographie du site. Le modèle adopte alors la palette et les polices définies par le site de destination, de sorte que le même JSON paraisse natif partout où vous l’importez.

Gardez la structure propre

Un bon modèle réutilisable est un conteneur de niveau supérieur avec une arborescence peu profonde à l’intérieur. Avant d’exporter, vérifiez la carte Structure : une faible profondeur d’imbrication et des rangées de cartes formant une grille contenant directement les widgets — plutôt que chaque carte enveloppée dans son propre conteneur — rendent le modèle beaucoup plus facile à restyliser après l’importation. Une entrée propre produit un JSON propre.

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 actuellement. 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 de portabilité.