Google HTML5 Ad Templates (Ad Templates)

google-html5-ad-templates

Each of these ad templates is meant to be edited using Google Web Designer (GWD). Google Web Designer is a what-you-see-is-what-you-get (WYSIWYG) editor that excels in creating HTML5 web animations.

If you have no coding experience, not to worry, is perfect for that!

For each ad template here, I provide simple instructions that describe the minimal steps required to make this ad template your own!

All of the ad templates comply with the standard sizes specified by the Interactive Advertising Bureau.

All ad templates come ready to go as DoubleClick ads.

This package contains three standard ad templates featuring an ad for one of my CodeCanyon items, plus one bonus ad template, featuring an ad for this package itself!

ad-template-vertical-banner

Features

• Dimensions: IAB standard vertical banner – 120px by 240px


• Aspect ratio: 0.5


• Suitable for side bar banner ads with less detail


• Features fade + slide in for title and call-to-action button


• Features call-to-action button with a subtle glow effect

Customisation

The sample ad provided is for EZaccounts, another item that I have on CodeCanyon. However, this is for demonstration purposes only, and it is intended to be used as a template. To do so, the following steps are required:

• Open on Google Web Designer


• Select, using the text tool, div title and edit the text to the name of your product or service


• Open your file browser (Windows Explorer, Finder, or Nautilus), and modify image assets
  
  
  
  • Replace assets/logo.png with your own logo, preferably with similar dimensions
  
  
  
  

ad-template-full-banner

Features

• Dimensions: IAB standard full banner – 468px by 60px


• Aspect ratio: 7.8


• Suitable for standard banner ads


• Features fade + slide for title and call-to-action button


• Features call-to-action button with a subtle glow effect

Customisation

The sample ad provided is for EZaccounts, another item that I have on CodeCanyon. However, this is for demonstration purposes only, and it is intended to be used as a template. To do so, the following steps are required:

• Open on Google Web Designer


• Select, using the text tool, div title and edit the text to the name of your product or service


• Open your file browser (Windows Explorer, Finder, or Nautilus), and modify image assets
  
  
  
  • Replace assets/logo.png with your own logo, preferably with similar dimensions
  
  
  
  

ad-template-vertical-rectangle

Features

• Dimensions: IAB standard vertical rectangle – 240px by 400px


• Aspect ratio: 0.6


• Suitable for side bar banner ads with more detail


• Features fade in title, and fade + slide in subtitle


• Features call-to-action button with a subtle glow effect


• Features a swipe-able gallery, useful for showcasing product features

Customisation

The sample ad provided is for EZaccounts, another item that I have on CodeCanyon. However, this is for demonstration purposes only, and it is intended to be used as a template. To do so, the following steps are required:

• Open on Google Web Designer


• Select, using the text tool, div title and edit the text to the name of your product or service


• Select, using the text tool, div subtitle and edit the text to the byline for your product or service


• Open your file browser (Windows Explorer, Finder, or Nautilus), and modify image assets
  
  
  
  • Replace assets/logo.png with your own logo, preferably with similar dimensions
  
  
  • Replace assets/gallery_XX.png with your own gallery images, preferably with similar dimensions
  
  
  
  

-bonus” class=”anchor” href=”#google-html5-ad-templates—bonus” aria-hidden=”true”> google-html5-ad-templates – BONUS!

This ad template is interesting because it has a cross functional use case: its form factor is similar to the “Inline Preview” images required when uploading something on CodeCanyon or other Envato marketplaces.

Simply take a screen shot of it using your graphics program, and crop its width to 590px (height is already correct). In fact this is how the inline preview image for this package was created!

Features

• Dimensions: IAB pop-under – 720px by 300px


• Asepct ratio: 2.4


• Suitable for very large, cover-photo type, banner ads


• Features a fade in title and fade in features list


• Features animated slide ins for before and after images


• Cross functional use: Apart from banner ads

Customisation

The sample as provided is for this module’s inline preview image itself. However, this is for demonstration purposes only, and it is intended to be used as a template. To do so, the following steps are required:

• Open in Google Web Designer


• Select, using the text tool, div titlearea and edit the title


• Select, using the text toole, div featureslist and edit the features list


• Open your file browser (Windows Explorer, Finder, or Nautilus), and modify image assets
  
  
  
  • Replace assets/before.png with your own before image, preferably with similar dimensions
  
  
  • Replace assets/after.png with your own after image, preferably with similar dimensions
  
  
  
  

free download