Please follow the instructions below on how to use Components:

1. Text Component

How To Steps Tutorial Video
Add text component to a dynamic ad  

1. Drag and drop the Text component to the canvas

2. The Text Input Editor will appear and you can use it to change the font style, size, and many other formatting options

3. Click on Save button when you finish editing

Video Link: 

https://youtu.be/yQ6-cogBJC8

Change text formatting (e.g. color, font style, etc.) 1. Select the Text component in canvas or via the Layer panel.

2. Click on Edit Text button.

3. The Text Input Editor will appear and you can use it to change the font style, size and many other formatting options

4. Click on Save button when you finish editing

Video Link: https://youtu.be/PzN--8UwnO0
Copy texts from another source with a hyperlink

1. Drag and drop the Text component to the canvas

2. The Text Input Editor will appear and you copy a text from another web site with hyperlink and paste to text editor

3. Click on Save button when you finish editing

(Please note that font size and text format are kept but the hyperlink will be removed.)

 N/A

2. Button Component

How To Steps Tutorial Video
Add a button component to a dynamic ad

1. Drag and drop the Button component to the canvas

 Text Input will be shown to let the user change the text

3. Click on Save button

4. Open General under Button in the Properties panel

5. Enter an URL into Target Click

6. Select URL in the dropdown

7. Click on Test to test the URL. You will be redirected to the particular landing page or use the Preview option to view the resulting ad

8. Close Preview

9. Select Phone from the dropdown under General

10. Enter the phone number into Target Click

11. Click on the newly created button to test it

12. Close Preview

13. Select Email from the dropdown under General

14. Enter the email address into Target Click

15. Click on the newly created button to test it. An email composer will be opened and email address is pre-populated.

Video Link: 

https://youtu.be/yQ6-cogBJC8

3. Image Component

How To Steps Tutorial Video
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

Video link: 

https://youtu.be/lBMgLmVs1-M

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 the righthand side, under Properties for the image component

4. Click on "Or try our new image search"

5. Enter your desired keyword into the search box

6. Click search icon

7. Select image from result list -> image information and source will be displayed

8. Click on Use image

9. Preview the ad

Video link: 

https://youtu.be/3ss1kLjr0GA

Add a GIF image

1. Drag and drop the Image component to the canvas

2. Upload a gif file from your local computer

 N/A
Upload non-image to the image component

1. Drag and drop the Image component to the canvas

2. Upload a doc/pdf.. file from your local computer

3. Error message will be displayed:

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

 N/A

Upload a file > 100MB

 1. Drag and drop the Image component to the canvas

2. Upload an image file > 100MB from your local computer.

The image will be resized.

 N/A

4. Map Component

How To Steps Tutorial Video
Add a Map to a dynamic ad

1. Drag and drop the Map component to the canvas

2. Preview -> map will be displayed properly

3. From Map option in the 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

  • Roadmap
  • Satellite
  • Hybrid
  • Terrain

7. Preview -> map will be displayed as set type

Video link: 

https://youtu.be/EZ42c3nAtE8 

5. Video Component

How To Steps Tutorial Video
Add a video to a dynamic ad

1. Drag and drop the Video Player component to the canvas

2. Enter the youtube link into Video URL field (under Video options)

3. (OPTIONAL) Check or uncheck the Autoplay option (as your preference)

4. (OPTIONAL) Check or uncheck the Mute option (as your preference)

5. Preview

Video Link: 

https://youtu.be/ux13qkNdOgc

6. Video List Component

How To Steps Tutorial Video
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 XPO Curator

  1. Drag and drop the Video component to the canvas
  2. A pop-up menu appears to select the feeds that were created in CURATOR.
  3. Select feed (video post or youtube feed)
  4. Click the Select feeds button
  5. (OPTIONAL) Check or uncheck the Autoplay 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

Video Link: 

https://youtu.be/yJC6T_AnaTY

Configure the video list with the different settings

 N/A

Video link: 

https://youtu.be/doLqiRxxYAM

7. Social Component

How To Steps Tutorial Video
Add a social media icon with clickthrough

1. Drag social component to the canvas

2. In Social option, check or uncheck social network name to add or remove them to/ from component

3. Select social name from a lay tree on the left, enter URL into Target Click

4. Save and preview

5. Click on social icon will redirect you to correct social web site

Video Link: 

https://youtu.be/EZ42c3nAtE8

Create feed using social media as a source

-

 -

 8. Countdown Component

How To Steps Tutorial Video
Add a countdown clock to a dynamic ad

1. Drag Countdown component to the canvas

2. Select Show type in Properties/ Count Down options panel

  • Weeks
  • Days
  • Hours

3. Specify date to start counting down in Date Time picker

4. Label of week, day, hour, min, sec can be changed in Count Down options

5. Save and preview

Video Link: 

https://youtu.be/oabZb2s-xq8 

9. Container Component

How To Steps Tutorial Video
Add a container to a dynamic ad

1. Drag Container component to the canvas

2. Drag any component into a container, e.g: text and image

3. When you move container, text, and image inside the container will be moved together

4. Save and preview

Video Link: 

https://youtu.be/WqWQ4SwYNnw

10. Scrollable Content Component

How To Steps Tutorial Video
Add a scrollable content to a dynamic ad

To create a Slider, first create a Feed using the XPO Curator: 

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

Video Link: 

https://youtu.be/haoAPDEnKUA 

11. Tab Component

How To Steps Tutorial Video
Create a tab button

1. Select the default template (with tab component) or drag and drop tab component to a blank design

2. Double click on the tab menu element to change the tab title

3. Select and drag the tab menus element to move the tab menu

4. Set up a background color for tab menu

5. Click Apply same style to all tab menu

6. Configure and set up other styles -> it will apply to all tab menus

Video Link: 

https://youtu.be/FD-MG8nzGFU 

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

 

Video link:

https://youtu.be/Xo_ZP77cvOU

12. Slider Component

How To Steps Tutorial Video
Add Slider component to a dynamic ad

To create a Slider, first, create a feed using XPO Curator.

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

Video Link: 

https://youtu.be/MqoyrkO962o

13. Booking Form Component

How To Steps Tutorial Video
Add a booking form to a dynamic ad

1. Drag form component to the canvas

2. Select a template

3. Click Use template button

Video Link: 

https://youtu.be/S5zUINn5n44

14. Change Item Property

How To Steps Tutorial Video
Add a background color

1. Drag and drop any component to the canvas

2. Go to panel Properties/ Style 

3. Click on the arrow to expand BACKGROUND

4. Click on the color icon and select color you want from the color table

Video Link: 

https://youtu.be/hZFVUf6LpmM

Setup background image for a component

1. Drag and drop any component to the 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 the camera icon to upload image for background

Video link: 

https://youtu.be/ieM7nb_vSeQ

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

  • Inner shadow
  • Distance
  • Blur
  • Spread
  • Angle
  • Color

Video link: 

https://youtu.be/t6ikvsh99Fk  

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 "%"

Video link: 

https://youtu.be/bNWnY2Nn4iM

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

Video link: 

https://youtu.be/-W0PTFJT21U 

Setup animation for components in a design

1. Drag and drop any component to the canvas

2. Go to panel Properties/ Style

3. Click on Animation dropdown

4. Select an action/ animation -> Animation will take effect on the component when it loads

5. Select a component in canvas

6. Go to Properties, click on the arrow to expand Actions/ animations

7. Click Add action

8. Select event

9.Enter target components

10. Select an action/ animation

11. Preview

Video link: 

https://youtu.be/EpjllfcZghk 

 
Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.