Basic Usage
This tool is designed to custom global styles of your site, such as Layout, Spacing, Typography, Color. It is quite similar compared to WordPress Customizer. The core features include:
- Real-time changing style
- Direct Links
- Undo and Redo
- Support Shortcuts
- Creating and Managing Templates
You can access the Live Customizer from any page admin toolbar or simply navigate to Admin Dashboard → Site Options → Live Customizer to open the tool for your front page.

User Interface of Live Customizer
Basic Usage
on the Preview Area, you can notice there are pulse-effect spots called direct buttons. These buttons indicate the areas or elements pointed to can be customised via the Live Customizer. By clicking on those buttons, it will navigate you to the panel where providing options to change the settings of those elements.

Click on direct buttons to navigate to the related panels
Undo/Redo
The Live Customizer supports Undo/Redo feature to help you easily revert your previous actions. You can either click on the buttons on the top of Sidebar or use the two common shortcuts or .
Templates
Not only you can save your data in normal way, the all of the current style can be saved in a template for further usage. The Live Customizer also provides options to manage all the template you have saved.
Save to a Template
To save your current style into a template, simply click on TEMPLATE → Save to a Template → Enter Template Name. After that, click on Save button or hit Enter to complete the action.

Steps to save a Template
Use and Manage your Templates
To open the list of saved templates, click on TEMPLATE → OPEN TEMPLATES or simply press .
After open the Template Panel, to apply a template, simply click on the template name you want to use. To back to the preceding style, simple click on undo button or press .
There are also options to import, export and delete templates. Template(s) is exported and imported in JSON format. For delete action, please notice that this is a permanent action, it means the removed templates cannot be recovered.
Reset to Default
The Live Customizer has an option to reset itself to its default settings. To find this option, click on the undo button on the right site of the panel title.

Please notice that each reset button works independently as its scope extends for only the panel containing that button. It means when you trigger panel A’s reset button, only the options from panel A and its child panels can reset. In the case you want to reset all options to their default values, make sure to use the reset button from the root panel.
Using Shortcuts
It is time-saving to use shortcut keys as an alternative to the mouse when working with the Live Customizer. For instance, you can close any Popup or back to parent Panels by pressing . All shortcuts for Live Customizer are listed below or you can press to open the list while using the App.
General Shortcuts
Shortcut | Description |
---|---|
Save | |
Closes any pop-up window or panel | |
Open preview page | |
Open custom code panel | |
Open template panel | |
Resize preview screen to mobile, tablet, laptop, desktop size | |
Collapse Sidebar | |
Open Help Panel |
Editor Shortcuts
Shortcut | Description |
---|---|
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 |