Data Driven Templates for Display & Video 360 Ad Canvas – Google Web Designer


CHRIS: Welcome! My name is Chris and I’m a designer on the Google Web Designer team Today I’ll walk through a new dynamic
template with an emphasis on text We’ll cover customizations including
configurable panels selecting nested elements, dynamic text fitting, editing groups and a demonstration of the template when uploaded into Display &
Video 360 Ad Canvas Let’s get started First let’s navigate to the template
library You’ll find the template under the thumbnail Data Driven for Display & Video 360 Notice we have three new template layouts to choose from Blank Slate, Cue Cards and Panorama but today we’ll be focusing on cue cards Let’s create a template using cue cards I’m going to give the file a quick name and
click Create Now before we proceed in Google Web Designer let’s take a quick
look at a design schematic of cue cards So cue cards is a template that utilizes
elements and assets such as a logo, a background image, a swipe gallery a swipe gallery navigation, an animated arrow icon and three dynamic text groups
labelled SlideA through SlideC You also notice a few tap areas utilized for dynamic exits OK jumping back into Google Web Designer Let’s review a few
important panels for customizing and configuring cue cards the template In the timeline you’ll notice we have a lock icon Let’s click the lock icon to unlock and edit the layer Let’s select component
swipe-vertical Next navigate to the Properties panel The Properties panel is
where we can configure the elements attributes style, position and size, and
also edit the component properties You’ll find this component is driven
through the use of groups SlideA, SlideB, and SlideC Now let’s move to the Library panel We’ll find the individual group definitions and group contents in the Library We can right click a group name
click Edit and edit the contents of the group Protip: to quickly inspect the
elements inside this group We’ll use the Outliner The Outliner is a really cool
new tool for enabling us to view nested elements inside the group versus clicking through your divisions you can rapidly find which element you would like to target and edit You’ll also notice in this creative we have two
divisions: wrap-SlideA txt-wrap-SlideA These are dynamic text divisions that
have a little bit of CSS logic that helped to auto center them depending upon what type of information comes down through the feed Now let’s click on txt-description-SlideA in the Outliner You’ll also notice there’s a T icon next to
the txt-description-SlideA This signifies that it’s a text element With the text element selected We will come up to the panel at the top named Text In the text panel you’ll be able to configure text fitting of dynamic text and also the styling of the text in your document We can set a maximum size and
also a minimum size and when the dynamic text is passed to the division it will display the rendered fitted text size Now let’s navigate back to the root of
the document you’ll notice we have breadcrumbs in the bottom left-hand corner of the stage right above the timeline Let’s click Div to jump back to
the root of our document Now two more notable panels are the Events panel and the Dynamic panel In the Events panels we have events that
are specific to the control over the animated arrow icons behavior during autoplay and also during user gesture Next to the Events panel we have the
Dynamic tab These are the dynamic bindings that enable this document to be
bound dynamically including assets, text, styling, and click exits You’ll also notice Brand Awareness is
highlighted Brand Awareness is the schema we are going to be utilizing inside of Display & Video 360 Ad Canvas click OK to exit the dialog As an added bonus I would like to demonstrate the power of this creative If I jump over to a mock from a visual designer this is technically the spec
the designer would like me to build to This creative is dynamic so the text
could technically be interchanged Let’s fast forward to what the creative can
look like if I built it using Google Web Designers Cue Cards template You’ll notice as I refresh this page the creative auto animates The arrow tries to grab the users’ attention by animating and jumping The creative also has a
navigation on the right hand side where we can drive the creative Users can also use gesture to scroll through the creative upon user interaction Let’s say I wanted to publish this creative and upload it into Display & Video 360
Ad Canvas So you might have a question what is the Ad canvas The Ad Canvas is
a visual editor you can use to build and edit creatives in real time The Ad Canvas only supports our Google Web Designer data driven templates and also custom variations So in DV360 my template is loaded in the center and on the right hand side I have a UI that is editable on-the-fly You’ll notice text
fitting is working Variations and iterations can be knocked
out proofed and signed off in a matter of minutes now with Google Web Designer’s
new data driven templates in the Ad Canvas The new dynamic workflow has
never been easier if you would like to learn more about Ad Canvas please look in the details section of this video for a Display & Video 360 Ad Canvas
comprehensive demonstration link This wraps up our video Please have fun
creating new dynamic ads Thank you from the team at Google Web Designer

4 thoughts on “Data Driven Templates for Display & Video 360 Ad Canvas – Google Web Designer

  1. Two things.
    1. In the responsive text box, is there a way to reduce the width of the red container? I would like to put an image on the right and don't want the text to run over the top.
    2. Is there an easy way to stop the slide from returning to Slide A at the end? (i.e. finish on Slide C)?
    TIA

Leave a Reply

Your email address will not be published. Required fields are marked *