L’avantage de travailler avec Divi, c’est que vous pouvez facilement importer ou exporter des mises en page que vous avez créées ou téléchargées sur Internet d’un site à un autre en quelques clics. Je vais vous expliquer ici comment faire ça facilement.
En effet, pourquoi perdre du temps à repartir de zéro quand vous avez déjà des bases solides que vous pouvez réutiliser rapidement.
Il existe différents sites proposant des layouts gratuits ou payants un peu partout sur le net. En revanche, ne les confondez pas avec des thèmes enfants prêts à l’emploi.
Les thèmes enfants sont des sites “déjà tout faits”, alors que les layouts sont des “morceaux de sites”. Cela peut être une ou plusieurs mises en page, un module personnalisé…
Lorsque vous achetez ou téléchargez un layout Divi, ne vous attendez donc pas à avoir forcément un site complet ou installé directement.
SOMMAIRE
- Exporter un layout Divi
- Importer un layout Divi
- Enregistrer une section, une rangée ou un module Divi
- Réutiliser un modèle enregistré sur le même site
- Importer ou exporter une modèle de section, rangée ou module depuis la bibliothèque
Commençons par voir comment…
Exporter un layout Divi
Lorsque vous souhaitez exporter un modèle de page ou de module que vous avez fait avec le Divi Builder ou le Visual Builder, il est possible de l’enregistrer dans la bibliothèque Divi. C’est l’endroit où ils sont tous stockés et sauvegardés.
On va voir ici comment enregistrer un layout depuis l’administration avec le Divi builder ou depuis le front-end du site en utilisant le Visual Builder. Les deux techniques sont quasiment identiques.
Exporter un layout depuis le Divi Builder
Vous pouvez enregistrer le layout dans votre bibliothèque en cliquant sur Sauvegarder dans la bibliothèque ou l’exporter directement en cliquant sur le logo avec les deux flèches. Si c’est pour utiliser sur le même site, pas besoin de l’exporter, enregistrez-le simplement.
On peut d’ici exporter ou importer un layout. On reviendra un peu plus tard sur l’importation.
Une fois cliqué sur ce bouton, une fenêtre s’ouvre :
Vous pouvez donner un nom à votre layout, puis cliquez sur Exporter mise en page de constructeur Divi (oui la traduction n’est pas terrible et on y reviendra dans un futur article).
Un fichier au format .JSON se télécharge automatiquement. Félicitations, vous venez d’exporter votre premier layout Divi !
Exporter un layout depuis le Visual Builder
Cliquez sur le bouton violet en bas de page, et vous allez retrouver le même icône Portabilité avec les deux flèches :
Cliquez sur ce bouton et la même fenêtre s’affiche. À nouveau choisissez un nom pour votre mise en page et cliquez sur Exporter la mise en page Divi Builder:
Votre layout se télécharge au format .JSON et est prêt à être importé sur un autre site utilisant Divi.
Maintenant que vous savez exporter un layout Divi, nous allons voir comment les importer sur vos sites et les utiliser.
Importer un layout Divi
Pour importer un layout Divi, c’est un peu le même principe.
Importer un layout depuis le Divi Builder
Cliquez à nouveau sur l’icône Portabilité (celui avec les deux flèches).
À nouveau une fenêtre s’ouvre, mais cette fois vous allez cliquer sur l’onglet Importer en haut à droite:
Attention : l’importation va écraser tout le contenu de la page si vous en aviez un.
Sélectionnez le fichier à importer au format .JSON et votre mise en page va se charger.
Importer un layout depuis le Visual Builder
Cliquez sur l’onglet Portabilité:
Puis Importer dans la fenêtre qui s’ouvre :
Sélectionnez votre fichier au format .JSON.
Notez qu’ici vous avez le choix entre écraser le contenu de votre page ou le mettre à la suite.
Cliquez sur Importer la mise en page Divi Builder et le tour est joué.
Vous savez maintenant enregistrer, importer et exporter des layouts Divi d’un site à un autre.
Voyons maintenant comment faire la même chose avec les rangées ou modules Divi.
Enregistrer une section, une rangée ou un module Divi
Le principe étant le même pour les sections, rangées et modules, je ne vous montrerai l’exemple que pour les sections.
Enregistrer le modèle depuis le Divi Builder
Cliquez sur l’icône Paramètres de votre rangée (celui avec les 3 barres) :
La fenêtre des paramètres de votre rangée s’ouvre, cliquez sur Sauvegarder et ajouter dans la bibliothèque.
Une nouvelle fenêtre s’ouvre :
Vous pouvez maintenant :
- Définir un nom pour votre modèle : pour le trouver plus facilement dans la bibliothèque
- Sauvegarder en tant que global : cette option est très pratique car si vous la cochez et que vous réutilisez cette rangée sur plusieurs pages de votre site, toute modification apportée à celle-ci sera répercutée partout. Vous n’avez donc pas besoin de modifier chaque page une par une.
- Créer ou sélectionner une catégorie : pour mettre un peu d’ordre dans vos nombreux modèles enregistrés
Cliquez sur Sauvegarder et ajouter dans la bibliothèque et c’est terminé.
Enregistrer le modèle depuis le Visual Builder
La procédure est à peu près la même.
Cliquez sur l’icône Enregistrer la section dans la bibliothèque :
Les mêmes options que depuis le Divi Builder apparaissent, donc je ne reviens pas dessus :
Nommez votre modèle, choisissez si vous voulez en faire un élément global et enregistrez-le. Il est maintenant présent dans votre bibliothèque Divi.
Voyons maintenant comment…
Réutiliser un modèle enregistré sur le même site
Réutiliser un modèle enregistré dans la bibliothèque depuis le Divi Builder
Cliquez sur le bouton Ajouter de la bibliothèque:
Une fenêtre s’ouvre avec tout vos modèles de rangées enregistrés. Sélectionnez celui que vous souhaitez charger et c’est tout :
Notez au passage que lorsque vous enregistrez vos modèles en cliquant sur En faire un élément global, ils apparaissent en vert dans la liste et dans les builders.
Réutiliser un modèle enregistré dans la bibliothèque depuis le Visual Builder
Cliquez sur le + pour ajouter une nouvelle section, puis sur Ajouter de la bibliothèque.
Sélectionnez ensuite la section à charger.
Importer ou exporter une modèle de section, rangée ou module depuis la bibliothèque
Lorsque vous téléchargez un modèle de section, rangée ou module sur un site Internet et que vous voulez l’utiliser sur votre site, elle n’apparait pas automatiquement depuis le Divi Builder ou le Visual Builder.
Il va falloir dans un premier temps l’importer dans la Bibliothèque Divi.
Rendez-vous dans l’administration, dans l’onglet Divi-> Bibliothèque Divi
Vous arrivez maintenant à la liste de tous vos modèles enregistrés :
Plusieurs informations sur cette page :
- La liste de tous vos modèles enregistrés
- le type de modèle : section, module ou layout
- Si c’est un élément global ou non
Cliquez sur le bouton Importer & Exporter en haut de l’écran.
Une fenêtre s’ouvre. C’est la même que dans les exemples précédents :
Pour l’import :
Comme précédemment, sélectionnez votre fichier .JSON à importer, cliquez sur Importer Mises en page de constructeur Divi et votre nouveau modèle sera maintenant utilisable depuis le Divi Builder et le Visual Builder.
Pour l’export :
Donnez un nom à votre modèle, cliquez sur Exporter Mises en page de constructeur Divi et le téléchargement de votre fichier .JSON à utiliser sur n’importe quel site va commencer.
Vous savez maintenant importer ou exporter n’importe quel type d’élément de Divi à utiliser sur tous vos sites WordPress.
Bonjour, avez vous déjà eu un problème de portabilité, mauvais contexte_ET et impossible pour moi de l’importer dans un autre site.
Merci d’avance pour votre réponse
Bonjour, non aucun problème. As-tu bien suivi les étapes?
Bonjour, en voulant importer un layout, j’ai ce mot : ce fichier ne peut être importé dans ce contexte… J’ai bien suivi toutes les étapes pourtant ?
bonjour, j’ai une question;
qu’est-ce qui fait que parfois quand on exporte les layouts, il donne une taille de 0 Ko et il ne peut pas être utilisé?????
Bonjour, difficile à dire comme ça. J’imagine que tu as essayé plusieurs fois de l’exporter? As-tu essayé de réenregistrer ton modèle?
Bonjour, tu peux nous décrire ce que tu as essayé d’importer et ou s’il te plait?
Hello ! J’ai un bug sur mon site. Je peux enregistrer des mofdules dans la bibliothèque, je les vois bien dans la bibliothèque, mais quand je suis sur une page, je ne peux pas les importer, la bibliothèque apparait vide et les modules n’apparaissent pas. Une idée ?