• What is the Page Header?
• Layout the Header and Footer
• How to access the Theme Designer
• From the WordPress administration menu
• From the Elementor editor
• Using the shortcut keys
• Theme Layout Designer main dashboard
• Elementor free version
• Elementor Pro without created templates
• Elementor Pro with created templates
• Add a new part of the site
• Edit the design of an existing part of the site
• Export a part of the site
• Import a part of the site
• Delete a part of the site
• Rename a part of the site
• Edit display conditions
• Modifying display conditions from the Theme Designer
• Modifying display conditions from the elementor constructor
• How to create a template from Elementor Pro Theme Builder

What is the Page Header?

With ElementorTheme Builder you can add new site parts (e.g. add a new Header), edit existing site parts or remove site parts. Existing parts of the site include a visual indicator to inform you if a condition applies to that part of the site.

For example, a global template for Posts can have a condition to display only for a particular category. A green indicator will allow you to see at a glance that this part of the site has a condition. A gray indicator is an indication that a part of the site has no condition set so it will not be displayed until one is set.

Elementor’sTheme Builder allows you to globally customize every fundamental part of your website without coding:

• Header
• Footer
• Single entry
• Individual page
• Archive
• Search results
• Error 404

Elementor Pro has specific widgets to create each of these types of templates, some of them will only be displayed when we have selected that type of content. Let’s see what additional widgets we can use to create the Header and Footer.

Layout the Header and Footer

When we edit a part of the site the Elementor Pro builder makes our work easier by showing us at the top of the list of wigets those that are specially related to the part we are going to create. For example in the following image we see the widgets that we find first when creating the Header or Footer.

How to access the Theme Designer

There are several ways to access the Theme Designer. Choose the one that is most convenient for you.

From the WordPress administration menu

1. From the WordPress administration menu go to Templates > Theme Builder.

From the Elementor editor

1. From any Elementor editor page or screen, click the hamburger menu in the upper left corner of the Widgets Panel, then select Theme Layout from the Settings tab.
   

Using the shortcut keys

1. Quickly access the Theme Designer from any screen using your keyboard shortcut key combination. On a Mac, click CMD+SHIFT+E. On Windows, click CTRL+SHIFT+E to immediately open the Theme Designer.

Theme Layout Designer main dashboard

Free users can see what parts of the site would be available with Elementor Pro, but cannot add or modify.

Elementor free version

Elementor Pro without created templates

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

Elementor Pro with created templates

For Pro users, existing Site Parts will be displayed, if any have been created. Thumbnails of each part of the site will be generated automatically.

Add a new part of the site

To add a new part of the siteclick on the link Add new in the upper right corner of the dashboard, or in the MORE sign that appears when you hover the mouse over the sidebar label of a part of the site, or in the MORE sign in its thumbnail.

Edit the design of an existing part of the site

1. To edit an existing site part, click on the site part label in the sidebar. This will open the site part details panel.
2. Click the Edit link in the upper right corner of the part of the site you wish to edit. This will open the Elementor editor for that part of the site.

Export a part of the site

1. Click on the … three horizontal dots at the top right of the part of the template you want to export.
2. Choose Export to open a Save dialog box and save a .json file to your computer.

Import a part of the site

You can also add a new part of the site by importing a template.

1. Click the Import icon in the upper right corner of the Theme Builder.
2. Drag and drop or select a .JSON or .zip file containing the template you want to import.
3. The template will now be added to your Site Parts control panel.

Important: for the templates to be imported correctly, unfiltered uploads must be enabled. To enable them, go to Elementor > Settings > Advanced and change the Allow unfiltered file uploads option to Enable.

Delete a part of the site

1. Click on the … three horizontal dots at the top right of the part of the site you want to delete.
2. Choose Trash, which will open a Move Item To Trash confirmation dialog box.
3. Click Cancel if you change your mind and decide you don’t want to delete the part of the site, or click on Move to Trash (Move to Trash) to confirm that you want to move this part of the site to the trash.

When a document is moved to the trash, it can be restored or permanently deleted from the Templates menu > by clicking on Trash.

Rename a part of the site

1. Click on the … three horizontal dots at the top right of the part of the site you want to rename.
2. Choose Rename, which will open the Rename Site Part dialog box.
3. Enter the new name and click Change to complete the renaming process, or click Cancel if you change your mind and decide you do not want to rename this part of the site.

Important: Elementor is gradually moving from the traditional Ajax mode (using admin-ajax.php) for fetching data in the Elementor platform to the WordPress REST API system and this is used within the new Theme Builder. If a website has disabled the WordPress REST API, then the new theme builder will not work and content, such as templates or anything else, will not be displayed. You will get an error saying “Error: you do not have permission to do this”.

Edit display conditions

In this same topic we will see later on what they are and how to set the display conditions. Now we are going to see how to modify those of a part template from the Theme Builder and from the Elementor Builder.

Modifying display conditions from the Theme Designer

1. Go to the Theme Builder and click on the template you want to change the conditions for.
2. At the bottom of the Instances box you will see the conditions you have already assigned, to edit them click on Edit conditions.
3. Here you can add new ones by clicking on the Add condition button, and also modify or delete existing ones.

Modifying display conditions from the elementor constructor

1. Inside the Elementor Pro builder click on the little arrow next to the Refresh button (bottom left) in the popup menu click on Display conditions .
2. Here you can add new ones by clicking on the Add condition button, and also modify or delete existing ones.

How to create a template from Elementor Pro Theme Builder

We can create a Header or Footer easily from the Theme Designer by following these steps:

1. WordPress administration panel in the Templates menu > click on Theme Builder
2. You can either click on the button next to each category or click on Add new and choose Header or Footer.
3. You can now choose a pre-made Header or Footer template or create one from scratch.
4. Once you have made the necessary changes to the Header or Footer design, click the Publish button and choose where to publish the Header or Footer. The default value is All site.
5. That’s all! You can now see your handmade header or footer live on your site.

We can use the predesigned templates offered by Elementor Pro or design from scratch with the builder. We can also use a predesigned template and then modify it to our liking.