Home Page

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:

You can access the Live Customizer from any page admin toolbar or simply navigate to Admin DashboardSite OptionsLive Customizer to open the tool for your front page.


Live Customizer Preview

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.


Live Customizer Direct Buttons

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 TEMPLATESave to a TemplateEnter Template Name. After that, click on Save button or hit Enter to complete the action.


Live Customizer Template Saving

Steps to save a Template


Use and Manage your Templates

To open the list of saved templates, click on TEMPLATEOPEN 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.


Live Customizer Reset

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

ShortcutDescription
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

ShortcutDescription
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