Multi-size layouts let you build image 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 image ads can't include CSS, these overrides apply to the images upon export and do not produce responsive ads.
Use 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
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.
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 if you want to add or delete elements.
Sizes
The sizes section of the Responsive panel 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 of the Responsive panel is pre-populated with common 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
- Preview sizes
Serving sizes
Serving sizes are the sizes in which you want to export your image 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.
Preview sizes
Your document is displayed in the selected preview sizes within the multi-size preview panel.
Toggle a preview size
Select the checkbox under the Preview size icon. Preview sizes must also be serving sizes.
Open the multi-size preview panel
- Click the Multi-size preview
button in the Responsive panel.
- Select View > Responsive > Preview from the top menu.
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. 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 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
- Select a size or size range in the Responsive panel.
- 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.
Sizes with overrides display the icon in the Responsive panel.
Copy overrides for a size or size range
- 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 Responsive panel.
- Copy overrides for a size range - Hover over the size range in the Responsive panel and click the More
icon that appears.
- Select Copy overrides from the pop-up menu.
- 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 Responsive panel.
- Paste overrides to a size range - Hover over the size range in the Responsive panel and click the More
- Select Paste overrides from the pop-up menu.
Remove a override
- 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.
- Select Remove override in the pop-up dialog.
Remove all overrides for a size
- Right-click the Size-specific media rules
icon for that size.
- Select Remove overrides from the pop-up menu.
Remove all overrides for a size range
- Hover over the size range.
- Click the more
- Select Remove overrides from the pop-up menu.
Multi-size preview
The multi-size preview lets you see at a glance how your image ad appears in multiple sizes. The preview is displayed next to the stage, includes all sizes enabled for preview, and automatically updates as you make changes to the document.
Toggle the multi-size preview panel
Use one of the following methods to open or close the multi-size preview panel:
- Click the Multi-size preview
- Select View > Responsive > Preview from the top menu.
Once the panel is open, you can also close it by clicking the X in the top right corner.
Resize the multi-size preview panel
Change the multi-size preview panel's width or height by dragging the edge of the panel closest to the stage.
Move the multi-size preview panel
You can move the multi-size preview panel to above, below, or either side of the stage.
Drag the handle at the top of the panel until a yellow bar appears at the new location where you want the panel.
Select a size
Click a preview in the multi-size preview panel to select that size in the Responsive panel.
Disable a preview size
Hover over a preview in the multi-size preview panel to see a gray X at the top right corner of the preview. Click the X to disable that size for preview.