Search
Clear search
Close search
Google apps
Main menu
true

Select and move elements

The Selection tool lets you select and move elements.

Selecting elements

Use the Selection tool  in the toolbar to select elements.

To select a single element:

  • Click the element you want to select.

To select multiple elements:

  • Drag a selection marquee around the elements you want to select.

To add additional elements to the current selection:

  • Shift + click each individual element to add to the selection.
  • You can also hold down the Shift key and drag a selection marquee around the additional elements you want to select.
Elements that are locked in the layers section of the animation timeline in Advanced mode cannot be selected.

To deselect elements:

  • Shift + click each individual element to remove from the selection.
  • You can also hold down the Shift key and drag a selection marquee around the elements you want to deselect.

Moving elements

To move an element or elements on the stage:

  1. Select the element or elements you want to move.
  2. Drag the selected element or elements to a new location.

To nudge an element or elements on the stage:

  1. Select the element or elements you want to nudge.
  2. Press an arrow key. Each key press nudges the selection one pixel in the direction of the arrow key. You can also hold down the Shift key while pressing an arrow key to move the selection 10 pixels.

Transforming elements

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.

To rotate a selection:

  1. Click the Selection tool in the toolbar.
  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. You can hold down the Shift key while dragging to constrain the rotation to 45° increments.

To resize a selection:

  1. Click the Selection tool in the toolbar.
  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 the sides and corners of the bounding box. You can hold down the Shift key while dragging to maintain the original aspect ratio of the selection.

Positioning elements

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

 
Control Description

Align: top

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


Align: vertical center

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


Align: bottom

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


Align: left

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


Align: horizontal center

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


Align: right edge

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


Distribute: top

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


Distribute: vertical center

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


Distribute: bottom

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


Distribute: left

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


Distribute: horizontal center

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


Distribute: right

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


Space: vertically

Moves the elements in the selection to make the vertical spacing between them equal. If the total vertical size of the selected elements is greater than the vertical size of the selection rectangle, negative spacing is applied.


Space: horizontally

Moves the elements in the selection to make the horizontal spacing between them equal. If the total horizontal size of the selected elements is greater than the horizontal size of the selection box, negative spacing is applied.

 

Align to container

When the Align to container checkbox is checked, the alignment, distribution, and spacing controls will position elements in relation to the containing element, rather than the selection rectangle. For example, the selected elements will be aligned with the container's edge or center, be distributed evenly across the container, and be spaced evenly within the container.

If the selected elements aren't nested, the stage acts as the container.

Fluid layout

When the Fluid layout checkbox is checked, the alignment, distribution, and spacing controls will set positions using percentages. With fluid layout, elements remain relatively aligned to each other and to the enclosing container when the container changes size.

Rearranging layers

Each element in Google Web Designer behaves like a layer that is arranged in a stack. Elements nearer to the top of the stack cover elements below. To shift the layer of an element, 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 (on top of one more element).


Send backward

Sends the selected element backward one position (below one more element).


Bring to front

Brings the selected element to the front (on top of all other elements).


Send to back

Sends the selected element to the back (below all other elements).

You can also use the timeline in Advanced mode to rearrange layers.

Was this article helpful?
How can we improve it?