Skip to end of metadata
Go to start of metadata

Table of Contents


_______________________________________________________________________________________________________________________________________________________________________________

Access to XPO Designer

  1. Select Creative tab
  2. Click +New
  3. Select Dynamic Display Ad
  4. Input Creative Info & other information
  5. Select creative you've created from Creative List
  6. Select Design Creative

OR
  1. Login to XPO > Select Advertiser Account > Click on Creative
  2. Create Ad

 

Components

Text Component

How to
Flow

Add text component to a dynamic ad

  1. Drag and drop the Text component to the canvas.
  2. The Text input editor will appear. In it, you can change the font style, size and many other formatting options.
  3. Click Save button.

Change text formatting (e.g. color, font style etc.)

  1. Select the Text component in canvas or via the Layer panel.
  2. Click on the edit text button.
  3. Text input editor will appear. In it, you can change the font style, size and many other formatting options.
  4. Click Save button.
Copy texts from another source with Hyperlink
  1. Drag and drop the Text component to the canvas
  2. The text Input editor will appear, copy a text from another web site with hyperlink 
    and paste to text editor
  3. Click Save button

Font size and text format are kept but hyperlink will be removed

Button Component

How to
Flow

Add a button component to dynamic ad

  1. Drag and drop the Button component to the canvas
  2. Text Input will be shown to let user can change the text
  3. Click Save button
  4. Open General under Button in Properties panel
  5. Enter an URL into Target Click
  6. Select URL in the dropdown
  7. To test the URL, click on "Test" button. You will be directed to the particular landing page OR  
    use the Preview option to view the resulting ad, click on button -> you will redirect to URL
  8. Close preview
  9. In General, select PHONE from dropdown
  10. Enter phone number into Target Click
  11. Preview the ad, click on button -> you will call to phone number
  12. Close preview
  13. In General, select EMAIL from dropdown
  14. Enter email address into Target Click
  15. Preview the ad, click on button -> mail composer will be opened, email address is pre populated

 

Image Component

How to
Flow

Add an image to a dynamic ad

  1. Drag and drop the Image component to the canvas
  2. Upload image file from your local computer
  3. Adjust dimension in Position & Size panel
  4. To set up clickthroughs for Image, select/edit the particular image
  5. Setup clickthrough (Target URL)
  6. Preview the ad, click on the image, it will take you to the Targeted URL

Search for an image in the image library

  1. Drag and drop the Image component to the canvas
  2. Upload image file from your local computer
  3. On righthand side, under Properties for image component
  4. Click on "Or try our new image search"
  5. Enter your desired keyword into search box
  6. Click search icon
  7. Select image from result list -> image information and source will be displayed
  8. Click Use image button
  9. Preview the ad
Add a GIF image
  1. Drag and drop the Image component to the canvas
  2. Upload a gif file from your local computer
Upload non-image to image component
  1. Drag and drop the Image component to the canvas
  2. Upload a doc/pdf.. file from your local computer

Error message will be displayed:

File is not a valid image file. Please select an image file with *.bmp, *.gif, *.jpg

 or *.png extensions

Upload a file > 100MB
  1. Drag and drop the Image component to the canvas
  2. Upload an image file > 100MB from your local computer

Image will be resized.

Map Component

How to
Flow

Add a Map to a dynamic ad

  1. Drag and drop the Map component to canvas
  2. Preview -> map will be displayed properly
  3. From Map option in Properties panel, uncheck show search bar option
  4. Preview -> you cannot search a location because search bar is hidden
  5. Uncheck Show map control -> it will be hidden on map
  6. Select map type
    1. Roadmap
    2. Settlalite
    3. Hybrid
    4. Terrain
  7. Preview -> map will be displayed as set type

 

Video Component

How to
Flow

Add a video to a dynamic ad

  1. Drag and drop the Video Player component to canvas
  2. Enter the youtube link into Video URL field (under Video options)
  3. (OPTIONAL) Check or uncheck the Auto play option (as your preference)
  4. (OPTIONAL) Check or uncheck the Mute option (as your preference)
  5. Preview

 

Video List Component

How to
Flow

Add a video list to a dynamic ad

To add a video list, you can use the slider component. To start creating it, use either the following method:

To create a new video list using CURATOR

  1. Drag and drop the Video component to canvas
  2. A pop-up menu appears to select the feeds that was created in CURATOR.
  3. Select feed (video post or youtube feed)
  4. Click the Select feeds button
  5. (OPTIONAL) Check or uncheck the Auto play option -> video will be applied the setting
  6. (OPTIONAL) Check or uncheck the Mute option -> video will be played with or without sound
  7. Preview

*If you've created a feed earlier, please watch the video from 1:14 to learn on how to link the feed from CURATOR

Configure video list with the different settings

N/A

Video Background Component

How to
Flow

Add Video background component to a dynamic ad

  1. Drag and drop the Video Background component to canvas
  2. Upload a video from your computer into the component
  3. Click Save and Preview it

 

 

Social Component

How to
Flow

Add a social media icon with clickthrough

 

  1. Drag social component to canvas
  2. In Social option, check or uncheck social network name to add or remove them to/ from component
  3. Select social name from lay tree on the left, enter URL into Target Click
  4. Save and preview
  5. Click on social icon will be redirect you to correct social web site

 

Create feed using social media as a source

 

N/A

Countdown Component

How to
Flow

Add a countdown clock to a dynamic ad

  1. Drag Countdown component to canvas
  2. Select Show type in Properties/ Count Down options panel
    1. Weeks
    2. Days
    3. Hours
  3. Specify a date to start count down in Date Time picker
  4. Label of week, day, hour, min, sec can be changed in Count Down options
  5. Save and preview

 

Containers

Container Component

How to
Flow

Add a container to a dynamic ad

  1. Drag Container component to canvas
  2. Drag any component into container, e.g: text and image
  3. When you move container, text and image inside container will be moved together
  4. Save and preview

 

Scrollable Content Component

How to
Flow

Add a scrollable content to a dynamic ad

To create a Slider, first create a Feed using the CURATOR:

  1. Drag scrollable content component to canvas
  2. Select template
  3. Select feed, click Finish button
  4. Check the option Auto scroll
  5. Configure Auto scroll option
  6. Preview

Tab Component

How to
Flow

Create a tab button

  1. Select default template (with tab component) or drag and drop tab component to a blank design
  2. Double click on tabmenu element to change tab title
  3. Select and drag tabmenus element to move tab menu
  4. Setup background color for tabmenu
  5. Click Apply same style to all tab menu
  6. Configure and setup other styles -> it will apply to all tab menus

Create a sub-tab (i.e. Tab within another tab)

N/A

Slider Component

How to
Flow

Add Slider component to a dynamic ad

To create a Slider, first create a Feed on CURATOR.

  1. Drag slider component to canvas
  2. Select gallery template
  3. Select video template
  4. Select feed, click Finish button
  5. Setup slide options
  6. Preview

Form Component

How to
Flow

Add a booking form to a dynamic ad

  1. Drag form component to canvas
  2. Select a template
  3. Click Use template button

Crop Image

  1. In Designer, click on the image that you would like to edit under the "Layers" section located on your left.
  2. Immediately on your right, you will see the "General" section. Click on the "Edit" button.
  3. In the editing mode, highlight the portion that you would like to keep to crop it.

Change Item Property

How to
Flow

Add a background color

  1. Drag and drop any component to canvas
  2. Go to panel Properties/ Style
  3. Click on the arrow to expand BACKGROUND
  4. Click on color icon and select color you want from color table

Setup background image for a component

  1. Drag and drop any component to canvas
  2. Go to panel Properties/ Style
  3. Click on the arrow to expand BACKGROUND
  4. Click on "Or try our new image search" or camera icon to upload image for background

Create a text shadow OR add a button shadow

  1. Drag and drop any component to canvas
  2. Go to panel Properties/ Style
  3. Click on the arrow to expand the SHADOW
  4. Adjust the settings
    1. Inner shadow
    2. Distance
    3. Blur
    4. Spread
    5. Angle
    6. Color

Change position & size

  1. Drag and drop any component to canvas
  2. Go to panel Properties/ Style
  3. Click on the arrow to expand POSITION & SIZE
  4. Enter X,Y and Width, Height
  5. Select "px" or "%"

Setup border for a component

  1. Drag and drop any component to canvas
  2. Go to panel Properties/ Style
  3. Click on the arrow to expand BORDER
  4. Setup
    1. Show
    2. Thickness
    3. Color
    4. Style
    5. Corner radius

Setup animation for components in a design

  1. Drag and drop any component to canvas
  2. Go to panel Properties/ Style
  3. Click on Animation dropdown
  4. Select an action/ animation -> Animation will take affect to component when it loads
  5. Select a component in canvas
  6. Go to Properties, click on arrow to expand Actions/ animations
  7. Click Add action
  8. Select event
  9. Enter target components
  10. Select an action/ animation
  11. Preview

 

Adjust Orientation

From Portrait to Landscape

3 Options in Orientation:

  1. Any: It can be either Landscape OR Portrait; the ad will adapt based on the MAX WIDTH that you have set.
  2. Portrait: Ad will adapt when it detected the DEVICE IS IN PORTRAIT & the device width is less than the MAX WIDTH you have set.
  3. Landscape: Ad will adapt when it detected the DEVICE IS IN LANDSCAPE & the device width is less than the MAX WIDTH you've set.

Create Different Types of Dynamic Ads

How to
Flow

Create a dynamic display ad

  1. Select Creative tab
  2. Select +New
  3. Select Dynamic Display Ad
  4. Input Creative Info & other information
  5. Select creative you've created from Creative List
  6. Select Design Creative

Design a creative with template

  1. Select Creative tab
  2. Click +New
  3. Select Dynamic Display Ad
  4. Input Creative Info & other information
  5. Select creative you've created from Creative List
  6. Select Design Creative
  7. Select Template

Design creative use existing design

  1. Select Utility > Trafficking
  2. Designer > Manage template
  3. Select Add New & select the design you need
  4. Select Clone from project
  5. Done, you've created the design as template
  6. Continued by the same flow as "Design a creative with template"

Design a adaptive design

N/A

  • No labels