Fixed mode
The Fixed mode allows the definition of a structure of columns and rows, upon which to arrange the individual Column blocks.
Quick Presets
Presets are a quick way to change the layout structure. By clicking on a preset button, elements will be arranged accordingly: for example, clicking on the 4-columns button, will arrange Column blocks on a 4-columns grid.
If you have more than four Column blocks, the extra blocks will be placed on a new row that will be automatically created: in fact, clicking on a preset button will effectively change the values of the Base Grid, as well as the coordinates and dimensions of each Column block.
If you’re editing contents in a Media Query different than Desktop, keep in mind that applying a preset will also enable the custom override state.
Base Grid
With the Base Grid control you are able to precisely design a grid layout, specific to each Media Query defined in the Settings, picking custom values for columns and rows.
Area positions
By clicking on “edit area positions” button you can alter the dimensioning and positioning of each individual Column block, within the columns and rows boundaries defined by the Base Grid control.
When in Advanced Editing mode, you will be able to perform the following actions on each Column block:
- Drag blocks around in the grid.
- Resize blocks by dragging the handles on each side of the block.
In either case, blocks will snap automatically on the grid cells.
When dragging Column blocks, holding the shift key when releasing a Column block onto another of the same size, will automatically swap their positions.
Focus mode
In some cases, you may end up with two or more areas that overlap, making it difficult to interact with them. To address this issue, we have created two ways to edit areas in complex layouts:
-
Double-clicking on an area will enable “focus mode.” This means that the area, even if it’s underneath another area, will always be on top of the others, and its controls will take priority over the other areas.
-
Right-clicking on an area will display a dropdown menu that allows you to select which area to work with. You’ll notice that the area’s border becomes thicker, indicating that it is also in "focus mode.
Need more help? Contact us
Updated