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