Importer-exporter un layout Divi ? Rien de plus simple avec la fonctionnalité import/export mise à disposition par le thème Divi et le Divi Builder. C’est certainement celle que je préfère !

La possibilité d’importer ou d’exporter un layout – une mise en page – va vous faire gagner un temps fou. Et si vous ne l’utilisez pas encore, vous devriez lire attentivement cet article car cette fonction va changer votre façon d’utiliser Divi ! Voici le programme :

  1. Pourquoi importer/exporter un layout Divi ?
  2. Comment importer un « premade layout » disponible dans le Divi Builder ?
  3. Comment importer un « premade layout » via le Visual Builder ?
  4. Comment exporter un layout Divi ?
  5. Comment importer un layout exterieur à son site ?
  6. Comment sauvegarder un layout Divi dans la bibliothèque ?
  7. Que faire si vous obtenez le message « ce fichier ne devrait pas être importé dans ce contexte » ?
  8. Conclusion…

import-export layout Divi

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

 

1 – Pourquoi importer-exporter un layout Divi ?

Si vous créez régulièrement des sites web, vous pourriez être à la recherche d’un thème qui permet de vous faire gagner beaucoup de temps. C’est le cas de Divi qui propose la fonctionnalité d’import/export, tout comme WordPress, d’ailleurs…

L’idée est de pouvoir créer une mise en page et de la réutiliser ultérieurement, que ce soit dans le même site ou dans un autre. On parle bien d’une mise en page (une disposition – un canevas), pas d’un design, cela signifie que vous pourrez importer et exporter la succession de modules Divi présents dans votre page pour, ensuite, changer les images et les textes.

Je crois que le plus gros des avantages d’importer-exporter un layout Divi réside dans sa simplicité d’utilisation mais surtout dans l’idée que tout utilisateur, même sans aucune connaissance en WebDesign, obtiendra rapidement un site « magnifique » et cohérent.

 

Envie de passer à la vitesse supérieure ? Obtenez le thème Divi maintenant !

 

2 – Comment importer un « premade layout » disponible dans le Divi Builder ?

Nous avions déjà parlé de ces « premade layout » que vous trouvez dans le Divi Builder lors d’un dernier article… Pour résumer, il s’agit de mises en page conçues par les développeurs/designers de ElegantThemes et qui sont à votre disposition – complètement gratuitement – via le Divi Builder. Pour l’instant, il existe 576 layouts à télécharger et la gamme grandit chaque mois !!!

Note importante : pour pouvoir utiliser ces layouts, vous devez utiliser un thème Divi « non craqué » (lire cet article pour connaitre combien coûte le thème Divi) et vous ne devez pas oublier de saisir votre clé de licence (clé API) à l’onglet Update.

Voyons à présent comment s’en servir…

importer un layout Divi - 1 importer-exporter un layout Divi

  1. Lorsque vous êtes dans une page, activez le Divi Builder puis cliquez sur « Télécharger le modèle »
  2. Choisissez l’onglet « Premade Layout »
  3. Visualisez les divers packs de layouts et sélectionnez celui qui convient à votre projet
  4. Chaque pack est composé de plusieurs layouts. Généralement, vous pourrez importer un layout différent par page (un pour la home, un pour le blog, un pour la page contact etc…). Sélectionnez le layout à importer dans votre page
  5. Vous pouvez le visualiser dans son intégralité sur la partie gauche de la fenêtre
  6. S’il vous convient, vous n’aurez plus qu’à cliquer sur « Use this layout »

Patientez quelques instants, enregistrez votre brouillon (ou publiez votre page) puis vérifier le résultat. Enfin, vous n’aurez plus qu’à éditer chaque module pour changer vos textes, images, typos, couleurs etc…

Voici la procédure en vidéo :

 

3 – Comment importer un « premade layout » via le Visual Builder ?

Les utilisateurs de Divi sont souvent partagés, certains préfèrent utiliser le Divi Builder (en back-end) et d’autres préfèrent utiliser le Visual Builder (en front-end). Voici donc deux autres vidéos pour vous montrer comment importer une mise en page pré-faite, mais cette fois-ci, via le visual builder de Divi :

Dans cette première version, vous activez le visual builder et vous choisissez l’option « choose a premade layout » (celle du milieu). Dans ce cas c’est facile, l’écran des layouts apparait et vous n’avez plus qu’à faire votre choix.

 

Par contre, si pour une raison ou pour une autre, vous n’avez pas choisi l’option d’importer un layout dès le début, vous pourrez quand même le faire grâce aux icônes situés en bas de l’écran comme vous avez pu le voir dans la vidéo ci-dessus. En cliquant sur l’icône « + », vous accèderez à la fenêtre d’import de layouts.

 

4 – Comment exporter un layout Divi ?

Dans certains cas, vous pourriez avoir besoin d’exporter un layout que vous auriez conçu, que ce soit pour le conserver ou pour l’utiliser dans un autre site… Avec le Divi Builder, c’est aussi possible et c’est aussi simple que d’importer. Voici comment faire :

exporter un layout Divi

  1. Rendez-vous dans la page dont le layout doit être exporté. Dans le haut du générateur Divi, vous cliquerez sur l’icône discret avec une double flèche,
  2. Une popup s’ouvre. Saisissez le nom de votre layout à exporter. Par exemple « page contact »,
  3. Cliquez sur « Exporter Mise en page de constructeur Divi »,
  4. Patientez pendant l’export,
  5. Enregistrez ce layout sur votre ordinateur. Pour info, les layouts exportés sont au format .JSON

Voici la version vidéo :

 

5 – Comment importer un layout externe à son site ?

Si vous avez exporté une mise en page – comme indiqué dans le paragraphe précédent (4) – et que vous souhaitez l’importer dans un autre site fait avec Divi, l’opération sera très simple…

Il y a également un autre cas où vous pourriez importer un layout externe à votre site : si vous avez téléchargé des layouts gratuits proposés par des sites spécialisés.

Ma rubrique Ressources pour Divi est justement faite pour vous donner des bons plans à ce sujet, n’hésitez pas à la consulter de temps en temps pour voir si je n’ai pas rajouté des liens vers ressources gratuites pour Divi à télécharger…

importer un layout externe à son site Divi

  1. Rendez-vous dans la page où vous souhaitez importer le layout. Dans le haut du générateur Divi, vous cliquerez sur l’icône discret avec une double flèche,
  2. Une popup s’ouvre. Sélectionnez l’onglet « Importer »,
  3. Cliquez sur « choisissez un fichier »,
  4. Une fenêtre s’ouvre pour choisir le layout à importer. Celui-ci doit être présent dans votre ordinateur et doit être importé dans un format .JSON (non zippé, c’est à dire décompressé).
  5. Notez : une option vous permet de faire la sauvegarde de la mise en page actuelle car l’import d’un layout remplace votre contenu actuel par celui importé.
  6. Cliquez sur « Importer Mise en page de construction Divi » pour lancer l’import
  7. Patientez jusqu’à la fin de l’import.

Voilà, à ce stade, votre page a chargé les divers modules qui composent le layout importé. Vous n’avez plus qu’à modifier vos textes, images, couleurs etc…

Voici la procédure d’import en version vidéo :

 

6 – Comment sauvegarder un layout Divi dans la bibliothèque ?

Tous les layouts que vous sauvegardez ou que vous importez vont se stocker dans la bibliothèque de Divi (disponible à l’onglet Divi > Bibliothèque Divi).

Le fait de sauvegarder un layout peut avoir un avantage certain : vous pouvez sauvegarder une mise en page avant de faire de nombreuses modifications sur l’une de vos pages. Ainsi, vous pourrez rapidement revenir à une mise en page précédente en un simple clic.

Pour sauvegarder un layout dans votre bibliothèque, voici comment faire :

sauvegarder un layout dans la bibliothèque Divi

  1. Rendez-vous dans la page qui contient le layout à sauvegarder puis cliquez sur « sauvegarder dans la bibliothèque »
  2. Nommez votre layout
  3. Cliquez sur « Sauvegarder »
  4. Dans l’onglet Divi > Bibliothèque Divi
  5. Vous retrouverez toutes vos mises en page sauvegardées

Voici la procédure de sauvegarde en version vidéo :

 

7 – Que faire si vous obtenez le message « ce fichier ne devrait pas être importer dans ce contexte » ?

Lorsque vous souhaitez importer un layout externe à votre site Divi, il est possible que vous rencontriez un message d’erreur « ce fichier ne devrait pas être importé dans ce contexte ».

Si c’est votre cas, pas de panique, il y a une autre solution : importer le layout depuis la bibliothèque plutôt que depuis le constructeur Divi de la page en question… Voici alors ce que vous devrez faire :

  1. Rendez-vous à l’onglet Divi > Bibliothèque Divi
  2. En haut, sélectionnez « Importer & Exporter »
  3. Dans la popup qui s’ouvre, choisissez l’onglet « Importer »
  4. Choisissez votre mise en page qui est disponible dans votre ordinateur (au format .JSON)
  5. Valider en cliquant sur « Importer Mises en page de constructteur Divi »
  6. Ensuite, vous pourrez retourner dans la page où vous souhaitez importer le layout
  7. Cliquez sur télécharger le modèle > your saved layouts

 

8- Conclusion…

Si vous ne connaissiez pas cette fonctionnalité, ou du moins, si vous n’aviez pas encore pris le temps de l’exploiter, je suppose que que vous avez compris sa valeur ajoutée… Le fait d’importer-exporter un layout Divi va vous faire gagner beaucoup de temps !

Il y a encore beaucoup de chose à dire à ce sujet et notamment sur le fait que nous pouvons effectuer le même genre d’import/export avec des modules de Divi (bientôt un prochain article), imaginez alors la puissance de ces utilisations !

Découvrez tout ce que vous pouvez faire avec le thème Divi

import-export layout Divi

 

Comment importer-exporter un layout Divi ?
4 pour 4 votes

D'autres Tips pour Divi :

Pin It on Pinterest

Shares
Share This