Guides: rulers, grids & columns

The guides and grids can be used to assist you when you are designing your H5mag. The guides and grids are only visible in the editor, not in the preview mode or your published project.

     Rulers  

H5mag has rulers which are hidden by default. To enable rulers, click the ruler icon and check the option “Enable rulers”. Use the color picker (or type the RGB or Hex color code) to change the color of your rulers. You can click anywhere on the ruler to add manual guides and they will stay visible as long as the “Enable Ruler” option is checked. To move a single guide, grab it inside the ruler and drag it to the desired place. While you drag, a number will appear to show the px distance at which the guide is placed. To remove a manual guide, drag the guide off the canvas area.

     Grids  

Check the option “Enable grids” to display grids in the editor. The default grid size is 40px and has thick lines every 4 squares.

To adjust the grid size, type the new desired width and height. By adjusting the ‘Thick line’ number, you adjust how often a thick line is used.

Use the color picker (or type the RGB or Hex color code) to change the color of your grid.

    Layouts: columns & rows

Check the option “Enable columns & rows” to display columns and rows in the editor. You can adjust the number of columns and rows and the gutter width and height in the balloon. Assets will snap to the guides. 

Change the display type according to your preference. When selecting the stroke option, the chosen layout will be outlined by guides. The overlay option displays the layout as an semi-transparent overlay.

Use the color picker (or type the RGB or Hex color code) to change the color and transparency of your layout.