# Template Builder

## Overview

The Theme Builder is a powerful interface that lets you use the Elementor Page Builder to create and manage theme templates. You can assign these custom templates to pages or posts across your site, giving you full control over elements like the header, footer, and page title. Additionally, you can use the Theme Builder to create advanced features such as mega menus, off-canvas menus, and popups.

You can access the Theme Builder in your WordPress dashboard, located right below the Theme Options panel

<figure><img src="https://4230622641-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlbpegSi8ucivyEIQOCq%2Fuploads%2Fjp7ovppfkg9E7H49osOL%2Fimage.png?alt=media&#x26;token=de0f06f2-d103-47cb-bf36-0e0c985fb230" alt=""><figcaption></figcaption></figure>

### Header

To create a custom header, click on Add New, then select Header Type from template options:

<figure><img src="https://4230622641-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlbpegSi8ucivyEIQOCq%2Fuploads%2Fux0krXiWVRqTknSoFocr%2Fimage.png?alt=media&#x26;token=69613d14-8582-452a-a77f-804f253c7c8d" alt=""><figcaption></figcaption></figure>

There are a few options you need to set before editing the content:

1. **Display Condition:** Select the locations where this template should be visible.
2. **Exclude Condition:** Select the locations where this template should be hidden.
3. **Active Template:** Activate this template or save it as a draft, depending on your preference.

Finally, you can publish the template and begin editing it with Elementor to customize it further.

### Footer

To create a custom footer, click on Add New, then select Header Type from template options:

<figure><img src="https://4230622641-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlbpegSi8ucivyEIQOCq%2Fuploads%2F1b4Q7ZRw5qxMqXTbXR3j%2Fimage.png?alt=media&#x26;token=46ef866a-79d5-4d6f-9667-0f21ceb7dccf" alt=""><figcaption></figcaption></figure>

There are a few options you need to set before editing the content:

1. **Display Condition:** Select the locations where this template should be visible.
2. **Exclude Condition:** Select the locations where this template should be hidden.
3. **Active Template:** Activate this template or save it as a draft, depending on your preference.

Finally, you can publish the template and begin editing it with Elementor to customize it further.

### Page Title

To create a custom footer, click on Add New, then select Header Type from template options:

<figure><img src="https://4230622641-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlbpegSi8ucivyEIQOCq%2Fuploads%2FJNL2AStX5Cm2BM5LZzSl%2Fimage.png?alt=media&#x26;token=657e0a5f-d4f8-426c-a6b5-7ddd67ed42d2" alt=""><figcaption></figcaption></figure>

There are a few options you need to set before editing the content:

1. **Display Condition:** Select the locations where this template should be visible.
2. **Exclude Condition:** Select the locations where this template should be hidden.
3. **Active Template:** Activate this template or save it as a draft, depending on your preference.

Finally, you can publish the template and begin editing it with Elementor to customize it further.

### Mega Menu

Go to Add New, and select Mega Menu from the template type

<figure><img src="https://4230622641-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlbpegSi8ucivyEIQOCq%2Fuploads%2Fc6wvtpoeR6WgpDRlbQp0%2Fimage.png?alt=media&#x26;token=4cf4f9ca-e56f-4df7-91f7-62f3c39a54bb" alt=""><figcaption></figcaption></figure>

Finally, you can either Save and Edit using Elementor, or simply Save and Close, if you wish to add your content later.

To assign the Mega Menu to header, go to Appearance > Menus and look for Template Builder on the left side (If it's not there click on Screen Options - Top right of the screen and enable Template Builder ):

<figure><img src="https://4230622641-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlbpegSi8ucivyEIQOCq%2Fuploads%2FOnH9Ujkp5lvqykHUOK4M%2Fimage.png?alt=media&#x26;token=df9bdadf-47bc-4a01-8035-83dd770a3e12" alt=""><figcaption></figcaption></figure>

After adding the item to your header, you can change the name to anything you want:

<div align="left"><figure><img src="https://4230622641-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlbpegSi8ucivyEIQOCq%2Fuploads%2Fuc4oRP9U6G0yiQrGYdCi%2Fimage.png?alt=media&#x26;token=ee097b69-790d-4993-9884-2cd051a37cc0" alt="" width="328"><figcaption></figcaption></figure></div>

### Popup

To create a popup chose template type as popup.

<figure><img src="https://4230622641-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlbpegSi8ucivyEIQOCq%2Fuploads%2FPg2wrzxEzmtxbuNHkSLb%2Fimage.png?alt=media&#x26;token=9243ea32-53c1-4426-a530-2f35460c1c02" alt=""><figcaption></figcaption></figure>

There are a few options you need to set before editing the content:

1. **Popup Settings:** Configure the popup settings, including its width, height, and delay time.
2. **Display Condition:** Select the locations where this template should be visible.
3. **Exclude Condition:** Select the locations where this template should be hidden.
4. **Active Template:** Activate this template or save it as a draft, depending on your preference.

Finally, you can publish the template and begin editing it with Elementor to customize it further.

### OffCanvas

To create an off-canvas menu, select 'Off-Canvas' as the template type and configure the off-canvas width as needed

<figure><img src="https://4230622641-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlbpegSi8ucivyEIQOCq%2Fuploads%2FqWt98z4FfHhlm6yjsYqA%2Fimage.png?alt=media&#x26;token=77a1a549-b9c7-4c62-b22a-45e582b18811" alt=""><figcaption></figcaption></figure>

Finally, you can publish the template and start editing it with Elementor for further customization. Later, you can add the off-canvas width to any page as needed.

