Multi-size layouts for video ads

Video Overview: what's new in video authoring - Google Web Designer (responsive video, animated GIF)

Multi-size layouts let you build video ads of different sizes, all from a single document. Similarly to responsive ads, you create the base document with a default layout, then override the default styles and attributes for specific ad sizes and size ranges. Because video ads can't include CSS, these overrides apply to the videos upon export and do not produce responsive ads.

Use the Sizes and ranges tab in the Responsive panel to configure a multi-size layout by setting up the sizes you want to export, then adding overrides for those sizes.

Multi-size layout

Enable a multi-size layout

In the Sizes and ranges tab of the Responsive panel, click the Multi-size layout checkbox to enable multi-size options.

Disable a multi-size layout

To disable a multi-size layout, make sure only a single serving size is enabled and that it has no overrides, then uncheck the Multi-size layout checkbox in the Sizes and ranges tab of the Responsive panel.

Edit base document

When you're editing the base document, any changes you make are used by default for all sizes. This means that Edit base document must be selected in the Responsive panel's Sizes and ranges tab if you want to add or delete elements.

Sizes

In the Responsive panel's "Sizes and ranges" tab, the Sizes section lists the specific sizes for your ad. Select a size to switch to that ad size and to add or change overrides for that size.

Common sizes

The Sizes section is pre-populated with common ad sizes. The common sizes can't be edited or deleted.

Custom sizes

You can include other sizes in the list by adding a custom size.

Add a custom size

Click  Add custom size and enter the dimensions of the new size.

Edit a custom size

Hover over the size and click the Edit  button.

Delete a custom size

Hover over the size and click the Delete  button.

Filter sizes

Use the dropdown to filter the size list to sizes that you've enabled for serving or preview:

• All sizes
• Serving sizes

Serving sizes

Serving sizes are the sizes in which you want to export your video ad. You must select at least one serving size.

Toggle a serving size

Select the checkbox under the Serving size icon. You can enable a maximum of 40 serving sizes.

Size-specific overrides

When a size is selected in the Responsive panel, you can add and change overrides that apply only to that size.

Sizes with overrides display the icon.

Size ranges

You can set overrides that apply to multiple sizes by configuring size ranges in the Range media rules section. Any sizes that fall within the size range will use the size range's overrides (although the specific size's overrides take precedence). Select a size range in the Responsive panel's "Sizes and ranges" tab to add or change overrides for that size range.

Add a size range

Click  Add size range to add a new size range, then specify the minimum and maximum dimensions for the size range.

Edit a size range's dimensions

Hover over the range and click the Edit button.

Change a size range's orientation

Click the orientation icon, then select the new orientation from the dropdown.

Delete a size range

Hover over the range and click the Delete button.

Orientation

If you specify an orientation for a size range, the size range's overrides will apply only to landscape or portrait ad sizes.

Any orientation
Landscape
Portrait

Manage size ranges

Click the icon to open a dialog with a visualization of the size ranges you've configured.

Overrides

Use overrides to optimize your layout by adjusting properties for different ad sizes and size ranges. For example, for narrower ad sizes you might override the default text size to use a smaller font.

Google Web Designer allows you to override properties such as size, position, visibility, and source, as well as text content and text fitting settings. Properties that can't be overridden are disabled when a size or size range is selected.

Add or change a override

1. Select a size or size range in the Sizes and ranges tab of the Responsive panel.
2. Make the change that you want.

The label for the overridden property is highlighted in yellow in the Properties panel, or in the Text panel if the text content or text fitting settings were changed.

       

Examples of yellow override indicators

Sizes with overrides display the icon in the Responsive panel.

Copy overrides for a size or size range

1. Select the size or size range from which you want to copy overrides:
   • Copy overrides for a specific size - Right-click the size in the Sizes and ranges tab of the Responsive panel.
   • Copy overrides for a size range - Hover over the size range in the Sizes and ranges tab of the Responsive panel and click the More icon that appears.
2. Select Copy overrides from the pop-up menu.
3. Select the size or size range to which you want to paste overrides:
   • Paste overrides to a specific size - Right-click the size in the Sizes and ranges tab of the Responsive panel.
   • Paste overrides to a size range - Hover over the size range in the Sizes and ranges tab of the Responsive panel and click the More icon that appears.
4. Select Paste overrides from the pop-up menu.

Remove a override

1. Click the yellow property label for the override.
   • Most overrides are indicated in the Properties panel.
   • Overrides for text content or text fitting settings can be seen in the Text panel.
2. Select Remove override in the pop-up dialog.

Remove all overrides for a size

1. Right-click the Size-specific media rules icon for that size.
2. Select Remove overrides from the pop-up menu.

Remove all overrides for a size range

1. Hover over the size range.
2. Click the More icon.
3. Select Remove overrides from the pop-up menu.

Publishing

When you publish a video ad with a multi-size layout, you'll have the option to select which sizes you want to export. Each size will be published as a separate video file.