Home Page

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.


Header Manager

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

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.

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


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.



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 Preset

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.


Header Templates

Header Templates


Shortcuts

To show available shortcuts, click on PLUS → Help or simply press

General

ShortcutDescription
Save
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
Collapse Sidebar
Open Help Panel as it is

Editor

ShortcutDescription
Undo, Redo
Copy
Cut
Insert to the Bottom of parent or insert after the same level
Insert to the Top of parent or insert before the same level
Duplicate
Save as Template
Show parent container(s) of the hovered item

Other

ShortcutDescription
on colorpicker circleOpen the color collection
on unit inputEqually change in pair left and right or top and bottom
on unit inputEqually change value of left, right, top and bottom
on editor panelOpen Jumper Tabs