Editing shows selections, handles, and controls. Clean Preview hides them so you can better evaluate the final result. Both modes work with the exact same template configuration.
What you will learn
- Distinguish the editing canvas from the clean preview.
- Know what can and cannot be tested in Preview mode.
- Safely transition between editing and reviewing.
- Avoid confusing the preview with a live, published Joomla website.
Two perspectives on the same design
In edit mode, you can select rows, positions, and modules. The canvas displays borders, toolboxes, drop zones, and the right inspector. These elements assist you while working, but they are not part of the final template.
Preview hides editing handles and closes working panels, allowing you to better see proportions, colors, and layout structure. In the standalone read-only preview, selection and saving are locked. The editor preview utilizes an isolated document.
How to use the preview
- Complete a small logical section—such as a single row or module settings—and wait for the saved status.
- In the left sidebar, select Preview by clicking the eye icon. Control frames and editing panels will hide.
- Scroll through the page from top to bottom. Inspect page flow, contrast, whitespace, and whether the main content is easily recognizable.
- Test simulated expansion of a supported module menu. This is purely to inspect the visual appearance of submenus.
- Switch between desktop, tablet, and mobile views, and inspect the same section again.
- Exit Preview mode to resume editing. Exiting returns to general Edit mode, not necessarily to the specific tool that was open prior to Preview.
Why links and forms do not respond
The editor blocks preview links, forms, and other active interactive elements. Clicking will not navigate away to external pages or submit sample forms. This is not a bug in the output template, but a built-in safety feature of the working preview.
Similarly, the preview does not execute real Joomla plugins or live module content. It is designed specifically for visual design evaluation.
Three quick checks without clicking content
In clean Preview, focus first on visual hierarchy: is it clear at first glance what is a heading, a primary call to action, and body text? Next, observe rhythm: are there excessively large empty spaces or overcrowded rows? Finally, check continuity: does the flow lead smoothly from header through main content to footer without abrupt jumps?
These evaluation points do not require working links. If you spot an issue, return to Grid for structure, Styles for global values, or open the right inspector to adjust a specific element.
Preview is not a live public page
What you see on the canvas is a safely assembled representation of your design. Do not use it as proof that the site is live or that a live module on another Joomla site will function without further configuration.