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.