Guided design editor

Use simple UI controls that walk you through building and styling a native ad without the need to write code. You can edit the CSS if desired to further customize your ad.

You also have the option of letting Google design the native ad to get started on native quickly. Google optimizes the ads to perform well on your sites and apps.

With either option in the Guided design editor, fluid or commonly used fixed sizes are available, and the resulting native creatives can serve 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.
  5. Under "Choose your path," select one of the following:
    • Customizable for in-feed (Default): (Serves programmatic and traditional ads) Use this option for in-feed native ads. You use UI controls to build and style a native ad that closely matches the look and feel of your content and blends in with your feed. If you select this option, follow the instructions below.
      If you select Customizable for in-feed, there's an option to have Google scan your page and automatically create a native ad that blends in with the look and feel of your content. This is helpful if you want to get started serving native ads but don't have the resources to design your own native styles. To use this feature, enable Let Google suggest an in-feed style and learn more.
    • Google-designed for in-article: (Serves programmatic ads only) Use this option for ads that won’t appear inside feeds; these ads work best in an article or outside the main content area. Google chooses the ad design, you can update the font and color, and you’ll be serving native ads quickly. If you select this option, learn more and follow these instructions.

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 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 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?