help center

Search
Close this search box.
On this page

Create or edit your Header

Last Update: September 10, 2024

What is a Header?

Headers appear at the top of most web pages. In general, sites have one standard header used for every page on the site – although some pages on a site may not have a header or need a custom header.

The Header Site Part section of the Theme Builder lists all Headers you’ve created, if any, giving quick access to add, edit, or delete any header.

Create a Header

Create your first header using the Theme Builder.

To create a Header:

  1. Go to WP-Admin.
    Navigate to Theme Builder Create or edit your Header 1
  2. Navigate to Templates>Theme Builder.
    Click the plus sign Create or edit your Header 3
  3. In the right pane, click the plus sign in the Header card.
    The Template Library opens.
    The Template library opens Create or edit your Header 5
  4. (Optional) Choose a pre-designed Header from the Template Library.
    Close the template library Create or edit your Header 7
  5. (Optional) Close the Template Library to design your Header from scratch.
  6. Design your Header in the Elementor Editor.
    Click Publish 2 Create or edit your Header 9
  7. When you finish, click Publish to save the Header.
    You will be asked to choose the pages where the Header will appear. For details, see Set conditions for site part templates.

Edit a Header

You can also edit the Header using the Theme Builder.

To edit a Header:

  1. Go to WP-Admin.
    Navigate to Theme Builder Create or edit your Header 1
  2. Navigate to Templates>Theme Builder.
    Click the card of the Header Create or edit your Header 13
  3. In the right pane, click the card of the Header you want to edit.
    Click Edit Create or edit your Header 15
  4. To edit the contents of the Header, click Edit.
    Click Edit Conditions Create or edit your Header 17
  5. To change the pages where the Header appears, click Edit Conditions. For details, see Set conditions for site part templates.

Add a HTML tag to your header

The header HTML tag identifies your header to screen readers and is an important part of accessibility.

To tag your header:

  1. Open your Header in the Elementor Editor.
    Click Header Settings Create or edit your Header 19
  2. On the top bar, click the Header Settings icon.
    Select ehader from the dropdown Create or edit your Header 21
  3. In the panel, use the HTML Tag dropdown to select header.

Export A Header

  1. Go to WP-Admin.
    Navigate to Theme Builder Create or edit your Header 1
  2. Navigate to Templates>Theme Builder.
    Click the 3 dots Create or edit your Header 25
  3. Click the Three Horizontal Dots in the upper right of the Header you wish to export. 
    Choose Create or edit your Header 27
  4. Select Export to save a .json file to your computer.

Delete A Header

  1. Go to WP-Admin.
    Navigate to Theme Builder Create or edit your Header 1
  2. Navigate to Templates>Theme Builder.
    Click the 3 dots Create or edit your Header 25
  3. Click the Three Horizontal Dots in the upper right of the Header you wish to delete. 
    Select Trash Create or edit your Header 33
  4. Choose Trash to delete the Header.
    confirm delete Create or edit your Header 35
  5. You need to confirm the deletion. 

Rename A Header

  1. Go to WP-Admin.
    Navigate to Theme Builder Create or edit your Header 1
  2. Navigate to Templates>Theme Builder.
    Click the 3 dots Create or edit your Header 25
  3. Click the Three Horizontal Dots in the upper right of the Header you wish to rename.
    Select Rename Create or edit your Header 41 
  4. Choose Rename which will open a Rename Part dialog box. 
    Replace dialogue Create or edit your Header 43
  5. Enter the new name and click Change to complete the rename process, or click Cancel if you change your mind and decide you don’t want to rename this Header.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Initial Site Setup

Unlock Your Elementor Website’s Full Potential