Make a banner creative with Google Web Designer (2025)

You can build a banner with Google Web Designer from scratch or to save time, you can start from a pre-built template.

Start from scratch

If you want full control of the creative design, you can start from a blank banner file in Google Web Designer.

Step 1: Create a new file

  1. Open Google Web Designer. (If you don't have it yet, download Google Web Designer here.)
  2. From the launch screen, click Create New File or click File > New...
  3. In the "Create New Blank File" dialog, choose Banner as the ad type.
    Make a banner creative with Google Web Designer (1)
  4. Choose from the following options:
    • Name
      Give the ad a name (required). This will be the name of the HTML file.
    • Location
      Choose where you want to save the file. You can save your file locally on your computer, or save to Google Drive.
    • Environment
      Select Display & Video 360 as the ad serving environment.
    • Dimensions
      Either check "Responsive layout" to create an ad that automatically sizes to match the viewport or ad slot it's displayed in, or set the dimensions for the ad if you know the specific size. Common banner sizes are listed in the dropdown list. If you want to use a size that isn't listed, select Custom from the dropdown, and enter the width and height manually.
    • Animation mode
      Select the animation mode that you want to use initially (you can switch at any time). Quick mode lets you animate your ad scene by scene, while Advanced mode lets you animate individual elements on their own timeline
  5. Click OK.

Step 2: Design your creative

When you create a new banner ad, Google Web Designer creates a banner page (page1) sized to the banner size you specified.

To set up your primary banner page:

  1. Add images, video and other assets by dragging them into the work area, or by using image tags.
  2. Arrange your images and any other elements you want to use on the stage.
  3. Optionally create animations or bring components onto the page.
  4. If you're creating a Responsive ad, add breakpoints, then restyle each new size range.

Step 3: Add a call to action

The final step to creating an effective ad is to add a call to action. A typical call to action is a clickable button that takes the user to a company website.

  1. Be sure your ad has a button or other clear visual call-to-action element for the user to click or touch.
  2. Drag the Tap Area component from the Interaction folder of the Components panel to the stage, and position it over the call to action.
  3. Click the new event buttonMake a banner creative with Google Web Designer (2)in the Events panel.
  4. In the event dialog, select the following options:
    Target The Tap Area component (gwd-taparea_1)
    Event Tap Area > Touch/Click
    Action

    Google Ad > Exit ad

    Note: A similar action, Exit ad (overrides URL), doesn't allow you to modify the URL outside of the creative, such as within Studio or Campaign Manager 360, and should only be used for dynamic ads.

    Receiver gwd-ad
    Configuration
    • Metrics ID - A label (e.g., "CTA") to make reports easier to understand.
    • URL - The exit URL.
    • Collapse on exit - For expandable ads, check to collapse the ad when the user closes the ad.
    • Pause media on exit - Check to stop video and audio playback when the user closes the ad.
    • Collapsed page on exit - For expandable ads, the page to show when the user closes the ad.

    Make a banner creative with Google Web Designer (3)

Start from a template

Templates are pre-made ads in popular sizes, using generally popular styles and features. By replacing the images and other assets, you can quickly create a useful, working ad.

Step 1: Create a new file from a template

Make a banner creative with Google Web Designer (4)

To create an ad from a template:

  1. Select New from template... from the File menu. This opens the Template Gallery.
  2. To find Google Marketing Platform banner templates:
    1. Click Search Make a banner creative with Google Web Designer (5).
    2. Expand the Ad Types section, then select Banner.
    3. Expand the Platforms section, then select Display & Video 360.
    4. Close the filters panel. A list of compatible layouts will display.
  3. Click a creative type to see available layouts, then click Use Layout for the layout you want.
  4. If there are multiple size options, select the size you want.
  5. Name your new file (required).
  6. Optional: Change the location where the file will be saved. You can either enter the path to the location, or click the folder icon Make a banner creative with Google Web Designer (6) to navigate to the location you want to use.
  7. Click Create.

Step 2: Add and replace assets in the template

Ad templates have placeholder assets and descriptive IDs for each element. To create an ad from a template, you can just replace each generic placeholder asset with an appropriate one for your ad. Ads created from templates are completely modifiable; you can add or delete assets, components, and events as you wish to create a more customized ad.

The "Swap Image" function lets you replace an image with either an image in the Library or an image that you upload. This is especially helpful when you're replacing stock images from a template.

Make a banner creative with Google Web Designer (7)

To replace an image in an ad created from a template:

  1. Right-click the image you want to replace.
  2. Select Swap image... from the pop-up menu.
  3. In the dialog, either select an image from the Library or click the add button Make a banner creative with Google Web Designer (8) to select an image from your computer.
  4. Click OK.

Preview

Preview your ad in your browser to make sure it looks and behaves how you expect. Use the Preview button instead of directly opening the source .html file in your browser.

Before you publish an ad, you can verify in the Summary section of the publish dialog that your ad passes all validation checks.

When your creative is complete, you're ready to publish to Studio.

Was this helpful?

How can we improve it?

Need more help?

Try these next steps:

Contact us Tell us more and we’ll help you get there
Make a banner creative with Google Web Designer (2025)
Top Articles
Latest Posts
Recommended Articles
Article information

Author: Dong Thiel

Last Updated:

Views: 6170

Rating: 4.9 / 5 (79 voted)

Reviews: 94% of readers found this page helpful

Author information

Name: Dong Thiel

Birthday: 2001-07-14

Address: 2865 Kasha Unions, West Corrinne, AK 05708-1071

Phone: +3512198379449

Job: Design Planner

Hobby: Graffiti, Foreign language learning, Gambling, Metalworking, Rowing, Sculling, Sewing

Introduction: My name is Dong Thiel, I am a brainy, happy, tasty, lively, splendid, talented, cooperative person who loves writing and wants to share my knowledge and understanding with you.