Create a customizable display project from a template

Ads Creative Studio includes a number of templates that you can use for your customizable display project. The provided templates give you a starting point for building an ad that can be tailored to individual contexts and audiences. You can view these templates by going to the Templates page from the left-hand navigation menu.

Select a template

1. Go to Ads Creative Studio.
2. On the Projects page, click New, then Display, then From template.
3. Review the available templates and choose the one that suits your needs best. Make sure the template is labeled as "Customizable". Click a template to get more details, like which devices it can run on and what assets it supports. You can also see a preview with assets from a fictitious brand.
4. When you've found the template you want, click Use template.
5. Enter a name for the new project.
6. Select Yes for Customizable.
7. Click Create. This will create a new project.

Modify an existing template

If a template doesn't quite meet your needs, but you don't want to start from scratch, you can open and edit Ad Creative Studio's display templates with Google Web Designer, a downloadable tool for building HTML5 ads. After you make edits, you can upload the edited template as a display project using HTML5 files.

To edit a template:

1. Before you get started, make sure you've installed Google Web Designer.
2. Sign in to Ads Creative Studio.
3. Click Templates.
4. Find and click the template you want to edit. The "About this template" page opens.
5. Click Open in Web Designer. (If you don't see this button, the template is not available for editing.) A browser dialog will open asking permission to open the Google Web Designer app.
6. Click Open Google Web Designer. Google Web Designer will open to the Create New File From Template page.
7. In the left-hand panel, fill out these fields:
   1. Size - If multiple sizes are available, select the size you want.
   2. Name - Name your new file.
   3. Location - Optionally, change the location where the file will be saved. You can either enter the path to the location, or click the folder icon to navigate to the location you want to use.
8. Click Create.
9. Edit the template as you see fit. When you're done, publish your files locally in Google Web Designer.
10. Upload the published HTML5 files to Ads Creative Studio.

Currently, you can only edit a template, then upload it as a single display project. In the future, you'll be able to upload your custom template to Ads Creative Studio, then re-use it to build multiple projects.

Edit the template

When you edit the template for a customizable project, you can modify the assets, content, and styles that stay the same across all variants for the project. You also specify which elements are swappable between variants so that you can personalize your ad for different audiences or contexts.

1. While viewing a project created from a customizable template, click Edit template.
2. In the right-hand panel, you'll see a preview of your project in all supported sizes. The preview will update to reflect any edits you make.
   • To change the zoom level, use the zoom percentage drop-down or Zoom out and Zoom in buttons.
   • To replay the animation for animated projects, click the Refresh button in the corner of each preview pane.
3. Edit your template.
   • Choose the sizes you need.
   • Set swappable elements.
   • Add assets.
   • To undo or redo an edit, use the Undo and Redo arrows at the top of the right-hand panel.
4. When you're done with your edits, click Save.
5. Click Dismiss or Cancel to return to the project page.

Each step for editing your template is described in more detail below.

Choose the sizes you need

The display templates in Ads Creative Studio support 21 of the most common display ad sizes:

• Square and rectangle: 250 × 250, 300 × 250, 320 × 320, 336 × 280
• Skyscraper: 120 × 600, 160 × 600, 300 × 600, 300 × 1050
• Leaderboard: 468 × 60, 728 × 90, 800 × 250, 970 × 90, 970 × 250
• Mobile: 300 × 50, 300 × 100, 320 × 50, 320 × 100, 320 × 480, 360 × 592, 360 × 640, 375 × 667

When you make a new display project from a template, all of the sizes the template supports are selected.

 

• If you want to use and export all of the sizes, you can skip this step.
• If you don't want to use all of the sizes, you can remove the ones you don't need.

 

Add sizes

If all of the supported sizes are already selected, you won't be able to add more sizes. If you've deselected some sizes, you can add them again at any time.

1. Next to Sizes, click the Select creative sizes menu. It looks like a drop-down menu that shows the number of selected sizes (for example, "8 sizes"). The size selection window opens. On the left side, the sizes are organized in groups. On the right side is a list with each selected size.
   • To add all of the sizes the template supports, click All sizes.
   • To add a group of similarly shaped ads, click the group to add. (Size groups include: square and rectangle, skyscraper, leaderboard, and mobile.)
   • To add just one size (for example, 300 x 100), you can expand the groups on the left and select the checkbox next to 300 x 100.
2. Click Apply.
3. Click Save.

The preview will update to show the sizes you selected. When you export your project, only the sizes you chose will be exported.

Remove sizes

1. Next to Sizes, click the Select creative sizes menu. It looks like a drop-down menu that shows the number of selected sizes (for example, "21 sizes"). The size selection window opens. On the left side, the sizes are organized in groups. On the right side is a list with each selected size.
   • To remove all sizes, click All sizes.
   • To remove a group of similarly shaped ads, click the group to remove. (Size groups include: square and rectangle, skyscraper, leaderboard, and mobile.)
   • To remove just one size (for example, 300 x 100), you can expand the mobile size group on the left and click 300 x 100. Or on the right, scroll down to the mobile sizes and click Remove 300 x 100.
2. Remove the sizes you don't need and keep the ones you do. If you remove one by mistake, you can add the sizes again later.
3. Click Apply. (If you can't click Apply, make sure at least 1 size is selected.)
4. Click Save.

The preview will update to show the sizes you selected. When you export your project, only the sizes you chose will be exported.

Set swappable elements

In customizable templates, you can make elements swappable so that you can create variants with different assets. At least one element in the template must be swappable.

On the "Edit template" page:

• If you want to be able to swap out an element's asset, content, or styles, set the Swappable toggle to on.
• If you want an element to be the same for all variants, set the Swappable toggle to off.

 

If you change the swappable toggle for an element, any assets you've added for that element will be removed when you save the template.

Add assets

Now that you've specified which elements are swappable, you can add assets for the non-swappable elements on the "Edit template" page. These assets will be used across all variants.

1. Select the asset you want to add or change. For example, if you want to add a logo image, select "Logo".
2. In the bottom-left panel, specify the asset depending on its type:
   • Images : Drag a file from your computer and drop it on Drop file here or click Browse to select an image from the asset library (see supported types).
   • Text : Enter the text to display.
   • Links : Enter the destination URL. For some elements, enter the text to display as well.
   • Colors : Enter the hexadecimal color code and opacity percentage.
3. Click Save.

The preview will update to show the new asset.

Swappable elements start with default assets that can be swapped out when customizing variants.

Next steps

Once your template is complete, click Save and close the template editing page. You can come back and edit the template if necessary.

• If you want to customize variants of your ad based on audience or context, you should set up rules and add variants for your project on the Rules page.
• If you want to be able to preview your variants as you configure content and styles for swappable elements, go to the Variants page.