Logging Into WCMS1. Visit sites.wcms.iu.edu and log in via CAS and DUO.2. From the selector at the top of the page, choose BL-VPUE-UD.main to begin

Publishing to Webserve vs. WebtestIt is always best practice to test out your edits on your test site, which is hosted on the webtest server, before publishing changes to the live site, hosted on the webserve server.

URL for webtest: _____________.webtest.iu.edu

URL for webserve: _____________.indiana.edu

Whenever you publish a file, page, or directory, you must select the server destination. For webtest, leave only webtest checked (this is the default). If you want to publish your change to the live server, also select “webserve” in the publish menu.

Once you have submitted the publish screen, you’ll see a pop-up at the bottom of the screen with a link to the publish queue. Click this link to see when your publish task is completed.

Adding Files (Images, Word documents, PDFs)Note: whenever possible, use PDF files instead of word documents

1. Navigate to the correct folder (for example, click “PDF” for a PDF upload). Click the > to actually open the folder.

2. Click “+ Add Content” to create a new item. 3. Choose “File”

4. Use lowercase with dashes between words for the filename and upload your file.5. Save & Preview6. Submit7. Publish to webserve and webtest8. If navigation needs to be changed, publish the _xml folder to webserve and webtest

Adding PagesNote: Whenever possible, start from a copy (right click on an existing page, choose copy, then customize and rename, save, submit, and publish).

To create a new page from scratch:1. Navigate to the correct folder. Click the > to actually open the folder.2. Click “+ Add Content” and choose “Page”

3. Use lowercase words with dashes for the page name.4. Configure page and add sections and chunks 5. Save & Preview6. Submit7. Publish to webserve and webtest8. If navigation needs to be changed, publish the _xml folder to webserve and webtest

Navigation (_xml folder)Whenever the navigation needs to be updated, republish the _xml folder. This step is required when:

- A new page, external link, or document is added that should be in the navigation- The order of menu items changes- A page’s display name or system name is updated

To reorder the pages in the site’s navigation:

Note: the home page of a folder can be in any “Order” position, as it is not listed in the left-side navigation.

1. Open the affected folder by clicking > next to the folder name in the navigation2. Click the “Order” column to see how the pages are ordered in navigation3. Drag and drop items or check the box next to a page and use the up and down arrow

buttons over the content list to change the order4. Publish the _xml folder to webserve and webtest to see navigation change.

Grids, Positioning, Breakout sections, and Wide PagesGrids

The Grid option can be misleading. Grid should only be used when the items in a section all need to be the same height and width. One example is when you have a grid of stat chunks or interactive panels. This option is not necessary just to make content appear in three or

two columns.

This example illustrates how the grid feature makes all items the same height on each row:

PositioningTo make chunks fill half, one third, or two-thirds of the width of their section, simply choose the appropriate “Position” value in the Chunk > Details section on the page edit screen, then choose the width you want.

Note: On small screens, all left/right chunks regardless of size will display full-width.

Breakout SectionsBreakout sections should be used on standard pages (see “Wide Pages” below for more information), only for content far enough down the page that it will clear the left-side navigation.

In most cases, we recommend using a text chunk in the first section of a standard page with enough text to clear the left-side navigation, then using breakout sections for every section after the first one.

To make a breakout section, choose “Yes” under “Breakout?” in the Section > details area of the page edit screen.

In this example, the gray section is a breakout section.

Wide PagesA wide page should always be used when no left-side navigation will be present. This will usually be the home page of a website, but in some cases may also occur on other pages (for instance when a top-level navigation item produces only a single landing page with no sibling pages).

To make a page wide, check “Yes” on the “Wide page?” section at the top of the page edit screen.

In the example below, the left screen shows a standard page, the right screen shows a wide page.

VersionsThe WCMS keeps a version history of each save change to pages, files, documents, videos, etc. This is useful on occasions when changes are made accidentally and you wish to undo them or if you want to make a temporary change for a time period and then revert back to its previous state.

1. Click on the … More link in the top right then click versions.

2. Select the version from the history you wish to view by clicking the checkbox on the row next to the page you want to view. Then click the compare with current button.

3. To restore a page to a version after viewing it click the … More button and click Restore this version.

Design Resources/ChunksInformation on how to use the framework and the various of chunk types (available framework content design/display options available are available at the IU Web Framework website (https://framework.iu.edu/). Chunk information: https://framework.iu.edu/creating-content/chunks/index.html

Information on how to use specific chunk types and features built by OVPUE IT in the OVPUE version of the IU Web Framework is available on the OVPUE IT website (https://ovpueit.indiana.edu/web-communications/website-framework/index.html).

IU has a certain set of guidelines to follow for websites. For more information on these guidelines visit the IU Style Guide website (https://styleguide.iu.edu/).

By law content on IU websites (pages, videos, and documents) must be accessible to users with disabilities. Information on accessibility at IU is available on the following websites:https://styleguide.iu.edu/editorial-style/accessibility.htmlhttps://uxo.iu.edu/accessibility/checkup/index.htmlhttps://accessibility.iu.edu/