There is a fairly complex set of toolbar "ribbons" across the top of the Sitecore window. All the controls to create or edit a page are in the Home ribbon.

The Content Editor opens at the root level of kingcounty.gov, and promptly reminds you that you don't have permission to edit the County's home page.

Click the tiny + boxes in the content tree until you find your content. Notice the alert that you must lock an item before you can work on it. Use the Lock and edit link (immediately below) or the Edit button (further down the page). Both these options do the same thing.

For this training, we will be using a special training directory. Details follow.

Notice that clicking your way down to online-class, and even on the + box next to it, does not select it. You have to actually click on the online-class item itself to tell Sitecore that's what you want to work on.

You'll encounter messages that say either, You cannot edit this item because (some other user account) has locked it, or You must lock this item before you can edit it.

When you create a new Web page, or open one for editing, Sitecore automatically checks the page out to you, creating a new version of the page and locking the page so others can't overwrite your work. Nobody else will be able to edit the page until you check it back in.

A limited number of past versions of a Sitecore item are visible behind the Version button on the Sitecore toolbar.

Important: Whenever you're done editing any page, check it back in. That way, others will be able to edit it without having to ask you to check it in.

When you check an item in, you will usually see a warning that says, "If you publish now, the selected version will not be visible on the Web site because it is not in the final workflow step." That message means “If you can see the ‘Approve’ button, approve this item before you publish it."

Publishing will publish the last approved version of a page. If you see Approve, that means the most recent saved version has not been approved for publishing.

Click Approve when you’re ready to okay the changes to go onto the Web. If there's no visible Approve, it's already been approved.

Approving an item does not publish it. Only the Publish button can put your approved content onto the Website. Publishing will be covered later in this training.

I want to edit some content!

Sitecore offers three different editors. ( ! ) Most people work within either the basic content editor or the in-page editor. Power HTML users often prefer the HTML editor, which is the quickest way to work directly with code.

The in-page editor is the simplest way to make edits directly on the page that users will see on the Internet. It works differently from the other editors, and is reviewed later in this course.

The "Show editor" button leads to a more advanced editor.

This editor has quite a few options available on its toolbar, to help you do things like format text or add an image to a page, without having to work in HTML code.

Sometimes you have to work in the HTML code

If you need to get into HTML code (for example, to paste in a code snippet from our help pages), click the HTML tab in the bottom left corner of the editor.

Here's what that looks like:

Some people just want to work in HTML code and nothing else

Power HTML coders might prefer an editor that behaves more like a traditional code editor. You can most quickly get to an HTML code editor by clicking the "Edit HTML" button on the content page. 

(Note that this editor is not the same thing you get by clicking the "HTML" tab pictured above.)

Since power coders like their keyboard shortcuts, here's a list of keyboard shortcuts for the HTML editor.

To create new content, you right-click the mouse over the parent item. In the example below, the page named "alex-page" would be the parent Web page of a new Standard Page. To create the new item, right-click the parent node and select New when the menu pops up. In the 'New' menu, select the type of the new item to be created.

Insert options depend on the parent item, but can include:

Standard page

A Web page that may or may not have sub-pages

Category

A collapsible folder in the left-hand menu. Pages under a category will show up when you click the + on the menu.

Microsite

A site or independent section of a site. It can have its own navigation and design, or it can inherit from the parent site.

Redirect link

Also known as a shortcut, alias, friendly URL. We use these to make it easier for people to get around in our site.

Shared item

(In the Shared Item folder): re-usable content that you intend to show on more than one page in your site.

Column row

(In the Add-on folder): Used for content that goes all the way across the screen

Double column row

(In the Add-on folder) Spits the computer or tablet screen into two columns. These can be of equal size, or one column can be twice the width of the other. On a phone, the content appears as a single long column.

Three column row

(In the Add-on folder) Splits the computer and tablet screen into three columns of equal width. On a phone, the content appears as a single long column.

Color boxes three row

(In the Add-on folder) Three clickable boxes, filled with the primary color of the site's theme. These are often used to highlight an agency's three highest-profile services. On a phone, the boxes appears in a single column.

News dated list row

(In the Add-on folder) An automatically-generated, dated list of sub-items, listed in reverse chronological order.

Fill in the file name you want. (Take great care not to include spaces, periods or commas or other punctuation*, slashes, or symbols like dollar signs or ampersands, in the file name. *Hyphens are okay.) Press Enter.

You can place this new page wherever you want it in the content tree (where it will appear in the left-hand navigation) by using the Sorting arrows in the Home tab at the top of the Sitecore screen.

Once you've created the page, you can begin filling in its various text and rich-text fields---the latter being those that are not unlike editing in Word. (You can even paste text into rich-text fields from Word, but magic comes with a price. Later on in this training we will cover how to resolve the issues caused by pasting content from Word.)

Most content in pages will be stored in add-ons. These are independent sections of a page. Each add-on can have one, two, or three columns on a computer. Unlike an old-school HTML table, an add-on with multiple columns is responsive: add-ons display differently on cell phones and tablets, re-organizing themselves to take the best advantage of the screen they're on.

Each add-on has a visibility toggle, so you can set up content in advance and then toggle it on or off as you need it.

Each add-on has an apply to children toggle. That will insert the contents of the add-on below the content of every page that is a sub-page of the one that has this add-on.

Each add-on also has a merge up toggle. If merge up is toggled off, then there's extra space between the add-on and whatever is above it, and the background color of the page shows through. 

 

You can re-use the content in an add-on by setting it to appear throughout a site, or throughout a section of a site, by checking Apply to children.

To turn off an inherited add-on somewhere in a site, use the Disable inherited addons checkbox in the Advanced settings.

The contents of an inherited add-on will always appear below the regular content on a page. To re-use content on only a few pages, or to have greater control over where the re-used content appears, there's another Sitecore option available, the Shared item. This is covered in our advanced Sitecore training. There's documentation for it at kingcounty.gov/help/Sitecore/templates/shared-items.aspx (new window).

Sitecore uses an area called the Media Library to store documents, images, and other files.

 

Publishing from the Media Library

In real life, you'd highlight each folder you just created, go to the Publish tab, click the tiny arrow next to the Publish button, and publish the folder and all its sub-items (the images in it). If the folder hasn't ever been published, then efforts to publish its contents will fail.

Click the tiny arrow at the bottom right of the Publish button. Choose Publish item from the pop-up.

Make sure Publish subitems is checked. Click Publish.

Making sure a Media Library item has published

When you are working with your live site, one way to make sure a photo or PDF has published is to publish the page it's on and see if the image isn't there or if the download link is broken.

That, however, tends to be incredibly stressful. Whenever possible, it's best to publish media library items in advance and--in high-stakes situations like the Exec is about to refer to it on live TV--to check to verify ahead of time that the item is indeed published.

Here's how:

Click the item in the content tree, then click the red ball in the top left corner and choose Properties from the pop-up menu.

This will bring up a Properties window for any selected item in Sitecore. It can tell you what template an item uses, its workflow state, when it was created and published, who worked on it last, and other information.

From this Properties window, copy the Item URL.

You can paste that into the address bar on a Web browser. Change http:// to https:// and delete edit from the URL so it starts with https://kingcounty.gov instead of https://edit.kingcounty.gov. After the .gov change the // to / and press Enter. If the file published, you should see it either open or download.

The image should appear in the editing window, wherever your cursor was. Now, let's make it look the way we want.

You may notice that the image properties includes the dimensions. Delete these numbers. It's tempting to change the numbers in there to resize an image. Resist this temptation. Changing these numbers doesn't change the image; it tells the computer to load the image as it is and then display it differently. This will slow down your page load time, distort the image, and run up the costs on mobile users' data plan bills. It's always best to put the images into the media library with a width of 800px or under, and let our responsive design resize the image to fit where it is. There are free tools such as http://www.picresize.com/ that make it easy for you to change the size of a photo before you add it to the Sitecore media library.

The add-ons not only contain the content but also control the layout of the page

You can use the My items button on the Review tab to quickly see how many items in Sitecore are checked out to you. You can even use this tool to check in everything at once.

Don't start celebrating just yet! Unfortunately, there isn't a similar shortcut to let you approve everything after you check it in. You will have to do that item-by-item.

The in-page editor lets you do a lot of simple editing on a page in a what-you-see-is-what-you-get environment.

Click the Page editor button.

You should see a toolbar at the top of the page.

Just click where you want to work, and start typing. A small toolbar will appear above your cursor.

Make whatever changes you need. Save often. (Top left icon of a floppy disk.)

You'll need the advanced editor if pasting from Word changed the font. Among its many tools are a format stripper, whose icon looks like a paintbrush. Click that, then choose Strip Word formatting, then choose Strip font elements. That should take care of things.

When you're done working in the advanced editor, click Accept in the bottom right to close the editing window.

When you're done working in the in-page editor, click Approve, then when you're ready to publish, click Publish.

If you have completed everything, please open the Sitecore page you created. Copy the Web address from the browser's location bar, and paste it into an email to webteam@kingcounty.gov.

In that email, let us know what part of the King County Website you need to be able to edit.

One more thing: the Web representative is the person in your agency who gave you permission to become a Sitecore user. Please tell us that person's name so we can report back to them that you've completed this training.

Thanks for your time!