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.
- Summary information
This group of fields consists of:
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
- 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:
Don't enter anything in this field.
This is the link text. Normally, it is the same as the Page Title field, but can be different if needed.
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.
For icon tiles, this sets the type of icon.
The colour of the icon, when used in an icon tile.
This is the image that will be used for thumbnail tiles and overlay image links.
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.
A comma seperated set of terms that describe the page contents.
This is a quick summary of the page. Use the Summary of page field as a base for what a description field should contain.
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.
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:
- Email/mailing list
- 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:
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
- 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)
- Using 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
Select the page in the left navigation tree. To lock it for editing you can either:
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.
- click on the Review tab and then Edit
- click on Lock and Edit in the yellow warning banner in the right hand window
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.
Make a new version of an unpublished page if there is a big change. Go to the Versions tab. Select Add.
- 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).
- Preview a site
(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.
If a page is live and your doing an update you can fast track in the home tab and then publish item.