Change properties

Every element in Google Web Designer has a set of properties such as size, position, and style. While many elements have similar properties, some elements, such as components, have properties that are specific to them.

You can view and edit properties in the Properties panel.

Common properties

Many elements share these common properties. Some elements may not have the whole set of common properties.

Element ID

Property Description
Element Displays the element type. Element types are created by default for each visual element or component. Custom elements can also be created.
ID The element ID. Only elements with an ID can be the target or receiver of an event.

Position and size

Property Description
Left The distance from the left side of the stage (or parent element) in pixels, or as a percentage of the total width of the stage (or parent element).
Top The distance from the top of the stage (or parent element) in pixels, or as a percentage of the total height of the stage (or parent element).
Width The width of the element in pixels, or as a percentage of the total width of the stage (or parent element).
Height The height of the element in pixels, or as a percentage of the total height of the stage (or parent element).

To choose between pixels and percentages:

Click the measurement unit (px or %) and select the unit you want to use from the pop-up menu.

You can also change all the position and size properties to percentages by clicking the Use percentages  button.

This option may be unavailable for some element types.

To maintain the width and height ratio:

Click the Constrain aspect ratio  button. When the width or height changes, the other dimension automatically adjusts proportionally.

Click the button again  in order to change the width or height without affecting the other dimension.

Translation, rotation, and scale

3d value types

  • Delta - Lets you change the 3D position, rotation, or scale of an object in relation to its current values. Values reset to zero between adjustments.
  • Absolute - Displays the 3D position, rotation, and scale of an object in 3D in relation to the stage.

X, Y, and Z values for translation, rotation, and scale

  • Translation - The top row of X, Y, and Z values represents the element's 3D translation values.
  • Rotation - The second row represents the rotation around each axis.
  • Scale - The third row represents scale. Click the Scale uniformly  button to apply the same scaling values along the x-, y-, and z-axes.

Style

Border

Property Description
Border color Click the color swatch to choose the color for the element's border.
Border width The width of the border in either pixels or points.
Style The border style. You can select one of the following:
  • none
  • solid
  • hidden
  • dotted
  • dashed
  • double
  • groove
  • ridge
  • inset
  • outset
Corner radius The rounding radius in pixels, points, or percentages. By default, the corners are set to the same radius. Click the Keep identical  button to set each corner separately.

Fill

Property Description
Overflow How content is handled when it overflows its container:
  • visible - Content shows outside the container.
  • hidden - Content is cropped at the edge of the container with no scrollbars.
  • scroll - Content is cropped at the edge of the container. Scrollbars are always shown, even when there is no overflow.
  • auto - Content is cropped at the edge of the container and scrollbars are shown when necessary.
  • initial - Content is set to its initial overflow behavior.
  • inherit - The container inherits overflow rules from its parent container.
Visibility The visibility of the element:
  • visible - The element is visible. (Default)
  • hidden - The element is hidden, but still affects layout.
  • collapse - The element is hidden, and table rows are collapsed.
  • initial - The element is set to its initial visibility.
  • inherit - The element inherits visibility rules from its parent container.
Opacity The opacity for the element, represented by a value between 0 (completely transparent) and 1 (completely opaque).
Fill Click the color box to choose the element's fill color.

Margins

The margin for the element can be set in pixels or as a percentage. By default, the margins are set to the same value. Click the Keep identical  button to set each side separately.

Padding

The padding for the element can be set in pixels or as a percentage. By default, the padding amounts are set to the same value. Click the Keep identical  button to set each side separately.

Motion path properties

For elements with motion paths, the Properties panel also displays motion path properties once you've added an anchor point or changed the shape of the motion path to curve.

Page properties

Each page has its own set of properties which you can view and change when no elements are selected.

Component properties

In addition to the common properties, each component has properties of its own. These are described on the help page for each component.

Was this helpful?
How can we improve it?