How to Use Theme Builder on Elementor

intermediate 8 min read Updated 2026-03-24

Quick Answer

Access Elementor Theme Builder to create custom site parts like headers and footers, design in the editor, set display conditions to make them live, and test on frontend. Requires Elementor Pro; common issues fixed by increasing PHP memory and clearing caches. Setup takes 30-90 minutes for intermediates.

Get Elementor Deal → Partner

Try Elementor Full Elementor Review

Prerequisites

Active Elementor Pro license
WordPress 6.0+, PHP 8.1+, 256MB+ memory limit
Compatible theme like Hello Elementor
Backup site and disable caching initially
Browser with dev tools (F12)

Step-by-Step Instructions

Access Theme Builder Dashboard

Navigate to Elementor > Theme Builder from WordPress admin, or from Elementor Editor use hamburger menu > Settings > Theme Builder, or shortcut CMD+SHIFT+E (Mac)/CTRL+SHIFT+E (Windows). Review site parts like Header, Footer, Single Post with green dots for live templates and gray for drafts.[1][2][5]

Enable Unfiltered Uploads

For importing .JSON/.zip templates, go to Elementor > Settings > Advanced and toggle Enable Unfiltered Uploads to ON. This is a dashboard setting, no terminal needed; default is OFF.[1][5]

Enable only when importing to avoid security risks.

Add New Site Part Template

Click Add New upper right, or hover site part thumbnail/label and click + icon. Name it (e.g. Custom Header) and click Create Template to open Elementor Editor.[1][2][7]

Import Pre-made Template

Click Import icon upper right, drag/drop or select .JSON/.zip file. Template auto-adds to dashboard; uses site's featured image as thumbnail if set.[1][2][5]

Ensure unfiltered uploads enabled first.

Design or Edit Template

From details dashboard, click site part label then Edit. Use Elementor Editor: add sections/widgets (e.g. logo, menu for Header). Save/publish; default full-width unless theme overrides.[1][2][3]

Use dynamic widgets like Post Title for content templates.

Set Display Conditions

Click Edit Conditions bottom left. Choose Include/Exclude rules (e.g. Entire Site, Front Page, Post Categories). Save & Close to activate (green dot/live).[1][2][3]

No conditions means draft (gray dot); preview on live site.

Preview and Test

Visit live page matching conditions. Templates override theme layout/CSS. Editor previews may differ; use frontend for accuracy.[1][2][3]

Check responsive mode for mobile/tablet.

Manage Templates

Hover thumbnail: Duplicate, trash to delete. Export via Editor JSON or WordPress tools. Monitor Instances label for usage.[1][2]

Common Issues & Troubleshooting

Editor Not Loading/Stuck on Spinner

Clear browser cache/incognito; deactivate plugins except Elementor Pro one-by-one; add define('WP_MEMORY_LIMIT', '256M'); to wp-config.php; Elementor > Tools > Regenerate CSS.[1][2][3]

Headers/Footers Not Displaying

Verify Display Conditions include correct pages; switch to Hello Elementor theme; clear all caches; check JS errors in F12 console.[1][2][3]

Widgets Missing or Template Errors

Increase PHP memory to 256MB+; disable theme temporarily; Elementor > System Info to check requirements; enable Safe Mode.[1][2][3]

Import Fails

Enable Unfiltered Uploads in Elementor > Settings > Advanced; use valid .JSON/.zip; check file permissions.[1][5]

Conditions Ignored

Re-save conditions; ensure no plugin conflicts; test on frontend not editor.[1][2]

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Elementor website before purchasing.

Visit Elementor View Elementor Pricing