Documentation

---

ON THIS PAGE

Access & login

Webpage management

"Pages" interface

Kentico toolbar / editor

Properties overview

---

Access & log in

Access Kentico through the CMS admin portal (www.uwb.edu/admin) and use your personal NetID UW NetID to login.

Issues logging in?

Double check the following:

• You're logging into www.uwb.edu/admin
• You're using your UW given NetID login credentials
• You completed the trainings and received access permission (Request access page)

Contact uwbweb@uw.edu if there are any issues logging into Kentico. 

Back to top

---

Webpage Management 

Create a new page

1. Within the content navigation tree, select the parent document that your new document will be a subpage of.
2. On the document actions area, click on the plus icon. 
   

3. Select UWB Page: Standard to create a new web page.

4. This will redirect you to a new screen to choose your page template. Select the desired template and click Continue.
   

5. The Name field is the name that will be the document's URL and within the content tree; this is not the page title. Make sure to use a short, clear, and unique name. Kentico will auto adjust to lower case letters and insert hyphens when the space bar is hit. Do not combine words together to avoid hyphens; this is not search engine friendly (please see the SEO documentation here). 

URL will be www.uwb.edu/website/example-doc-name based on document name and location

Back to top

---

Delete a page

Typically only Publishers can delete pages, since deleted pages creates broken links, so clean-up work must follow any pages being renamed or deleted.

To delete a document, first click on the document you want to delete. You can either click on the Recycle bin icon in the content management toolbar or right click the document and select Delete from the dropdown menu.

You will be given two options on what to do with the deleted document. We recommend the second option of "redirecting old URLs to another page" so when visitors try to access a deleted document they will be directed to a live page rather than a broken link. Our team recommends not destroy documents so that content editors have the ability to restore pages if needed.

Back to top

---

Restore a previous page version

Kentico CMS provides you with the option to "rollback" to previous version of the page you're working on and it will restore the page you're currently working on to look like the previous version.

1. After checking out the page, select Versions from the Properties tab.

   

2. Select a previous version and click the arrow as indicated below to roll back to that version.

   

Note: Once you rollback to a previous version and you save, a newer version will be added, even if no changes are made. 

1. In order to work with the properties of a document you must be in the Properties Tab, and Versions Sub menu
2. You can do three things from this window:
   • View Version Information by clicking on the Version icon 
   • Roll Back to an older version by clicking on the Roll back icon 
   • Delete a previous version with the Recycle bin icon 

Back to top

---

Restore a deleted page

Content editors with publisher level permission can restore documents that they deleted. You can also contact uwbweb@uw.edu for help with recovering deleted documents.

1. Click on the Kentico logo on the left hand of the top purple navigation bar to open the Applications Menu. 
2. Click Recycle bin. Select Pages on the left panel. This will display a list of all of your deleted pages.
   
3. Find the deleted document and click Restore.
   
4. Now you can switch back to the Content tab and you will see the restored document added back to the default location.

Note: Do NOT click on the red recycle bin icon. The document will be permanently deleted and cannot be restored at that point.

Back to top

---

Changing page display order

The order pages appear in on the live site navigation is determined by the order they're in within the Content Navigation Tree. Moving pages within the same level will not break hyperlinks. If you move the page out of the level, then it will break any existing hyperlinks. Example: If I want "bizforms" to appear above "kentico" on the live site, then I can click and drag it above "kentico." If I move it to be at the same level as "documentation" or "calendar" then I will break the hyperlink.

To move a document within the same level of the content tree:

1. Click the page you want to relocate in the content tree and click the Down or Up button in the document action toolbar. You'll see that your page has been moved.
   
2. Now switch to the Live site view mode (if your page is already published) and you will see that your page has been moved in the site navigation as well.

Back to top

---

Moving pages

Before doing this, it is best to contact the Office of Advancement, who can help ensure a usable and consistent information architecture for your website. The email is uwbweb@uw.edu.

To move a document to another level of the content tree:

1. Click the page you want to move in the content tree. Then click the Move button in the document action toolbar.
   
2. In the web dialog, click on the document where you want to move your page (e.g. the sustainability top level) and then click the green Move button at the bottom right corner.

Your page has been moved to the chosen location.

Back to top

---

Preview unpublished pages 

A Preview URL provides non-users an opportunity to view a page prior to publishing. This feature enables the sharing of an unpublished page version outside of the Kentico CMS user interface.

* Note: A Preview URL doesn't allow for browsing within the UW Bothell's website, and should never be used as a main link on any web page.

Generate a preview URL

To enable the preview url, go to Properties › General › Preview URL: Show preview

URL Shortener

A new window will load and the generated url is long and can be shortened by using a third-party tool such as the Google URL Shortener.

Back to top

---

Submitting & publishing a document

Note: Remember to always spellcheck and Preview your document before publishing.

Editors

1. Click Check out to edit a page using the page editing section below the tabs.  
   
2. In order to get your document published, it must be checked in. Once the necessary edits have been made, click the Check in button, which will appear in the page editing section once a page is checked out. 
   
3. Click Submit for approval to start the publishing process. Once a document is submitted for approval, it can no longer be edited. 
    
4. You will need to contact a publisher or primary publisher to get your document published. The Submit for approval button does not notify anyone.

Publishers

Follow the steps above that an editor will follow to check in and submit a page for approval. The Publish option will then appear in the page editing section. Click Publish to make the document go live.

Back to top

---

"Pages" Interface

The user interface consists of several main sections depicted in the illustration below.

---

Edit & preview mode

Allows you to choose between various ways to view your webpage.

EDIT

• To make edits to a document, you must be in Edit view mode.

PREVIEW

• To preview the edits you've made to a document with style scripts put in place to see what your page would look like published. Always preview before publishing!

LISTING

• Displays the child documents of the current page in a list. 

Back to top

---

Page action

Document actions are located here; you can create, delete, edit, copy, move, or search.

Back to top

---

Content tree / Information Architecture (I.A.)

Displays the structure of your web site, pages  you have access to, and allows you to organize pages.

Note: All names are lower case, concise, and separate words connect with a hyphen. They form the URL used to access the web page.

Back to top

---

Properties tab

Where you can choose the way you want to edit the content of the page. You can choose from editing page content in the "Page" tab or working with the various "Properties" of the page like page title, templates, and more. 

Back to top

---

Toolbar

The toolbar is available in "edit mode" and provides all of the capabilities to format and add content to the page that you are working on. There are options for text formatting, adding links and images, widgets, calendars, forms, and more. Learn more in the Kentico toolbar / editor section below.

Back to top

---

Kentico toolbar / editor

In Kentico CMS, the toolbar is used to create web content without the content editor needing to knowing HTML or CSS. This toolbar functions similarly to Microsoft Word's style ribbon (toolbar). The navigation on the right provides a list of toolbar content covered; click on the topic you want to learn more about.

Editor overview

• Editors/toolbars are only visible once the page is "checked out" to you.
• The toolbar will vary depending on the content editor's permission level.​

Publisher view

Editor view

Back to top

---

Headings & paragraph text

When selecting heading levels, ensure that they are in numerical order starting with "Heading 2." For example, a "Heading 4" should only be a "child" of a Heading Three, never of Heading 1 or 2. This will help create the semantic structure of your page and assist those using non-visual devices navigate your content in the correct order. Learn more about accessibility laws and policies.

Open the "Format" dropdown menu to see heading options. 

Tips

• Do not pick headings based on how they look
• Think of headings as an outline of your content so people can quickly scan your page for the content they care about
• When creating paragraph headings, try to incorporate key search terms to improve search engine optimization (SEO)
• The heading dropdown menu lives on the toolbar, which doesn't appear until the page is checked out
• Headings will appear slightly different when added into the Auxiliary Content column
• Always start with a heading 2 in your Main Content column and Auxiliary Content column.
• Review how the headings on this page are used and how the heading topics relate to one another

Heading 1

This is the page title and is created in the Properties tab under Navigation. The title text goes into the Menu caption field. This captures the main point of the page and content editors should not add other content that is unrelated to this heading.

Heading 2

There are usually 1 or 2 topics/headings on a page that use Heading 2. The capture the highest level of topics being covered on the page that related to the page title/heading 1.

Heading 3

These are the sub-topics that all relate to the parent Heading 2 topic. When making multiple headings with the same number, they  carry the same weight of importance regarding their parent heading topic.

Heading 4, 5 & 6

Great for clarifying sections within a sub-topic of the page. These are the sub-topics that all relate to their parent heading topic. 

Normal paragraph font

This allows you to type in the standard font when typing sentences and paragraphs.

FONT OPTIONS

• Bold should be used to make important content stand out but should not be used in place of a Heading.
• Italicize should be used to emphasize important content.
• Strikethrough to show that this content/option is not longer available. For example: training dates that have passed.
• Sub and super script are also available.

Back to top

---

Paste as plain text

Always select "Paste as a Plain Text" when pasting content into your document, especially if you're pasting content from Word. Users with accessibility needs have software that reads the coding instead of the page itself so all content editors need to comply with accessibility policies. Learn more about website accessibility.

• Click where you would like to paste the information, then click the paste icon (with the clipboard and capital letter T) to paste as plain text. 
• A window will appear where you can use the keyboard shortcut to paste in the information. Click "OK" and it will insert clean code.

Pasting from Word documents

Do not paste directly from Word documents, this creates inaccessible code. If the copied information is from Word, please paste as plain text using the method above or you can:

• Copy the information into http://word2cleanhtml.com/ and check all of the boxes. This produces the best result.
• Copy the text into Windows Notepad first, then copy from Notepad into the CMS editor

Back to top

---

Lists

• Do not manually create lists by typing in numbers or symbols; always use the toolbar to create bullet or numbered lists
  • manually created lists are inaccessible to those using assistive technology

LIST HIERARCHY

Increase and decrease indent buttons should only be used on lists (bullet or numbered) and should not be used on a paragraph.

Numbered lists can have sub-bullets and vice versa. Example below:

1. Example numbered list item
   • example sub-bullet list item: to change this from a bullet to a number, click on the "Insert/remove Numbered List" button and it will automatically change.

Back to top

---

Content Alignment

Use these options to align your content differently.

• The font will default align to the left and according to brand standards, that is the preferred way to align text. Only realign text as necessary.

Back to top

---

Show blocks 

This will expose the HTML structure of your page in terms of which elements are contained in each HTML tag.

Back to top

---

DIV container

Only publisher level content editors have access to this button.

DIV containers are needed in order to create multi-column layouts. In order to create a two or three column layout, follow the steps listed below. 

1. Click the Show Blocks icon. 
2. Click the DIV icon. 
3. Below are instructions for creating two, three and four column layouts in your content.

Two columns

1. A window will pop up. In the field box "stylesheet classes" type "columnWrapper" and click OK.  
2. Inside the 'columnWrapper' div container, Press the Enter key once to generate another paragraph tag.
3. In the first paragraph container add "left" and in the second add "right"; this will help visually with the next steps. 
4. Click within the first paragraph container, click the DIV button again and enter the stylesheet class 'leftColumn'. Click ok. Right column cannot go first.
5. Next click within the second paragraph tag, click the div button again and enter the stylesheet class 'rightColumn'. Click ok.
6. Fill the first div with content for the left column and the second with content for the right column.

Three columns

1. A window will pop up. For stylesheet classes, type "columnWrapper threeCol" and click OK.  
2. Inside the 'columnWrapper threeCol' div container, Press the Enter key twice to generate a total of three paragraph containers.
3. In the first paragraph container add "one," in the second add "two" and in the third add "three"; this will help visually with the next steps. 
4. Click in the first paragraph tag, click the DIV button again and enter 'col1'. Click ok.
5. Click in the second paragraph tag, click the DIV button again and enter 'col2'. Click ok.
6. Click in the third paragraph tag, click the DIV button again and enter 'col3'. Click ok.
7. Fill the first DIV with content for the left column, the second with content for the middle column and the last with content for the right column.

Four columns

1. A window will pop up. For stylesheet classes, type "columnWrapper fourCol" and click OK.
2. Inside the 'columnWarpper fourCol' div container, press the Enter key three times to generate a total of four paragraph containers.
3. In the first paragraph container add "one", in the add "two", in the third add "three", and in the fourth add "four"; this will help visually with the next steps.
4. Click the first paragraph tag, click the DIV button again and enter 'col'. Click ok.
5. Click in the second paragraph tag, click the DIV button again and enter 'col'. Click ok.
6. Click in the third paragraph tag, click the DIV button again and enter 'col'. Click ok.
7. Click in the fourth paragraph tag, click the DIV button again and enter 'col'. Click ok.  
8. Fill in the first DIV with content for the left column, the second and third with the contents for the middle columns, and the last with the content for the right column.

Back to top

---

Hyperlinks

Insert/edit link

1. Highlight the text you'd like to become the hyperlink.
2. Hit the link icon on the toolbar and a new window will appear.
   
   
3. You can choose the link type that can be either:
   • Attachment: Word, PowerPoint, Excel, etc. - these documents must be accessible. Review best practices on uploading files into Kentico.
   • Content: Internal hyperlinks directing to a uwb.edu page you have access to. Use the Web tab if you don't.
   • Media libraries: Internal library of media that is currently outdated. The campus has shifted to useing Smugmug to house campus photos; contact uwbweb@uw.edu if interested.
   • Web: External hyperlinks directing to anything other than a uwb.edu page OR uwb.edu directories you don't have access to. 
   • Anchor: can be used in relation to an existing anchor
   • E-mail: email address can be hyperlinks which will open the user's default email client upon clicking. Can fill out the fields so areas will auto-populate for the user upon clicking.
4. Each hyperlink type differs with adding a link
   • Attachment - Select "New file" and your computer file browser will appear where you can select the desired file. Hit insert.
   • Content & Media libraries - Find the document you'd like to hyperlink to within the content navigation tree and select it so it's  highlighted. Then hit insert.
   • Web - Paste the external webpage's URL into the "URL:" field. Delete the protocol (http://) (https://) and change it in the drop down menu if needed. With internal sites you don't have access to, start the URL after the ".edu/" for example "/it/forms/softwarerequest"
   • Anchor - Create the anchor before creating a link to the it within the editor by selecting text to be the anchor and clicking on the flag icon.  Then you'll be able to choose the radio button for "Link to existing anchor with name" and you'll find the anchor name you created in the dropdown menu. Hit insert. 
   • E-mail - Input the desired auto-populating information in the "To" "Cc" "Bcc" "Subject" and/or "Message body" then hit Insert.

Remove Link

Highlight the link to remove and click the unlink icon. Or right-click on the link and select "remove link."

Link maintenance

Web links change and break regularly and content editors are responsible for maintaining active links within their content. The UW administered program called Siteimprove monitors the quality of our website. Content editors can request to gain "report only access" to Siteimprove and get weekly emails the the status on your directories broken links and misspellings and/or accessibility reports. Contact your directory's primary publisher or the web team (uwbweb@uw.edu) for more information.

Back to top

---

Images

Use the "insert/edit image or media" icon (shown above) to upload and add images from your computer.

1. Click on the image icon.
2. Select the "Attachments" tab and then the "Upload" to open your computer's file browser.
3. After an image is selected, the "General" tab will appear with:
   • Alternate Text- Never leave blank. Important for accessibility!
   • Width - varies depending on which template is being used
     • UWB Standard 3 Column (standard) uses column one for the site navigation, column two as the "main content area" (max width ~560px) and column three as the "auxiliary content area" (max width ~188px).
     • UWB Standard 2 Column (standard wide) uses column one for the site navigation and column two as the "main content area" (max width ~ 750px).
   • Height - it will auto-adjust to match the width you set
   • Border Width - borders are generally not used
   • Border Color - if using, stick to UW Brand colors
   • Horizontal space - this will leave empty space to the left and right of the image
   • Vertical space - this will leave empty space above and under the image
   • Align - Choosing the different options will define where the image is placed in relation to the text. (Example: choosing left will put the image to the left of the text)
   • Link - Here you can make the image a link to another site
   • Disregard the "Advanced" and "Behavior" tabs
4. After selecting from the media option click Save & Insert.

Alternative text or "alt tags" on images are required to provide descriptive information about the image for users of non-visual devices. See the accessibility page for more information on accessible webpages.

Back to top

---

Creating a table 

EDITING A TABLE

• Right-click onto the table
• Select "Table Properties" and the same window will appear. 
• After a table is created you cannot change the amount of rows and columns from table properties.
  • To change the amount of rows, columns, or cells, right click on the table and hover the cursor over the "Cell", "Row", or "Column" section to see your options.
  • A row can also be added by going into the last table data cell and pressing the "Tab" key.

Back to top

---

Adding a Video

1. Starting on the YouTube page that contains the video, scroll beneath the video title and click "Share" and copy the URL that appears.
   
   
2. In Kentico with the page checked out, click within your content where the video should appear.
3. Click on the YouTube icon on the tool bar. 
    
4. Once the window opens, paste the copied URL into the first text box
   
   
    
5. Leave the Default size as is; adjust the video size with "Width"
   Standard: 560px (full), 280px (half), 140px (quarter)
   Standard Wide: 750px (full), 375px (half), 187px (quarter)
   
   
6. Click the green Insert button on the bottom right-hand side
7. Remember to Save and Preview
8. After publishing, test the page with both an http://www.uwb.edu and an https://www.uwb.edu address to ensure video displays and plays as expected.

Adjust video size

1. Right click on the video that you want to adjust; click on Properties
   
2. Once the window loads, you'll see a Width field where you can adjust the size; video sizes are as follows:
   Standard: 560px (full), 280px (half), 140px (quarter)
   Standard Wide: 750px (full), 375px (half), 187px (quarter)
   
   
3. Click the green Insert button
4. Remember to Save and Preview before publishing

Back to top

---

Properties overview

While the majority of the features to create a page are inside the "Page" tab, there are other features available to content editors in the "Form" and "Properties" tabs. For more information, please email uwbweb@uw.edu with your question.

General

General information about the selected page is displayed here. The page name (URL), page type, creation date, last modification date, and more notable is the "Preview URL" link. This link allows you to send non-Kentico users a link so that they can preview the page without needing to log in.

Back to top

---

Template

Kentico offers two templates at this time and publishers can go to this area of the Properties tab to change their template at any time. Content editors should know that changing the template of the page happens as soon as you click the green "Save" button. You cannot move out of the Properties tab to view the change until you hit the "Save" button. Best practice is to save your content prior to changing it, in case anything is lost in transition.

UWB Standard 3 Column (standard) uses one column for the site navigation, one column as the "main content area" (max width ~560px) and the last column as the "auxiliary content" area (max width ~188px). The other template is the UWB Standard 2 Column (standard wide) that uses one column for the site navigation and the other column as the "main content area" (max width ~ 750px).

Back to top

---

Navigation

Edit the page title

Note: This does not break any hyperlinks but it does not effect the name seen in the public site navigation and at the top of the page..

1. Go to the Properties tab
2. Select Navigation.
3. In the Menu caption field, enter the new page title.
   
4. Click Save and go back to the Page tab to view your changes.

Back to top

---

Versions

Kentico keeps a record of your page changes, called the version history. Every time a page is checked out, the last version of the page is "archived" into this section of Properties. It allows content editors to restore previous versions of a page even after it's published, which is different from "undo checkout" that deletes just the current version and goes back to the previous version. Version history allows you to restore any version of the page that's listed.

Back to top

---

Attachments

Any images, PDFs, or other files you upload onto your page will add itself into this section. If you accidently delete attached content (like an image) from your page, you can still find and re-add the same image within the "attachments" section.

If you delete a PDF hyperlink on your page in order to upload the latest version of the PDF your team just created, remember to also remove it from the attachments sections. If you don't your audience will still be able to search and find the old version of your PDF.

Best practices for attachement names

• Name images, files, attachments with "evergreen" file names such as "facilities-sustainability-plan". Search engines, basically, take a copy of (or "index") uwb.edu and when anyone uses the engine it searches that copy. Search engines don't index websites constantly or daily so it's important to use the same file name so that old documents aren't appearing in search engine results that result in broken links or outdated info.
• Avoid "Sustainability Plan 2018 version 2.3" since file names become a part of the page's URL and URLs should not contain upper case letters or spaces between words.
• avoid image names like "0023429-UWB5K.jpg" and rename the images to be concise and describe the image more accurately like "dubs-husky-5k" for an image of Dubs at the UWB Husky 5k.
• Avoid putting what version the document is in within the file name. Add version history of electronic documents/PDFs inside the document in the footer or header of the page.

Back to top

---

Form tab overview

Changing the page name

Note: Please contact Advancement before changing. Hyperlinks will not break upon changing, but the name seen in the URL will change. Schedule time to immediately updated old hyperlinks that attempt to reach the old name/URL of the page.

1. Check out the page you want to edit.
2. Go to the Form tab.
3. In the Name field, make the desired changes. Remember to get the name as short yet unique as possible; words should be separated with a hyphen. 
   
4. Click Save.

​Back to top

---

Updating hyperlinks to replace old URLs

After changing the page name (not title) or after moving a page under a new parent page, content editors will need to replace old hyperlink URLs.

1. Click the Search button.
    
2. Within the Search phrase: field, enter in the old URL of your page (the URL with the previous document name) and click the green Search button.
   
    
3. Your results will appear below with each page that contains the old document name inside a URL, which you will have to update. Usually it's in the form of hyperlinked text directing people to your page. If you do not have access to the page with the old hyperlink and don't know who has control of it, please contact Advancement and we can notify the correct people. 
   
   

Back to top

---

Scheduling future publishing & archiving

You can set your page to publish or archive for a future date and time by selecting the calendar icon below and setting the date and exact time for publishing ("publish from" field) or archiving ("publish to" field). Archiving pages creates broken hyperlinks so you will need to follow the steps for updating broken or outdated hyperlinks afterwards.

For example: Friday afternoon you finish making news updates to your page and you want to wait to publish until Monday but you will be out of the office. 

Back to top