Build Swirl creatives

You can make a Swirl creative by using the Swirl component. To make the process easier, Google Web Designer includes templates where you can switch in your own assets and adjust an existing design to suit your needs.

Customize a Swirl template

For inspiration or a jump start on your creative design, you can use a pre-built layout in Google Web Designer. Swirl templates can be found in the Template Gallery, in the Swirl for Display & Video 360 category. The following layouts are available:

• Swirl Standard - A 300x600 Swirl creative with standard elements (a 3D model, logo, CTA button, and gesture cue).

• Swirl Standard Expandable - A 300x250 Swirl creative that can expand to full screen, with standard elements.

• Swirl Expanding - A 300x250 Swirl creative that can expand to full screen, with standard elements, a header, and parallax images.

• Swirl Color Selector - A 300x600 Swirl creative with standard elements and color chips to change the 3D model’s color.

• Swirl Color Selector Expandable - A 300x250 Swirl creative that can expand to full screen, with standard elements and color chips to change the 3D model’s color.

• Swirl Hotspot - A 300x600 Swirl creative with standard elements and hotspots that display additional information about the 3D model.

• Swirl Hotspot Selector Expandable - A 300x250 Swirl creative that can expand to full screen, with standard elements and hotspots that display additional information about the 3D model.

Note: In order to build a 336x280 Swirl creative, build a 300x250 Swirl creative then add 336x280 as an additional size in Display & Video 360 (under Creative details > Basic details > Dimensions).

Watch this video and read below for common workflows to customize a Swirl template.

Swirl creative walkthrough - Google Web Designer

The Outliner panel may be useful for finding and selecting nested elements that you want to change.

Use your own 3D model

1. Double-click the Swirl component to open the Swirl editing dialog.
2. In the Layers panel, select the 3D model.
3. In the Properties panel, edit the URL field to select the GLB file for the model you want to use.
4. Click Save.

Use your own images

You can swap out the images in the template. For example, to replace the template's logo image with your own, follow these steps:

1. Double-click the Tap Area component on the stage that contains the logo image.
2. Right-click the logo image and select Swap image...
3. Click the Import assets... button to select an image from your file system, then click OK.

You can resize and reposition the new image as necessary.

Use your own parallax images

The process differs for parallax (scroll-sensitive) images:

1. Double-click the Swirl component to open the Swirl editing dialog.
2. Either swap out any existing parallax images with your own, or delete them and add new ones.
   • Swap out the parallax images:
     1. Right-click each image and select Swap image...
     2. Click the Import assets... button to select an image from your file system, then click OK.
   • Delete the parallax images and add your own:
     1. In the Layers panel, select the image layers (everything except the 3D model layer) and click the Delete button.
     2. Click the Add images button to select images from your file system, then click OK.
3. Set your image animation by adjusting their position and opacity on the Start and End tabs.
4. Click Save.

Use your own text

You can replace the text content with your own, such as for a call to action. (Some CTA buttons may use an image instead.)

1. Make sure you can select the text element that you want to edit. You may need to double-click the parent element before you can directly select the text element.
2. Select the Text tool from the left-hand toolbar.
3. Hover over the text element until a dashed outline appears around it, then click.
4. Edit the text.

If you don't see a blue dashed outline around the gesture cue text (such as "Swipe to rotate") when hovering over it with the Text tool, go to the CSS panel, disable the pointer-events: none property, and try again. Remember to re-enable the property after editing the text.

Set the exits

1. Open the Events panel.
2. Double-click an event with the action Exit.
3. Enter your exit URL and click OK.
4. Repeat for any other events with the action Exit.

Change an element's background color

1. Select the element that you want to change.
2. Open the Properties panel and click the color chip under Fill.
3. Select the new background color.

Edit color chips

You can change a color chip to different color, then adjust the effect on the 3D model when the user selects that color chip.

1. To make a color chip a different color, follow the instructions above for changing an element's background color.
2. Open the Events panel and double-click the event that is configured for the color chip element.
3. Make sure that the Material name matches the material name in in the 3D model.
4. Change the Red, Green, and Blue values to match the new color.

Edit hotspots

Hotspots can be added by using the 3D Editor, where you can set the hotspot coordinates and the hotspot indicator image. You can use a separate 3D Model Viewer component to add hotspots, along with info cards with titles and description. Once added, you can go to Code view to copy the hotspot code and paste it into the Swirl component code.

1. Switch to Code view.
2. Search for the gwd-3d-hotspot-container element and copy the hotspot code. You can find an example below.
3. Find the gwd-swirl element for your Swirl component, then paste the hotspot code so that it's nested within the gwd-3d-model-viewer element for that Swirl component.

Example hotspot code

<gwd-3d-hotspot-container up-image="assets/upimage.png">
<gwd-3d-hotspot data-position="-2.736024600164982m 1.4798720259415885m 0.0708079220782482m" data-normal="-0.8766998426144301m 0.4810378217560751m 6.463169347300796e-8m" hotspot-name="gwd-3d-hotspot-0" hotspot-title="Personalize" hotspot-description="Easily changeable watch bands for switching things up." info-card-hidden=""></gwd-3d-hotspot>
</gwd-3d-hotspot-container

Edit the hotspot close icon

The hotspot close icon displays when a hotspot is selected. (Unselected hotspot indicator images should be specified within the 3D Editor.)

1. Expand the Tap Area with an ID of hotspot_close_taparea.
2. An image is nested under this Tap Area. Swap this image for the one you want to use.