Grids guide and Snap lines

You can use grid guides and snap lines to better arrange and align objects on a page. They appear as nonprinting lines and are useful for laying out elements symmetrically.

By default, these editor tools are enabled for your editor.

Understanding the Grids guide in Foxify Page Editor

The Grids guide is a visual aid in the Foxify Page Builder that helps designers align elements accurately within a layout.

When activated, it overlays a grid pattern onto the page, serving as a framework to organize your content consistently and symmetrically.

Understanding the Snap lines in Foxify Page Editor

Snap Lines helps you get a precise alignment of elements on your page.

As you move elements within your canvas (such as text, images, or buttons), the Snap Lines will appear automatically, helping you align elements relative to one another or to the Grids guide.

How to enable or disable Grids guide and Snap lines

Steps:

  1. In the Editor, open the Editor preferences.

  2. Check/uncheck the option:

  • Show grids guide: To enable/disable the grids guide on the editor's canvas.

  • Show snap lines: To enable/disable snap lines when dragging.

The snap lines will be disabled automatically when the grids guide is disabled.

Best practices

  • Align key elements (e.g., headers, images, and call-to-action buttons) to the grid lines for a clean, professional layout.

  • Combine the Grids Guide with Snap Lines to ensure that objects not only follow the grid but also align with other nearby objects.

  • Regularly preview your page across different devices (desktop, tablet, mobile) to ensure the grid-based layout looks good on all screen sizes.

Last updated