Web Center Certification Creating Promotions

1. Web Center CertificationCreating Promotions Web Center Certification Training Intuit Financial Services University

2. Creating Promotions: Objectives • Practice using Web Center by: Creating a New Promotion • Upload an image • Upload a document • Insert an image on a web page • Insert internal and external links • Create an anchor and link to it • Preview, send to Staging and Go Live

3. Terms to Know • Image - in Web Center terms, any graphic (adhering to accepted formats such as GIF, JPEG) that can be uploaded to the CMS and referenced on a web page • Pixel - Short for Picture Element, a pixel is a single point in a graphic image. • Document- in Web Center terms, any file (adhering to accepted formats such as PDF, RTF) that can be uploaded to the CMS and referenced on a web page • Bookmark (a.k.a Anchor) - A tagged point within a page that can be linked to from other points. • Promotion Manager - a Intuit Financial Services marketing product that displays banners to Internet Banking consumers • Alt tag – short for Alternative Text. Text that displays when a website visitor hovers over an image or link. • Alignment - (for Images) options for organizing pictures with corresponding text • Spacing - (for Images) horizontal and vertical padding used to separate an image from the content around it • Aspect Ratio - in computer graphics, the relative horizontal and vertical sizes of an image.

4. This page intentionally left blank.

5. Objective 1Working with Images

6. Images and Documents Step 1: Go to Work Area→ Images & Documents. Step 2: Select the Images / Go icon. An FI admin can add, replace, and delete both images and documents residing within CMS.

7. Images Main Screen The Images main screen allows users to upload, view, delete and replace images. Images may be sorted by Name or Type using the sort links at the top of the page. The Back button will return the user to the Images and Documents selection screen.

8. Image Requirements / Best Practices Images Requirements Accepted file formats for images: gif, jpg, jpeg, png, map, bmp Special characters or spaces are not allowed in the file name. File names are case-sensitive. There is not a limit to the file size of an uploaded image or the total number of images that may be stored in Web Center. Best Practices Use an external image editing program to resize and optimize images for the web. Do not resize images using the WCAC. Send the image and the page where the image is located to staging and live at the same time; otherwise, the image will be broken on the page on the live site. Use the Management Console upload tool to upload images for Promotion Manager. Use a consistent naming convention, for example, name all banners from your Mortgage department: mort-imagename.jpg. This makes it easier to locate an image in the WCAC.

9. Upload a Single Image Step 1: Click Upload image,select an image and click Open. Step 2: Confirm that the new image has been uploaded. It is not necessary to refresh the page to complete the upload.

10. Upload Multiple Images Step 1: Click Add multiple images. The upload tool will load in a new shadowbox. Step 2: Click on Browse, select the desired images and click Open.

11. Upload Multiple Images Step 3: Click Upload. The progress indicator bar will show the progress of the upload. Step 4: Click on Back to select additional images for upload or Close to return to the Images main screen.

12. This page intentionally left blank.

13. Objective 2Working with Documents

14. Images and Documents Step 1: Go to Work Area → Images & Documents. Step 2: Select the Documents / Go icon. An FI admin can add, replace, and delete both images and documents residing within CMS.

15. Documents Main Screen The Documents main screen allows users to upload, view, delete and replace documents in the same manner as images. Documents may be sorted by Name or Type using the sort links at the top of the page. The Back button will return the user to the Images and Documents selection screen.

16. Document Requirements / Best Practices Document Requirements Accepted file formats for documents: pdf, html, htm, txt, swf, doc, rtf, ppt, xls, wpd, wps, csv, css, js and all multimedia files. Special characters or spaces are not allowed in the file name. File names are case-sensitive. There is not a limit to the file size of an uploaded document or the total number of documents that may be stored in Web Center. Best Practices When uploading a PDF, make sure it’s web-quality (72 dpi) instead of a print-quality version (100+ dpi). Disable macros in Word and Excel documents to limit the potential concern over Microsoft Office security warnings. Send the document and the page where the document is linked to staging and live at the same time; otherwise, the link to the document will be broken on the page on the live site. Use code view in the Editor to embed any multimedia documents. Use a consistent naming convention, for example, name all documents for applications: app-docname.jpg. This makes it easier to locate a document in the WCAC.

17. Upload Documents Follow the same procedures used with images to upload documents. Click Upload document to add a single document or Add Multiple documents to upload multiple documents. Confirm that the new document has been uploaded. It is not necessary to refresh the page to complete the upload.

18. Replace an Image or Document Use the replace option to swap out an old graphic or document with an updated version. For example, you may wish to replace a season graphic on the home page or update the current newsletter without changing the links on the site. • Notes • Replacement images must be the exact same height and width as the original image. • Replaced files will appear in all locations on the site where the old image or document was located or linked to. • The old image or document is permanently deleted.

19. Delete an Image or Document Use the delete option to free up space in the CMS or to remove an old or unwanted file. • Notes • Be sure to remove the image or document from all web pages before deleting it in Images and Documents. • Deleted files may be reversed by Removing the change in the Manage Changes tool. • It is recommended to save a copy of all images and documents on a computer’s drive prior to deleting the images.

20. This page intentionally left blank.

21. Objective 3Insert an Image on a Page

22. Insert Image on a Page Step 1: Go to Work Area → Content Edit. Step 2: Navigate to a webpage to contain the promotion. Step 3: Click the Edit Content link to edit the snippet.

23. Insert an Image Step 4: Place your cursor in the location where you want to insert the image. Step 5: Click the Picture icon. The Media File Selection window launches. Click Browse Server.

24. Image Selector Step 6: Preview the images by hovering over the links. Click on a link to select a graphic. The Image Selector shows all images uploaded or replaced within Images & Documents; deleted images are removed immediately from this list. If more than 15 images are in the CMS, links to Previous and Next screens display at the bottom.

25. Edit an Image Step 7: Change the values for each option. Click the Reset icon to revert to the original image properties. The preview window will affect all changes in real-time. Note: See the next two pages for a full description of all image properties available.

26. Image Info Tab Alternative Text: This title will appear when hovering over an image. It also assists browsing for users with visual disabilities. Width/Height: Changes in the WCAC are not recommended. Use an external image editor (such as Adobe Photoshop) instead. Border Thickness: Border size around the image (in pixels). HSpace and VSpace: The white space between the image and surrounding text or other items.

27. Other Image Tabs Link: Creates a hyperlink from the image to a new location. For additional functionality, use the link tool covered in the next section. Upload: Quick access to upload a single image to the WCAC. Advanced: Allows for advanced editing (such as setting style properties) to the image.

28. Add Text Around an Image Step 8: Confirm that the image displays in the editor with the formatting changes. Step 9: Type in the copy for the promotion. Step 10: Click Save Edits and Close to return to Work Area and preview the new edits.

29. Objective 4Insert a Link on a Page

30. Insert a Link Step 1: Highlight the text or image you want to link to a page. Step 2: Click the Add a Link button in the toolbar. Step 3: Select the Link Type.

31. Insert an Internal or External URL Internal URL: Creates a link to another page in Web Center. External URL: Creates a link to a page outside of Web Center. The protocol (http://, https://) may be set as needed. A 3rd Party Site Warning may be selected if a link disclaimer is required. Tip: It is recommended to change the link target under the Target tab to New Window for all external links. Note: The Advanced tab allows for additional link customization and should only be used by advanced users.

32. Insert a Document or E-Mail Link Link to a Document: Creates a link to a document stored in Web Center or to an external document (URL required) Click Browse Server to locate an existing document and click Add Document. Tip: It is recommended to change the link target under the Target tab to New Window for all document links. E-Mail: Creates a link that will open the user’s default e-mail browser to send an e-mail. The e-mail address, subject and body defaults may be pre-filled for the user.

33. Anchors Anchors allow users to jump to a certain location on a page without having to scroll up or down. In this example, the user may click on the Mortgage Calculators link to jump down to that section of the page.

34. Insert an Anchor Step 1: To create an anchor, choose the page you wish to work with and click the Edit Content link. Step 2: Place the cursor on the desired location (the cursor should be next to the text – not highlighting it). Step 3: Click the Insert/Edit Anchor button in the Editor. Step 4: Assign an Anchor Name and click OK. Step 5: A yellow anchor icon will display at the location of the anchor on the page.

35. Link to an Anchor Step 6: Select the text you wish to convert to a link, highlight and click the Add a Link button. Step 7: Select Link to anchor in the text from the Link Type menu. Step 8: Select the anchor under By Anchor Name. All anchors that are available on the current page will display in the dropdown. Step 9: Click OK and Save Edits and Close to test the link.

36. Link to an Anchor / Edit or Remove a Link To link to an anchor on a different page, first create the anchor on the desired page. Next, create an Internal URL link on the second page and enter the anchor name under Internal Anchor. To edit a link, highlight the link and click Add a Link. To remove a link, highlight the link and click Remove Link.

37. Objective 5Review and Publish Live

38. Final Work Area View Step 1: Preview the promotion in the Work Area. Step 2: Click on all links to test they are properly working. Remember that this works like an actual page, so all links are active and the layout appears as it will on the public site.

39. Manage Changes Step 3: Go to Manage Changes. Step 4: Select the box for each change to be moved or check the Select All box to select all files. Step 5: Insert comments as appropriate. Enter a main comment next to the Select All option to pre-fill all selected comment fields. Step 6: Click Update Staging. Note: Remember to confirm that another user’s edits are complete before selecting their files to move to Staging.

40. Manage Changes Step 7: Verify that all selected files have been moved to the Staging tab. Step 8: Click View Staging Site to perform a final review.

41. Go Live Step 9: Click Deploy to Production and verify that all files in Staging are ready to be sent to the Live Site. Step 10: Click on Deploy Now. Step 11: Insert a Deployment Description and click Deploy Changes.

42. View Live Site Step 12: Confirm that the screen refreshes with the message: “Content deployed successfully“. Changes are now moved from Staging to the Live site. A new version and a new edition are created at this time. Step 13: Click ViewLive Site. The live (production) site will show in the WCAC. Confirm that the changes appear on the site.

43. Creating Promotions: Objectives • Practice using Web Center by: Creating a New Promotion • Upload an image • Upload a document • Insert an image on a web page • Insert internal and external links • Create an anchor and link to it • Preview, send to Staging and Go Live

44. Scenario 2 Review Questions • What is the difference between uploading an image and replacing an image? • True or False? An image should be resized in the WCAC. • What properties should be set to wrap text around an image? • Describe the process of creating a link to a document from an image. • What is the purpose of using anchors on a page?