The Editor is divided into three seperate areas, the Stage elements and ad properties panel on the left, the Components and Actions/animations panel on the right and the canvas in the middle, however, Actions/animations will be discussed in another post. 

Basic actions

You're able to find some basic actions on the top part of the canvas

- Undo/Redo: Undo/Redo canvas actions.

- Save: Save the banner.

- Preview: Save the banner, then preview the banner.

- Download: Save the banner, then download the banner as a ZIP file.

Stage Elements and ad properties

Ad properties panel

In this panel, you will see some basic info on the banner itself. 

Stage elements panel

All elements that are used in this banner are visible in the stage elements. Selecting an element will bring it to the front and shows you the element in an unobstructed view. It will also open up the properties panel of that particular element. We will discuss components and their individual settings in another page. 

Renaming Elements

By default, whenever you drag a component to the canvas, it will be receive the name of that specific component, as well as a number. You can click the name to rename the elements. The names of the elements are key to using them in the actions and animations panel later on, so make sure you name them properly. 

Element Layering

The elements are shown in the order that they appear in the Z-axis, meaning that the background is the lowest element on the canvas, and you start putting elements on top of that. For example, if you need the logo on the top left at all times, make sure the logo element is on the top of the list. If you need to re-arrange their layer height, simply drag and drop and element higher/lower in the list.

Visibility icon

Clicking the visibility icon enables the visibility of the element, but it will still appear in the actual banner preview. You can use this switch to temporary hide elements to work on the elements below. 

Library connection switch

This switch allows you to dis- or reconnect to the library. If it was previously disconnected and re-connected, the system will ask you if the element should join the original library entry or create a new one. This switch also appears in the Element Properties Panel.

Delete icon

In order to delete the element from the banner, click the delete icon. 

Please note: If you have deleted an element, it will remain in the library. 

Element Properties panel

The element properties are usually divided in two tabs, General and Style-specific properties. General will often be about the position of the element, their width and height and the contents. Styles often refer to coloring, font types and text-based alignments. Components and individual settings will be discussed in another page.

Canvas

The canvas is the active area where you can drag and drop elements to add them or re-arrange them. Selecting an element will automatically bring it to the front and will put it back, you can drag an element by clicking on it and dragging it somewhere else, or use the arrow keys on your keyboard. 

For images, you have a slightly different layout, the slider blow determines the scaling within the element, and clicking the icon in the middle and dragging it around will make you scroll the image inside the element itself. 

Components

Components tab

The components tab allows you to drag new elements to the banner. You can drag a component panel to add new elements to configure or drag an existing library item to the canvas. 

Add new components to library

This switch enables you to add every new component to the banner to the library as well. This will make re-use of certain assets easier in other banners in the adset. 

Library panel

The library panel consists of all the shared elements in the adset, for re-use in the editor. You cannot change shared properties in the editor, once the library element has been used in multiple banners. This can only be done in the adset manager.