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 +Z or ++Z.

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 O-I.

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

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 ESC. All shortcuts for Live Customizer are listed below or you can press ? to open the list while using the App.

General Shortcuts

Editor Shortcuts