Comment enregistrer une page d'élémenteur en tant que modèle (et l'exporter en tant que JSON)

Enregistrez une page Elementor en tant que modèle et exportez-la en tant que fichier JSON, affiché avec la boîte de dialogue Enregistrer cette page d'Elementor dans votre bibliothèque

Une fois que vous avez une page qui vous satisfait, vous ne devriez pas avoir à la construire deux fois Elementor vous permet d'enregistrer n'importe quelle page comme modèle, puis de l'insérer sur une autre page, un autre site ou de la remettre à un client Le même modèle enregistré peut être exporté comme un modèle .json fichier, qui est la façon dont la plupart des conceptions Elementor voyagent entre les sites Si vous préférez sauter complètement la partie du bâtiment, le Bibliothèque de modèles Master Addons dispose de 211 modèles de pages prêts à l'emploi que vous pouvez importer en quelques clics.

Ce guide couvre toute la boucle : enregistrez une page comme modèle, enregistrez une seule section, trouvez vos modèles enregistrés, exportez-en un sous forme de JSON et apportez-le dans un deuxième site. Chaque capture d'écran provient d'Elementor 4.2 gratuitement Additions maîtres plugin actif Si vous allez dans l'autre sens et que vous devez apporter un modèle, le Guide d'importation de modèles d'éléments se promène sur les trois itinéraires d'importation.

La version courte

Pour enregistrer une page Elementor comme modèle, ouvrez la page dans Elementor, cliquez sur la flèche à côté de Publier, choisissez Enregistrer sous Modèle(en anglais), donnez-lui un nom et cliquez sur Enregistrer Pour l'exporter, ouvrez la bibliothèque (l'icône du dossier), trouvez le modèle dans l'onglet Modèles, ouvrez le menu à trois points et cliquez sur Exporter. Votre navigateur télécharge un .json fichier que vous pouvez importer sur n'importe quel autre site WordPress exécutant Elementor.

De quelle méthode avez-vous besoin ?

Ce que vous voulez réutiliserMéthodeOù ça commence
Une mise en page entièreEnregistrer sous ModèleLa flèche à côté du bouton Publier
Une section, un conteneur ou un widgetCliquez avec le bouton droit sur l'élémentEnregistrer en tant que modèle dans le menu contextuel
Un design dont vous avez besoin sur un site différentExporter sous JSONOnglet Modèles, menu à trois points, Export
L'ensemble du site, y compris l'en-tête, le pied de page et les couleurs globalesExporter un modèle de site WebElémenteur, Outils, Modèles de sites Web
Un kit que vous avez acheté chez Envato ou ThemeForestImportation de kit, qui est un écran différentLe guide d'importation du kit de modèles

Avant de commencer

Vous avez besoin du plugin gratuit Elementor Les modèles d'enregistrement, d'exportation et d'importation en font tous partie, donc aucune des étapes ci-dessous n'a besoin d'Elementor Pro. Deux options de la boîte de dialogue de sauvegarde nécessitent un forfait payant, et je les ai signalées là où elles apparaissent.

Modèles de noms la façon dont vous nommeriez un fichier que vous devez trouver en six mois. “Perfume Landing Page” battes “Page copy 2” une fois que la liste s'étend sur quarante lignes.

Comment enregistrer une page Elementor en tant que modèle

Ouvrez la page avec laquelle vous souhaitez réutiliser Modifier avec Elementor. Dans la barre supérieure, à côté du bouton Publier (ou Mettre à jour), il y a une petite flèche Cliquez dessus.

Menu des options de sauvegarde de l'élémenteur ouvert affichant Enregistrer l'ébauche, Enregistrer en tant que modèle et Afficher la page

Le menu comporte trois éléments Choisissez Enregistrer sous Modèle.

Nommez le modèle et choisissez où il va

Elementor ouvre une boîte de dialogue intitulée“Save this Page to your library” avec un champ de nom et deux destinations.

Enregistrez cette page dans la boîte de dialogue de votre bibliothèque dans Elementor avec un nom de modèle renseigné et des modèles de site sélectionnés

Modèles de site stocke le modèle dans la base de données de ce site Il est coché par défaut, il est gratuit, et c'est ce que vous voulez quand la conception n'a qu'à exister ici Les Modèles Cloud stockent le modèle dans votre compte Elementor à la place, il est donc disponible sur chaque site que vous connectez Celui-ci a besoin d'un forfait payant, c'est pourquoi la boîte de dialogue met un lien Connect à côté.

Tapez un nom, laissez les modèles de site cochés et cliquez Enregistrer. Elementor enregistre la mise en page et vous dépose dans la bibliothèque sous l'onglet Modèles, avec votre nouveau modèle dans la liste.

La page elle-même n'est pas touchée L'original reste publié tel quel, et le modèle est une copie distincte classée sous Modèles, Modèles enregistrés.

Enregistrez une section au lieu de la page entière

Souvent, la pièce qui vaut la peine d'être conservée est plus petite qu'une page Un bloc de prix ou une ligne de témoignage vaut la peine d'être économisé par lui-même, vous pouvez donc la déposer dans n'importe quelle page plus tard.

Cliquez avec le bouton droit sur la section, le conteneur ou le widget sur le canevas et choisissez Enregistrer en tant que modèle.

Menu contextuel du clic droit de l'élémenteur sur une section affichant l'option Enregistrer en tant que modèle

La même boîte de dialogue apparaît, cette fois en disant“Save this Section to your library”Le modèle enregistré enregistre son propre type, donc la liste affiche Page, Section ou Container à côté de chaque nom Ce type importe plus tard : Elementor insère un modèle de Section à l'intérieur de votre page, tandis qu'un modèle de Page apporte toute la mise en page avec.

C'est ainsi que vous vous retrouvez avec votre propre bibliothèque de pièces Sauvegarder un bloc la première fois que vous le construisez, et la page suivante commence plus loin Pour une longueur d'avance, le modèles de section Élémenteur gratuit pack et le modèles de section héros sont tous deux construits pour être sauvegardés et réutilisés de cette façon.

Où vivent vos modèles enregistrés

Deux endroits, montrant la même liste.

À l'intérieur de l'éditeur

Avec n'importe quelle page ouverte dans Elementor, cliquez sur l'icône de dossier dans la zone de dépôt vide au bas du canevas, puis ouvrez l'onglet Modèles Chaque modèle que vous avez enregistré ou importé est ici, avec son type, son auteur, sa date de création et ses boutons Aperçu et insertion.

Onglet Modèles de la bibliothèque Elementor répertoriant les modèles de site enregistrés avec les actions Aperçu et Insertion

Cliquez Insérer et le modèle est ajouté à la page que vous modifiez Il atterrit comme une nouvelle section en dessous de tout ce qui est déjà là, donc rien n'est effacé.

Dans le tableau de bord WordPress

Accédez à Modèles, Modèles enregistrés Mêmes modèles dans la vue de la liste WordPress, avec des onglets en haut pour Page, Section, Conteneur et le reste.

Écran Modèles enregistrés dans le tableau de bord WordPress avec les actions de ligne affichant les liens Exporter la page et Exporter la section

Survolez une ligne et les actions apparaissent : Modifier, Modification rapide, Corbeille, Affichage et un lien Exporter Le lien Exporter est étiqueté avec le type du modèle, vous verrez donc Exporter la page sur un modèle de page et Exporter la section sur une section.

Comment exporter un modèle Elementor en tant que fichier JSON

Vous pouvez exporter depuis l'un ou l'autre endroit, et le fichier est le même.

De l'éditeur

Ouvrez la bibliothèque, allez dans l'onglet Modèles, trouvez le modèle et cliquez sur les trois points à la fin de sa ligne Le menu comporte Exporter, Renommer et Supprimer.

Menu à trois points sur un modèle d'élément enregistré affichant Exporter, renommer et supprimer

Du tableau de bord

Dans Modèles, Modèles enregistrés, passez la ligne au niveau du bouton et cliquez sur Exporter la page (ou Section Export).

Qu'est-ce qu'il y a dans le fichier.json

J'ai exporté la page en sept sections des captures d'écran ci-dessus et j'ai ouvert le fichier Il s'agit de 113 Ko de JSON avec cinq touches de premier niveau :

{
  "content": [ ... 7 sections ... ],
  "page_settings": [],
  "version": "0.4",
  "title": "Perfume Landing Page",
  "type": "page"
}

content contient la structure : chaque section, colonne, widget et paramètre, imbriqués dans la façon dont ils se trouvent sur la page. type indique à l'importateur s'il s'agit d'une page, d'une section ou d'un contenant.

Ce fichier contenait également 12 URL d'image et aucune donnée d'image intégrée Vos photos ne se trouvent pas à l'intérieur du JSON Elles sont référencées par leur adresse sur le site à partir duquel vous avez exporté, et à l'importation Elementor récupère chacune de ces adresses et les copie dans la médiathèque du nouveau site Le site source doit toujours être en ligne et ses images toujours accessibles au public, ou le modèle arrive avec des emplacements d'image vides.

Importer le JSON sur l'autre site

Sur le site de réception, accédez à Modèles, Modèles enregistrés et cliquez sur Modèles d'importation. Elementor accepte un seul .json dossier ou un .zip contenant plusieurs.

Panneau Modèles d'importation d'élémenteur demandant un modèle de fichier JSON ou une archive zip

Choisissez le fichier, cliquez sur Importer maintenant et le modèle rejoint la liste De là, vous l'insérez dans une page comme n'importe quel autre modèle enregistré Vous pouvez également importer de l'intérieur de l'éditeur en utilisant l'icône de téléchargement en haut de la bibliothèque guide d'importation complet couvre les deux itinéraires et les erreurs qui les accompagnent.

Enregistrer une page vs exporter l'ensemble du site

Un modèle enregistré porte une mise en page Il n'apporte pas vos couleurs globales, polices, en-tête, pied de page ou paramètres de site, c'est pourquoi une page importée peut regarder près sans regarder identique.

Lorsque vous voulez tout cela, utilisez un modèle de site Web Accédez à Élémenteur, Outils, Modèles de sites Web.

Outils Élémenteurs Modèles de sites Web onglet avec Exporter ce site Web et Appliquer un modèle de site Web panneaux

Exporter ce site web télécharge un .zip avec vos modèles, votre contenu et vos paramètres de conception qu'il contient Appliquer un modèle de site Web en reprend un C'est le même mécanisme derrière le prêt-à-porter Kits de modèles d'éléments. Utilisez-le lorsque vous clonez une version entière. Pour une seule page, l'exportation JSON est plus légère.

Lorsque le modèle importé ne semble pas correct

Les images sont manquantes ou cassées

Le site source est hors ligne, les images ont été supprimées ou le site est derrière une connexion ou un pare-feu Elementor n'a pas pu les récupérer au moment de l'importation. Remettez le site d'origine et réimportez-le, ou téléchargez les images à la main sur le nouveau site.

Les polices et les couleurs ne correspondent pas

Les valeurs par défaut de votre thème remplacent le modèle Activer Désactiver les couleurs par défaut et Désactiver les polices par défaut dans les paramètres d'Elementor ; ce document montre où se trouvent les deux commutateurs.

Une partie de la mise en page est manquante

Le template utilise un widget d'un plugin qui n'est pas actif sur le nouveau site Activez le même plugin et rechargez l'éditeur Le Liste des widgets Master Addons est un moyen rapide de vérifier quel widget un design a besoin par nom.

Le téléchargement est rejeté

Les importations de modèles prennent un .json dossier ou un .zip des modèles. Un modèle de site Web .zip est un format différent et ne passera pas par cet écran ; utilisez Outils, Modèles de sites Web pour ceux-là Les fichiers volumineux peuvent également atteindre la limite de téléchargement de votre hôte, que votre hôte peut augmenter.

Ouvrez Paramètres de page dans Elementor et basculez la mise en page sur Elementor Canvas pour une page autonome, ou Elementor Full Width si vous souhaitez conserver l'en-tête et le pied de page du site Si vous préférez concevoir ces parties vous-même, le constructeur de thème gratuit Elementor gère les en-têtes, les pieds de page et les archives.

Un itinéraire plus rapide : partir d'un modèle déjà construit par quelqu'un

Sauver vos propres modèles est payant une fois que vous avez un design qui vaut la peine d'être conservé Jusque-là, importer un fini est plus rapide.

Bibliothèque de modèles d'addons principaux dans le tableau de bord WordPress montrant les modèles de page avec les boutons Aperçu et Importation

Master Addons expédie une bibliothèque de modèles de 211 pages, 423 sections, 43 en-têtes et 34 pieds de page à l'intérieur du plugin, vous importez donc en un clic au lieu de rechercher un fichier JSON. 35 des modèles de page sont gratuits ; le reste est livré avec Maître Addons Pro. Importez-en un, modifiez-le, puis enregistrez votre version éditée sous forme de modèle en utilisant les étapes ci-dessus, et vous avez votre propre point de départ pour le prochain projet Le catalogue complet est sur le Modèles de pages d'éléments page.

Foire aux questions

Comment enregistrer une page Elementor comme modèle ?

Ouvrez la page dans Elementor, cliquez sur la flèche à côté du bouton Publier, choisissez Enregistrer en tant que modèle, tapez un nom et cliquez sur Enregistrer Le modèle est stocké sous Modèles, Modèles enregistrés et peut être inséré dans n'importe quelle autre page du site.

Ai-je besoin d'Elementor Pro pour enregistrer une page en tant que modèle ?

Non. L'enregistrement, l'exportation et l'importation de modèles fonctionnent tous dans Elementor gratuit. Seuls les modèles Cloud, qui synchronisent vos modèles sur tous les sites via votre compte Elementor, ont besoin d'un forfait payant.

Où sont stockés les modèles enregistrés par Elementor ?

Dans votre base de données WordPress, en tant que type de publication personnalisé, vous les voyez sur Modèles, Modèles enregistrés dans le tableau de bord, et sur l'onglet Modèles de la bibliothèque à l'intérieur de l'éditeur Les deux listes affichent les mêmes modèles.

Comment exporter une page Elementor en tant que fichier JSON ?

Enregistrez d'abord la page en tant que modèle, puis ouvrez Modèles, Modèles enregistrés, passez la ligne du modèle au pas et cliquez sur Exporter la page Votre navigateur télécharge un fichier.json que vous pouvez importer sur n'importe quel site exécutant Elementor.

Est-ce que le JSON exporté inclut mes images ?

Non. Le fichier stocke les URL d'images, pas les fichiers d'images. Lors de l'importation, Elementor télécharge chaque image du site d'origine et l'ajoute à la nouvelle médiathèque, le site source doit donc être en ligne et ses images accessibles au public.

Quelle est la différence entre un modèle enregistré et un modèle de site Web ?

Un modèle enregistré est une mise en page : une page, une section ou un conteneur Un modèle de site Web est un .zip de l'ensemble du site, y compris les couleurs globales, les polices, l'en-tête, le pied de page et les paramètres d'utilisation Elementor, Outils, Modèles de sites Web pour le second.

Prochaine étape

Enregistrez une page que vous aimez déjà comme modèle, exportez-la et conservez le JSON avec vos fichiers de projet Cela prend environ deux minutes, et la conception survit ensuite à un changement de thème ou à un passage à un nouvel hôte Lorsque vous avez besoin d'une nouvelle page plutôt que d'une copie d'une ancienne, parcourez le Bibliothèque de modèles de pages d'éléments(ou lire) comment importer un modèle Elementor pour les trois façons d'en faire entrer un.

Lecture connexe: modèles de section Élémenteur gratuit, comment importer un kit de modèles Envato Elements, et comment créer un site Web d'une page avec Elementor.

Photo de Roy Jemee
Roy Jemee
Je suis Roy Jemee, Content Wrangler et Marketer chez Pixar Labs, travaillant sur Master Addons pour Elementor J'écris les tutoriels, enregistre les vidéos, et garde la documentation à jour, donc vous savez toujours comment utiliser chaque fonctionnalité Je gère aussi le support, donc si vous frappez un accroc, je suis la personne qui vous aide à y répondre de vraies réponses, de la part de quelqu'un qui utilise ces outils tous les jours.

Laisser une réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués *