You can choose to import a header from the included premade header templates, to do this go to your WordPress Panel > Essentials > Demo Import > Headers (see below):
Note: To find the new pixfort Header Builder interface, please make sure first that your theme is updated to version 3.2.13 or newer. To update the theme, check this article
To create a new header for your website, open your WordPress admin panel, then go to Theme Builder » Headers » Add New Header Item and give the header a name.
After that, start building the header using the drag and drop header builder.
You can add new elements by dragging and dropping them into the header areas. If you wish to delete an element, simply drag and drop it into the Delete area under the header areas in the header builder.
You can edit the elements by clicking on them, and you can edit the columns or header area (background color, text color..) by clicking on each Settings button, for example:
For example, you can edit the Logo Element by clicking on it:
Another example is the Menu element, where you can open the Settings panel by clicking on the Menu element:
Then you can change the available options, for example:
How to create Menus?
For detailed information about creating and editing Menus you can check this article from our knowledge base:
How to change menu and dropdown colors?
For detailed information about changing menu and dropdown colors
you can check this article from our knowledge base:
How to add Social icons to header?
To add social icons in the header, first, you need to set your social network accounts links in the Theme options > Layout > Social icons.
After setting the links in the Theme options you will notice that the social icons will appear automatically in the header after adding the Social element in the header builder (WordPress admin panel > Theme Builder > Headers > Edit your header) .
For more information about adding social icons to your website you can check this article:
Header logo
You can add your logo to the header by adding the Logo element.
The default logo of your website and the Scroll logo which are set in Theme Options > General Settings > General will appear automatically, however, you can always override these images (Default Logo and Scroll Logo) inside the header builder by clicking on the Logo element to open its options.
Header Style
Below the Header Builder you can find the options to control the Header Style for Desktop (e.g. Transparent, Boxed, etc…), in addition to the option to choose the Heading (Secondary) font for the entire header elements:
Important: The Header Style option can be set for Desktop, or Mobile/Tablet by switching the Header builder to the Mobile/Tablet mode.
Note: If you choose the Overlap style for the header, please make sure that the header areas’ background are transparent or have opacity color to show the content beneath it. You can access the Area settings (e.g. Main header area) by clicking on the settings button.
Sticky Header Areas
Starting from version 3.2.13, you can set separately each area of the header to be sticky from the Settings Panel of each area, for example:
Manage Columns in Desktop Header Areas
Starting from version 3.2.13, you can add and remove columns from each area in the desktop header. Each area can have between 1 and 3 columns. To add a new column click on the “+” icon, for example:
And you can find the settings panel of each column as following:
And you can delete each column as following:
Tablet & Mobile Header Version
You can build the mobile header version by switching to the mobile mode and using the header builder in the same way.
Choose Global Website Header
After you finish building the header save the changes then go to Essentials theme options, and open Layout » Header and choose the header that you just created and save the changes, after that the header will be set as default global header for your website.
Display Header on Specific Pages
To display a header on specific pages instead of using the default global header for your entire website, simply edit the header, choose the desired Display Conditions, and save your changes.
Disable Header on a Specific Page
To disable the header on a specific page, open the page in WordPress editing mode, set the Page Header option to Disable, and save your changes.
