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

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.

enregistrer exporter layout

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 :

exporter layout divi

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 :

exporter layout divi visual builder

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:

exporter divi layout visual 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:

importer layout divi builder

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é:

exporter layout divi visual builder

Puis Importer dans la fenêtre qui s’ouvre :

importer layout divi visual builder

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) :

enregistrer rangee divi builder

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 :

ajouter element bibliotheque divi

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 :

enregistrer modele divi visual builder

Les mêmes options que depuis le Divi Builder apparaissent, donc je ne reviens pas dessus :

modele enregistre bibliotheque divi visual builder

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:

ajouter de la bibliothèque Divi

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 :

selectionner modele bibliotheque divi

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.

charger modele divi visual builder

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

bibliotheque divi

Vous arrivez maintenant à la liste de tous vos modèles enregistrés :

bibliotheque modele divi

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 :

bibliotheque importer modele Divi

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 :

bibliothèque exporter modèle Divi

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.

D'autres tutoriels pouvant vous intéresser: