Grid, modules and synchronization

Four subtle settings decide whether a section feels airy, compact, or stretches across the entire browser. You will learn to use them without CSS knowledge.

A row defines an area of the page, a position defines a place for a module, and Bootstrap numbers define the width. Once you separate these three concepts, building a template starts to make sense.

You don't have to calculate every column manually. A preset prepares common row layouts in a single step, letting you focus on the content.

A layout that looks great on a large monitor needs different proportions on a phone. The editor allows you to set the width and visibility of positions for individual screen sizes.

A sidebar is a side area next to the main content. It can carry filters, supplementary navigation, or related information, but it should not compete with the most important content in the middle of the page.

The catalog is a range of building blocks that the editor understands. It helps you find a menu, logo, content block, or e-commerce element without needing to know their technical names.

Once you have a row and a Joomla position prepared, you can insert the first functional block into it. The editor checks the drag-and-drop action to prevent the module from ending up in an invalid or hidden area.

Selecting an element determines which item you are working with, but it does not open the right inspector on its own. You display the module settings using its small gear icon, and the panel then offers only the values that the application knows for this type and can safely save.