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:

• Map: the visual hierarchy of a nav, displaying the layout’s sections, rows, columns 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 text or icons, currently the app supports nearly 70 widgets.
• Editor: the area provides UIs to change settings and styles of a dropped widget.
• Library: where to save and manage all of your saved layout templates.

Layout

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

• Main Layout: contains one or more Sections
• Each Section: contains one or more Rows
• Each Row: contains one or more Columns
• Each Column: contains one or more Widgets

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 ++S. 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 O - I 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 +1, +2, +3, +4).

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 +E.

Shortcuts

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

General

Editor

Highlight Layer

Other