updated on 14 January 2019 | reading time: 3 minutes

Design Aids

Anchoring

Introduction

Anchor points control how you resize and position the content on the canvas. They provide an opportunity to create a responsive design on the fly or test your designs for different devices quickly and easily.

The Anchor Panel is located above the Appearance panel inside the Inspector Panel.

Interface

The system of anchors in Gravit Designer has an intuitive interface. Six icons are divided into two groups:

(1) Horizontal anchors are helpful when you are scaling the width of the canvas.

(2) Vertical anchors are useful when you are scaling the height of the canvas.

Click on the anchor to select it. The background of the selected anchor is lighter than the background of the deselected one if you are using the dark theme.

The opposite is true for the Light (Default) Theme.

Use of Anchors

With anchors, you can tell whether an element should stick to the particular position on the canvas (or in a frame or a layer group) or stretch/shrink when you are resizing the canvas.

Note: Anchoring also works inside the Layer groups (in frame mode) and Groups (in frame mode), but for simplicity, we will use canvas as an example.

Horizontal anchors

Use the horizontal anchors to pin an element to one of the sides or the center of the canvas.

To pin an element to the left, select the left anchor.

Select the middle one to pin to the center of the canvas.

The right anchor pins an element to the right side of the canvas.

Select both the right and the left anchors to stretch/shrink an element horizontally.

Horizontal anchors in action

Imagine you are designing a list of options/controls.

You want to present it to your client at three different sizes: 450px, 800px, 1200px. You can do it quickly by using Anchors.

  1. Pin the options (textual elements) to the left (1).
  2. Pin the controls (sliders) to the right (2)

  3. Select all the panels (backgrounds) and pin them to both left and right to stretch them.
  4. Click on the empty portion of the document to bring up the Page panel. Head over to the Width text field(1) and type a new size of the canvas, then click Enter.

Notice how the elements respond to resizing.

Vertical Anchors

Use the vertical anchors to pin an element to the top, bottom or vertical center of the canvas.

To pin an element to the top, select the left anchor in the group.

Select the middle one to pin to the vertical center of the canvas.

Right one pins an element to the bottom of the canvas.

Select both the right and the left anchors to stretch/shrink an element vertically.

Vertical Anchors in Action

A typical website comprises of several pages:

  • Homepage (Landing page)
  • About
  • Contact
  • Maintenance/404 page

All of them have the same header and footer but different content, so the height of the main area may vary dramatically.

Let me show you how to design several pages with the same position of the footer and header, but a different height of the content area using Vertical Anchors in Gravit Designer.

  1. Pin the header to the top by clicking the Left anchor (1)
  2. Pin the footer to the bottom by clicking the Right anchor (3)
  3. Stretch the content area by selecting both Right and Left anchors (2) in Vertical Group.
  4. Click on the empty portion of the document to bring up the Page panel. Change the height of the canvas by typing inside Height field and click enter to foster the changes.

Notice how the elements respond to the different page height.