How To Use Elementor Theme Builder

What is the Theme Builder in Elementor?

Elementor'sTheme Builder lets you customize every fundamental part of your WordPress site without coding including yourHeader,Footer,Global Pages and Posts,Global ArchivesandWooCommerce Products and Product Archives.

TheTheme Builderprovides a visual overview of the site elements of your site, helping to guide you through each of the site parts you need to create in order to achieve a complete website.

Using theTheme Builder, you can add new site parts (e.g. add a new Header), edit existing site parts, or delete site parts. Existing site parts include a visual indicator to inform you if a condition is applied to that site part. For example, a Global Post site part template may have a condition to only show for a particular category. A green indicator will let you see at a glance that this site part has a condition. A gray indicator is an indication that a site part has no condition set.

How To Access The Theme Builder

There are several ways to access the Theme Builder. Choose whichever is most convenient for you.

METHOD ONE: Go toElementor > Theme Builder from the WordPress admin menu.

METHOD TWO: From within any page or post's Elementor Editor screen, click thehamburger menu in the upper left corner of theWidget Panel, then selectTheme Builder in the Settings tab.

METHOD THREE: Get quick access to theTheme Builder from any screen by using its keyboard shortcut hotkey combination. On a Mac, clickCMD+SHIFT+E to immediately jump to theTheme Builder. On Windows, clickCTRL+SHIFT+E to immediately jump to theTheme Builder.

Theme Builder Main Dashboard

For Free users, you can see which site parts would be available with Elementor Pro.

For Pro users, your existing Site Parts will be shown, if any have been built. Thumbnails for each site part will be auto-generated for you.

Note: Any featured image assigned to a site part will be used as the site part's screenshot. This enables you to use a thumbnail of your choice, rather than an auto-generated thumbnail, if you prefer.

If no site parts have yet been built, the default thumbnails will be shown for all available site parts.

Add A New Site Part

To add a newSite Part, click theAdd New link in the upper right corner of the dashboard, or the PLUS sign that appears when hovering over a site part's sidebar label, or the PLUS sign on its thumbnail.

Or you can add a new Site Part by importing a template.

Click theImport icon in the upper right of the Theme Builder.
Drag and drop or select a .JSON or .zip file that contains the template you wish to import.
The template will now be added to your Site Parts dashboard.

Edit An Existing Site Part's Design

To edit an existingSite Part, click theSite Part's label in the sidebar. This will open the site part's details dashboard.
Click theEdit link in the upper right corner of the site part you wish to edit. This will open the Elementor editor for that site part.

Edit An Existing Site Part's Conditions

Click theEdit Conditions link in the bottom left corner of the site part you wish to edit. This will directly open theDisplay Conditions editor for that site part.

Note: TheDot Display in the upper left corner of theSite Partindicates which site parts arelive(hasDisplay Conditions assigned to it), and which are merelydrafts(noDisplay Conditions have been assigned). AGreen Dot indicates alivesite part, while aGray Dotindicates adraftsite part.

Note: TheInstanceslabel in the lower left corner of theSite Part displays the specific instances in which this template is being used on the site.

Export A Site Part

Click theThree Horizontal Dots in the upper right of the site part you wish to export.
ChooseExportto open a Save dialog which will save a .json file to your computer.

Delete A Site Part

Click theThree Horizontal Dots in the upper right of the site part you wish to delete.
ChooseDeletewhich will open aDelete Part confirmation dialog box.
ClickCancelif you change your mind and decide you don't want to delete the site part, or clickDeleteto confirm that you do wish to delete this site part.

Rename A Site Part

Click theThree Horizontal Dots in the upper right of the site part you wish to rename.
ChooseRenamewhich will open aRename Part dialog box.
Enter the new name and clickChangeto complete the rename process, or clickCancelif you change your mind and decide you don't want to rename this site part.