# Create/Edit header using Elementor

1. To create a unique header for your site, please go to **Admin -> Civi Builder -> Header -> Add New**

<div data-full-width="true"><figure><img src="https://947744334-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjG66evEIMBXknuFytIuq%2Fuploads%2Fd2GFCCyIyjtLmoaRaoFM%2FAdd%20new%20header.png?alt=media&#x26;token=bafee33f-6beb-4f4c-88d0-2b21ade7308e" alt=""><figcaption></figcaption></figure></div>

2. After you create a new header, next select **Edit with Elementor** and edit it in Elementor using the widget in the theme

<div data-full-width="true"><figure><img src="https://947744334-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjG66evEIMBXknuFytIuq%2Fuploads%2F2af8PoIRWMgWQGodoOC5%2FEdit%20header%20with%20Elementor.png?alt=media&#x26;token=61b1b911-876b-421d-99fb-e6b6ef85f4b9" alt=""><figcaption></figcaption></figure></div>

<div data-full-width="true"><figure><img src="https://947744334-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjG66evEIMBXknuFytIuq%2Fuploads%2FEeZb2Cck1uMOIivXd2nx%2FHeader%20in%20Elementor.png?alt=media&#x26;token=d190dc4e-6b84-4167-b44b-37c38cad4b60" alt=""><figcaption></figcaption></figure></div>

3. After finishing editing the header, select **Publish/Update** to save it

{% hint style="info" %}
**Note: You need to create 2 versions of the header for PC and for mobile tablets in Elementor to edit it to suit devices with different screen resolutions.**
{% endhint %}

4. After you've created your own header, there are two ways to set up your chosen header as the default header for your site:&#x20;

* Method 1: Go to **Edit Page -> Page Options -> Page Header -> Header Type ->** Then select the header that you created before

<div data-full-width="true"><figure><img src="https://947744334-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjG66evEIMBXknuFytIuq%2Fuploads%2FQtYejv4jZ8eddSypXP8c%2Fselect%20header_1.png?alt=media&#x26;token=b0f49c4e-9b17-4720-991b-8b3b0dc53788" alt=""><figcaption></figcaption></figure></div>

* Method 2: Go to Customize -> Header -> Header Type -> Then select the header that you created before

{% hint style="info" %}
Note: You need to select type " Default" first in the option Header Type of the Edit Page. Then after you can select Header type in Customize
{% endhint %}

<div data-full-width="true"><figure><img src="https://947744334-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjG66evEIMBXknuFytIuq%2Fuploads%2F4awUHoDXkO3vVwBq96tP%2FSelect%20header_2.png?alt=media&#x26;token=533f1a34-6dbc-4257-a4fb-6d303085f7d3" alt=""><figcaption></figcaption></figure></div>
