How To Save An Entire Template In Divi

In this new tutorial, discover how to import/consign theme templates created with the new Divi Theme Builder.

These deportment are very similar to the Divi layout import/export functionality except for a few new options that have been introduced.

Nosotros will wait at this in detail.

1 - What is a theme template?
2 - Importing a theme template: three possibilities
- Option ane: import a theme template without impacting the current blueprint
- Option two: import a theme template without impacting the overall design
- Option 3: Import a global theme template
three - What if the import is not suitable?
iv - Exporting a theme template: ii possibilities
- Selection 1: export a simple theme template
- Choice 2: Exporting multiple theme templates at once
v - Where can I notice costless Divi theme templates to download?

Declaration: this commodity contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

1 - What is a theme template?

A theme template should not exist confused with a layout.

Layouts are used to create the pattern inside a web folio. Layouts are the consequence of edifice the page using a folio architect, in our example using Divi's Visual Builder.

The theme templates, on the other hand, have been introduced since the version 4.0 of Divi. They allow you to create the design of the site and to build page templates.

Each page template has a specific functionality that has been divers in the WordPress template file hierarchy.

Hiérarchie des fichiers modèle de WordPress — WordPress template file hierarchy

These template files (folio templates) cannot be modified with a page architect, which is why Divi 4.0 was and then eagerly awaited!

At present you can create theme templates directly using Divi's Theme Builder, so you don't have to paw-code these page templates (like the 404 page, category page, header, footer etc.).

This means that nosotros really don't need to chief PHP to create great WordPress "themes" anymore!

Did you know that you tin can test Divi for gratis? Go to this page and click on "Endeavour It FOR FREE

2 - Importing a theme template: 3 possibilities

To import (or export) theme templates, simply get to the Divi > Theme Architect .

You volition be able to import unmarried templates or batches of templates (packs containing several templates).

For this tutorial, I used a ready-made template pack that I downloaded from the Elegant Themes website. I'll give you all the links at the finish of the article.

The advantage of importing/exporting theme templates is that you can easily migrate a design from site to site. You will salve a lot of time and tin even use this feature when website redesign.

Importing a template pack (or a elementary template) tin can be done according to 3 options:

Import a template without impacting the current design
Import a template without impacting the overall design
Import a global theme template

types d'import de template Divi — Results of the different types of theme template import

Let'due south wait at information technology in detail...

Option 1: import a theme template without impacting the current design

This fashion of importing theme templates is platonic if you have already congenital the blueprint of your site and exercise not wish to modify the essentials (header, footer etc.).

Onglet Theme Builder > Portabilité — Theme Builder tab > Portability (arrow icon)

Go to the Divi > Theme Builder tab and click on the double pointer icon.

Importer sans options — Import without options: uncheck all boxes

A popup appears:

Click on the Importtab
Choose the file to import: you must take it on your estimator. These are .json files. For this example, I have chosen the "pack" (all) version.
Uncheck all radio buttons
Click on "Import Divi Theme Builder Template".

choix alternatif d'import — Boosted popup inviting you to choose betwixt two options. Here, I choose "relink".

A new window opens and offers y'all two options:

"This import contains references to the global headers, body and/or footers of the website from which they were exported. How would yous similar to import these references?
1 - Link them to the overall header, torso and/or footer of this website.
two - Import them as static layouts from the website from which they were exported. This may accept several minutes depending on the number of references imported."

Option 1: "Relink... allows you to import only the "Custom body . This means that the import organization omits all headers and footers contained in the theme templates.

importation sans option — Theme Builder" tab after import without selection checked.

Thus, you go along the design of the header and footer of your current site, as shown in the post-obit "before/subsequently" pictures:

Page de l'article importée — Page of the before and later article

Page d'archive après import — Before and after archive folio

You can come across that only the body of the page has changed and that the header (and footer) have remained unchanged.

Of course, these actions take merely impacted the design only the content (texts and images) are nonetheless present.

Option 2: import a theme template without impacting the overall design

Go to the Divi > Theme Architect tab and click on the double arrow icon.

A popup appears:

importer sans option — Selection: no box checked

Click on the Importtab
Cull the file to import (.json).
Uncheck all radio buttons
Click on "Import Divi Theme Builder Template".

import them as static layout — Import them every bit static layout" option

The same message appears and permit's come across what happens if we choose the other option:

Pick 2: "Import them equally static layout..." allows you to import all template parts (header, body and footer) as an independent design.

Onglet Theme Builder — Theme Builder tab after import

This means that the imported pattern(s) will only bear upon the page(s) assigned to it.

The other pages of your site volition non change.

Option 3: Import a global theme template

The last option (the one that is the most interesting if you are developing your site) will permit you to import a global design that will act on the whole site, or almost (it all depends on the content of the pack y'all are importing).

As with the other options, go to the Divi > Theme Builder tab and click on the double arrow icon.

A popup appears:

options d'import par défaut — Default import options: "Override" & "Let import

Click on the Importtab
Choose the file to import (.json).
Practise non uncheck the two default options: "Override..." and "Allow import...".
Click on "Import Divi Theme Builder Template".

import des templates — Theme Architect" tab afterward template import

Please await for the download.

As you tin can see on the above screenshot some modules are light-green (overall elements) only to a higher place all the Default Website Template (template on the top left) has been imported: this is the one that will bear on the whole design of your site.

Here is what information technology looks similar on the front end with these "before/later on" captures:

template de page d'accueil — Before and after home page

Page des catégories du blog — Blog categories page before/later on

The design of my pages has inverse, the header and footer also. The only thing that hasn't inverse is the content of my pages.

3 - What if the import is not suitable?

Just imported Divi theme templates and it's not what yous expected?

Don't worry, just go dorsum to the Divi > Theme Architect tab and delete (bin icon) the office(s) of the template you don't like. You tin can even delete them entirely and your site volition look similar new again.

Another option: you can edit them to suit your gustatory modality!

four - Exporting a theme template: 2 possibilities

Exporting a theme template is besides very easy, it but takes 3 clicks...

Option 1: consign a simple theme template

This is always on the Divi > Theme Architect

Exporter une template — Exporting a single template

Move the mouse over the template to exist exported: a small popular-upwards carte du jour appears. Click on the double arrow icon.

A popup appears:

Give a name to the file yous are going to export
Click on "Consign Divi Theme Builder Template
Save your .json file locally on your computer.

This exported file tin can be used on another site using the Divi theme, you just have to reimport it.

Option 2: Exporting multiple theme templates at once

Go to the tab Divi > Theme Builder .

portabilité Divi — Import or consign one or more theme templates

In the purple bar, click on the double arrow icon (portability).

A popup appears:

sélectionner les templates à exporter — Export all or select templates to export

From the tab "Consign" tab .
Requite the export file a name.
Get out the box checked if you lot wish to export all your templates.
Or uncheck the box to select only the templates you are interested in.
Click on "Export Divi Theme Builder Template and salve them locally.

five - Where can I discover free Divi theme templates to download?

The Divi Theme Builder is nonetheless very new, however, the designers at Elegant Themes are hard at work and the site already allows you lot to download the outset five packs for free.

Others will certainly follow: to avert missing them, check the Divi resources page bachelor on the official website.

In the meantime, you can download the offset 5 packs:

Theme Builder Pack 1
Theme Architect Pack 2
Theme Architect Pack 3
Theme Architect Pack 4
Theme Builder Pack 5
Theme Architect Pack 6

It remains to be seen whether a future version of Divi volition allow theme templates to be downloaded directly from the back-role, as the Visual Architect does with layouts?

Practiced idea!