Home Page

Quick Tour

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

Builder App

The Page Builder supports all pages, post and custom post-type like portfolio. Once activating the Page Builder from an entry, you will be directed to the main app area containing 4 main working tabs:



Layout

We organized layouts through grid systems built by a series of sections, rows and columns that house your content.

Note: Some special Widgets like Grid or Aside Image can host other Widgets.



Basic Hierarchy with Section → Row → Column


Widgets

Widgets are the web components like flip boxes, images or icons. A web page simply is a combination of the components. In the system, Sections, Rows and Columns also are those components but they play a role as the core elements.

To use Widgets, you must already have at least a column available in your Layout since it is where to house your Widgets. If so, simply click on the Widgets tab, then drag and drop your wished widget into that column.

Once your Widget is created, simply click on it to navigate to Editor panel then start to style the Widget.



Templates

Kong Page Builder provides options to save and manage both layout and widget templates.

Layout Templates

You are able to save your current layout containing all sections into a Library. Simply navigate to Library Tab click on Floppy Disk Icon, after that enter your template’s name then hit enter or click on the save button.

Widget Templates

Besides saving all current layout, you also are able to store the current display of a widget into its own library. There are three ways to save a widget, one from the editor tab, the second is to right click on a widget and click on save as template. However, the fastest way is to hover on the widget you want to save, then press . After that, fill the template name and hit enter to complete the action.

Pre-designed Cards

Kong Page Builder is shipped with 180+ cards to help you quickly lay out content and functionality on a page in minutes.

To open the Wireframe Popup, click on the Plus Circle Button on the bottom right of your screen or using the Shortcut.



Visual Layer

When you hover your mouse on a widget, a blue overlay will appear on the top of the widget called Visual Layer. The Visual Layer is extremely useful in editing and visualizing the scope of Widgets and filtering the structure of your Layout (press or , , , ).

However, since those Layers are displayed above the widgets, you won’t be able to hover on some components having ‘hover effect’ like buttons. In that case, you must turn off the Visual Layers to be able to hover on the buttons. To do so, click on the Visual Switch button on the bottom of the app’s sidebar or simply press .

Inline Text Editor

Besides the WYSIWYG editor from the app’s sidebar, the Page Builder also supports Inline Text Editor. To enable the mode, you can either click on the pencil icon on the right side of your screen or use the Shortcut .



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 wireframe pop-up
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 Editor Mode
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
Open Item Template
Scroll to the edited Widget and switch editor tab
Resize column width

Highlight Layer

ShortcutDescription
Show all layer
Show section layer
Show row layer
Show column layer
Show item layer

Other

ShortcutDescription
on itemOpen the map of the clicked item
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