Comment exporter et importer des sites web Elementor (votre guide complet)

L’outil Elementor permet de concevoir facilement de superbes pages, des articles et des sites web entiers. Cependant, même avec un puissant constructeur de pages tel qu’Elementor, la création d’un nouveau design de site demande du temps et des efforts.

C’est là que le système d’importation et d’exportation d’Elementor entre en jeu. Grâce à cette fonctionnalité, vous pouvez réduire votre temps de conception et de développement en créant des modèles réutilisables ou en important des mises en page de tiers pour votre projet.

Cet article va plonger dans le système d’importation/exportation flexible et puissant d’Elementor. Nous couvrirons tout, des modèles de section aux modèles de page, et même l’exportation de l’ensemble de votre site web Elementor. C’est parti !

Comment préparer votre site pour un nouveau modèle Elementor (en 2 étapes)

Les modèles Elementor sont des mises en page préconçues qui s’appliquent à des pages individuelles ou à des éléments spécifiques de l’interface utilisateur (IU). Bien qu’ils ressemblent aux thèmes WordPress, il existe quelques différences essentielles.

Les thèmes WordPress modifient le design d’un site web entier. En revanche, les modèles Elementor affectent la mise en page d’une seule page web. Comme ils sont limités à une seule page, il est possible d’utiliser plusieurs modèles Elementor simultanément. En outre, ces modèles fonctionnent sur un thème WordPress, qu’il soit gratuit ou premium.

L’application d’un nouveau modèle Elementor à votre site web peut modifier son apparence ou son fonctionnement. En gardant cela à l’esprit, il y a certaines actions que vous devriez effectuer avant de changer votre modèle.

Étape 1 : Créez une sauvegarde

Il est sage de créer une sauvegarde avant de modifier votre modèle Elementor. Cette étape vous assure d’avoir du contenu à restaurer si vous rencontrez des problèmes avec votre nouveau design.

Diverses extensions vous permettent de créer une sauvegarde de votre site web. Parmi eux, l’extension UpdraftPlus, qui peut copier tous vos fichiers et les informations de votre base de données dans le cloud :

Si vous êtes un client de Kinsta, nous sauvegardons automatiquement votre site web tous les jours. Si vous avez besoin de sauvegardes plus fréquentes, nous pouvons copier votre site toutes les six heures (50 $ par site, par mois) ou toutes les heures (100 $ par site, par mois).

Vous pouvez également créer une sauvegarde manuellement à tout moment. Pour cela, connectez-vous à votre tableau de bord MyKinsta:

Dans le menu de gauche, sélectionnez Sites et cliquez sur le site web en question. Choisissez ensuite Sauvegardes > Manuelles:

Il vous suffit de cliquer sur le bouton « Sauvegarder maintenant » et nous nous chargeons du reste. Si vous rencontrez des problèmes et souhaitez restaurer votre sauvegarde la plus récente, naviguez vers l’onglet Sauvegardes > Manuelle. Ici, MyKinsta affiche une liste de toutes vos sauvegardes :

Pour restaurer une version antérieure de votre site, cliquez sur le bouton « Restaurer vers »qui l’accompagne. Vous pouvez maintenant choisir de restaurer cette sauvegarde sur votre site en production ou sur un site de staging.

Étape 2 : Mettez votre site en mode maintenance

La modification du modèle de votre site peut provoquer des plantages inattendus, des bogues ou d’autres comportements étranges. Après avoir appliqué un nouveau design, vous devrez peut-être passer un certain temps à tester votre site et à faire des ajustements.

Si un visiteur essaie d’accéder à votre site pendant que vous effectuez ces changements, la qualité de son expérience peut en souffrir. Cela peut vous faire perdre des conversions potentielles.

Avant d’appliquer un nouveau modèle Elementor, vous pouvez mettre votre site en mode maintenance. Cette étape empêchera les visiteurs d’accéder à votre site pendant que vous testez votre nouveau design.

Plusieurs extensions peuvent créer un mode de maintenance personnalisé. Cependant, WP Maintenance Mode est un choix populaire :

Cette extension comporte de nombreux extras, notamment l’ajout d’un compte à rebours à l’écran d’accueil de votre maintenance. Cette fonctionnalité peut vous aider à générer un buzz autour de la refonte et du relancement de votre site.

Une fois que votre site est en mode maintenance, vous êtes libre d’expérimenter divers modèles et de tester leur apparence sur l’interface publique de votre site web. Lorsque vous êtes satisfait des résultats, vous pouvez sortir votre site du mode de maintenance – et épater les visiteurs avec le nouveau design de votre site.

Comment sauvegarder les modèles Elementor (2 méthodes)

Elementor, l’un des constructeurs de pages les plus populaires au monde, ne manque pas de modèles tiers prêts à l’emploi. Cependant, il arrive que vous souhaitiez créer vos propres modèles.

L’utilisation de modèles peut vous aider à obtenir une cohérence de conception sur l’ensemble de votre site web. Cela peut également vous faire gagner du temps, surtout si vous utilisez les mêmes designs sur plusieurs sites.

Par exemple, les agences de conception et de développement WordPress peuvent bénéficier de la création de modèles présentant les éléments de base qu’elles appliquent régulièrement aux sites de leurs clients.

Méthode 1 : Enregistrez une page comme un modèle Elementor

Vous pouvez enregistrer n’importe quelle page en tant que modèle Elementor. Cela peut vous aider à établir un aspects et un ressenti standards, prêts à être déployés sur l’ensemble de votre site web.

Par exemple, vous pouvez créer les menus de votre site, ainsi que l’en-tête et le pied de page WordPress. Vous pouvez ensuite appliquer ce modèle de page à toutes vos pages web.

Créer un modèle signifie également que vous n’aurez pas à recréer manuellement les mêmes éléments pour chaque page web. C’est une excellente nouvelle pour votre productivité.

Pour enregistrer la page actuelle en tant que modèle Elementor, trouvez le bouton vert Mettre à jour/Publier en bas de la colonne latérale Elementor. Ensuite, cliquez sur l’icône en forme de flèche qui accompagne ce bouton :

Vous pouvez maintenant cliquer sur Enregistrer comme modèle. Cela lance une fenêtre dans laquelle vous pouvez donner un nom descriptif à ce modèle :

Ensuite, cliquez sur Enregistrer. Vous pouvez maintenant accéder à ce modèle à tout moment en lançant la bibliothèque Elementor et en sélectionnant l’onglet Mes modèles.

Méthode 2 : Enregistrez une section en tant que modèle Elementor

De nombreux sites web comportent des éléments récurrents. Il s’agit notamment de formulaires de génération de prospects ou de textes décrivant vos produits les plus vendus.

En créant un modèle de section, vous pouvez l’ajouter à n’importe quelle page en quelques clics. Vous pouvez même créer des modèles de section pour différentes catégories de contenu.

Par exemple, vous pouvez créer un modèle d’appel à l’action (CTA). Ensuite, chaque fois que vous avez besoin d’un CTA, vous pouvez simplement importer ce modèle et modifier son message.

Pour créer un modèle, contrôlez-cliquez sur la section en question. Ensuite, sélectionnez Enregistrer comme modèle:

Dans la fenêtre qui s’affiche, donnez un nom descriptif à ce modèle. Ensuite, cliquez sur Enregistrer:

Pour appliquer ce modèle à n’importe quelle section, il suffit de lancer la bibliothèque de modèles Elementor. Vous trouverez le modèle en attente dans votre onglet Mes modèles.

Comment créer un modèle Elementor

Bien que vous puissiez enregistrer n’importe quelle page ou section en cours de création en tant que modèle Elementor, il arrive que vous souhaitiez explicitement en créer un pour le réutiliser. Dans ce cas, vous pouvez commencer votre conception comme une page web Elementor ordinaire, puis l’enregistrer comme modèle.

Cependant, vous pouvez également informer Elementor que vous créez un modèle à l’avance. Cette approche vous donne plus de flexibilité pour créer des modèles pour différentes zones de votre site web.

Par exemple, vous pouvez concevoir un modèle pour votre page d’erreur 404, votre page de résultats de recherche, ou même créer une mise en page de popup. Cette méthode vous permet également d’utiliser n’importe quel modèle de votre bibliothèque comme base pour un nouveau design.

Pour créer un modèle de page ou de section, accédez à Modèles > Modèles enregistrés. Ensuite, cliquez sur Ajouter. Dans la fenêtre suivante, ouvrez la liste déroulante Sélectionner le type de modèle… :

Vous pouvez maintenant spécifier le type de modèle que vous souhaitez créer. Nous avons déjà abordé les modèles de page et de section, mais cette fenêtre vous offre des options supplémentaires.

Après avoir sélectionné, donnez à votre modèle un nom descriptif, puis cliquez sur Créer un modèle. Cela lance la bibliothèque Elementor, où vous pouvez utiliser un modèle préexistant comme base. Vous pouvez également quitter cette fenêtre et repartir de zéro.

Vous pouvez maintenant construire votre modèle en utilisant l’éditeur standard d’Elementor. Lorsque vous êtes prêt à enregistrer votre conception, cliquez sur Publier. Cela lancera la boîte des Réglages de publication :

Ici, vous pouvez définir certaines règles d’utilisation de ce modèle. Par exemple, vous pouvez cliquer sur Ajouter une condition et préciser que ce modèle ne convient qu’aux pages uniques.

Comment exporter les modèles Elementor

Vous pouvez exporter les modèles Elementor depuis le tableau de bord WordPress. Cette méthode peut vous aider à partager des conceptions avec vos collègues ou à les envoyer à des clients pour leur approbation. Vous pouvez même utiliser la fonction d’exportation pour créer des sauvegardes de vos designs Elementor.

L’exportation de modèles est un moyen facile d’utiliser vos designs sur plusieurs domaines. Cette approche est pratique pour les agences de conception et de développement WordPress qui gèrent de nombreux sites web. Si vous voulez monétiser vos designs, les exporter est souvent la première étape pour les partager avec le monde entier.

Naviguez vers Modèles > Modèles enregistrés dans le tableau de bord WordPress pour exporter un design. Cet onglet affiche tous les modèles enregistrés dans votre bibliothèque :

WordPress divise également ces modèles en onglets Page et Section. Il suffit de trouver le modèle que vous voulez exporter, et de le survoler :

Lorsque le lien Exporter le modèle apparaît, cliquez dessus. Elementor va maintenant télécharger ce modèle sous forme de fichier JSON.

Vous pouvez également exporter vos modèles à partir de la bibliothèque Elementor. Dans cette bibliothèque, ouvrez l’onglet Mes modèles. Trouvez le modèle que vous souhaitez exporter, puis cliquez sur l’icône à trois points qui l’accompagne :

Ensuite, cliquez sur Exporter. Elementor va maintenant télécharger ce modèle sous forme de fichier JSON.

Comment importer des modèles Elementor

Parfois, vous pouvez vouloir importer un modèle dans Elementor. Il peut s’agir d’un design exporté d’un autre site web ou acheté auprès d’un tiers.

Si vous avez un modèle au format JSON ou ZIP, vous pouvez le téléverser dans la bibliothèque Elementor. Pour commencer, naviguez dans Modèles > Modèles enregistrés. En haut de cet écran, cliquez sur Importer des modèles:

Ensuite, sélectionnez votre modèle d’importation Elementor et cliquez sur Importer maintenant. Ce modèle apparaîtra maintenant dans votre bibliothèque.

Pour appliquer ce modèle à la mise en page de votre site web, il suffit d’ouvrir la page ou le post en question avec l’éditeur Elementor. Ensuite, cliquez sur l’icône Ajouter un modèle, qui est représentée par un dossier blanc :

Dans la fenêtre suivante, sélectionnez l’onglet Mes modèles. Ici, vous trouverez tous vos modèles importés par Elementor :

Pour voir à quoi ressemblera ce modèle lorsqu’il sera appliqué à la page actuelle, cliquez sur Prévisualiser. Si vous êtes prêt à utiliser ce modèle, sélectionnez le lien Inserer qui l’accompagne.

Comment exporter et importer une page Elementor individuelle

Vous pouvez souhaiter réutiliser la même page sur plusieurs sites. Par exemple, si vous exploitez plusieurs sites web WordPress, vous pouvez utiliser une page standard À propos de nous.

Plutôt que de recréer cette page manuellement, vous pouvez l’enregistrer en tant que modèle Elementor et l’exporter. Vous pouvez ensuite importer le modèle dans n’importe quel site web sur lequel Elementor est installé.

Pour enregistrer une page individuelle en tant que modèle, cliquez sur l’icône en forme de flèche à côté du bouton Publier/Mettre à jour d’Elementor. Vous pouvez ensuite sélectionner Enregistrer comme modèle:

Dans la fenêtre popup suivante, donnez un nom à ce modèle. Puis, cliquez sur Enregistrer.

La bibliothèque de modèles de WordPress devrait s’ouvrir automatiquement. Vous pouvez localiser le modèle que vous venez de créer et cliquer sur son icône à trois points. Lorsque vous y êtes invité, sélectionnez Exporter:

Vous pouvez également exporter ce modèle à page unique en allant vers Modèles > Modèles sauvegardés dans votre tableau de bord WordPress. Ensuite, passez la souris sur le modèle en question et cliquez sur Exporter.

Une fois que le modèle de page unique est stocké en toute sécurité sur votre ordinateur local, vous pouvez l’importer sur un autre site web. Il suffit de passer à votre nouveau site, et de naviguer dans Modèles > Modèles enregistrés.

En haut de cet écran, cliquez sur Importer des modèles. Vous pouvez maintenant importer votre design de page unique.

Comment exporter et importer l’intégralité de votre site Elementor (en 3 étapes)

Bien qu’Elementor facilite l’importation et l’exportation de modèles à page unique, vous pouvez également avoir besoin d’exporter un site web entier.

Par exemple, vous pouvez créer un kit de modèles contenant toutes les pages standard de votre site web, comme une page de contact et une page d’accueil. Vous pouvez ensuite utiliser ce kit pour former vos sites web de base.

Voyons comment vous pouvez créer ce kit. Voici comment exporter l’intégralité de votre site web Elementor en trois étapes faciles !

Étape 1 : Activer le kit d’exportation Elementor

La fonction Kit d’exportation d’Elementor peut exporter votre site complet, y compris son contenu et ses réglages.

Cette fonction peut être utile si vous créez des sites web similaires et que vous souhaitez conserver la même image de marque. Par exemple, vous pourriez créer un micro-site pour promouvoir le lancement d’un produit à venir.

Au moment de la rédaction de cet article, le kit d’exportation d’Elementor est une fonction expérimentale. Vous devrez l’activer en naviguant dans Elementor > Réglages. Vous pouvez ensuite cliquer sur l’onglet Expériences:

Faites défiler jusqu’à la section Kit de modèles d’importation et d’exportation. Vous pouvez ensuite ouvrir la liste déroulante correspondante et sélectionner Activer :

N’oubliez pas de faire défiler jusqu’au bas de cette page et de cliquer sur Enregistrer les modifications. Cette fonctionnalité expérimentale est maintenant prête à être utilisée.

Étape 2 : Exporter l’ensemble de votre site Elementor

Dans votre tableau de bord WordPress, naviguez vers Elementor > Outils. Cliquez maintenant sur le kit d’importation/exportation:

Cliquez sur Commencer l’exportation. Lorsque vous y êtes invité, spécifiez le contenu et les données que vous souhaitez inclure dans votre téléchargement.

Par exemple, vous pouvez choisir d’exporter uniquement vos modèles. Vous pouvez également exporter tout votre contenu, y compris les pages, les articles et les types de publication personnalisés :

Ensuite, cliquez pour développer la section Informations sur le kit et donnez à votre fichier un nom descriptif. Vous pouvez également saisir une description facultative :

Lorsque vous êtes satisfait de votre sélection, cliquez sur Exporter. Elementor va maintenant créer votre kit et afficher un résumé de tout ce qui est inclus dans ce fichier :

Elementor téléchargera automatiquement le kit généré sur votre ordinateur. Lorsque vous y êtes invité, cliquez sur Retour au tableau de bord.

Étape 3 : Importez votre site

Vous pouvez maintenant importer votre kit de modèles dans tout site web sur lequel Elementor est installé. Il remplacera votre contenu existant, nous vous recommandons donc de créer une sauvegarde complète avant de procéder.

Une fois que votre sauvegarde est en place, vous devez activer les expériences Elementor sur le site web de destination. Comme précédemment, naviguez dans Elementor > Réglages > Expériences. Vous pouvez ensuite sélectionner la section Kit de modèles d’importation et d’exportation et activer cette fonctionnalité.

Ensuite, allez dans Modèles > Bibliothèque de kits. Cliquez sur Démarrer l’importation. Sur l’écran suivant, sélectionnez le fichier que vous avez téléchargé à l’étape précédente :

Si vous appliquez votre kit à une installation préexistante, Elementor affichera tous les modèles ayant les mêmes conditions que celui que vous importez. Vous pouvez alors choisir les modèles à remplacer et ceux à conserver.

Une fois que vous avez fait votre choix, cliquez sur Suivant. Elementor va maintenant importer votre kit de site.

Comment corriger l’erreur « Fichier non valide » d’Elementor

Parfois, vous pouvez voir une erreur « Fichier non valide » lorsque vous tentez d’importer un modèle. Cela signifie généralement que vous essayez d’importer un modèle créé à l’aide d’une version antérieure d’Elementor.

Pour résoudre cette erreur, vous devrez passer temporairement à une version antérieure d’Elementor. Ce changement peut entraîner des problèmes sur votre site.

Dans cette optique, nous vous recommandons de créer une sauvegarde complète avant de poursuivre. Vous pouvez également envisager de mettre votre site en mode maintenance.

Lorsque vous êtes prêt à procéder, rendez-vous sur la liste des extensions Elementor. Ensuite, sélectionnez Vue avancée :

Au bas de la page, utilisez le menu déroulant pour choisir une version antérieure d’Elementor. Pour obtenir les meilleurs résultats, nous vous recommandons de télécharger la dernière version d’Elementor 1, qui est la 1.9.8 :

Une fois que vous avez ce fichier, vous avez quelques options. Vous pouvez désactiver et supprimer votre version actuelle d’Elementor. Vous pouvez ensuite téléverser et activer le logiciel que vous venez de télécharger.

Sinon, vous pouvez utiliser Easy Theme and Plugin Upgrades. Après avoir activé cette extension, vous pouvez téléverser une ancienne version d’Elementor sans désactiver et supprimer la version la plus récente.

Après avoir téléversé l’ancienne version d’Elementor, naviguez dans Extensions > Extensions installées Plugins. WordPress devrait avoir basculé automatiquement vers la version antérieure du logiciel :

Vous devriez maintenant être en mesure d’importer votre modèle sans aucun problème. Dès que l’importation est terminée, naviguez à nouveau dans Extensions > Extensions installées, et restaurez la version la plus récente d’Elementor. Ce modèle devrait maintenant se trouver dans votre bibliothèque, prêt à être utilisé.

Les 3 meilleurs modules Elementor pour importer et exporter des modèles

Comme nous venons de le voir, Elementor dispose d’un système d’importation et d’exportation robuste. Vous pouvez utiliser cette fonctionnalité pour créer des modèles pour des sections individuelles, des pages et même des sites web entiers.

Cependant, vous voudrez peut-être étendre cette fonctionnalité intégrée. Dans cette optique, voici trois modules d’importation de modèles Elementor qui promettent de surcharger le processus d’importation et d’exportation !

1. Happy Addons Pro

Happy Addons Pro étend l’expérience standard d’Elementor en ajoutant plus de 20 nouvelles fonctionnalités. Il s’agit notamment de plusieurs fonctionnalités qui peuvent s’intégrer dans votre flux de travail d’importation et d’exportation :

Si vous travaillez avec plusieurs sites, vous voudrez peut-être utiliser la fonction de copier-coller inter-domaines de Happy Addons Pro. Elle vous permet de copier facilement le contenu d’un site et de le coller dans un domaine entièrement différent.

Si vous souhaitez réutiliser le contenu de la démo de Happy Addons Pro, vous pouvez le copier dans votre panneau d’édition Elementor. En outre, ce module dispose d’une fonction d’importation sur mesure. Elle offre toutes les fonctionnalités que vous attendez du système d’importation et d’exportation intégré d’Elementor.

En particulier, vous pouvez rechercher les modèles Happy Addon sur la base des noms des sections ou filtrer par catégorie de section de page.

Caractéristiques :

• Choisissez parmi plus de 70 modèles de pages de destination.
• Dupliquez n’importe quelle page ou article avec la fonction Happy Clone.
• Copiez facilement les modèles de section à partir du contenu de démonstration de HappyAddons Pro.
• Copiez une section de n’importe quel site web, et collez-la dans un domaine différent.

Prix : Les licences annuelles commencent à 33 $.

2. Mighty Addons for Elementor

Mighty Addons for Elementor est livré avec une sélection de kits de modèles pré-conçus. Lorsque vous importez ces kits dans votre site web, vous accédez à toutes les pages dont vous avez besoin pour concevoir un large éventail de sites.

Mighty Addons for Elementor propose des kits de modèles pour de nombreux secteurs différents. Il s’agit notamment des entreprises de protection des animaux, de fitness, d’hôtellerie, de conseil et même de parachutisme :

Ce module dispose également d’une fonction de copier-coller inter-domaines. Cela peut être un complément puissant au flux de travail traditionnel d’importation/exportation d’Elementor si vous gérez plusieurs sites web. En particulier, cette fonction vous permet d’utiliser n’importe quelle section, ligne, colonne, ou même le contenu d’une page entière sur plusieurs sites web propulsés par Elementor.

Caractéristiques :

• Copiez facilement des images et des vidéos entre les domaines.
• Utilisez un large éventail de modèles de section prêts à l’emploi.
• Intégrez l’outil au service de photographie de stock Pixabay.

Prix : Vous pouvez télécharger l’extension de base Mighty Addons for Elementor. Une version pro est également disponible, avec des licences à partir de 29 $.

3. Envato Elements

L’extension Envato Elements vous permet de parcourir des milliers de pages et de modèles de blocs sans quitter WordPress. Une fois que vous avez trouvé le modèle parfait, vous pouvez l’importer facilement dans votre site web :

Pour vous aider à concevoir rapidement un site d’aspect professionnel, Envato Elements propose également une large gamme de kits de modèles. En outre, cette extension offre un accès facile à plus d’un million d’images libres de droits si vous utilisez des photos de stock.

Caractéristiques :

• Modèles polyvalents
• Contenu flexible et entièrement personnalisable
• Importation en un clic
• Intégration transparente avec l’interface utilisateur Elementor

Prix : Vous pouvez télécharger l’extension Envato Elements gratuitement. Cependant, vous aurez besoin d’un abonnement Envato Elements pour accéder et utiliser le contenu du modèle. Le prix de cet abonnement est de 16,50 $ par mois.

Résumé

Nous n’allons pas prétendre que la conception d’un site web époustouflant est simple. Heureusement, grâce aux capacités d’exportation et d’importation de modèles d’Elementor, vous n’aurez pas à commencer chaque projet en faisant table rase du passé.

Vous pouvez accélérer les premières étapes du développement web en profitant des modèles prêts à l’emploi. Vous pouvez également créer des modèles de section et de page, prêts à être réutilisés dans de futurs projets. Si vous êtes particulièrement fier d’un site web, Elementor peut même exporter l’intégralité de votre site. Les possibilités sont infinies !

Lorsque vous créez un site web WordPress, vous avez besoin d’un hébergeur puissant avec vous. Chez Kinsta, nous proposons une gamme de plans d’hébergement optimisés en termes de performances pour tous vos besoins en matière d’Elementor.