ContentsCMS Outlines: How To’s........................................................................................................................................................3

Getting started:.................................................................................................................................................................3

Sign in and Homescreens:.............................................................................................................................................3

Folder structure:............................................................................................................................................................5

Creating Pages...................................................................................................................................................................6

Create a New Page From an Existing Page:...................................................................................................................8

Editing Pages.........................................................................................................................................................................9

Adding Components......................................................................................................................................................9

Creating Drop-Down Menus........................................................................................................................................10

Edit Existing Component or Paragraph........................................................................................................................10

Scaffolding.......................................................................................................................................................................11

Editing HTML...............................................................................................................................................................11

Hard vs. Soft Returns...................................................................................................................................................12

Embedding YouTube Videos........................................................................................................................................12

Finding Paths to Links..................................................................................................................................................12

Anchor Links................................................................................................................................................................13

Editing Device and Accessory Pages................................................................................................................................13

To find the devices and accessories pages:.................................................................................................................13

Editing Accessories:.....................................................................................................................................................13

Color Swatches............................................................................................................................................................14

Compatible SKUs.........................................................................................................................................................14

Adding Images.............................................................................................................................................................14

Topic Level Pages in Support...........................................................................................................................................14

Edit subtopics on the support landing pages:..............................................................................................................14

Edit descriptions for each subtopic on a support landing page...................................................................................14

Linking Pages vs Description Used...............................................................................................................................14

Adding Images to the DAM.........................................................................................................................................14

Edit subtopics on the support landing pages:..............................................................................................................15

Edit descriptions for each subtopic on a support landing page:..................................................................................15

Linking Pages vs Description Used...............................................................................................................................15

Adding Images to the DAM.............................................................................................................................................15

SEO Updates....................................................................................................................................................................15

Page Properties – Updating titles and meta description.............................................................................................15

Basic............................................................................................................................................................................16

Title.............................................................................................................................................................................16

Tags/Keywords............................................................................................................................................................16

Move to Change URLs.................................................................................................................................................16

Activating/Deactivating Pages.........................................................................................................................................16

Flushing Cache.............................................................................................................................................................17

From Bottom Up (for Support)....................................................................................................................................17

Versions...........................................................................................................................................................................17

Comparing with a Previous Version.............................................................................................................................17

Restoring to a Previous Version...................................................................................................................................18

Hard-Coded content within the CMS..............................................................................................................................18

CMS Outlines: How To’s

Getting started:

Sign in and Homescreens:

The homescreen:

Most tasks can be completed by clicking one of two menus:

1. Websites: Use this for creating, editing and managing pages. This will be used the most.

2. Digital assets: Use this to access all device and accessory images.

Websites: Where you will be most of the time

Top Navigation buttons: They look nice, but what do they do?

From left to right:Websites: This is the same as the home screen button after you sign in.Digital Assets: Also referred as the DAM. Where all the good stuff is stored – the images for the accessories and devices live.Campaigns: N/ACommunity: N/AInbox: N/AUsers: N/ATools: You can access the DAM, Scaffolding and versioning from here.Tags: A list of all tags used in the system. May be accessed for SEO.

Folder structure:

The Websites console lists pages of content in a tree structure on left hand pane. For ease of navigation, sections of the tree structure can be expanded (+) or collapsed (-) as required:

A single click on the page name (in the left pane) will:o List the child pages in the right paneo Also expand the structure in the left pane.

A double click on the page name (left pane) will expand the tree and open that page in another window.

From here you can edit or manage the page using either the toolbar or by opening a page for further actions.

The Website Console provides a list view with the following information about pages.

Column DescriptionTitle The title that appears on the pageName The end-point URL element for the page

Published

Indicates whether the page has been published and provides the publication date and time.Red=Deactivated/UnpublishedGreen=Activated/PublishedYellow=Activated/Pending Publish

Modified Indicates whether the page has been modified and provides the modification date and time. In order to save any modification, you must activate the page. Blue = Modified, but not activated/published

Status Indicates the current status of the page, such as whether the page is part of a workflow or whether a page is currently locked.

Impressions Shows the activity on a page in number of hits.Template Indicates the template that a page is using.

Creating PagesUnless all pages have been created for you in advance, before you can start creating content, you must create a page.

1. From the Websites console, select the level at which you want to create a new page.In the following example, you are creating a page under the level Customer Support - shown in the left pane; the right pane shows pages that already exist at the level under Customer Support.

2. Select on New Page. New Page Dialog Box 0pens:

3. Fill out Title and Name.4. Highlight template you want.5. SelectCreate.

Double click on new page to edit, add content and images.

Create a New Page From an Existing Page:Most of the time, new pages will be created from existing pages.

1. From the Websites console, highlight/select the page you want to copy.

2. SelectCopy on the Toolbar.3. Select Paste and the page will be copied and placed at the bottom of the page list.4. Select on the copied page, then select Move.... You can also select the page you want to copy, then right-click

and select Move.The Move window opens:

5. Fill out the Rename To Field to enter the new end-point URL name (should be all lowercase/use dashes for spaces).

6. SelectMove.7. SelectYes when the “Do you really want to move the page to the selected destination?” Box opens.

a. To change the Title of the Page:b. Right click on the new pagec. SelectProperties. d. Fill out the Title Field.

e. SelectOK.

Editing PagesContent can be edited within a page after it has been created. When you first create a page, the page includes only the text and elements from the template. Add content by double-clicking or dragging and dropping components onto the page.

Having a page open for editing also gives you access to other actions via the sidekick; these include Page, Versioning and Workflow related actions.

Adding ComponentsTo insert a new component:

1. There are several methods of selecting the type of paragraph you want to insert:o Double-click the area labeled Drag components or assets here... - the Insert New Component toolbar

opens. Drag a component from here.

o Drag a component from the floating toolbar (called sidekick) to insert a new paragraph.o Right-click an existing paragraph and select New... - the Insert New Component toolbar opens. Select

the required component, then select OK.

You can add content after the new component/paragraph has been created.

Creating Drop-Down Menus1. Select the first tab in the top navigation of the sidekick (floating toolbar).2. Drag the “Sub-Topic” icon to the page and drop it where you’d like to have the drop-down menu. 3. Float your mouse over the > icon and right click. Select Edit.4. Enter a title and create your content for the drop-down menu in the content box.5. To delete a drop-down menu component, mouse over the component, right click and select Delete.

Edit Existing Component or ParagraphIf you copied an existing page, you will already have components on the page. To edit an existing paragraph, do one of the following:

Double-click the paragraph to open it. You see the same window as when you created the paragraph with the existing content. Make your changes and selectOK.

Right-click the paragraph and selectEdit. Select twice on the paragraph (a slow double-click) to enter the Inplace Editing mode. You will be able to directly

edit the text on the page, instead of inside a dialog window. In this mode, you will be provided with a toolbar at the top of the page. Just make your changes and they will be automatically saved.

Select the Scaffolding Button on the Sidekick. SelectUpdate when done.

ScaffoldingUsed to edit specific metadata for some files

Editing HTMLSource Editing Mode

The source-editing mode allows you to see and edit the underlying HTML of the component.

So the text:

Will show the full HTML:

Only use the source-editing mode to fix the HTML directly issues with spacing, tables, lists, and headlines. Do not add javascript or other non-html code unless directed to by one of the developers. If you have a question you can't easily resolve, we can get help from a developer. If you have specific HTML items that you need help with, check out the W3 school’s HTML tutorials:http://www.w3schools.com/html/default.asp.

Hard vs. Soft ReturnsWhile editing copy in the content box (not in source mode), you may notice there are two different types of returns for line spacing. If you want double spacing between two lines or paragraphs, just hit return for a hard return. If you wantsingle-spacing between two lines of copy, hit shift + return for a soft return.This is helpful to know since sometimes spacing can get quirky in the CMS. You can always use the source mode to edit spacing between lines by adding breaks: </br>

Embedding YouTube VideosUse the source-editing mode to embed YouTube videos.

1. Find the video to embed on YouTube.

2. Select Share below the video frame.3. Select Embed.4. Copy the HTML embed code that appears in the box.5. Change video size should be 420 x 315.6. Write the title of the video in the paragraph editing box.7. Switch to source editing mode and paste in the HTML below the video’s title.

Finding Paths to LinksUse relative links for all internal content. A relative link starts with everything after the “.com” and leaves off the “.html” ending.

1. Select the hyper link button in the toolbar.2. Use the search tool to find the path to the internal page when creating a link.

3. Select open in a new window for all external site links and attachments.

Anchor Links

An anchor can be created anywhere within the text by either positioning the cursor or selecting some text. Then select on the Anchor icon to open the dialog.

Enter the name of the anchor then selectOK to save.

The anchor appears when you edit the component. Use itas a target for links.

Editing Device and Accessory Pages*See also: Accessory Entry Guide

To find the devices and accessories pages:1. Go to Websites > Aio >Shop in the left hand navigation.2. Select Prepaid Smart Phones, Basic Cell Phonesor Accessories.

Editing Accessories:1. Double click on the accessory page you want to edit.2. The authoring page will open in a new tab.3. Expand the sidekick and select Scaffolding.4. The following fields need to be populated. You can leave the other fields blank. Updates should be made using

info from the accessory spreadsheet:a. SKU IDb. Date Added

c. Brandd. Model (short item description)e. Price (MSRP-No dollar sign)f. Tags/Keywords (not in the spreadsheet; create related tags if needed)g. Detail/Cart Description (same for both--from item description full, read and clean up)h. Features (delete any if they are there)i. Device Images (browse to the images in the DAM - Portrait = 188x357 and landscape = 132x90, bottom

of the accessories list for new ones)j. Featured Products (delete any if they are there)k. Colors (add if there are more than one color variant of the accessory. Paste in hex color and browse to

the corresponding content item).l. Supported Devices (copy related handsets value from the spreadsheet)m. Category (choose applicable)

5. Select Updateat the bottom of the screen.

Color Swatches1. Select the default device to pick up the color variations.2. Select color for each device or accessory page.

Compatible SKUsCopy and paste from the accessory spreadsheet.

Adding ImagesThe design team will upload the accessory images into the DAM. Match the sizes to the sizes used in the version you started with as a copy.

Topic Level Pages in Support

Edit subtopics on the support landing pages:1. Go to the left-side navigation on the Websites page.2. Double click the top-level page you want to open. The authoring page will open in a new tab.3. On the authoring page, double click the blue paragraph icon to open the section links.4. Click on the search icon to the right of the subtopic field.5. Search to find the correct paths for each subtopic.6. You can add or remove items from the list.

Edit descriptions for each subtopic on a support landing page: 1. Go to the Websites page.2. Select the landing page on the left side navigation.3. Right-click a subtopic on the right side navigation.4. Select properties.5. Select More Titles and Descriptions.6. Enter the description and select OK.

*The descriptions for the main original support landing pages should not be longer than 4 lines to prevent the text wrapping around the icons.

Linking Pages vs Description UsedOn the category level support pages, the descriptions pull from the pages you are linking to within the category page.

Adding Images to the DAMOpen the folder in the DAM where you want to store the image and then drag and drop an image from your computer to that folder.

1. Select Digital Assets from the home screen.2. Navigate to the Aio folder. 3. Drag and drop the image from your computer to the folder. 4. The image will appear at the end on the last page.5. Activate the image.

Edit subtopics on the support landing pages:1. From the left-side navigation on the websites page, double click on the top-level page you want to open. This

should open the authoring page in a new tab.2. On the authoring page, double click on the blue paragraph icon to open the section links.3. Search to find the correct paths for each subtopic.4. You can add or remove items from the list.

Edit descriptions for each subtopic on a support landing page:1. Select the landing page on the left side navigation of the websites page.2. View the subtopics on the right side.3. Right-click a subtopic and select properties.4. Select More Titles and Descriptions.5. Enter the description and select OK.

*Make sure it is at least 3 lines long. For the main original support landing page (with icons), be sure these descriptions are no longer than 4 lines to prevent the text from wrapping around the icons.

Linking Pages vs Description UsedOn the category level support pages, the descriptions pull from the pages you are linking to within the category page.

Adding Images to the DAMOpen the folder in the DAM where you want to store the image and then drag and drop an image from your computer to that folder.

6. Select Digital Assets from the home screen.7. Navigate to the folder where you want to store the image. Usually this is in the “aio” folder. 8. Drag and drop the image from your computer. 9. The image should appear at the end on the last page – use the arrows at the bottom to navigate to the last page.10. Activate the image.

SEO Updates

Page Properties – Updating titles and meta description

Page Properties define the page title andmeta description. This is also used to define user groups for employee-facing content.

1. Open the page you want to edit.2. In the sidekick open the Page tab, then select Page Properties... - a dialog with multiple tabs opens.3. Make changes as needed (see below), then selectOK to save.

Basic

Title

The page title - as appears in the Websites tab list.

Tags/Keywords

Here you can add or remove tags from the page by updating the list in the selection box:

A completely new tag can be entered by typing the name in an empty space in the selection box. With the drop-down functionality you can select from existing tags. An x appears when you mouse-over a tag entry in the selection box; this can be used to remove that tag for this

page.

Move to Change URLsFollow the move process detailed in the "Create a New Page From an Existing Page:" section above.

Activating/Deactivating PagesDo not activate/deactivate any production pages. We are only working in the SIT6 environment. You may activate pages in SIT6 and the updates should appear immediately in the testing environment.

Flushing CacheThe cache must be flush before production changes appear. Please see a member of the content team when the cache needs to be flushed.

From Bottom Up (for Support)Activate all lower level pages before activating the category pages. Activating from the bottom up ensures all links are pulled to the corresponding pages.Click OK to save your work.

Versions

Versioning creates a "snapshot" of a page at a specific point in time. With versioning, you can perform the following actions:

Create a version of the page. Compare the current version of the page with a previous version: texts, titles and images that have been added

or deleted are marked with a specific style. Restore the page to a previous version; for example, to undo a change that you made to a page.

Comparing with a Previous Version

To compare the current version of the page with a previous version:

1. In your browser, open the page you want to compare with a previous version.2. In the Sidekick, select the Versioning tab, then theRestore Version sub tab.

3. Check the version you want to compare and select the Diff button.4. The differences between the current version and the selected version are displayed as follows:

o Text that has been deleted is red and struck through.o Text that has been added is green and highlighted.

o An image that has been added or deleted is green-framed.

5. In the Sidekick, select the Restore Version sub tab and select the <<Back button to display the current version

Restoring to a Previous Version

To restore the page to a previous version:

1. In your browser, open the page for which you want to restore to a previous version.2. In the Sidekick, select the Versioning tab, then theRestore Version sub tab.3. Check the version for which you want to restore and click Restore.

Hard-Coded content within the CMSSome pages appear in the left side navigation but you will not be able to edit them. These are hard-coded and cannot be edited using the CMS.Changes for these pages must be done through IT.