The editor is divided into a top bar, left tools, central canvas, and right inspector. Once you understand the role of each part, you won't need to look for all the settings at once.
What you will learn
- Navigate the four main areas of the editor.
- Locate tool, device, and history switchers.
- Understand the relationship between the canvas and the right inspector.
- Distinguish the editor theme from the appearance of the resulting template.
Workspace map
Top bar
Contains return to account, sample page switcher, Undo/Redo, autosave status, zoom, device viewports, and editor theme.
Left sidebar
Toggles Preview, Grid, Modules, Styles, and Layers. Each tool corresponds to a different type of work.
Canvas and inspector
The canvas displays a safe preview. Upon opening element settings, the inspector displays only the properties editable for that specific element.
Risk-free first run
- First, look at the autosave status in the top bar. The editor does not have a separate standard Save button.
- Click sequentially on Preview, Grid, Modules, Styles, and Layers. Don't delete anything yet; simply observe what changes in the left panel.
- Return to edit mode and select a row, position, or module. Selecting an element highlights it; open the right inspector via the gear icon in its toolbox or through double-click support. The menu adapts according to the target.
- Switch between desktop, tablet, and mobile. These represent canvas control viewports, not three separate templates.
- Try out light and dark editor themes. This option only changes the workspace interface, not the exported template.
- Test Undo only when the button is active, for instance after a supported structural action. Not every micro-input creates an independent history point.
You can move the right inspector out of the way
The inspector is a floating panel. By grabbing its top header, it can be relocated so it doesn't obstruct the area you are currently editing. Its position is saved locally in your browser. Closing it merely hides it; it does not erase the settings of the selected element.
Simply clicking an element only selects and highlights it. To open its inspector, click the gear icon in the corresponding toolbox; double-clicking is also supported for compatible elements. This prevents accidental panel pop-ups during routine navigation across the canvas.
Intentionally downsize your first task
Avoid attempting to modify the header, colors, columns, and content all at once during your first session. Choose one safe action, such as changing the global primary color or reviewing a single row on mobile. Observe where the change takes effect and how the editor saves it.
If you lose your bearings, return to Preview, close both the left drawer and right inspector, and locate the edited section on a clean canvas. Then select the corresponding tool. Returning to the whole view is faster than opening dialogs at random. Also remember that clicking the close icon hides the panel without deleting the selected element or its settings.
The canvas is not a live website
The preview is an editor representation. Links and forms are disabled, and modules use safe sample representations. Actual content and live behavior are provided by the target Joomla installation.