HTML to Elementor
Retour aux tutoriels

Transformer des blocs convertis en bibliothèque Elementor réutilisable

Convertir une page fait gagner un après-midi. Constituer une bibliothèque de sections converties et nettoyées change la vitesse à laquelle vous construisez tout ce qui suit.

Un arbre d’éléments converti menant à deux voies d’exportation : copier les données de collage Elementor dans le presse-papiers, ou télécharger un fichier de modèle JSON portable.
Composants identiques dans les deux cas. Le presse-papiers est le plus rapide pour une page déjà ouverte ; le fichier JSON est celui que vous pouvez réutiliser, partager et conserver dans un contrôle de version.

Enregistrez des sections, pas des pages

Une page entière est rarement réutilisable ; une section l’est presque toujours. Après avoir converti et nettoyé un hero, une grille de fonctionnalités, une rangée de tarifs ou un bloc de témoignages, enregistrez ce seul conteneur dans la bibliothèque de modèles avec un nom descriptif. Visez des noms qui décrivent la forme plutôt que le projet — « grille de fonctionnalités, 3 colonnes, icône en haut » vaut mieux que « client-x-section-2 ».

Deux voies d’export, deux usages

  • Copier les données Elementor — le plus rapide lorsque vous ajoutez une section dans une page déjà ouverte.
  • Télécharger un modèle JSON — mieux adapté pour constituer une bibliothèque. Le fichier peut être importé sur n’importe quel site, versionné dans un dépôt et partagé avec votre équipe.

Pour un travail de bibliothèque, la voie JSON vaut le clic supplémentaire : vous obtenez des fichiers portables plutôt qu’un contenu de presse-papiers.

Rendez les blocs indépendants du site avant de les enregistrer

Un bloc qui fige les couleurs et les polices détonnera sur le prochain site où vous l’utiliserez. Avant de l’enregistrer dans votre bibliothèque, envisagez de le reconvertir avec les Hériter des couleurs du site cible et la Hériter des polices globales du site cible. Ces blocs adoptent alors la palette et les polices définies par le site de destination — le même bloc a l’air natif partout.

Gardez une structure saine

Un bloc réutilisable doit être un seul conteneur de premier niveau avec une arborescence peu profonde à l’intérieur. Avant d’enregistrer, supprimez les conteneurs englobants vides restants et assurez-vous que les rangées de cartes sont un conteneur Grille ou un conteneur Flexbox contenant directement des widgets, plutôt que chaque carte placée dans son propre conteneur redondant. Une arborescence propre est bien plus facile à restyler six mois plus tard.

Des widgets globaux pour les parties vraiment partagées

Pour un élément qui doit rester identique sur de nombreuses pages — un bandeau d’appel à l’action, une bande de garanties —, un widget global est plus solide qu’un modèle : modifiez-le une fois et toutes les instances se mettent à jour. Utilisez les modèles comme points de départ et les widgets globaux pour ce qui ne doit pas dériver.

Une réserve qu’il vaut mieux énoncer clairement : les widgets globaux sont une fonctionnalité d’Elementor Pro. Avec la version gratuite, vous n’avez que des modèles enregistrés, qui sont des copies — insérez-en un dans cinq pages et vous avez cinq copies indépendantes à mettre à jour. Si vous êtes sur la version gratuite et que quelque chose ne doit vraiment pas dériver, gardez une seule page de référence et renvoyez-y par un lien plutôt que de la dupliquer.

Ce qui voyage d’un site à l’autre, et ce qui ne voyage pas

Un modèle JSON est portable, mais il n’est pas autonome. Trois choses surprennent régulièrement la première fois que l’on importe un bloc sur un autre site :

  • Les images voyagent sous forme d’URL, pas de fichiers. Le bloc référence les images par leur adresse. Importez-le sur un site qui ne peut pas joindre l’hôte d’origine — ou sur un site où ces fichiers ont été supprimés depuis — et vous obtenez des images cassées. Pour une bibliothèque que vous comptez garder, remplacez les photos par vos propres médias ou par des emplacements d’image prévus à cet effet avant d’enregistrer.
  • Les polices doivent déjà exister. Le modèle stocke un nom de famille de polices. Si le site de destination n’a pas cette famille installée, le texte se rabat silencieusement sur une autre police. Les blocs enregistrés en mode typographie du site évitent entièrement ce problème, puisqu’ils ne portent aucune famille.
  • Les couleurs globales sont des références par nom. Un widget lié à une couleur globale cherche cette couleur globale sur le site de destination. Si elle n’y est pas, le comportement dépend de la version d’Elementor et correspond rarement à ce que vous vouliez. Soit vous gardez des couleurs explicites dans les blocs de bibliothèque, soit vous uniformisez les noms de votre palette globale sur les sites sur lesquels vous travaillez — la seconde option demande plus de travail au départ et se révèle bien meilleure ensuite.

Nommez-les et versionnez-les comme du code

Une bibliothèque cesse d’être utile dès que vous n’arrivez plus à y retrouver les choses. Deux habitudes font l’essentiel du travail :

  • Décrivez la forme, pas l’origine. « hero, deux colonnes, image à droite » vous dit s’il faut l’utiliser. « acme-homepage-v2 » ne le dit pas, et vous ouvrirez cinq modèles pour trouver le bon.
  • Mettez une date ou une version dans le nom des fichiers JSON exportés. Vous améliorerez un bloc et voudrez récupérer l’ancien exactement une fois — mais ce jour-là, vous y tiendrez vraiment.

Si vous gardez les fichiers JSON dans un dépôt à côté de vos projets, vous obtenez gratuitement les diffs et l’historique. Il est inhabituel de traiter des sections de page comme des artefacts versionnés, et cela s’avère payant dès la première fois que vous avez besoin de savoir ce qui a changé.

Testez un bloc avant de lui faire confiance

Le test ne coûte presque rien et détecte tout ce qui précède : importez le bloc sur un site de test qui n’est pas celui sur lequel vous l’avez construit, idéalement avec un thème différent et une palette globale vide. Les images cassées, les mauvaises polices et les couleurs globales manquantes apparaissent immédiatement, quand les corriger prend une minute — et non devant un client, sur une page que vous êtes sur le point de livrer.

Une bibliothèque qui en vaut la peine

Dix à quinze sections bien nommées et indépendantes du site couvrent l’essentiel de ce dont un site marketing a besoin : hero, grille de fonctionnalités, fonctionnalité en deux colonnes, étapes, témoignage, bande de logos, tarifs, FAQ, bandeau d’appel à l’action, pied de page. Construisez-la une fois à partir de sources converties et la plupart des pages futures deviennent de l’assemblage plutôt que de la construction.

Vous n’êtes pas non plus obligé de partir de rien. La bibliothèque de modèles de ce site propose des blocs prêts à l’emploi que vous pouvez prévisualiser, convertir et adapter — une façon raisonnable de combler les lacunes de votre propre collection sans concevoir chaque section à partir de zéro.

Écrit par Leo

Neuf ans de WordPress et d'Elementor ; 189 sites migrés. Chaque règle de ce convertisseur vient d'un vrai projet. À propos de cet outil