Please follow the instructions below on how to use Components:
1. Text Component
| How To | Steps | Tutorial Video |
| 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. 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 the 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 website with a hyperlink and paste it to the text editor 3. Click on the 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 the 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: |
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: |
| 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 right hand 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 the 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: |
| 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: The 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 the Map option in the Properties panel, uncheck the show search bar option 4. Preview -> you cannot search a location because the search bar is hidden 5. Uncheck Show map control -> it will be hidden on the map 6. Select a map type
7. Preview -> map will be displayed as set type |
Video link: |
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 the 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: |
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
|
Video Link: |
| Configure the video list with the different settings |
N/A |
Video link: |
7. Social Component
| How To | Steps | Tutorial Video |
| Add a social media icon with clickthrough |
1. Drag social component to the canvas 2. In the Social option, check or uncheck social network names 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 the social icon will redirect you to the correct social website |
Video Link: |
| 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
3. Specify date to start counting down in Date Time picker 4. Label of the week, day, hour, min, sec can be changed in Count Down options 5. Save and preview |
Video Link: |
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 the container, text, and image inside the container will be moved together 4. Save and preview |
Video Link: |
10. Scrollable Content Component
| How To | Steps | Tutorial Video |
| Add scrollable content to a dynamic ad |
To create a Slider, first create a Feed using the XPO Curator:
|
Video Link: |
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 the tab menu 5. Click Apply the same style to all tab menu 6. Configure and set up other styles -> it will apply to all tab menus |
Video Link: |
| Create a sub-tab (i.e. Tab within another tab) |
|
Video link: |
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.
|
Video Link: |
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 the Use template button |
Video Link: |
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 the color you want from the color table |
Video Link: |
| 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: |
| Create a text shadow OR add a button shadow |
1. Drag and drop any component to the canvas 2. Go to panel Properties/ Style 3. Click on the arrow to expand the SHADOW 4. Adjust the settings
|
Video link: |
| Change position & size |
1. Drag and drop any component to the 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: |
| Setup border 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 the BORDER 4. Setup
|
Video link: |
| 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 the 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: |
Comments
0 comments
Please sign in to leave a comment.