Search
Clear search
Close search
Google apps
Main menu

Select and move elements

The Selection tool  lets you select elements either by clicking them, or by dragging a rectangular selection marquee around them. Once selected, the elements can be moved or aligned with other elements.

To move an element or elements on the stage:

  1. Click the selection tool in the toolbar.
  2. Select an element by clicking it, or select multiple elements by drawing a selection marquee around them.
  3. Optionally Shift + click another element to add it to the selection.
  4. Click and drag the selected element.

To nudge an element or elements on the stage:

  1. Click the selection tool in the toolbar.
  2. Select an element by clicking it, or select multiple elements by drawing a selection marquee around them.
  3. Optionally Shift + click another element to add it to the selection.
  4. Nudge the selected element using the arrow keys. Each keypress nudges the selected element one pixel. Use the shift key with the arrow keys to move the selection 10 pixels.
Elements that are locked in the layers section of the animation timeline cannot be selected. 

When the Transform Control checkbox in the tool options panel is checked, the selection tool also lets you change the size and rotation of your selected elements.

Rotating a selection

To rotate a selection:

  1. In the tools panel, click the selection tool.
  2. Make sure the Transform Control checkbox is selected in the tool options panel.
  3. Select the object or objects. Rotation controls (two nested rings) will appear in the middle of the selection.
  4. Optionally change the center of the rotation by dragging the inner ring of the rotation control.
  5. Rotate the selection by dragging the outer ring of the rotation controls. 
  6. Optionally hold the shift key while dragging to constrain the rotation to 45° increments.
Resizing a selection

To resize a selection:

  1. In the tools panel, click the selection tool.
  2. Make sure the Transform Control checkbox is selected in the tool options panel.
  3. Select the object or objects. Selected elements are surrounded by a blue bounding box.
  4. Drag one of the control points on sides or corners of the bounding box.  
  5. Optionally hold the shift key while dragging to maintain the original aspect ratio of the selection.

You can also align and distribute multiple elements on the stage by using the optional controls in the tool options panel.

 
Control Description

Align top

Aligns the elements in your selection with the top-most element.

When Align to container is selected: Aligns the elements to the top of the stage (or the containing div, when nested).


Align vertical center

Aligns the vertical centers of the elements in your selection with the vertical center of the selection.

When Align to container is selected: Aligns the elements to the vertical center of the stage (or the containing div, when nested).


Align bottom

Aligns the elements in your selection with the bottom-most element.

When Align to container is selected: Aligns the elements to the bottom of the stage (or the containing div, when nested).


Align left

Aligns the elements in your selection with the left-most element.

When Align to container is selected: Aligns the elements to the left edge of the stage (or the containing div, when nested).


Align horizontal center

Aligns the horizontal centers of the elements in your selection with the horizontal center of the selection.

When Align to container is selected: Aligns the elements to the horizontal center of the stage (or the containing div, when nested).


Align right

Aligns the elements in your selection with the right-most element.

When Align to container is selected: Aligns the elements to the right edge of the stage (or the containing div, when nested).


Distribute top

Spaces the top edges of the elements in your selection evenly within the selection rectangle.

When Align to container is selected: Spaces the top edges of the elements evenly within the borders of the stage (or the containing div, when nested).


Distribute vertical center

Spaces the vertical centers of the elements in your selection evenly within the selection rectangle.

When Align to container is selected: Spaces the vertical centers of the elements evenly within the borders of the stage (or the containing div, when nested).


Distribute bottom

Spaces the bottom edges of the elements in your selection evenly within the selection rectangle.

When Align to container is selected: Spaces the bottom edges of the elements evenly within the borders of the stage (or the containing div, when nested).


Distribute left

Spaces the left edges of the elements in your selection evenly within the selection rectangle.

When Align to container is selected: Spaces the left edges of the elements evenly within the borders of the stage (or the containing div, when nested).


Distribute horizontal center

Spaces the horizontal centers of the elements in your selection evenly within the selection rectangle.

When Align to container is selected: Spaces the horizontal centers of the elements evenly within the borders of the stage (or the containing div, when nested).


Distribute right

Spaces the right edges of the elements in your selection evenly within the selection rectangle.

When Align to container is selected: Spaces the right edges of the elements evenly within the borders of the stage (or the containing div, when nested).


Space evenly vertically

Moves the elements in the selection to make the vertical space between them equal.

When Align to container is selected: Moves the elements in the selection to make the space between them equal, and fits them across the stage (or the containing div, when nested).

Applies a negative spacing if the total vertical size of your selected elements is greater than the vertical size of the entire selection.

Space evenly horizontally

Moves the elements in the selection to make the horizontal space between them equal.

When Align to container is selected: Moves the elements in the selection to make the space between them equal, and fits them across the stage (or the containing div, when nested).

Applies a negative spacing if the total horizontal size of the selected elements is greater than the horizontal size of the entire selection.

Fluid layout

Checking Fluid layout before using any of the alignment tools creates a percentage based alignment that will keep the elements relatively aligned to each other and to the enclosing container as the container changes size.

Changing layers

Each element in Google Web Designer is at its own level in a stack of all the elements. Elements nearer to the top of the stack cover elements below. To change the layer of each element, you can select the element with the selection tool, and use the following layer buttons:

Layer button Description

Bring forward

Brings the selected element forward one position.


Send backwards

Sends the selected element backwards one position.


Bring to front

Brings the selected element to the front.


Send to back

Sends the selected element to the back.

 

Was this article helpful?
How can we improve it?