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.
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.
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.
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.
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.
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.
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 .
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 .
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.
To show available shortcuts, click on PLUS → Help or simply press
|Closes any pop-up window or panel, like this one|
|Open preview page|
|Open custom code panel|
|Open layout margin setting|
|Open library pop-up|
|Switch between map, widgets, editor, library tab|
|Resize preview screen to mobile, tablet, laptop, desktop size|
|Turn on/off Visual View|
|Open Help Panel as it is|
|Insert to the Bottom of parent or insert after the same level|
|Insert to the Top of parent or insert before the same level|
|Save as Template|
|Show parent container(s) of the hovered item|
|on colorpicker circle||Open the color collection|
|on unit input||Equally change in pair left and right or top and bottom|
|on unit input||Equally change value of left, right, top and bottom|
|on editor panel||Open Jumper Tabs|