Webprogramo > Google Web Designer > Basic > Wrapped elements and groups

Wrapped elements and groups

Jorge Ramírez

17 agosto, 2017

Webprogramo > Google Web Designer > Basic > Wrapped elements and groups
SHARE! and the author will get a Yummy Cookie :
Share this...
Share on Facebook
Facebook
Tweet about this on Twitter
Twitter

Many times, in the creation of banners in HTML5, we find that we need to create elements independent of the initial timeline. Either to create a loop or simply just because they have specific actions.

Wrap elements

A Wrap is a lightweight way to work with multiple elements. When you wrap a set of elements, they get placed within a div, which you can manipulate as a single object.

So to wrap a set of elements:

 

wrap elements in Google Web Designer

 

  1. Select the element or elements you want to enclose in a div
  2. Right-click the selected element or elements, and select «Wrap» from the pop-up menu

 

Group elements

Grouping objects creates a reusable element that can be placed in documents as «instances», which are references to the group’s elements. Using multiple instances of the same group gives you a smaller file size than when you copy and paste the same content. Any change that is made to the group is reflected in all the instances of that group.

To create  a group:

 

create groups in Google Web Designer

 

  1. Select the elements you want to place in a group.
  2.  To create a group Right-click the selected elements, and select Create Group from the pop-up menu.
  3. Name the group.
  4. Click OK.

 

Editing a group on the workspace

There are several ways to edit a group once it’s been created. Edits that you make to the group will propagate to every instance of the group.

You can edit a group by editing an instance of it on your workspace

  1. Select a group on the workspace by doing one of the following:
    • Double-click an instance of a group, The group will open for editing

 

You can create an entire new animation specifically for the group and another for the main timeline,

So you can create cool animations… like this one 🙂