Components Overview

Components Overview

Hi. My name’s Paul. I’m an engineer working
on Google Web Designer. In this video, I’ll
give a quick walkthrough of the components in
our latest release. First, you’ll notice–
I’m selecting HTML here– Components are available
outside of ads. You can create a
component by simply by dragging and dropping
them onto the stage. You resize them easily either
using the Properties panel– I’m going to make it fat. And I’m going to make
it a square, actually. Or you can use the
Transform control located on the upper left. You can resize it like so. There are 10 components
available in this release. And two of them are new. The first new component
is Gesture component. It adds to tap area component and provides a nice
assortment of common gestures for both mouse and touch input. The other new component is Tap
to Call, as the name suggests, it will call the
number specified on the phone on devices
with appropriate calling plug-in installed. You can just specify a number
here in the Properties panel. There are three gallery
components in this release. We have added new
functionalities to our gallery components. Also supports AutoPlay
and offer a number of new actions for navigation. For multimedia, have
a video component based on HTML5 video
and a YouTube component using the YouTube API. For mapping, the Map component
is powered by Google Maps API and will allow local
search and work with data stored
on a fusion table. And you can include any web
page with our Iframe component. Now let’s take a look at
what components can do. I’m going to drag a swipe
gallery to this page. And I’m going to add
some pictures to it. There are several ways to
add images to the component. The easiest way is to drag
and drop them using this UI. You can reorder the
pictures however you like. I’m going to hit OK. I’m going to take a quick look. So you can drag the component
at the galleries like this. Now let’s add some interaction. The first way to
add interaction is by going through
the Events panel. It’s right underneath
the Components panel. I’m going to say when
you tap on this gesture, go to the first frame. And then I’m going to say,
for gesture number two, when you tap on it, go
to the second frame. The other way to add
action to components is by right-clicking on it. See, I don’t need
to select which component is the source anymore? Now let’s go to the third frame. And I’m going to
right-click again. I’m going to say,
tap, go to frame four. Now let’s take a look
at what it looks like. You can jump. Third frame, fourth frame. You can see how to interact
with it using a mouse or touch input. Looking nice. Remember I mentioned
there are new ways to navigate in the galleries? Let’s try one out. First, I’m going to add
a new Gesture component. And I’m going to make it
cover the entire page. OK. Notice how the existing buttons
now turned a little bit more pale? That’s because the new
gesture is covering them up. I’m going to send the
new gesture to the back, so then they’re not covered. Otherwise, when
you click on them, only the new gesture picks up. Next, I’m going to add an event. So on tap, I’m going to
say, gallery, rotate once. And we’re going to get it
rotating in three seconds. I’m going to make
it rotate backwards. Now let’s take a look. You can still do the same thing. Only now, you can
rotate once backward. Rotate once backward,
Back to the yellow page. We have also added many more
properties for you to fine tune how the galleries look. For Swipe Gallery, you can do
the offset between the images and you can also specify how
big each of the images are. So I’m going to
make them squares. Each of them would be
120 pixels by 120 pixels. Let’s take a quick look
at what it looks like. You can still
swipe through them. You can still go
through the frames. And you can still rotate once. That’s it. Check out our other videos to
see what’s new in this release. Thank you for watching.


  1. Hi Petrisor, drag the tap component on stage to begin using it. We also have instructions here via our Help Center:

    Program Manager, GWD

  2. Hi, I've created a swipable gallery with 6 images with an autoplay feature that is played 3 times. However it keeps going backwards through all the images when it is played over each time. Is it possible to have the gallery start from the 1st image without showing all the images when it is going backwards. If that makes sense=)

  3. hi paul, can I control a youtube component video link on the time to start and when to end? and can I also loop it for a certain amount of time that I prefer?

  4. Hi Paul. I saw a video where this guy calls your phone when you watch the video. The conversation starts when you accept the call. Is it possible to make such initiator button using web designer?

Leave a Reply

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