Select and move elements

The Selection tool lets you select, move, and transform elements.

Selecting elements

Use the Selection tool in the toolbar to select elements on the stage.

You can also select elements from certain panels:

In the Advanced mode timeline, select the element layer.
In the Outliner panel, select elements in the Outliner's structured tree view.
In the Events panel, right-click an event to select either the receiver or the target element.
In the Dynamic panel, right-click a binding to select the bound element.

To select a single element:

Click the element you want to select.

To select multiple elements:

Drag a selection marquee on the stage 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 the Shift key and drag a selection marquee on the stage around the additional elements you want to select.

Elements that are hidden or locked in the Outliner or 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 the Shift key and drag a selection marquee on the stage around the elements you want to deselect.

Moving elements

To move an element or elements on the stage:

Select the element or elements you want to move.
Drag the selected element or elements to a new location.
- Hold the Shift key while dragging to constrain movement to horizontal or vertical only.

To nudge an element or elements on the stage:

Select the element or elements you want to nudge.
Press an arrow key. Each key press nudges the selection one pixel in the direction of the arrow key.
- Hold the Shift key while pressing an arrow key to move the selection 10 pixels.

Resizing elements

When the Transform control checkbox in the tool options panel is checked, the Selection tool lets you resize your selected elements.

To resize a selection:

Click the Selection tool in the toolbar.
Make sure the Transform control checkbox is selected in the tool options panel.
Select the object or objects. Selected elements are surrounded by a blue box.
Drag one of the control points on the sides and corners of the selection box.
- Hold the Shift key while dragging to maintain the original aspect ratio of the selection.

Rotating elements

When the Transform control checkbox in the tool options panel is checked, the Selection tool lets you rotate your selected elements.

To rotate a selection:

Click the Selection tool in the toolbar.
Make sure the Transform control checkbox is selected in the tool options panel.
Select the object or objects. Rotation controls (two nested rings) appear in the middle of the selection.
Optionally, move the pivot point of the rotation by dragging the inner ring of the rotation control.
Rotate the selection by dragging the outer ring of the rotation controls.
- Hold the Shift key while dragging to constrain the rotation to 45° increments.

Positioning elements relative to other elements

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

Icon	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 edge	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, distributed evenly across the container, and spaced evenly within the container.

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

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:

Icon	Layer rearrangement	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 helpful?

How can we improve it?