Style your native ad in the Guided design editor

When you select the Guided design editor to create a native style, you can use the 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, which allows for 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 or 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.

  3. In the right panel, expand an element and update the settings as needed. For example, you can expand:

    • Title to select whether you want your ad's title, or headline, to have a maximum of 30 characters (Short) or 90 characters (Long).
    • Body to change the color of the body text.
    • Various elements to increase the font size.
    See the list of supported fonts
    • Archivo
    • Arial
    • Arimo
    • Bitter
    • Comic sans
    • EB Garamond
    • Geneva
    • Georgia
    • Helvetica
    • Lato
    • Libre Baskerville
    • Libre Franklin
    • Lora
    • Merriweather
    • Montserrat
    • Mukta
    • Muli
    • Nunito
    • Open Sans
    • Open Sans Condensed
    • Oswald
    • Playfair Display
    • Poppins
    • Raleway
    • Roboto
    • Roboto Condensed
    • Roboto Slab
    • Slabo 27px
    • Source Sans Pro
    • Times New Roman
    • Trebuchet
    • Ubuntu
    • Verdana
    • Volkhov
  4. To edit the CSS directly, slide the Style in CSS editor switch to the right.

    If you edit CSS, click Validate to ensure the style complies with Ad Exchange policies.

  5. Click Save or Save and activate.

Was this helpful?

How can we improve it?
Clear search
Close search
Google apps
Main menu