Every element in Google Web Designer has a set of properties such as size, position, and style. Most of these properties are similar for each element. However, some elements, like components, have properties that are specific to them. You change properties in the Properties panel.
Many elements share this group of common properties. Not every element has the whole set of properties, but they still draw from this common group.
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 Lets you set 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 enclosing container element) when expressed as pixels, or the distance from the left as a percentage of the total width of the stage (or enclosing container element) when expressed as percentages. Top The distance from the top of the stage (or enclosing container element) when expressed as pixels, or the distance from the top as a percentage of the total height of the stage (or enclosing container element) when expressed as percentages. Width The width of the element when expressed in pixels, or the percentage of the width compared to the total width of the stage (or enclosing container element) when expressed as percentages. Height The height of the element when expressed in pixels, or the percentage of the height compared to the total stage (or enclosing container element) height when expressed as percentages.
To choose between pixels and percentages:
Click the measurement unit (
%) and select the unit you want to use from the pop-up menu.
To connect the height and width for even scaling:
Click the link button. Click again to unlink.
Translation, rotation, and scale
- Absolute - Changes the position of an object in 3D in relation to the stage.
- Delta - Changes the position of an object in 3D in relation to its current location. When "Delta" is selected, the translation values reset to zero between adjustments.
X, Y, and Z values for translation, rotation, and scale
- The top row of X, Y, and Z values represents the element's 3D translation values.
- The second row represents the rotation around each axis.
- The third row represents scale. Click the link button to apply the same scaling adjustment to 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 Sets the width of the border in either pixels or points. Style Lets you set the border style of an element to one of the following:
Corner radius Sets the rounding radius in pixels, points, or percentages. By default, the corners are set to the same radius. Click the link button to set them separately.
Property Description Overflow Sets 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 Sets 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 Sets the opacity for the element to a value between 0 (completely transparent) and 1 (completely opaque). Fill Click the color box to choose the element's fill color.
Sets the margin for the element in pixels or percentages. By default, the margins are set to the same value. Click the link button to set them separately.
Sets the padding for the element in pixels or percentages. By default, the padding amounts are set to the same value. Click the link button to set them 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 you haven't selected any elements.
In addition to the common properties, each component has properties of its own. These are described on the help page for each component.