# Header

#### How to Edit the Header Using Elementor <a href="#how-to-edit-the-header-using-elementor" id="how-to-edit-the-header-using-elementor"></a>

{% hint style="success" %}
**To enable** header editing with Elementor, navigate to **WordPress Dashboard > Elementor > Settings > General > Post Types**. **Select all post types and click** **Save Changes**
{% endhint %}

<figure><img src="https://content.gitbook.com/content/Juk9mT7asZ4pv0M35wkr/blobs/rBpH1f07qvR9isUT7vxJ/el-set.jpg" alt=""><figcaption></figcaption></figure>

### Create a New Header <a href="#create-a-new-header" id="create-a-new-header"></a>

**Step 1: Go to WordPress Dashboard** → Navigate to **Headers** → Click **Add New Header.**

<figure><img src="https://content.gitbook.com/content/Juk9mT7asZ4pv0M35wkr/blobs/1xlzijg90DDAZKQQ8tMp/Header-01.jpg" alt=""><figcaption></figcaption></figure>

**Step 2:** Name your header template and click **Edit with Elementor**.

<figure><img src="https://content.gitbook.com/content/Juk9mT7asZ4pv0M35wkr/blobs/1mmOfQwRPh0s05YB2M9z/image-1.png" alt=""><figcaption></figcaption></figure>

**Step 3:** Click **Edit with Elementor** and use Elementor’s layout options to design your header as desired

**Step 4:** Customize as needed — add logos, menus, and design elements that match your site’s branding

<figure><img src="https://content.gitbook.com/content/Juk9mT7asZ4pv0M35wkr/blobs/jnfLfWMp4xkeUp75Kw7i/image-2.png" alt=""><figcaption></figcaption></figure>

**Step 5 :** Save your changes and check the live preview to ensure everything looks perfect.

**Step 6:** After making all the changes, kindly click the **Publish** button to apply them.

#### **Edit a Predefined Header** <a href="#edit-a-predefined-header" id="edit-a-predefined-header"></a>

**Step 1: Go to WordPress Dashboard** → Navigate to **Headers** → **Headers**

<figure><img src="https://content.gitbook.com/content/Juk9mT7asZ4pv0M35wkr/blobs/1xlzijg90DDAZKQQ8tMp/Header-01.jpg" alt=""><figcaption></figcaption></figure>

**Step 2: Find & Select a Predefined Header** → Choose the header template you want to edit.

<figure><img src="https://content.gitbook.com/content/Juk9mT7asZ4pv0M35wkr/blobs/ZM641vOwB3EXp7I4ILlj/image-3.png" alt=""><figcaption></figcaption></figure>

**Step 3 :** Click **Edit with Elementor** to open the Elementor editor.

<figure><img src="https://content.gitbook.com/content/Juk9mT7asZ4pv0M35wkr/blobs/jnfLfWMp4xkeUp75Kw7i/image-2.png" alt=""><figcaption></figcaption></figure>

**Step 4 : Modify the layout** – Adjust the header’s structure, add new sections, or edit existing ones.

**Customize elements** – Update the logo, change menu styles, tweak button designs, or edit the mobile header settings.

<figure><img src="https://content.gitbook.com/content/Juk9mT7asZ4pv0M35wkr/blobs/nHqVF0cnUHcKXPxTDSr2/3.gif" alt=""><figcaption></figcaption></figure>

**Step 5:** Click the **Publish** button, then check the live preview to ensure everything appears as expected.

### **How to Add Your Header Layout to Your Site or Page** <a href="#how-to-add-your-header-layout-to-your-site-or-page" id="how-to-add-your-header-layout-to-your-site-or-page"></a>

#### **Option 1: Set Header via Customizer ( Global Header )** <a href="#option-1-set-header-via-customizer-global-header" id="option-1-set-header-via-customizer-global-header"></a>

**Steps to Set a Custom Header in WordPress**

**Step 1:** Go to **WordPress Dashboard > Appearance > Customize > Site General**

**Step 2:** Click on **Header** → Then go to **Site Header**.

**Step 3:** Under **Custom Header**, enable or select **Choose Header Template**.

**Step 4:** From the dropdown list, select your preferred template (e.g., **Header 1**).

**Step 5:** Click the **Publish** button and check the frontend to ensure the header is applied correctly.

<figure><img src="https://content.gitbook.com/content/Juk9mT7asZ4pv0M35wkr/blobs/4XW2OLLyQlu9rXkFgXpT/header-02.jpg" alt=""><figcaption></figcaption></figure>

### **Option 2 : Set Header for Individual Pages** <a href="#option-2-set-header-for-individual-pages" id="option-2-set-header-for-individual-pages"></a>

**Step 1 :** Navigate to **Dashboard > Pages**, select the page, click **Edit**, then go to **Page Options > Header**.

**Step 2 :** Select your **Header Style** for the specific page.

**Step 3 :** Click **“Publish”** to apply the changes.

<figure><img src="https://content.gitbook.com/content/Juk9mT7asZ4pv0M35wkr/blobs/EaURft4CZ4vu8w8VKqZY/header-03.jpg" alt=""><figcaption></figcaption></figure>

{% embed url="<https://youtu.be/ENDODUSTga4>" %}

#### **How to Add or Edit the Logo in WordPress** <a href="#how-to-add-or-edit-the-logo-in-wordpress" id="how-to-add-or-edit-the-logo-in-wordpress"></a>

#### **Option 1: Using WordPress Customizer** <a href="#option-1-using-wordpress-customizer" id="option-1-using-wordpress-customizer"></a>

* Go to **WordPress Dashboard** → **Appearance** → **Customize**.
* Navigate to **Site Identity → Site Logo.**
* Click **Select Logo** and upload your logo.
* Adjust the logo size if needed.
* Click the **Publish** button to save your changes.

<figure><img src="https://content.gitbook.com/content/Juk9mT7asZ4pv0M35wkr/blobs/0oR4dMFk7yqEJNXSf64X/Site_Identity_logo.jpg" alt=""><figcaption></figcaption></figure>

#### **Option 2: Using Elementor** <a href="#option-2-using-elementor" id="option-2-using-elementor"></a>

* Go to **WordPress Dashboard > Header**, select the header, and click **Edit with Elementor**
* Click on the **Logo** element.
* Logo type > custom logo
* Upload a new logo or select an existing one from the media library.
* Adjust the **size, alignment, and styling** as needed.
* Click the **Publish** button to save your changes.

<figure><img src="https://content.gitbook.com/content/Juk9mT7asZ4pv0M35wkr/blobs/KapPxCuvoy7JIFagwr3n/logo.jpg" alt=""><figcaption></figcaption></figure>
