Multi-directional Expandable template

Use the Multi-directional Expandable template as a starting point to build your creative using Google Web Designer. A multi-directional expanding (MDE) creative can expand in the proper direction based on where it's placed on a web page. For example, if the ad is on the right edge of the browser, the ad expands to the left. If the ad is on the left edge, the ad expands to the right. 

Expand right      Expand left

Get started

Create a new ad using the Multi-directional Expand template in Google Web Designer. Learn how to create an ad from a template

The Multi-directional Expand template has two pages: a Banner page and an Expanding page. The Banner page contains the elements of the collapsed ad, while the Expanded page contains the expanded ad elements.

Banner page

The Banner page includes these elements:

• Expand button (required) - A Tap Area component. Click to display the Expanded page.
• Logo - A Tap Area component. Click to visit your landing page.
• Description text

Edit the Banner page

1. Add your own images and text to each element or remove the elements you don't need. 
2. Open the Events panel and add your landing page URL to the Logo's exit event:
   • col-logo-exit > action > Exit > gwd-ad

Don't change the position of the Expanded page. The Expanded page is centered on top of the Banner page. If you reposition it, some expanded elements may be cut off or hidden.

Expanded page

The Expanded page includes these elements:

• Close button (required) - A Tap Area component. Click to close the ad and display the Banner page.
• Description text
• YouTube player - A YouTube component for playing video.
• Background button - A Tap Area component. Click to visit your landing page.
• Button - A Tap Area component. Click to visit your landing page.

Edit the Expanded page

1. Add your own images and text to each element or remove the elements you don't need.
2. Open the Events panel and add your landing page URL to each of the exit events:
   • bg-exp-exit > action > Exit > gwd-ad
   • btn-cta > action > Exit > gwd-ad

When you modify the position of elements on the Expanded page, update the position values in Code view for the same elements. Otherwise your position updates will be ignored when the ad expands.

To update position values:

1. Copy the pixel value found in the Properties panel under Position and size > Left.
2. Open Code view and find the positioning code in the expandStartHandler function.
3. Find the matching element ID and replace the pixel value with the copied value.

Learn more about positioning elements for multi-directional expanding creatives

Preview locally

The Multi-directional Expand template can be previewed like any other Studio format. Each time you click the expand button, the ad expands to a different direction for easy preview. When your ad is live, the creative will expand to the proper direction depending on where it is on the page.