The five tools in the left sidebar do not divide the template into five separate files. Each simply offers a different perspective on the same design and a distinct set of tasks.
What you will learn
- Select the correct tool based on your task.
- Distinguish between structure, modules, and appearance.
- Use Layers to navigate more complex layouts.
- Return to clean Preview mode to inspect your final result.
What each mode does
| Tool | Use it when… | Typical action |
|---|---|---|
| Preview | you want a clean view without editing controls | inspections of page flow and appearance |
| Grid | modifying rows, zones, positions, and columns | adding a section or adjusting responsive column widths |
| Modules | searching for a new functional block | dragging a menu, logo, or Custom HTML into position |
| Styles | adjusting global appearance across the entire template | changing design tokens, palette, typography, gradients, or global CSS |
| Layers | you need a tree view of currently visible targets | selecting, moving, or reordering a module |
Practical workflow loop
- In Grid mode, set up your row and required Joomla positions. Build the structure before working on content.
- In Modules mode, locate a supported module and drag it into an active position. Simply clicking a module will not insert it.
- Select the inserted module on the canvas or within Layers. Clicking alone will not open the right inspector; open its local settings and appearance using the gear icon in the toolbox or double-click where supported.
- In Styles mode, fine-tune global tokens, color schemes, typography, gradients, or global CSS. Local appearance for a specific row, position, or module belongs in the right floating inspector.
- In Layers mode, verify positioning and order. The tree displays active and visible rows, positions, and modules for the current preview.
- In Preview mode, inspect the overall result and then switch viewports for tablet and mobile.
Styles and the right inspector operate at different scopes
The left Styles tool works with global template appearance. Here you will find color schemes, brand, text, and surface tokens, typography, container width, shared spacing, radii, borders, gradients, text direction, sample images, and global CSS. Changing a global token can instantly affect multiple modules and sample pages simultaneously.
By contrast, the right floating inspector modifies a selected row, position, module, or preview element. It displays only properties permitted by its safe definition. Clicking an element highlights it without opening the inspector; use the toolbox gear icon or supported double-click instead. For a consistent design, configure global defaults in Styles first and create local exceptions only where genuinely needed.
Simply switching between left sidebar tools does not change the layout. Modifications occur only through specific user actions, such as inserting a module, editing grid settings, or confirming a value in Styles or the inspector.
Layers provides a single unfiltered tree of visible targets
Group filters are not available in the current interface. Furthermore, the tree excludes disabled rows and elements hidden in the currently selected responsive viewport. Enable the missing element or switch viewports to reveal it.