# Set up Header

**Step 1 -** Go to WordPress **Dashboard** -> **Appearance** -> **Header & Footer Builder** -> **Add new** -> **Edit with Elementor**

<figure><img src="https://content.gitbook.com/content/qxLOC8JSAtFd1NqUHyOc/blobs/TGWpy3PL62BfDyxxLbIe/image.png" alt=""><figcaption></figcaption></figure>

By bringing the power of the Elementor editor to the header/footer areas, you can design them any way you like, full-width included, and be able to complete projects faster than ever. You can also save header and footer templates, and reuse them on any other project.

If you are beating yourself up right now for all the hours you lost in the past over your header design, we share your feelings. From now on, with the help of Theme Builder, things are going to be much faster. [Learn How To Build Headers](https://www.youtube.com/watch?v=tDePkL-1tu4)

**Step 2 -** Click ‘**Add New Template**’ and choose ‘**Header**’

**Step 3 -** Name your header template and click ‘**Publish**’

<figure><img src="https://content.gitbook.com/content/qxLOC8JSAtFd1NqUHyOc/blobs/xlvfdWe3xYOD0Y0lBafN/image.png" alt=""><figcaption></figcaption></figure>

**Step 4 -** Create one from scratch.

**Step 5 -** Menu

![](https://1429332211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxLOC8JSAtFd1NqUHyOc%2Fuploads%2FOklHtJYddmnwFuBhYKbt%2FScreen%20Shot%202024-10-07%20at%202.24.38%20PM.png?alt=media\&token=653b4c60-e7b5-4ec1-8904-9f9d8ed07f2f)

**Step 6 -** Edit the "Logo" for the shop

![](https://1429332211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxLOC8JSAtFd1NqUHyOc%2Fuploads%2FTM1LRk0LbfT7VtrmWx8I%2FScreen%20Shot%202024-10-07%20at%202.25.20%20PM.png?alt=media\&token=96873b43-7326-4e1b-b3a9-cfbc3e0da550)

**Step 7 -** Button content

![](https://1429332211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxLOC8JSAtFd1NqUHyOc%2Fuploads%2FT7bG5oC1HYGGDqkJNQzS%2FScreen%20Shot%202024-10-07%20at%202.26.30%20PM.png?alt=media\&token=ba951ac3-0d6a-409c-83eb-baf94575ed19)

**Step 8** - Button Popup

<figure><img src="https://1429332211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxLOC8JSAtFd1NqUHyOc%2Fuploads%2F30u8SJ8dVXg7buSQ19dt%2FScreen%20Shot%202024-10-07%20at%202.27.20%20PM.png?alt=media&#x26;token=563e1f30-90e6-4223-bfff-6ced2122baea" alt=""><figcaption></figcaption></figure>

**Step 9 -** Edit Menu Canvas Mobile

<figure><img src="https://1429332211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxLOC8JSAtFd1NqUHyOc%2Fuploads%2FJt4fo79z1VagTHb9Jg12%2FScreen%20Shot%202024-10-07%20at%202.29.06%20PM.png?alt=media&#x26;token=4d8c49e5-aa12-41b3-814b-3f04ba397b62" alt=""><figcaption></figcaption></figure>

**Step 10 -** Once you have made the needed changes to the header design, click ‘**Update**’, and choose where to Display Conditions.

**Step 11 -** Set the conditions that determine where your **Header** is. For example, choose '**Entire Site**' to display the header across your site.

<figure><img src="https://content.gitbook.com/content/qxLOC8JSAtFd1NqUHyOc/blobs/m9Ld0aAoTLBQ2zSsogFD/Screen%20Shot%202023-10-02%20at%208.47.32%20AM.png" alt=""><figcaption></figcaption></figure>

**Step 12 -** Click **"Save and Close"**
