How to Import Bricks Builder Templates (JSON), Step by Step

Bricks templates come as .json files. Getting one onto a live page takes about a minute once you know where things are. This guide covers importing, inserting a section into a page, turning a template into your site header or footer, and fixing the errors people run into most.

You need WordPress with Bricks installed and active. The steps below match Bricks 2.x. Older versions use the same ideas, but some labels may differ.

1. Import the template file

1. In your WordPress admin, go to Bricks → Templates.
2. Click Import at the top of the page.
3. Choose one or more .json files from your computer and confirm.
4. The templates appear in the list, each with its type (Section, Header, Footer and so on).

If you bought a kit that contains many files, import them in groups of about 20. Many servers refuse large uploads, and smaller batches avoid that.

2. Insert a section into a page

1. Open the page and click Edit with Bricks.
2. Open the Templates panel (the folder icon in the toolbar).
3. Find the section you imported and click the insert icon.
4. The section is added to your page. Edit the text, images and links like any other Bricks element.

Inserting copies the section into the page, so changes you make here do not affect the original template. That lets you reuse one design on many pages with different content.

3. Use a template as your site header or footer

A header or footer template only shows on your site once you tell Bricks where to use it. That is what template conditions are for.

1. Go to Bricks → Templates and edit the header template with Bricks.
2. Open Settings → Template Settings → Conditions.
3. Add the condition Entire website and save.

Do the same for the footer. If you have more than one header, the more specific condition wins. For example, a header set to show on the front page replaces the “Entire website” header on that page only.

Split CTA · Header · free Bricks download · live demo

The menu in a header template shows the WordPress menu you choose in the element settings. You manage the links themselves in Appearance → Menus. Sub-items become dropdowns, and on phones the menu turns into a toggle menu.

4. Fix common import problems

“Invalid file” or nothing happens. Make sure you are importing the .json file itself, not the .zip it came in. Unzip the download first. Also check the file was not renamed to something like template.json.txt.

The upload fails on a big kit. Your server’s upload limit is too low for many files at once. Import fewer files per batch, or ask your host to raise upload_max_filesize.

Fonts look different from the demo. Templates usually use Google Fonts. If you disabled Google Fonts in Bricks → Settings → Performance, Bricks falls back to your default font. Either turn them back on or set your own font in the template.

Images are missing. Some templates load images from the original demo site. Replace them with your own images in the media library, which you would do anyway for a real site.

The header does not show. The template has no condition yet. Add Entire website as shown in step 3.

Where to get Bricks templates to practise with

You can try every step above with our 24 free Bricks Builder templates. They use native Bricks elements only, so they import cleanly on any Bricks 2.0+ site. For a full set, each Bricks kit has 24 designs for one section type, and the Complete Bricks Bundle includes all of them.