The floating inspector is a control panel for local appearance adjustments of a selected element. It opens using the gear icon or a supported double-click. By contrast, the Styles panel on the left serves global design.
What you will learn
- Select the correct element on the canvas.
- Distinguish local styling from global settings.
- Configure background, padding, border, or shadow.
- Check changes across various preview widths.
First select what you are changing
The editor operates under a simple rule: first select an element, then open its local settings. A selected element can be an entire horizontal row, a column (Joomla position), or a specific module. Clicking an element highlights it. Open the floating inspector using the gear icon, or by double-clicking where supported by the element. It displays only options suited for that specific type, so you will see different options for a row compared to a menu module, for example.
Common options include background color or image, gradient, margin, padding, dimensions, border, border radius, shadow, alignment, and opacity. Certain elements also support decorative dividers. Do not be alarmed if you do not see a specific option: it usually means the selected element does not safely support it.
Basic workflow
- Click the element you want to modify and check its highlight on the canvas. Use the Styles mode on the left for global tokens, not as an automatic trigger for the local inspector.
- Open the local floating inspector using the gear icon or a supported double-click. Then open a property group, such as background, spacing, or shadow.
- Change one property at a time and observe the canvas. For example, start with background and padding (internal spacing).
- Switch the preview to tablet and mobile views to verify the result. Adjust settings independently only for options that offer responsive controls in the interface.
- Wait for the automatic save state to succeed, then review the clean Preview.
Local change or shared rule?
The floating inspector alters only the selected element. For instance, it is useful when you want just a single card to be blue. If you want to change the primary color of the entire template, open the left Styles panel containing global design tokens. These maintain harmony across headings, buttons, and other components. Thus, they are two related yet distinct tools.
Practical tip
Set global colors and typography first before fine-tuning individual elements. This saves repetitive edits and ensures a more consistent design.
Example: A card that needs highlighting
Imagine three service cards positioned side by side, where the middle card should be highlighted as recommended. Select only its module, apply a subtle shadow, border radius, and a small accent color. The other cards remain unchanged. Next, switch to mobile preview: the cards may stack vertically, and an overly large shadow or padding could consume unnecessary space.
A common mistake is clicking the parent row instead of the module itself. In that case, changing the background affects the entire horizontal section. Keep an eye on the selected element's name in the panel and note its highlight on the canvas before making major changes. If a change affects a larger area than intended, undo the action and reselect the target more precisely.