Dans ce nouveau tutoriel, découvrez comment importer/exporter des templates de thème créées avec le nouveau Divi Theme Builder.

Ces actions sont très similaires à la fonctionnalité d’import/export d’un layout Divi mis à part quelques nouvelles options qui ont fait leur apparition.

Nous allons voir tout cela en détail.

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 – Qu’est-ce qu’une template de thème ?

Il ne faut pas confondre une template de thème avec un layout.

Les layouts (mises en page) permettent de créer le design au sein d’une page web. Les layouts sont le résultat de la construction de la page à l’aide d’un page builder, et dans notre cas, à l’aide du Visual Builder de Divi.

Les templates de thème, quant à elles, ont été introduites depuis la version 4.0 de Divi. Elles permettent de créer le design du site et de construire des modèles de page.

Chaque modèle de page a une fonctionnalité bien particulière qui a été définie dans la hiérarchie des fichiers modèles de WordPress.

Hiérarchie des fichiers modèle de WordPress
Hiérarchie des fichiers modèle de WordPress

Ces fichiers modèles (modèles de page) ne peuvent pas être modifiés à l’aide d’un page builder : c’est pourquoi la version 4.0 de Divi était tant attendue !

À présent, on crée directement des templates de thème à l’aide du Theme Builder de Divi, ce qui évite de coder à la main ces modèles de page (comme la page 404, la page des catégories, le header, le footer etc.).

Cela signifie que nous n’avons vraiment plus besoin de maîtriser le PHP pour créer des « thèmes » WordPress géniaux !

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

2 – Importer une template de thème : 3 possibilités

Pour importer (ou exporter) des templates de thème, il suffit de vous rendre à l’onglet Divi > Theme Builder.

Vous pourrez importer des templates simples ou des lots de templates (des packs contenant plusieurs templates).

Pour ce tutoriel, j’ai utilisé un pack de templates prêt-à-l’emploi que j’ai téléchargé sur le site d’Elegant Themes. Je vous donnerais tous les liens en fin d’article.

L’avantage d’importer/exporter des templates de thème est que vous pouvez facilement migrer un design de site en site. Vous gagnerez beaucoup de temps et pourrez même utiliser cette fonctionnalité lors de refonte de site.

L’importation d’un pack de template (ou d’une template simple) peut se réaliser selon 3 options :

  1. Importer une template sans impacter le design actuel
  2. Importer une template sans impacter le design global
  3. Importer une template de thème globale
types d'import de template Divi
Résultats des différents types d’import de template de thème

Voyons tout cela en détail…

Option 1 : importer une template de thème sans impacter le design actuel

Cette manière d’importer des templates de thème est idéale si vous avez déjà construit le design de votre site et que vous ne souhaitez pas en modifier l’essentiel (header, footer etc.).

Onglet Theme Builder > Portabilité
Onglet Theme Builder > Portabilité (icône des flèches)

Rendez-vous à l’onglet Divi > Theme Builder et cliquez sur l’icône de la double flèche.

Importer sans options
Importer sans option : décocher toutes les cases

Une popup apparait :

  1. Cliquez sur l’onglet Importer
  2. Choisissez le fichier à importer : vous devez être en possession de celui-ci dans votre ordinateur. Il s’agit de fichiers .json. Pour cet exemple, j’ai choisi la version « pack » (all).
  3. Décochez toutes les cases d’option
  4. Cliquez sur « Import Divi Theme Builder Template ».
choix alternatif d'import
Popup supplémentaire vous invitant à choisir entre 2 options. Ici, je choisis « relink »

Une nouvelle fenêtre s’ouvre et vous propose alors 2 options :

« Cette importation contient des références aux en-têtes, corps et/ou pieds de page globaux du site Web à partir duquel ils ont été exportés. Comment voudriez-vous importer ces références?
1 – Reliez-les à l’en-tête, au corps et/ou au pied de page globaux de ce site Web.
2 – Importez-les sous forme de mises en page statiques à partir du site Web à partir duquel ils ont été exportés. Cela peut prendre plusieurs minutes en fonction du nombre de références importées. »

Option 1 : « Relink… » vous permet d’importer seulement les « custom body ». Cela signifie que le système d’import omet d’insérer tous les headers et les footers contenus dans les templates de thème.

importation sans option
Onglet « Theme Builder » après importation sans option cochée.

Ainsi, vous conservez le design du header et du footer de votre site actuel, comme le montre les captures « avant/après » suivantes :

Page de l'article importée
Page de l’article avant-après
Page d'archive après import
Page d’archive avant-après

Vous pouvez remarquer que seul le corps de la page a changé de design et que le header (et footer) est resté intacte.

Bien évidemment, ces actions ont seulement impacté le design mais le contenu (textes et images) sont toujours présents.

Option 2 : importer une template de thème sans impacter le design global

Rendez-vous à l’onglet Divi > Theme Builder et cliquez sur l’icône de la double flèche.

Une popup apparait :

importer sans option
Option : aucune case cochée
  1. Cliquez sur l’onglet Importer
  2. Choisissez le fichier à importer (.json).
  3. Décochez toutes les cases d’option
  4. Cliquez sur « Import Divi Theme Builder Template ».
import them as static layout
Option « import them as static layout »

Le même message apparaît et voyons ce qu’il se passe si nous choisissons l’autre option :

Option 2 : « Import them as static layout… » vous permet d’importer toutes les parties de templates (header, body et footer) en tant que design indépendant.

Onglet Theme Builder
Onglet Theme Builder après import

Cela signifie que le ou les designs importés n’affecteront que la ou les pages qui lui sont affectées.

Les autres pages de votre site ne changeront pas.

Option 3 : importer une template de thème globale

La dernière option (celle qui est la plus intéressante si vous êtes en train de développer votre site) va vous permettre d’importer un design global qui agira sur la totalité du site, ou presque (tout dépend du contenu du pack que vous importez).

Comme pour les autres options, rendez-vous à l’onglet Divi > Theme Builder et cliquez sur l’icône de la double flèche.

Une popup apparait :

options d'import par défaut
Options d’import par défaut : « Override » & « Allow import »
  1. Cliquez sur l’onglet Importer
  2. Choisissez le fichier à importer (.json).
  3. Ne décochez pas les deux options par défaut : « Override… » et « Allow import… »
  4. Cliquez sur « Import Divi Theme Builder Template ».
import des templates
Onglet « Theme Builder » après import des templates

Patientez le temps du téléchargement.

Comme vous pouvez le voir sur la capture ci-dessus certains modules sont verts (éléments globaux) mais surtout la Default Website Template (template en haut à gauche) a bien été importée : c’est celle-ci qui impactera le design entier et global de votre site.

Voici ce que cela donne en front-end avec ces captures « avant/après » :

template de page d'accueil
Page d’accueil avant/après
Page des catégories du blog
Page des catégories du blog avant/après

Le design de mes pages a changé, le header et le footer aussi. La seule chose qui n’a pas changé est bien le contenu des pages de mon site.

3 – Que faire si l’import ne convient pas ?

Vous venez d’importer des templates de thème Divi et ce n’est pas ce à quoi vous vous attendiez ?

Ne vous inquiétez pas, il vous suffit de retourner à l’onglet Divi > Theme Builder et de supprimer (icône poubelle) la ou les parties de template qui ne vous conviennent pas. Vous pouvez même les supprimer entièrement et votre site retrouvera son aspect original.

Autre option : vous pouvez les éditer pour les modifier à votre goût !

4 – Exporter une template de thème : 2 possibilités

L’exportation d’une template de thème est aussi très facile, elle s’effectue en 3 clics seulement…

Option 1 : exporter une template de thème simple

Cela se passe toujours à l’onglet Divi > Theme Builder

Exporter une template
Exporter une seule template

Passez la souris au-dessus de la template à exporter : un petit menu local apparaît. Cliquez sur l’icône de la double flèche.

fichier d'export
Nommer le fichier d’export

Une popup apparaît :

  1. Donnez un nom au fichier que vous allez exporter
  2. Cliquez sur « Export Divi Theme Builder Template »
  3. Enregistrez votre fichier .json en local, sur votre ordinateur.

Ce fichier ainsi exporté pourra être utilisé sur un autre site utilisant le thème Divi, il vous suffira de le réimporter.

Option 2 : exporter plusieurs templates de thème à la fois

Rendez-vous à l’onglet Divi > Theme Builder.

portabilité Divi
Importer ou exporter une ou plusieurs templates de thème

Dans la barre violette, cliquez sur l’icône de la double flèche (portabilité).

Une popup apparaît :

sélectionner les templates à exporter
Exporter tout ou sélectionner les templates à exporter
  1. Depuis l’onglet « Exporter ».
  2. Donnez un nom au fichier d’exportation.
  3. Laissez la case cochée si vous souhaitez exporter l’ensemble de vos templates.
  4. Ou décochez la case pour sélectionner seulement les templates qui vous intéressent.
  5. Cliquez sur « Export Divi Theme Builder Template » et enregistrez-les en local.

5 – Où trouver des templates de thème Divi à télécharger gratuitement ?

Le Divi Theme Builder est encore tout récent, pourtant, les designers d’Elegant Themes ne chôment pas et le site permet déjà de télécharger les 5 premiers packs gratuitement.

D’autres suivront certainement : pour ne pas les rater, consultez régulièrement la page des ressources Divi disponibles sur le site officiel.

En attendant, vous pouvez télécharger les 5 premiers packs :

Reste à savoir si une prochaine version de Divi permettra de télécharger les template de theme directement depuis le back-office, comme le permet le Visual Builder avec les layouts ?

Bonne idée !

importer ou exporter un template de thème Divi
importer template de thème

Pin It on Pinterest

Shares
Share This