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 that 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 that you want to select.
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 that you want to deselect.
Moving elements
To move an element or elements on the stage:
- Select the element or elements that you want to move.
- Drag the selected element or elements to a new location.
- Hold the Shift key while dragging, to constrain movement only to horizontal or vertical.
To nudge an element or elements on the stage:
- Select the element or elements that 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 tick box in the tool options panel is ticked, the Selection tool lets you resize your selected elements.
To resize a selection:
- Click the Selection tool in the toolbar.
- Make sure that the Transform control tick box 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 tick box in the tool options panel is ticked, the Selection tool lets you rotate your selected elements.
To rotate a selection:
- Click the Selection tool in the toolbar.
- Make sure that the Transform control tick box 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.
- 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 centre | Aligns the vertical centres of the elements in your selection with the vertical centre 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 centre | Aligns the horizontal centres of the elements in your selection with the horizontal centre 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 centre | Spaces the vertical centres 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 centre | Spaces the horizontal centres 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 space between them equal. If the total vertical size of the selected elements is greater than the vertical size of the selection rectangle, negative space is applied. | |
Space: horizontally | Moves the elements in the selection to make the horizontal space between them equal. If the total horizontal size of the selected elements is greater than the horizontal size of the selection box, negative space is applied. |
Align to container
When the Align to container tick box is ticked, the alignment, distribution and space 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 centre, 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.