Zoom changes the working magnification of the canvas. Rulers and guides help visually compare element edges, but they do not alter the final Joomla layout or export.
What you will learn
- Zoom in or out on the working canvas.
- Use horizontal and vertical guides.
- Move, remove, or clear all guides.
- Distinguish an editor helper tool from actual layout settings.
Zoom is a magnifying tool, not page width
The zoom controls change the display in 10% increments. The minimum value is 50%, the maximum is 140%, and reset returns to 100%. Zooming out is useful for reviewing a long page, while zooming in aids in detailed alignment. It does not alter Bootstrap columns, font size settings in the configuration, or the final exported code.
Use zoom in conjunction with the Desktop, Tablet, and Mobile switches. The device determines the control width of the canvas; zoom simply controls how large the canvas appears on your screen.
Working with rulers and guides
- Stay in edit mode and enable rulers. These visual aids are not active in clean Preview mode.
- Drag a horizontal or vertical guide from the respective ruler to the location you want to evaluate.
- Reposition the guide by dragging it. For instance, use it to check whether headings in two different sections align to the same axis.
- Remove an unneeded guide by dragging it off the workspace back toward the ruler.
- If the canvas gets cluttered, use the control (small checkbox) in the upper right corner of the rulers to clear all guides.
- Finally, set actual spacing in the Grid or inspector. A guide itself will not snap or move an element.
A new guide will not be created if it is a duplicate, lands outside the canvas, or exceeds the limit. Rulers and guides are temporarily disabled during module dragging to avoid interfering with drop zones.
Guide positions are not part of the final template. Visitors will not see them, and they are not included in the export.
Practical alignment example
Suppose you have two card sections and their headings do not appear to start on the same vertical axis. Adjust zoom as needed, drag a vertical guide to the edge of the first section heading, and scroll down to the second. If the edges don't align, do not try to snap content to the guide. Select the relevant row, position, or module and compare its padding and margin in the inspector.
Repeat the same check on tablet and mobile viewports. Responsive values may align correctly on desktop, but inherit differently at smaller widths. Once finished, remove the guide, reset zoom to 100%, and verify the result in clean Preview mode without helper tools.
When comparing alignments, always take note of the active device setting and zoom percentage. Two differently scaled views may look similar on screen, yet represent distinct review conditions. Resetting to 100% provides a consistent baseline.
Guides only indicate, they do not enforce
Unlike design software, guides do not guarantee exact CSS values or automatic snapping. Treat them as visual reference aids and verify final spacing across responsive previews.