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.
What you will learn
- Select ready-made row divisions based on your intended content.
- Understand what a preset changes within the grid.
- Safely handle rows that already contain modules.
- Identify areas where column presets cannot be used.
A preset is a quick start, not a restriction
A preset prepares the number of Joomla positions and their desktop widths in a 12-column Bootstrap grid. This allows you to quickly create a single full-width position, two halves, three equal columns, or a layout with a wider center. Once applied, individual values can still be further customized.
Choose according to the content you plan for the row. Long text needs more space than an icon. A header menu and logo often require a different ratio than a trio of product cards. Therefore, first define the purpose of each future column.
Using a preset
- Switch the canvas to desktop and select a standard row in Grid mode.
- Open the column presets menu and review the proportions of each variant.
- Select a division that matches your planned modules, such as 4 + 4 + 4 for three equally important blocks.
- If the editor warns you about positions containing modules, do not rush the change. Cancel it and move the modules first if you do not want to lose them.
- After applying, verify position names and widths, and then set their behavior for tablet and mobile.
When you won't see the option
Presets are designed for the desktop grid. On tablet and mobile breakpoints, they are hidden because you are adjusting the responsive width of existing positions instead. They are not used for the mainbox and certain inner, stacked, or sidebar rows whose structure is protected by the parent layout.
A row can contain a maximum of 12 positions, and the last position cannot be removed. If a new preset uses fewer positions than the current row, this represents a true structural change, not merely a visual hiding.
Example: a row with three 4 + 4 + 4 cards already contains three modules. Switching to 6 + 6 would require removing the third position. First, decide whether you want to delete the third card, move it to another section, or keep it and adjust the widths manually. A preset cannot guess your content intent for you. Check Layers after any such change, as the layer tree is the fastest way to see which positions and modules actually remain in the design.
After confirming, also switch to mobile and tablet previews. A preset sets the desktop foundation; smaller widths can continue using previously saved responsive values for individual columns.
Therefore, do not evaluate the result solely on a wide canvas.
Beware of occupied positions
A preset can remove redundant positions. If they contain modules, the editor will request confirmation. It is safer to move modules first into positions that will remain, and only then change the structure.