Guided design editor

The Guided design editor has simple UI controls that walk you through building and styling a native ad without the need to write code. Optionally, you can edit the CSS to customize your ad to a great degree. You can select fluid or commonly used fixed sizes. The resulting native creatives can serve as both Ad Exchange auction and direct-sold ads on web or mobile app.

Navigate to the Guided design editor

  1. Sign in to Google Ad Manager.
  2. Click Delivery and then Native
  3. Click Create native ad.
  4. Click Select in the "Guided design editor" box.
    The "Define ad settings" page appears.

Define ad settings

  1. Ad size: The Guided design editor supports the Fluid size and the most commonly used fixed ad sizes.
    • We recommend the Fluid size because it allows more flexibility when styling your ad. With the Fluid size, Ad Manager will automatically size the ad by filling the width of the enclosing column and adjusting the height as appropriate (just like a regular HTML div on your site). This size works in combination with the fluid slot type in Google Publisher Tags or the Google Mobile Ads SDK (Android / iOS).
    • Fixed sizes, such as 300x250, require no tag changes or app updates. A fixed size style enables native creatives to flow to your existing ad slots. To use ad sizes not listed here, you can choose the direct-sold HTML and CSS Editor option on the previous page, but you’ll lose programmatic eligibility.

      List of available sizes

      Ad Manager allows up to a 5% variation from the supported sizes. Also, the following sizes will only appear as options if they’re in existing ad units.

      • 300x250
      • 300x600
      • 320x100
      • 320x50
      • 336x280
      • 728x250
      • 728x90
      • 970x250
  2. Format: Choose the format that has the right collection of elements for your ad experience, as well as the layout attributed to that format. Learn more
    • Content or Video content: Allows for a generic combination of text, images and/or video that covers a broad scope.
    • App install or Video app install: Intended to promote and drive installs or take another action on mobile apps and mobile web.
  3. Select the image layout that best fits into the look and feel of your site or app. A variety of common native layouts are available.
  4. Click Continue.
    The “Style your native ad” page appears.

Style your native ad

Use the UI controls to style your native ad to match the look and feel of your website or app. Updates are automatically applied to the ad preview on this page, which allows for easy experimentation.

You can edit CSS directly, but:
  • You won’t be able to make additional changes through UI controls once you do so.
  • If you introduce policy errors when editing the CSS, the native style will lose Ad Exchange auction eligibility but can still serve through Programmatic Guaranteed.
  • HTML is not editable in the Guided design editor. For more customization, you can choose the direct-sold HTML & CSS editor option, but you’ll lose programmatic eligibility.
  1. When creating a style with a “Fluid” size, you can update the “Preview width” setting to see how your ad looks on different screen sizes.
    You can also drag the blue bar to change width. Height is updated automatically.
  2. Click Reorder elements to show/hide the elements within each card on the right panel and rearrange them.
    For example, you could move the call to action above the advertiser name and remove the advertiser logo. Learn more
  3. In the right panel, expand an element and update the settings as needed.
    For example, increase the font size and change the color of the body text.

    List of supported fonts
    • Archivo
    • Arial
    • Arimo
    • Bitter
    • Comic sans
    • EB Garamond
    • Geneva
    • Georgia
    • Helvetica
    • Lato
    • Libre Baskerville
    • Libre Franklin
    • Lora
    • Merriweather
    • Monserrat
    • Mukta
    • Muli
    • Nunito
    • Open Sans
    • Open Sans Condensed
    • Oswald
    • Playfair Display
    • Poppins
    • Raleway
    • Roboto
    • Roboto Condensed
    • Roboto Slab
    • Roboto
    • Slabo 27px
    • Source Sans Pro
    • Times New Roman
    • Trebuchet
    • Ubuntu
    • Verdana
    • Volkhov
  4. To edit the CSS directly, slide the Edit code switch to the right.
    If you edit CSS, click Validate to ensure the style complies with Ad Exchange policies.
  5. Click Continue.
    The “Target your native ad” page appears.

Target your native ad

To serve your native ad, the targeting on this page needs to match the line item’s targeting.

  1. Expand the “Inventory” dropdown to target inventory.
    • Native ads will only run where you have targeted valid native styles.
    • Ensure that the inventory targeted can display the native ad as desired. One native style, for example, might look appropriate on your homepage but unsuitable on your sports page.
  2. Expand “Geography”, “Device category”, and “Operating system” as needed for additional targeting.
  3. Click Save and finish.
    If you haven't already done so, name your style and click Save. The new style appears in the list of existing native styles.
Was this article helpful?
How can we improve it?