Creating Phlox Header and Footer

Phlox header/footer builder lets you create unique headers and footers with different structures and layouts for desktop, tablet, and mobile. You can add rows and columns by Elementor Page Builder, and customize the look of header and footer by adding or removing elements. You are able to use all the available elements (such as the horizontal menu, burger menu, search box, social media icons, welcome message, contact numbers, custom icons, call to action buttons, subscription box, shopping cart, ...) without any limitation. Also, It is possible to see the changes in real-time.

Here are some examples of our headers and footers:

Header Templates:


Custom Header | Sample 1

Custom Header | Sample 2

Custom Header | Sample 3

Footer Templates:

Custom Footer | Sample 1

Custom Footer | Sample 2

Custom Footer | Sample 3

Custom Footer | Sample 4


Video Tutorial


Creating Custom Header

  1. Go to WordPress Admin Panel
  2. Navigate to Templates on dashboard sidebar
  3. Then click Add New
  4. Choose Header as Template Type on the popped up modal
  5.  Add a name for your Header (it is optional)
  6. Click on the Create Template button

Creating Custom Footer

  1. Go to WordPress Admin Panel
  2. Navigate to Templates on dashboard sidebar
  3. Then click Add New
  4. Choose Footer as Template Type on the popped up modal
  5. Add a name for your Footer (it is optional)
  6. Click on the Create Template button


After creating your header and footer, you can set them as your current header/footer from the Customizer panel. Just follow the below steps:

  • Header

  1. Go to WordPress Admin Panel
  2. On dashboard sidebar, navigate to Appearance > Customize
  3. Click on Header
  4. Go to Header Section and enable Override Header Template
  5. Choose the Elementor Header Template you created
  6. Click on the Publish button to save the changes
  • Footer

  1. Go to WordPress Admin Panel
  2. On dashboard sidebar, navigate to Appearance > Customize
  3. Click on Footer
  4. Go to Footer and enable Override Footer Template
  5. Choose the Elementor Footer Template you created
  6. Click on the Publish button to save the changes

Note : 

Please notice that after you choose your custom designed Elementor header or footer in the Customizer panel, it will replace the default footer/header of the theme. Meaning that, for example, the options of the Header Layout in the Customizer panel will no longer be effective in the theme.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.