Groups Overview – Google Web Designer

Groups Overview – Google Web Designer


LUCAS: My name is Lucas, and
I’m an engineer on Google Web Designer. In this video, I will
show how to use groups. Groups are a way of
encapsulating content into reusable assets. And to show what
this means, I’m going to start with a simple example. I add an image to stage,
and I add some text as well. So I’ll type in the text, and
I will format it a little bit. Maybe center it, make it bold. Tweak the size of the
text box a little bit. OK, now I select both
elements and I right click and go to Create Group. And I enter a name– My Group. Now, I see that in
the Asset Library, I have a new entry for that
group and the elements on stage have been replaced by an
instance of this group. I can add new instances
by drag-and-dropping from the Asset Library. Each of these instances
is a reference to the group’s
contents, which means that if I edit any one instance,
the changes are reflected in both. So for example, I
will change the text and I will create a simple
animation where I first fade the text out to
0 opacity, and then I fade it back in to opacity 1. And now if I play
the animation, we see that both instances
are identical. To see how this works
behind the scenes, we can switch to Code View. So here in Code
View, I see a block that has all of my groups. There’s only one. It has an image, and
it has some text. And then here in the main
document are my two instances. Each instance is an empty
div that refers to the group by name. When you publish
the document, we inject the contents of the
group into each instance– so the instances are guaranteed
to always be identical. Groups can contain
any content that you can build in Google Web
Designer, including instances of other groups. For example, here I’ll
add another instance. Maybe I’ll style it a bit
differently by giving it a border, and then I will
add an additional element– let’s say, a div. Now I select both and
create another group. So as before, if I edit
one of the instances, then those changes are
reflected in all instances– regardless of where they appear. If I delete all the
instances from stage, then the groups themselves
don’t disappear. They are still in
the Asset Library, and I can still add
additional instances on stage. If you want to delete a group
entirely, in the Asset Library, you can right-click on
it and select Delete. This context menu also
gives a few other options. For example, I can
rename the group– call it Teapot. You can duplicate
the group, which creates a new group
whose contents are a clone of the original. And finally, you can edit
the group in a separate view. This last option
is useful if you don’t have any
instances on stage, or if the state is
cluttered and you want to just look at
the group in isolation. So I’ll select that, and now
I’ll do some more editing. In this case, I’ll add a
colored background to the group. And I’ll do that
by drawing a div, change its color a
little bit, and then I will send it to the back. And once I’m done
editing, I click on the root of the breadcrumb,
and now I’m back on stage. I see the changes
have been reflected in all of my instances. And if I add a new instance,
it also has those same changes. That completes this
introduction to groups. In the next video, I’ll show
how we can add interactivity to groups by adding
events to them. Thank you for watching.


One thought on “Groups Overview – Google Web Designer

  1. Very helpful tutorial, thank you for the upload!
    Watch this video https://www.youtube.com/watch?v=jbYBrapX-Jc its also very useful!
    #masonsoiza

Leave a Reply

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