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.

Page name

The page name (the URL of the page) should always be short, meaningful and entered in lowercase. There should be no spaces, hyphens or underscores.

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.

Login

You will need to be approved as a user by Carl Smith before you can log into Sitecore.

Log into the Production (PROD) environment.

  • Username: It2000\xxxxxx
  • Password: Hantsnet password

There are three environments that you should be aware of:

The UAT, SIT and Dev environments have different username and password combinations. Check with the Web Team for access.

If you have both editor and author access to the production environment, the default will be author access. To gain full editor access you will need to have the author access removed. There are admin users in the Web Team who may have unique access to some controls.

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.

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.

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).