This article will help you understand how to use the controls in each Panel, and adjust your ads as desired.
The Layers Panel displays all the layers and layer groups in your ad. This panel is docked to the left edge of your Design Studio workspace. You can change the panel’s width if you want it to take up more or less of your workspace.
- Toggle the Panel on and off using the Layers icon in the Toolbar, or Ctrl+1.
- Add layers by clicking a component in the Library > Components panel.
- Reorder layers by dragging and dropping them in the panel.
- Edit layer settings by clicking on the desired layer, and editing settings in the Inspector panel.
- Delete and duplicate layers using the icons at the top of the panel.
- Change layer visibility using the icon to the left of the layer name.
- Rename a layer by double-clicking its name and typing in a new one.
- Edit Stage properties by clicking the “Stage” entry at the bottom of the panel, and editing settings in the Inspector Panel.
There are several icons at the top of the Layers panel.
Adds a new layer group immediately above the currently selected layer.
Filter by Tag
Filters layer panel by keywords set in the Tag section of a layer’s Inspector Settings.
Steps back in the undo/redo history.
Steps forward in the undo/redo history.
Layer Commands Menu
See section below.
Deletes the currently selected layer.
The undo history does not persist across sessions. So as soon as you exit the Design Studio, your undo history will be cleared. The maximum number of steps in each stage's undo history is 100.
Problems with Groups/Folders in IE
Internet Explorer has problems recognizing and distinguishing 'child' layers. If you use a Folder/Group, it will not be possible to interact with (click, scroll, tap) sub-layers.
Saves the selected layer and its configuration to your clipboard.
Removes the selected layer from your ad and saves it to your clipboard.
Pastes layers saved in your clipboard into an ad’s stage. Copied layers can be pasted in separate ads within the same browser session.
Duplicates the selected layer within the current stage.
Brings up the selection mode allowing you to select and delete multiple layers within the current stage.
Applies to Copy, Cut, Paste, and Duplicate:
- All layer settings are copied
- All layer actions and transitions are copied and applied relatively
- All layer children are copied
- Each child’s settings, actions, transitions, and children are copied
To copy multiple layers, move them into a container layer (e.g. a group or view), and copy this parent layer.
Adding a layer: To add a new layer to the Layers Panel, simply click one of the components in the Components Panel. A new layer corresponding to the default version of that component will immediately appear above the currently selected layer.
Selecting a layer: Click on a layer to select it. Selecting a layer in the Layers Panel will have the following effects:
- The Inspector Panel will update to display the selected layer’s settings
- If Show Selection Edges is toggled in the ad’s Edit Mode, the layer will have a blue selection box around it.
Toggling layer visibility: To change a layer’s visibility, click the icon to the left of the layer’s name.
- Move the Inspector around the workspace by dragging it by its title bar.
- Toggle Inspector on and off using the icon in the Control Bar, or Ctrl+2.
- View and change settings for currently selected layer in the four sections within the Panel.
- Instantly see your changes on the Stage, as soon as you make them.
The Inspector Panel displays the properties of the currently selected layer, group, or stage. Select any of these items in the Layers Panel, and its properties will appear in the Inspector Panel, allowing you to modify them. Drag and drop the Inspector Panel around your Design Studio workspace using its title bar.
The Inspector Panel has the following expandable sections:
- General: Properties that are not layer-specific (e.g. position, size, name). These properties are the same for all layers.
- Settings: Properties that are specific to the component in this particular layer.
- Actions: Actions that are assigned to this layer.
- Transitions: Transitions that are defined on this layer.
The Inspector Panel’s General section is the same for each layer. It allows you to change some high-level layer settings in three tabs – Info, Appearance, and Tags.
This tab contains the layer’s name, icon, position and size parameters.
- Name: Lets you change this layer’s name. This name is used in the following contexts:
- The name of this layer in the Layers Panel.
- The label used to indicate this layer in a parent navigation component, such as the Gallery or Tabset.
- Thumbnail: Lets you change this layer’s thumbnail. The thumbnail is used by certain navigation components, such as the Gallery component, to indicate a navigation button for this component. If this layer is not a child of one of these navigation components, you do not need to specify a thumbnail.
- Position: Controls the X and Y position of this layer with respect to its parent layer. The anchor point used here is the top left corner of both layers. For example, if X=10 and Y=50, that means the upper left corner of this layer is 10 pixels to the right and 50 pixels below the upper left corner of its parent layer. If the parent layer controls its children’s geometry, the Position settings will be grayed out and you will not be able to change them.
- X: X offset, in pixels.
- Y: Y offset, in pixels.
- Size: Controls the dimensions (width and height) of this layer in pixels. If the parent layer controls its children’s geometry, the Size settings will be grayed out and you will not be able to change them.
- W: Width, in pixels.
- H: Height, in pixels.
This tab contains the layer’s high-level look-and-feel properties.
- Layer Opacity: Controls the opacity of this layer, which determines how much you can see through the layer to what’s underneath. 100% means fully opaque; 0% means fully transparent. This affects the opacity of this layer’s children as well.
- Border: Controls the thickness of the component border in pixels. Enter 0 for no border.
- Border Color: Specifies the color of the component’s border.
- Fill Color: Specifies the background color of this component.
- Fill Opacity: Controls the opacity of the background color. 100% means fully opaque; 0% means fully transparent.
Layer tags allow you to apply tags to the layers within your ad, and filter the Layers Panel to display only layers with a particular tag. This can be especially helpful if your ad contains a large number of layers or if you are creating a reusable ad template.
To add a tag to a layer in your ad, select the layer in the Layers Panel. This will focus the Inspector Panel on that layer. Go to the Inspector Panel’s General section and select the Tags tab. This section will allow you to apply custom text as the tag for that layer.
After you’ve tagged a layer, an icon will appear on the right side of the layer.
To filter your your Layers Panel by tag, click the Filter by Tag icon in the Layers Panel. This will bring up a Show dropdown with all available tags in your ad.
After a particular tag is selected, the layers panel will only display layers with that tag applied. Note that when in this view, re-ordering of layers and adding groups is disabled.
To display all layers, click the “x” to the right of the dropdown, or select All Layers from the dropdown.
The Inspector panel’s General section is the same for each layer. It allows you to change some high-level layer settings in two tabs – Info and Appearance.
The Inspector panel’s Settings section contains settings that are specific to the component represented by each layer. The settings are different for each component. See each component's documentation for information on its settings. For more on standard components available in Design Studio, click here.
The Stages panel lets the ad designer create, delete, and manage stages, as well as switch contexts between stages. When you switch contexts to a new stage, the Layers panel and Preview change correspondingly.
- Toggle Panel on and off using the Stages icon in the Control Bar, or Ctrl+4.
- Add new stages by clicking the Add Stage button.
- Toggle between stages by clicking the left arrow (Previous Stage) and right arrow (Next Stage) buttons.
- Switch between stage contexts, enabling you to view and change each of the creative stages of your ad.
The Stage panel lists the stages currently defined in this ad. The table columns are as follows:
- Name: The name of each stage as it appears in the Placement Settings of each placement in the Traffic Module. The primary stage, the one that appears without any user action, is automatically named Default Stage and can't be renamed.
- Dimensions: The pixel dimensions for each stage are listed here. Like the Stage Name, the Dimensions can be defined in the Inspector Settings.
- Click the icon to add a new stage.
- Click the icon to duplicate a stage.
- Click the icon to delete a stage.
To edit a stage, click on its row in the table. This will bring up the stage in both the Layers panel and the Inspector panel, where the Stage's contexts and attributes can be edited.