Creating a basic web page

How to create a basic page in Sitecore and the corporate web standards you need to follow

See the building blocks guide for information on building specific elements in Sitecore.

Using content editor

Content editor

The Launchpad will display once logged in. In the Content Editing menu select the icon Content Editor.

In Content Editor you will see 5 folders in the left navigation tree, these are as follows:

  • Home: This contains the content tree for all of the content pages on Hantsweb
  • Internal: This contains pages not used on the public content tree
  • Forms: This contains the forms builder, it is where forms are created
  • common-content: This is library of all the content items which can be linked to from a page or component
  • Email campaign: This contains details for communicating with a user via email campaign

Inserting a page template

To create a new public page you will need to add a page template to the content tree under Home.

In the left navigation tree right click Home (or the relevant area), Insert, then select your desired page template. If you select the option Insert from template then a window will open giving you additional templates.

Page name

The page name (the URL of the page) should always be short, meaningful and entered in lowercase. If there is more than one word then they should be separated by hyphens otherwise there should be no spaces or punctuation

You can have more than one page with the same page name/URL in Sitecore, as long as they are in different folders.

More information about page and domain names

Summary information

This group of fields consists of:

Page title

The page title is the Heading 1 title of the page. It is also displayed as the title in the blue bar or tab at the top of your browser window.

Summary of page (lead text)

The summary (lead text) is displayed underneath the Heading 1 title of the page. Pages don't have to have a summary, but it is recommended that they do.

The summary can't contain links.

Corporate web standards

Page titles

  • Every page must have a unique page title
  • Page titles must be meaningful to the customer
  • Page titles must be short, preferably less than 70 characters long
  • Page titles must start with a capital letter. All following words are in lowercase, unless they are a proper noun (the name or title of something specific)

Summary information/lead text

  • Should be only one sentence long
  • Should be short and to the point
  • Doesn't have a full stop at the end
Link details

This group of fields controls how the page appears when it is used as a tiled link or overlay link on other pages. Setting these properties on the page means that the link appears the same wherever it is used. You don't have to complete all of them every time, but setting some will make it easier when you create landing pages.

This group of fields consists of:

URL

Don't enter anything in this field.

Link title

This is the link text. Normally, it is the same as the Page Title field, but can be different if needed.

Link caption

Where a link type has a caption too, this field allows a small caption to be displayed. It is usually the same as the link title but can be different.

Icon style

For icon tiles, this sets the type of icon.

Icon colour

The colour of the icon, when used in an icon tile.

Link image

This is the image that will be used for thumbnail tiles and overlay image links.

Button label

The default text displayed on any button that links to this page.

Currently the button label field isn't working. If you want to create a button that points to a Sitecore page, you need to create a separate link item in Common content > Navigation > Buttons and point it to your page.

Corporate web standards

Ensure the link title makes sense when taken out of context, eg use 'Guidance on using xyz', not just 'Guidance'

Page metadata

Metadata is content and "tags" that help describe the page. They are used by search engines for indexing content. In Hantsweb, we also make use of metadata for categorising content and presenting search results.

Keywords

A comma seperated set of terms that describe the page contents.

Description

This is a quick summary of the page. Use the Summary of page field as a base for what a description field should contain.

Meta tags

This is the most important set of metadata. This field allows you to step through a metadata tree and choose the tags that best describe your content. You can add a tag to a page. If the page has child pages they will also inherit the tags. For example, you could set categories on the home page of a service, and all child pages will pick those up.

Service

This can be used to include a service name in the page title that appears in the browser title bar:

Page title | Service | Hantsweb
Social media links

Social media links appear at the bottom of a page, and are inherited from the parent page. For setting service specific social media, enter the addresses of the social media accounts in the relevant fields:

  •  Facebook
  •  Twitter
  •  Google+
  •  Tumblr
  •  YouTube
  •  Vimeo
  •  Instagram
  •  LinkedIn
  •  Pinterest
  •  Tripadvisor
  •  Email/mailing list
  •  Blog
  •  RSS
Adding content to your web page

See the content basics guide for information on getting your content onto a web page in Sitecore.

Copying and pasting content into Sitecore

Copying and pasting content from MS Word and emails directly into Sitecore can cause issues.

Pages must be built in valid HTML, but copying and pasting content into Sitecore can result in invalid HTML being generated. Invalid HTML can look ok when viewed in a browser, so you need to check the HTML before publishing your work.

Invalid HTML can prevent pages from publishing!

There are steps you can take to make sure your HTML is valid:

  • copy and paste your content from Word or an email into Notepad first. Then copy and paste the content from Notepad into Sitecore. This won't solve all problems but it will solve many of them
  • paste your content in as plain text. Use the 'Paste plain text' tool in the toolbar (the icon looks like a clipboard)
  • use the Format stripper tool in the Rich Text Editor. This tool looks like a paintbrush held at an angle, and can be found in the toolbar of the Rich Text Editor. The Format Stripper will remove tags that may cause issues in your HTML, such as <span>....</span> tags
  • check the HTML code before saving. Do this using the HTML tab at the bottom of the Rich Text Editor

There are several things to look out for when checking your HTML:

  • make sure individual paragraphs are in HTML paragraph tags. Paragraph tags look like this: <p>...</p>. Sitecore will often use HTML line breaks (<br />), the equivalent of a 'soft break' on a keyboard, instead. Replace these with paragraph tags
  • make sure there are no span tags (<span>...</span>) in your code, even after using the Format stripper tool. The Format stripper doesn't always pick up all span tags
  • remove any 'style' code, such as style="color:#ffffff" (often seen within paragraph tags)
Some pages have had special HTML tags added to them to make them display properly. Removing these tags could cause problems. If in doubt, ask a colleague before making any changes
Using experience editor

Once you have populated the details of a page, there may be some content items which can only be configured onto the page via Experience Editor.

Access Experience Editor from the Lauchpad.

Alternatively if in content editor and positioned on the content page you wish to configure, go to the navigation bar and select Publish > Experience Editor. This will bring you to your page but in editing mode.

Once in experience editor you can add a rendering, for example, a button to a page.

Select the chequered grey rendering placeholder slot where you want to add your rendering. Select Add here (to show all available placeholders click on Add a new component icon found near the Save and Search icons).

Choose the rendering you want to add.

Select the checkbox Open the Properties dialog box immediately. This will enable you to select a new or current datasource in common-content to point to this rendering (this sometimes opens automatically anyway).

If it is a new datasource select Create New Content button on the left side. Using the tree, navigate to where you want to create this content item and select the folder you want to save it. Give your new item a name and select OK.

If the item is in common-content choose Select Existing Content. Navigate to where your item is located and select OK.

You should now see this displayed on the page. In some instances you need to Save and view in Preview to be able to see this displayed correctly. If a new item has been created such as a Text Block then you will be able to edit the item by selecting it and then selecting the pencil icon to open the Rich Text Editor (then select Accept and Save).

Lock and unlock items

Lock items

Select the page in the left navigation tree. To lock it for editing you can either:

  • click on the Review tab and then Edit
  • click on Lock and Edit in the yellow warning banner in the right hand window

To view what items you have locked to yourself click on the Review tab and then My items button inside the Locks section. Highlight a row and then select Unlock or you can Unlock all.

 

Unlock items

After you have edited and saved an item in Content Editor you need to unlock it. Click on the Review tab and then Check In.

Versions

Make a new version of an unpublished page if there is a big change. Go to the Versions tab. Select Add.

Preview a site

Example URL:-
https://mgmt-www.hants.gov.uk/environment/historicenvironment?sc_mode=preview&sc_site=website

Username: Sitecore\SitecoreDemo
Password: SitecoreDemo
(NB. Once logged on, you can change the url and do not need to keep the bit at the end - ?sc_mode=preview&sc_site=website )

Publishing pages

Never publish a page or change the Workflow unless told to do so.

There are two methods of publishing in Sitecore:

  • Fast tracking (via Home > Edit > Fast track)
  • Publishing (via Publish > Publish > Publish item)

All pages and most items stored in common content need to be fast tracked. If you are building a page that has common content items associated with it, fast track all the common content items first, then fast track the page. This will make sure that all elements of the page go live at the same time. When fast tracking, you are prompted to leave a comment. This is optional.

Always check your page has fully gone live after publishing!

Sometimes fast tracking doesn't fully work. If this happens, publish your page again using the publishing method.

When using the publishing method, make sure you include all related items and sub items in the publishing process. When using this method, you can choose to smart publish or do a full publish. Smart publish is the default and should work for most situations. If you find an item hasn't published properly, try the publishing method again, but this time choose the full publish option.

All items in the Media Library and a few common content items should be published via the publishing method.

Not sure which method to use?

Go to Home > Edit. If a message is displayed stating that the item is not in a workflow, use the publishing method, otherwise use the fast track method.