Site Options

Extension

Miscellaneous

Changelog

Quick Tour

This chapter will walk you through the most important concepts behind Kong Header Builder and explain how you can get started quickly with the plugin.

Header Manager

Basically, Header manager functions similarly to WordPress Posts List as it performs CRUD actions like creating, updating or removing headers. However, we designed it to be a Single Page application to handle those tasks without refreshing your browsers.

Dashboard → Header Manager

Unlimited Headers

There are unlimited headers you can create but normally a website has one or two fixed-designed headers. For example, your site might have two headers, one with transparent background and white text for pages contains a hero image, one with white background and black text for the other pages. Sometimes, you may need to design another Header for some special pages like the maintenance page or 404 page.

Assigning Headers

You can assign a specific header for any page, any single post type and its archive page.

There is a option field called Primary Header on the right side of the Header Manager, it simply is the default header for your site. If you create a new page or don’t select any header for a post type, these pages will always select the primary header to display.

For pages, you can either choose to display a header or not. If you wish create a page without a Header, simply select no header value from the Header metabox on the right side of the page’s admin area.

Select to display different headers for any page

Builder App

Navigation Types

Although the term navigation normally indicates links or menus of a website, we defined it as the area contains links, information data and typically is used in multiple pages. Based on the definition, there are two kinds of navigation you can build with our Header Builder. They are Horizontal Nav and Vertical nav.

Horizontal Nav: a traditional header, normally displayed on the top of a website, where the inside elements is organized horizontally.

Vertical Nav: a fixed aside area, displayed on the right or the left of a website, where the inside elements is organized vertically.

You can either choose one or both to be in the same design context. Multiple creation of one type is also allowed.

Header Builder First Screen

Nav Builder Area

One you create a nav, simply click on it to open its builder area. For both vertical and horizontal nav, the UI is similar with four main tabs.

Map: the visual hierarchy of a nav, displaying the nav’s containers and its nested widgets. You can drag and drop to move the positions of widgets or perform actions like deleting or editing widgets from the tab.

Widgets: containing common web components like logo or menu to build the content of a nav. Be noticed that, the widgets from the horizontal nav are different from the ones from vertical nav.

Editor: the area provides UIs to change settings and styles of a dropped widget.

Nav: containing options to change settings and styles for the nav itself.

Horizontal Nav Builder Area

Presets and Templates

Using presets and templates helps quickly prototype your header. To open the presets/templates panel, click on the Plus Button on the right side of the builder area or using the hotkey .

Presets

Currently, we include 9 pre-designed presets and will keep adding new more presets for the next specific new versions of the Plugin. To import a preset to your layout, simply click on its preview image.It will take a short time to download the preset from your Hosting Serve until successfully presented. In the case the preset does not meet your need, simply click undo button or press .

Header Presets

Templates

You can easily save your current header into a template for later usage. There are also options to export and import templates for backup or sharing purposes.