Live Editor interface

The Live Editor is a real-time, drag-and-drop interface used to build and customize your website. It allows you to design layouts visually, without writing code, and see changes instantly as you make them.

The interface is divided into two primary areas, the Sidebar Panel on the left and the Canvas on the right. Below is a detailed breakdown of the components within each area.

1

2

3

4

5

Sidebar panel

Canvas

Sidebar Panel

Located on the left, the Sidebar Panel is your main control center. It contains all the widgets, settings, and global controls needed to build and manage your page.

• Top Bar: This bar contains the main navigation for the editor, allowing you to access global settings via the menu icon or return to the widgets list.
• Widget selection: Here you can find all the available content elements (widgets). Simply drag a widget from this panel and drop it onto the canvas to add it to your page.
• Bottom Bar: This fixed toolbar provides access to essential page-level functions, such as viewing page settings, switching to responsive mode, checking revision history, and saving your changes with the Update button.

Canvas

The Canvas is the main visual preview area on the right. It is where you will construct your layout and see a live representation of your page.

• Page Layout: This is your live working area where you can see a real-time preview of your page. Any changes you make in the sidebar are reflected here instantly.
• Add New Section: This placeholder appears wherever you can add new content. Click the plus icon to create a new, empty section, or click the folder icon to insert a saved template from your library.

Explore the Live Editor Components