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.
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.
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.
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.
Kong Page Builder provides options to save and manage both layout and widget 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.
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.
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.
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 .
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 .
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 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|
|Open Editor Mode|
|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|
|Open Item Template|
|Scroll to the edited Widget and switch editor tab|
|Resize column width|
|Show all layer|
|Show section layer|
|Show row layer|
|Show column layer|
|Show item layer|
|on item||Open the map of the clicked 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|