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.
Many elements share these common properties. Some elements may not have the whole set of common properties.
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 (
%) 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.
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:
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.
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.
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.
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.
Each page has its own set of properties which you can view and change when no elements are selected.
In addition to the common properties, each component has properties of its own. These are described on the help page for each component.