Editor Basic Overview

The Editor is your workspace to layout, configure, set-up your creative to become different Stretch Ads (Responsive Ads)

From one workspace you can have a single creative and apply multiple ad formats (Flowlines) 

Essentially everything can be done in the editor except setting up Size-Based Fluid  or Completely Fluid formats ( See section on What is a Flowline). Fixed-Height fluid formats sizes can be added in the editor.  Complete control over your creative and formats in the editor is a feature coming soon to the editor in the near future.

The diagram below shows the full layout of the Editor with the different blocks (panels) for different functions and features for handling the creative.


[1] Top Panel

The Top Panel has the Navigation Bar as well as the Element Properties Bar

Anytime while you are working in the Editor you have visibility of the main menu of Narrator.   You can easily jump back into the Creative List view, Template list view, Dashboard view, Format list view or Analytics.  

The Element Properties Bar is blank when you enter the creative or even select different formats.   However, when you select any element in the creative you are working on, either, a. directly click on creative or, b. click on the element in the Elements List in the Right-Side Panel


[2] Right-Side Panel

The Right-Side Panel has the main functions associated with set-up, management, formats and the actual elements in the creative.

The different sections are as follows:

Creative Settings and Management Block 

This has information pertaining to the overall creative.  Features include: Creative Name, Saving and Exiting, Settings, Creative last saved status as well as the Creative category indicator for billing purposes (Basic, Pro, Advanced).   The settings menu allows you to develop custom CSS or Javascript for the overall creative as well as set-up a universal click-trackers or impression tracker for the creative.  These universal click-trackers and impression trackers can be overwritten via Deployment (covered in section Deployment)  

You can easily change the creative name by opening the settings and just replacing the existing creative name.

Creative Formats and Sizes Block

This is the sub-section that indicates all the different formats used to create Responsive Ads (STRETCH Ads).  

On the top of this block a user is able to add, remove and save different Formats.

There is a default area "ALL SIZES"  that shows all of the sizes defined (laid out) in the creative.  You can add and remove sizes.  The sizes are listed from largest to smallest

Below this default area lists all of the different formats that you set-up with this creative.  If you did not select all of the formats you wanted during the Creative Set-up step, you can add more Formats ( that will give you more ad types) as well as remove the ones off the list that are not needed.  Each of these formats uses a Flowline to define the sizes associated with that format.

(Presently disabled, but coming soon is the ability to edit these formats in the Editor)

* For Fixed-Height Fluid formats   users have the ability to add  or remove sizes directly in the creative either in this menu by clicking on the relevant icon, or in the Creative Panel right below the slider handle

Clicking on any size in this block will take you to that creative size.


Elements Block ( Elements list) 

Creatives are made up of different elements. When a PSD ( photoshop file) is uploaded, layers are parsed to become cloud hosted HTML elements.  This list shows the different elements and the type designation by color 

On the top of this block a user is able to add, remove different elements to the creative. Also indicated is the total ad load size of this creative when all elements are turned on.   Basic ads following IAB standards should target  below 200KB in size.

You can click on the element in the creative or click on the element directly in the list to select.  Turning the "eye" on/off, turns that element on/off in that particular size of the creative.

  • All elements are listed in the order of visibility ( top layer to bottom layer) 
    • You can easily drag the elements to change the order
  • All elements sizes (weights in KB)  are indicated 
  • All elements information and management menu can accessed by double-clicking on the element or clicking on the edit icon in the list to  

Presently, the tool allows for these  types of elements:

  • Images ( either imported in the psd or added later.  Formats include jpeg, png, gif files )
  • Text Boxs ( web fonts for text editing in the creative )
  • Design HTML, CSS components such as background elements, buttons, etc..
  • Widgets ( via Responsive App Canvas feature) 
    • ResponsiveAds has created some useful widgets for your usage as well such as Carousels, etc...
    • Custom iframe integrations, such as any responsive web widget or social widget can be added
    • video widgets such as youtube, vimeo, etc...
  • Social icon HTML and Image elements

We expect many more to come on a constant basis.   See Elements, Responsive App Canvas or Video in Features section to stay abreast of the latest additional features to Elements.


[3] Left-Side Panel

This side rail has been reserved for different advanced functions you can do with the creative.  Presently there are the following features.

Creative Properties Bar

  • Move from size to size
  • Open/close expandables when that ad unit is set-up
  • Show preview of CSS animation
  • Copy styles, sizes/positions and properties from one size to another
  • Copy element styles, sizes/positions and properties from one size to another

You will see lots of new features added to this rail as the product evolves.


[4] Center Panel 

The Center Panel or workspace is where your creative sits.  There are rulers that show the pixels, breakpoints and areas for which element properties are set up.

By clicking on the ruler you can move the slider to that size.

The slider has a handle that can be dragged or you can double-click to input the size you would like to move to.

Below the center panel is a menu of all of the sizes available as well the ability to also add sizes to complement the Format and Size bar.


[5] Bottom Panel

The Bottom Panel is to indicate the overall status of the Workflow.  It is also a place where you can access customer support or move to the next stage in the Creative Deployment process

Clicking on the Bottom Panel enables you to open and close it for more space.


Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk