Editor Basics

This article introduces the main features of the Widget Customization Editor. The editor is designed to configure and customize widgets efficiently, with all necessary tools available on a single page. The page is divided into four main sections: Elements Tree, Toolbar, Widget Preview, and Sidebar. Below is a detailed exploration of each element.

Elements Tree

The Elements Tree provides a hierarchical view of the widget’s structure. It allows:

Visualization of the widget’s elements in a tree format.
Selection, expansion, or collapsing of elements for easier navigation.
Direct modification of elements from the tree.

Any changes made in the Elements Tree are reflected in real-time on the Widget Preview. For advanced usage, refer to the detailed documentation.

Toolbar

The Toolbar is located at the top of the editor and is divided into three key sections:

1. Menu

The Menu provides access to essential actions and tools:

Pages:
- Save and Publish: Save the current configuration or publish it to make it live.
- Version History: View and manage previous versions of the widget. (Learn more in the documentation.)
- Templates: Choose a starting point for widget customization. Templates can be switched at any time.
Tools: Each tool corresponds to a section in the Sidebar, allowing quick access to editing features.
Help: Access documentation on customizing widgets or contact the support team for assistance.

2. Version Info

This section displays the currently published version of the widget and indicates whether unsaved changes exist.

3. Save & Publish Actions

This section is used to save progress or publish the widget to apply changes live. Always ensure changes are saved before navigating away from the page.

Widget Preview

The Widget Preview is the central area of the editor, displaying real-time updates as the widget is configured. Key features include:

Interactive Preview: Interact with the widget to test its behavior.
Size and Scale Controls: Adjust the widget’s dimensions and zoom level for a better view.
Preview-Specific Configurations: Set user-specific or language-specific settings for testing.

For more details, refer to the documentation.

Sidebar

The Sidebar is located on the right side of the editor and is collapsed by default. It includes the following tools:

Properties Editor: Edit properties of the selected component from the Elements Tree.
Theme Editor: Customize the widget’s colors and styles. Read more about the editor.
Font Editor: Adjust font settings for the widget.
HTML Editor: Add custom HTML scripts to the widget.
JSON Model: View and edit the raw JSON configuration of the widget. Use this feature with caution, as it directly affects the widget’s structure.

Tips for Using the Editor

Save Frequently: Always save changes before navigating to other pages.
Publish to Apply: After saving, publish the widget to make the changes live.
Explore Templates: Start with a pre-designed template to speed up the customization process.

For more in-depth guidance, refer to the comprehensive documentation.